House Brand Styling

Contract

Enforces the house visual identity: every color is one of seven exact hex tokens, every font comes from the Inter / IBM Plex Mono stack, and accents cycle Green → Azure → Graphite. Apply whenever an artifact (CSS, Tailwind/SCSS config, design tokens, slides, email, charts) is meant to look on-brand. The values below are arbitrary house choices — never substitute a look-alike color or a near-match font.

Rules (the complete spec)

1. The seven colors — use these hex values verbatim

Neutrals:

| Token | Hex | Role | |----------|-----------|--------------------------------------------------------| | Charcoal | #0E0F12 | Primary text; dark backgrounds | | Slate | #202123 | Surface backgrounds (cards, panels) | | Mist | #F5F7FA | Light page backgrounds; text ON dark backgrounds | | Steel | #9EA1AA | Secondary elements; dividers / hairlines |

Accents:

| Token | Hex | Role | |----------|-----------|--------------------------------------------------------| | Green | #10A37F | PRIMARY accent (first accent, primary CTA) | | Azure | #2B8FFF | SECONDARY accent | | Graphite | #40434A | NEUTRAL accent — icon strokes, line work |

No other colors are on-brand. Do not invent tints/shades or round the hex.

2. Typography — three stacks, each with a fallback

• Headings (24pt / ~24px and larger): Inter, Semibold or Bold weight, fallback Arial.
• Body / paragraph text: Inter, Regular weight, fallback Arial.
• Code / monospace (code blocks, inline code): IBM Plex Mono, fallback Menlo, then generic monospace.

The fallback always follows the primary font in the same font-family declaration, in that order.

3. Text color is chosen by its background

• Text on a light background (Mist, white) → Charcoal #0E0F12.
• Text on a dark background (Charcoal, Slate, any dark surface) → Mist #F5F7FA.

Never put Charcoal text on a dark surface or Mist text on a light surface.

4. Accent usage and the cycle

• Non-text shapes (fills, bars, chips, buttons) use accent colors only — never a neutral as a fill accent.
• The primary call-to-action / first accent is always Green #10A37F.
• When more than one accent is needed, cycle in this exact order: Green #10A37F → Azure #2B8FFF → Graphite #40434A, then repeat.
• Chart series, sequential shapes, and multi-item legends follow the same cycle: series 1 = Green, series 2 = Azure, series 3 = Graphite.

Worked examples (before → after)

Colors — exact hex (Rule 1)

BEFORE — base guesses a generic palette:

css
:root {
  --text: #111111;        /* generic near-black */
  --surface: #1e1e1e;
  --accent: #22c55e;      /* a "nice green" */
}

AFTER — house tokens, verbatim:

css
:root {
  --text: #0E0F12;        /* Charcoal */
  --surface: #202123;     /* Slate */
  --bg: #F5F7FA;          /* Mist */
  --divider: #9EA1AA;     /* Steel */
  --accent: #10A37F;      /* Green (primary) */
}

Typography stacks (Rule 2)

BEFORE — base reaches for system fonts and drops the weight/fallback:

css
h1   { font-family: system-ui, sans-serif; }
code { font-family: monospace; }

AFTER — Inter / IBM Plex Mono with correct weight and fallback order:

css
h1   { font-family: "Inter", Arial, sans-serif; font-weight: 600; } /* Semibold */
body { font-family: "Inter", Arial, sans-serif; font-weight: 400; }
code { font-family: "IBM Plex Mono", Menlo, monospace; }

Text-on-background (Rule 3)

BEFORE — base keeps dark text on a dark header:

html
<header style="background:#202123; color:#0E0F12;">Welcome</header>

AFTER — Mist text on the dark Slate surface:

html
<header style="background:#202123; color:#F5F7FA;">Welcome</header>

Accent cycle for shapes / chart series (Rule 4)

BEFORE — base assigns arbitrary, unordered colors:

js
const series = ["#3b82f6", "#ef4444", "#a855f7"]; // blue, red, purple

AFTER — the house cycle, in order:

js
const series = ["#10A37F", "#2B8FFF", "#40434A"]; // Green → Azure → Graphite

Primary CTA (Rule 4)

BEFORE: <button style="background:#2563eb">Sign up</button> (generic blue) AFTER: <button style="background:#10A37F; color:#F5F7FA">Sign up</button> (Green fill, Mist label)

Edge cases & exceptions

• A fourth shape / fifth series: the cycle repeats from the top — shape 4 = Green #10A37F, shape 5 = Azure #2B8FFF. Do not introduce a new color to extend the set.
• Text on Steel #9EA1AA (mid-tone): treat Steel as a light surface — use Charcoal #0E0F12 text.
• Heading exactly at the 24pt boundary: 24pt counts as "24pt and larger" → Inter Semibold/Bold. Below 24pt a heading still uses Inter, but body-style weight is acceptable.
• Fonts unavailable at render time: rely on the declared fallback (Arial for Inter, Menlo/monospace for IBM Plex Mono). Never swap in a different third-party font (e.g. Roboto, Courier) — only the named fallbacks.
• Disabled / muted accent: use Steel #9EA1AA, not a faded tint of Green. Steel is the only neutral-gray allowed in UI chrome.
• Icon strokes and hairline line work: use Graphite #40434A (neutral accent), not Green — Green is reserved for primary emphasis and the first cycle slot.

Do / Don't

• DO write hex in uppercase exactly as listed (#10A37F); DON'T lowercase, shorten (#1A7), or approximate.
• DO put Mist #F5F7FA text on dark surfaces; DON'T leave Charcoal text on Charcoal/Slate.
• DO start every accent run with Green #10A37F; DON'T lead with Azure or a neutral.
• DO keep the cycle order Green → Azure → Graphite; DON'T reorder by "what looks nice."
• DO declare Arial after Inter and Menlo/monospace after IBM Plex Mono; DON'T drop the fallback or use sans-serif/serif as the only fallback for code.
• DO use accents only for non-text shapes/fills; DON'T fill a shape with a neutral as if it were an accent.

Common mistakes (the base's wrong defaults)

• Substitutes a popular green like #22c55e / #10b981 for Green #10A37F.
• Uses system-ui, Roboto, or Helvetica instead of Inter; uses bare monospace/Courier instead of IBM Plex Mono.
• Omits the Semibold/Bold weight on headings, or the Regular weight on body.
• Picks chart/series colors at random instead of Green → Azure → Graphite in order.
• Keeps dark text on a dark surface (low contrast) because it ignores the background rule.
• Drops the fallback font, or puts the fallback before the brand font.

Quick checklist

• ] Every color is one of the seven exact hex tokens.
• ] Headings = Inter Semibold/Bold (+Arial); body = Inter Regular (+Arial); code = IBM Plex Mono (+Menlo/monospace).
• ] Text color matches its background (Charcoal on light, Mist on dark).
• ] First accent / primary CTA = Green #10A37F.
• ] Multiple accents cycle Green → Azure → Graphite.