# Design system — Step 1

**Confirmed against the client's Brand Kit, 2026-09-03.** The kit arrived that day and is filed
at `notes/source/brand-kit/`; its digest, including the logo file map and the full colour table,
is `notes/source/brand-kit/README.md`. This file is the working set both directions render from.

This replaces the provisional system extracted from the live site on 2026-09-03. That extraction
was reference only, exactly as `.logs/planning/homepage-mockup-brief.md` §7 required, and it is
now superseded. **This is still not a new brand** — no invented palette, no redrawn logo. A new
brand was not sold.

No commercial figure of any kind appears here or in any mockup.

## What changed when the kit arrived

| Item | Provisional (live site, 2026-09-03) | Confirmed (Brand Kit) | Effect on work already drawn |
|---|---|---|---|
| Primary dark | `#004963` | **`#003B53`** (NIGHT) | **Swap required.** `#004963` is live-site drift and is not in the brand system |
| Accent gold | `#ffd457` | **`#FFD457`** (CONFIDENCE) | None, it was already right |
| Other blues | "`#0098f4` incidental, not brand" | **`#027CA1`** (BUSINESS), **`#93BCCD`** (FREEDOM) are brand | A real brand blue exists; `#0098f4` is still not it |
| Heading weight | "come down from 900" | Brand maximum is ExtraBold 800; H1 is Bold 700 | The instinct was right and is now a brand rule |
| Body face | Second text face proposed | Guide assigns Montserrat Regular | Now a declared deviation to recommend, not a free choice |
| Logo | Plain-text placeholder | Real lockups, raster | **Placeholder cleared.** Vector files still to request |
| Hero treatment | Type-only, no imagery available | Brand gradients are a sanctioned brand element | A non-photographic, on-brand hero ground is now available |

## Palette

| Token | Brand name | Value | Use |
|---|---|---|---|
| `--night` | NIGHT | `#003B53` | The primary dark. Type on light grounds, dark bands, the wordmark |
| `--business` | BUSINESS | `#027CA1` | The active blue: links, the tagline lockup, a lighter blue ground |
| `--freedom` | FREEDOM | `#93BCCD` | Tints, rules, quiet fills. Never body text on white |
| `--confidence` | CONFIDENCE | `#FFD457` | **The single accent.** Primary button, emphasis |
| `--day` | DAY | `#D98D00` | Deeper gold for hover, and for gold text that must read on white |
| `--law` | LAW | `#FFFAEB` | The warm near-white ground |
| `--ink` | — | `#2C2C2C` | Body text (carried from the live site; the guide names no body colour) |
| Neutrals | — | white, `#FAFAFA`, `#F5F5F5`, `#EEEEEE`, `#E4E4E4`, `#CCCCCC`, `#666666` | Structure |

**The one-accent rule still holds.** Gold is the accent; NIGHT and BUSINESS are structural, not
accents. The secondary button differs from the primary by weight — outline or tonal — never by a
second accent colour.

**Contrast.** NIGHT and BUSINESS pass on white for text. FREEDOM, CONFIDENCE and LAW do not:
they are grounds and fills. Gold on NIGHT is strong. Check white-on-BUSINESS at its real size.

## Gradients

Brand elements in their own right, and the answer to a hero that may carry no people and no heavy
imagery. Soft radial, near-white centre falling to colour at the edges.

Write them in CSS, do not serve the kit's 3300px PNGs:

```css
/* blue ground: STRATEGIC ADVANTAGE */
background: radial-gradient(ellipse at 50% 45%, #FFFFFF 0%, #E8F0F4 42%, #93BCCD 100%);
/* yellow ground: POWER OF LAW */
background: radial-gradient(ellipse at 50% 45%, #FFFFFF 0%, #FFFAEB 45%, #FFD457 100%);
```

Sample the kit PNGs if a ramp needs tuning. At most one gradient ground per screen: two competing
radial grounds read as busy, which is the exact word the client used about the current site.

## The swirl

`notes/source/brand-kit/Logos and Assets/Equinox__Swirl_Color_RGB.png`. Available as a large
graphic device and as the favicon. Sparingly and large; never a repeated decoration, never behind
text it would compete with.

## Typography

**Montserrat, confirmed brand.** The scale is the guide's:

| Level | Weight | Case | Notes |
|---|---|---|---|
| H1 | Bold 700 | Sentence case | Line height 1.1, tracking `0.005em` |
| H2 | ExtraBold 800 | All caps | Tracking 0. Set line height optically (the guide misprints it) |
| H3 | Light 300 | All caps | Tracking 0, same line-height note |
| H4 | SemiBold 600 | Sentence case | Line height 1.3 |
| Callout | Bold 700 | All caps | Tracking `0.25em` |
| Body | Regular 400 | Sentence case | Line height 1.2 in the guide; open up for long-form |

Montserrat is on Google Fonts under the SIL Open Font License, so it is free to self-host, which
is what the build does. The live site's Black 900 headings are not brand and do not carry over.
The live site also loads Roboto and then overrides it with `!important` — a wasted font request on
every page, and one of the easy wins in the performance pass.

**The body-face question, to be decided at the review.** The guide assigns Montserrat Regular to
body. This site carries 513 migrated posts and everything the marketing partner publishes, and
Montserrat is tiring at length. Both directions therefore show body in Montserrat as the brand
compliant default, and **Direction A's statement additionally proposes a companion text face for
long-form body only** (headings, UI and short copy staying Montserrat), labelled as a deliberate,
declared deviation with its reason. It is a recommendation to the client, never applied silently.
Any companion face must be open-licence and self-hostable.

## Logo

The placeholder is cleared. Use the real lockups, per the file map in
`notes/source/brand-kit/README.md`:

- **Header on white:** `Equinox__Logo_SLCTag_B_RGB.png` — wordmark plus tagline with the tagline
  in BUSINESS, which is legible. Prefer it over `Equinox__Logo_SLCTag_RGB.png`, whose FREEDOM
  tagline fails contrast at header size.
- **On a dark ground:** `Equinox__Logo_SLCTag_Reverse_RGB.png`, or `Equinox__Logo_Reverse_RGB.png`
  without the tagline.
- **Favicon and graphic device:** `Equinox__Swirl_Color_RGB.png`.
- **Never** the live site's 20th-anniversary mark (client decision, 2026-08-27).

The guide's own rule: the logo "should be on white or bright brand gradient backgrounds". A dark
header is possible with the reverse lockup but is a departure from that preference, and the export
notes should say so where a direction uses one.

**Still a placeholder in one respect:** every file is raster at about 3300px. Vector files are
requested from the client; until they arrive, size the header mark generously from the PNG and
record it in the placeholder register.

## Tagline and wording

- Tagline: **Strategic Legal Counsel for All.** Not "for Entrepreneurs", which the guide's older
  slide uses and the letterhead supersedes.
- **"Go boldly"**, not "Go Boldy". The live site's URL and the email signature carry a typo; the
  brand guide is consistent. Neither line is used as a heading in Step 1 — the landing-page copy
  is complete — but nothing may reproduce the typo.

## Assets and licences

| Asset | Decision | Licence position |
|---|---|---|
| Montserrat | Self-hosted by the build | SIL Open Font License, free to self-host |
| Companion body face, if the client accepts one | Open licence, self-hosted, one family | Nothing that must be bought |
| Icons (Direction B) | The set bundled with Kadence Blocks, inline SVG, at most 11, monochrome within the palette | No new licence |
| Gradients | CSS, sampled from the kit | Client's own brand asset |
| Logo, swirl | Client's own files from the kit | Client's own asset; vector still to be requested |
| Photography | **None placed in either direction.** No team photos, no stock people (client decision, 2026-08-27, which overrides the brand guide's people-photography direction). Image slots are labelled outlines showing size and crop | No exposure in Step 1 |

## Performance constraints this system must respect

The hero is the LCP element the before-and-after Core Web Vitals report is measured on. No
carousels, sliders, parallax, video backgrounds or icon fonts. A CSS gradient hero is effectively
free; a 3300px PNG ground is not, which is why the gradients are rebuilt in CSS. Self-host both
font families and subset them; drop the unused Roboto request the live site carries.