Skip to content
iSkllsSign up free

Brand kit

Hero, fonts, palette, mark, favicon, logo, OG image and a coded home draft.

9 skills · 44 steps in total

  1. 01Draft three hero directionsOne image with 3 bold, truly different above-the-fold ideas, then pick the one that leads the brand.Purpose:: One image with 3 hero ideas for the home page, above the fold; the best one leads the whole brand.
  2. 02Pick a Google font pairOne headline and one paragraph font from Google Fonts that carry your brand's voice.Purpose:: The best Google Fonts pair for this brand: one headline font, one paragraph font.
  3. 03Build a color paletteSix palettes in six moods, five colors each, then the one that works on a real site.Purpose:: 6 palette options for the brand, then the best one picked, like on coolors.co.
  4. 04Generate a logomark gridA 12x12 grid of 144 mark ideas to pick your logo and favicon from.Purpose:: One image with a 12x12 grid of logomark ideas: the inventory for your logo and favicon.
  5. 05Code an SVG faviconDraw the strongest mark as a clean 64x64 SVG that stays sharp at 16px.Purpose:: Code the favicon as an SVG, drawn from the strongest mark you picked.
  6. 06Explore logo optionsA 6x6 grid of mark + name combinations to pick from or move forward with.Purpose:: One image with a 6x6 grid of logo options (mark + name).
  7. 07Make an OG imageOne 1200x630 link preview that could only belong to your brand.Purpose:: One 1200x630 OG image that could only belong to this brand.
  8. 08Code a brand home page draftOne coded 1440x900 screen that carries the whole brand, rendered and fixed until it could ship.Purpose:: Code the logo and a first above-the-fold home page that carries the whole brand.
  9. 09Design like GoogleTurn a product's purpose into a distinctive identity and an instantly clear experience, with Google-level craft.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.