# Wendy Brand Guidelines

Machine-readable brand resources for coding agents, design tools, and partners.

- Human page: https://wendy.dev/brand
- This file: https://wendy.dev/brand/brand-guidelines.md
- All asset URLs below are absolute and hot-linkable/downloadable.

## Color

One warm paper + one deep slate family + one seafoam accent. No pure black, no pure-cool greys.

### Light mode (default)

| Token                  | Hex       | Use                                            |
| ---------------------- | --------- | ---------------------------------------------- |
| `--background`         | `#F1EEE7` | Page background ("Cream") — warm off-white     |
| `--foreground`         | `#171C23` | Text ink ("Slate Ink") — also primary buttons  |
| `--primary`            | `#171C23` | Solid buttons/chips (cream `#F1EEE7` text)     |
| `--secondary`          | `#E6E2D8` | Quiet card surfaces ("Sand")                   |
| `--muted-foreground`   | `#5B5A56` | Secondary copy ("Warm Grey")                   |
| `--border`             | `#DEDEDE` | Hairline borders ("Ghost Grey")                |
| `--input`              | `#CBCBCB` | Input borders ("Mid Grey")                     |

### Dark mode (`.dark` scope — panels, blog, footer)

| Token          | Hex       | Use                                    |
| -------------- | --------- | -------------------------------------- |
| `--background` | `#171C23` | Deep slate surface — never pure black  |
| `--card`       | `#1E242D` | Raised cards ("Slate Card")            |
| `--muted`      | `#242B35` | Muted surfaces ("Slate Muted")         |

### Seafoam accent — use sparingly

Reserved for key calls-to-action and links only.

| Token                  | Hex                                     | Use                              |
| ---------------------- | --------------------------------------- | -------------------------------- |
| `--seafoam`            | `#9FE2BF`                               | CTA button fill                  |
| `--seafoam-hover`      | `#86D3A8`                               | CTA hover                        |
| `--seafoam-foreground` | `#171C23`                               | Text on seafoam                  |
| `--seafoam-link`       | `#2A7050` (light) / `#9FE2BF` (dark)    | Link text — AA on both surfaces  |

## Typography

Both families are open source (Vercel) and available on Google Fonts:

- **Geist** (sans) — headlines and body: https://fonts.google.com/specimen/Geist
- **Geist Mono** — labels, code, terminal UI: https://fonts.google.com/specimen/Geist+Mono

Google Fonts embed:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&display=swap"
  rel="stylesheet"
/>
```

Next.js: use the `geist` npm package (`geist/font/sans`, `geist/font/mono`).

CSS stacks:

```css
--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
```

Title recipe (matches wendy.dev):

- Section eyebrow: Geist Mono, 16px, weight 400, uppercase, full ink (`#171C23`)
- Section title: Geist, weight 500 (medium — never bold), 48px desktop, line-height 1.1, normal tracking, sentence case
- Hero title: same, ~60px, line-height 1.05

## Logos

Two marks: the emblem (twin diamonds) and the full logo with WENDY wordmark. Use slate versions on light backgrounds, cream versions on dark. Do not recolor, stretch, rotate, or add effects.

### Emblem

- SVG slate: https://wendy.dev/brand/wendy-emblem-slate.svg
- SVG cream: https://wendy.dev/brand/wendy-emblem-cream.svg
- PNG transparent (slate): https://wendy.dev/brand/wendy-emblem-slate-transparent.png
- PNG on slate (cream): https://wendy.dev/brand/wendy-emblem-cream-on-slate.png
- JPG on cream: https://wendy.dev/brand/wendy-emblem-slate-on-cream.jpg
- JPG on slate: https://wendy.dev/brand/wendy-emblem-cream-on-slate.jpg

### Logo with wordmark

- SVG slate: https://wendy.dev/brand/wendy-logo-slate.svg
- SVG cream: https://wendy.dev/brand/wendy-logo-cream.svg
- PNG transparent (slate): https://wendy.dev/brand/wendy-logo-slate-transparent.png
- PNG on slate (cream): https://wendy.dev/brand/wendy-logo-cream-on-slate.png
- JPG on cream: https://wendy.dev/brand/wendy-logo-slate-on-cream.jpg
- JPG on slate: https://wendy.dev/brand/wendy-logo-cream-on-slate.jpg

## Voice, in one line

Plain, technical, confident. Sentence case everywhere except mono uppercase labels. The accent color is earned, not decorative.