# Swap in your brand in about an hour

You need a text editor (VS Code is free), your logo as SVG, your colors and your fonts. No coding beyond find and replace.

## 1. Tokens (15 minutes)

Open `site/tokens/tokens.json`.

- **Colors.** Under `color.base`, change each `hex` and `components` (sRGB values from 0 to 1, which is the hex value divided by 255). Rename the keys if you like (`pod` to `primary`), then update the matching `{color.base.pod}` references in `color.light` and `color.dark`.
- **Light and dark.** `color.light` and `color.dark` decide which base color plays each role: background, surface, text, muted text, accent (buttons and links), highlight and alert.
- **Fonts.** Change `font.family.latin` and `font.family.arabic`. If you have no Arabic, keep a fallback there anyway.
- **Arabic size.** `font.arabic-scale` sets how much larger Arabic runs than Latin (1.1 means 10 percent).
- **Type, spacing, radius, motion.** Change values in `size` and `motion` if you want.

Then run `python3 build_tokens.py` inside `site/tokens/`. It rewrites `tokens.css`. No Python? Edit `tokens.css` by hand: the variable names match the JSON paths.

On the Color page, change the six swatch blocks (name, role and `data-token`) to match your colors. Values and contrast pairs then update on their own.

## 2. Fonts (5 minutes)

In every HTML page, replace the Google Fonts `<link>` in the `<head>` with the one for your fonts (fonts.google.com gives you the link). Find and replace across files does it in one go. For licensed fonts, add your own `@font-face` rules at the top of `assets/site.css`.

## 3. Logo (10 minutes)

Replace the files in `site/assets/logo/` with yours, keeping the file names, or keep your names and find and replace them across the HTML. You need: a full logo for light grounds, one for dark grounds and photos, a one-color version, and the symbol alone in two colors. Export PNGs at about 1200 px wide with a transparent background. Outline text in the SVGs so they need no fonts.

## 4. Copy (30 minutes)

Rewrite the words on each page. Keep headings as short, complete sentences. Replace:

- the three sentences on Home and the change log
- logo rules (clear space unit, minimum sizes, misuse examples)
- color roles and the proportion bar
- type specimens and sample lines
- imagery do and avoid notes (and swap the drawn frames for your photos: replace each `<figure class="frame ...">` with an `<img>`)
- the AI prompt, approved descriptions and checklist
- voice traits, words and before and after lines
- the social post and the email signature (change the hard-coded colors in the signature too, since mail apps ignore CSS variables)
- the footer line "Hayl is a fictional brand made to show this template."

The side menu appears in each HTML file. If you add or rename a page, update the list in every file (find and replace).

## 5. Publish

Upload the `site` folder to Netlify (drag and drop), Vercel, GitHub Pages or your own server. Turn on your host's password feature if the guide is private (see README).

## Notes for the Webflow port

- **Variables:** create Webflow Variables from `tokens.json`: a color collection for the semantic roles, with Light and Dark values (use variable modes if your Webflow plan has them, or a dark combo class on the body) (bg, surface, fg, muted, line, accent, on-accent, highlight, alert, band, on-band), plus number and size variables for type, spacing and radius. Name them as in tokens.css so the two stay in step.
- **Classes:** mirror the CSS class names (`shell`, `side`, `nav`, `page`, `block`, `card`, `grid`, `swatch`, `pair`, `frame`, `track`, `dot`). Build the side nav and footer as Components so they live in one place.
- **Layout:** desktop grid of 270 px nav plus content, nav sticky at full height from 960 px. Below 960 px, a sticky top bar with a Menu button that opens the nav as a full-screen panel.
- **Dark mode:** switch modes with a small script that toggles a class or attribute on `<html>`. Port `assets/site.js` as a site-wide custom code embed (it already handles the theme, menu, copy buttons and checklist).
- **Color page:** the contrast pairs are computed from CSS variables at runtime, so the same script works in Webflow as long as the swatch blocks keep `data-token` and `data-name` attributes (Webflow custom attributes).
- **Motion page:** keep the keyframes in an embed, and use the duration and easing variables. Respect reduced motion.
- **Downloads:** upload logo files and tokens as Webflow assets. Note that Webflow asset links stay public even with page passwords.
- **CMS option:** the change log on Home fits a small CMS collection (date, text).
- **Password:** use Webflow's page or site password instead of `gate.js`.