# Brand kit Hero, fonts, palette, mark, favicon, logo, OG image and a coded home draft. Run these skills in order; finish each one before the next. ## Step 1: Draft three hero directions Purpose:: One image with 3 hero ideas for the home page, above the fold; the best one leads the whole brand. Rules:: - Only this project's own words: name, narrative, buyer, tagline, CTA - 3 truly different directions that only fit this project - Never the boring template (headline left, cards right) - Each hero shows the name, the tagline and the CTA, readable Inventory:: - Your brand config: name, narrative, buyer, tagline, CTA - An image model Steps:: 1. Read who the project is for and what it promises 2. Dream up 3 bold, unique directions 3. Make one tall image (9:16): the 3 heroes stacked, numbered 1-3 4. Look at it; redo any hero that looks like another 5. Reply with the image, then Pick: <1-3>, Direction: , Why: Metrics:: - The 3 heroes look nothing alike - The pick is memorable and fits the buyer ## Step 2: Pick a Google font pair Purpose:: The best Google Fonts pair for this brand: one headline font, one paragraph font. Rules:: - Chosen from the brand's words (name, narrative, buyer), never read off an image - Only fonts on fonts.google.com; the one that fits, not a safe default - The paragraph font reads easily at 16px and differs from the headline font Inventory:: - Your brand config: name, narrative, buyer, idea - fonts.google.com Steps:: 1. Read who it is for, what it promises and how it should sound 2. Find the Google font that carries that voice in a headline 3. Pair a calm paragraph font; test both on a real sentence of your copy 4. Reply: Headline: , Paragraph: , Why: Metrics:: - Both fonts load from Google Fonts by name - The headline font feels made for this project ## Step 3: Build a color palette Purpose:: 6 palette options for the brand, then the best one picked, like on coolors.co. Rules:: - Rooted in the brand config and the picked hero - 6 truly different moods; 5 colors each: background, text, primary, accent, neutral - Text on background passes 4.5:1 contrast Inventory:: - Your brand config and picked hero - A contrast checker Steps:: 1. Read the config and look at the picked hero 2. Make 6 palettes, one mood each 3. Check text on background contrast for each 4. Pick the one that fits the brand best 5. Reply: the 6 lines (5 hex + mood), Pick, Palette, and a coolors.co link of the pick Metrics:: - The 6 options are clearly different - The pick works on a real site: readable text, one clear accent ## Step 4: Generate a logomark grid Purpose:: One image with a 12x12 grid of logomark ideas: the inventory for your logo and favicon. Rules:: - Marks only, no words; each works at 16px - Palette colors and the picked hero's mood - 144 different ideas, same size, one plain background, square image Inventory:: - Your brand config, palette and picked hero - An image model Steps:: 1. Read the name, narrative and palette 2. Look at the picked hero 3. Make the 12x12 grid 4. Reply with the image, then the 3 strongest marks by row and column, one line each Metrics:: - The grid is 12x12 and the marks are clearly different - A few marks would make a sharp favicon ## Step 5: Code an SVG favicon Purpose:: Code the favicon as an SVG, drawn from the strongest mark you picked. Rules:: - Simple shapes, readable at 16px and 32px - Palette colors only; transparent background - Square viewBox 0 0 64 64, no text, no external files Inventory:: - Your picked mark - A browser to render a check page Steps:: 1. Pick the mark that stays clear when tiny 2. Write it as favicon.svg 3. Write a check page: the svg at 16, 32, 64 and 256px on light and dark 4. Screenshot the check page and look at it 5. Fix what blurs at 16px (align gaps to the pixel grid, thicken strokes); check again 6. Reply with the svg and what you fixed Metrics:: - Recognisable at 16px in a browser tab, light and dark - One clean SVG file ## Step 6: Explore logo options Purpose:: One image with a 6x6 grid of logo options (mark + name). Rules:: - Build on everything so far: favicon mark, headline font, palette, hero mood - Each option = mark + name; vary layout, weight and color - Name spelled exactly right in every option Inventory:: - Your hero, mark, favicon and fonts - An image model Steps:: 1. Look at the hero, the mark and the favicon 2. Generate the 6x6 logo grid (square) 3. Check the spelling in every cell 4. Reply with the image, then the best option by row and column and why Metrics:: - 36 options, name spelled right in each - One option is clearly ready to move forward with ## Step 7: Make an OG image Purpose:: One 1200x630 OG image that could only belong to this brand. Rules:: - Rooted in the brand so far: hero, fonts, palette, logo - No template; the brand's own idea shapes the layout - Name spelled right; tagline readable as a small link preview Inventory:: - Your brand config, logo and palette - HTML + a headless browser screenshot, or an image model Steps:: 1. Read the config; look at the hero and logo 2. Make the image at exactly 1200x630 3. Shrink it to 300px wide and look again 4. Fix what is unreadable small 5. Reply with og.png and one line on what makes it yours Metrics:: - Nobody would mistake it for another project's card - Readable when shrunk to a link preview ## Step 8: Code a brand home page draft Purpose:: Code the logo and a first above-the-fold home page that carries the whole brand. Rules:: - Use every brand piece: logo, favicon, fonts, palette, hero, OG image - Real copy: tagline as headline, narrative, CTA - One screen 1440x900; Google Fonts by name - Render, look, fix, until it could ship Inventory:: - Your brand files and config - A headless browser to screenshot HTML Steps:: 1. Code logo.svg: the mark + the name in the headline font 2. Code home.html: nav with the logo, headline, sub line, CTA, one visual from the hero 3. Link favicon.svg as its icon 4. Screenshot at 1440x900 and look at it 5. Fix until it matches the hero's ambition 6. Reply with the screenshot, logo.svg, fonts and palette in one line Metrics:: - Logo, OG image, favicon and page read as one brand - A designer would call it a strong first draft ## Step 9: Design like Google Purpose:: Turn a product's purpose into a distinctive identity and an immediately understandable experience, with the craft and family coherence of Google's products. Rules:: - Inherit principles, specialise expression: shared interaction, accessibility and type hierarchy; each product owns its symbol, accent, imagery and signature behaviour - Make the complicated feel approachable: the essential object or action in the centre, short human language, advanced options revealed when relevant - Typography does the work: display, headline, title, body and label roles; large regular weight can feel confident, bold has a different job - Compose around attention: one clear priority per view, a repeatable spacing rhythm, supporting controls quieter than content - Color and shape have roles: identity accents apart from status colors, contrast checked in real components and dark mode, a small shape scale - One signature behaviour with an origin, destination and reason; support reduced motion - Trust is the finish: visible focus, keyboard use, readable contrast, comfortable targets, useful loading, empty and error states Inventory:: - Product name, narrative, audience, primary task, existing brand assets, target surfaces - Google Sans Flex on Google Fonts; Material Color Utilities for tonal schemes Steps:: 1. Frame: one sentence each for the user need, the promise and the feeling; name the primary object, action and hardest state 2. Explore: a few materially different concepts, each shown with real copy, type, palette, mark and one screen 3. Systemize: exact tokens, assets, component variants, tone and signature behaviour; one canonical definition per decision 4. Apply: build the real surface with real content; recompose for desktop and mobile 5. Refine: render and inspect fonts, line breaks, spacing, color, loading, failures, narrow layouts and keyboard use; fix specific weaknesses Metrics:: - A first-time visitor understands the promise and the next action - The product is recognisable without oversized branding - The identity survives tiny icons, large displays, monochrome and dark mode - The important journey works with realistic content and bad states Source:: https://isklls.com/playbooks/brand-kit (iSklls, free skill library)