---
name: code-a-brand-home-draft
description: "One coded 1440x900 screen that carries the whole brand, rendered and fixed until it could ship."
---

# 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

Source:: https://isklls.com/skills/code-a-brand-home-draft (iSklls, free skill library)