---
name: openai-brand-style
source: https://app.decimal.ai/s/openai-brand-style@1/SKILL.md
source_sha256: 1a9ada77c6d9
---

# 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.