# Indifferent Broccoli brand tokens — extracted 2026-05-01

Source pages fetched live via `curl`:
- HTML: `https://indifferentbroccoli.com/` (100,017 bytes)
- CSS:  `https://indifferentbroccoli.com/css/output.css` (62,243 bytes — Tailwind-compiled)

The site does not publish authored CSS variables for brand colors (it's Tailwind output with a few brand hex literals overlaid). The tokens below are reverse-engineered from the compiled stylesheet by frequency and semantic role.

## 1. Colors (raw values from `output.css`)

| Token | Hex | oklch (approx) | Usage in IB CSS | Lines |
|---|---|---|---|---|
| **brand primary green** | `#5EFF0D` | oklch(0.88 0.27 138) | `.stroke-primary { stroke: #5EFF0D }`, `.decoration-primary { text-decoration-color: #5EFF0D }`, file-selector-button border | output.css:1674, 2090, 2233-2234, 2730 |
| brand secondary blue | `#0050FF` | oklch(0.43 0.27 264) | text/link color appearances | 4 occurrences |
| dark surface | `#0A141E` | oklch(0.20 0.025 240) | navy panel background | 1 occurrence |
| accent pink | `#c0a0b9` | oklch(0.74 0.05 340) | one section bg | 1 occurrence |
| white | `#fff` | — | text on dark, panels on light | 6 occurrences |
| neutral text | `#6b7280` (tw-gray-500) | — | muted body text | 4 occurrences |
| neutral muted | `#9ca3af` (tw-gray-400) | — | further-muted | 2 occurrences |

## 2. Fonts

`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sora|Sora:600">`
`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans:600">`

| Role | Family | Weights | Source |
|---|---|---|---|
| heading / display | **Sora** | 400, 600 | Google Fonts (CDN) |
| body / paragraph | **Open Sans** | 400, 600 | Google Fonts (CDN) |
| icons | Font Awesome | — | `/vendor/font-awesome/css/font-awesome.min.css` (out of scope for sortof) |

The site does not self-host these via @fontsource. We will hot-link the same Google Fonts URLs as IB to inherit identically. Mono font is unspecified by IB; sortof keeps its existing **JetBrains Mono** for code/output blocks (no brand conflict).

## 3. Border radii (compiled Tailwind)

| Value | Frequency | Likely role |
|---|---|---|
| `0.25rem` (4px) | 2 | small corners (rounded) |
| `0.5rem` (8px) | 1 | medium (rounded-lg) |
| `0.75rem` (12px) | 1 | larger (rounded-xl) |
| `9999px` | 1 | pill / chip |
| `100%` | 1 | circle (logo container) |
| `0` / `0px` | 3 | flat sections |

## 4. Shadows

```css
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);          /* card lift */
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);       /* focus ring (green-tinted) */
```

## 5. Brand assets

| Asset | URL | Local copy |
|---|---|---|
| primary mark | `https://indifferentbroccoli.com/img/broccoli_shadow_square.png` | `/opt/sortof/frontend/img/broccoli_shadow_square.png` (866×866 PNG, 19,075 bytes) |
| smiley wordmark | `(:|)` (text glyph) — appears in `<title>` ("Indifferent Broccoli (:|)") and footer-class flourish |

Pulled the broccoli image locally so we don't hot-link IB's CDN. Same file used for both header brand mark and favicon.

## 6. Voice cues (verbatim from page)

The deadpan house style — additive, not replacement, when applied to sortof:

- **Hero**: "Host your own game server / Or not... we don't care"
- **Sub-hero**: "Premium game servers with instant deployment, full mod support, and a control panel so simple your cat could use it."
- **Trim**: "Or not."
- **Title** (browser tab): "Indifferent Broccoli (:|)"

Keying off these, the IB voice contract is: bold functional claim, then immediate self-undercut. Reverse-pleasantness. No exclamation points. Lowercase or sentence-case (no shouting).

## 7. Header layout (extracted)

```
[broccoli_shadow_square.png] [indifferent broccoli wordmark]
                             [Games | Top Servers | About Us | Contact | Wiki | Merch | Open Source]
                                                                  [Start New Server +] [Log in]
```

For sortof, the structural mapping:

```
[broccoli_shadow_square.png] [sortof] [tagline]                   [github] [docs]
```

Footer references stay (REfRigERatoR's mod load order sorter / "a thing by indifferent broccoli") but get the `(:|)` glyph as a small inline mark next to "indifferent broccoli", linking to `https://indifferentbroccoli.com`.

## 8. Final palette decision (reconciliation with a11y)

Per brief: **IB primary green is the brand anchor; status colors defer to the a11y pass.**

| Role | Token | Value | Source |
|---|---|---|---|
| Brand primary (sortof = an IB thing) | `--brand-primary` | `#5EFF0D` | IB literal |
| Brand surface (alt anchor) | `--brand-anchor-bg` | `#0A141E` | IB literal |
| Status: success | `--acc-success` | oklch(0.78 0.13 165) | a11y (Okabe-Ito bluish-green). Unchanged. |
| Status: warning | `--acc-warn` | oklch(0.82 0.15 75) | a11y (Okabe-Ito orange-yellow). Unchanged. |
| Status: error | `--acc-error` | oklch(0.70 0.18 35) | a11y (Okabe-Ito vermillion). Unchanged. |
| Status: info / link | `--acc-info` | oklch(0.78 0.13 230) | a11y (Okabe-Ito sky blue). Unchanged. |
| Foreground ramp | `--fg`, `--fg-1`, `--fg-2`, `--fg-3` | a11y values | Unchanged. |
| Backgrounds | `--bg`, `--bg-1`, `--bg-2`, `--bg-3` | a11y values | Unchanged. |

### Why brand green doesn't replace `--acc-success`

The IB green `#5EFF0D` is **highly saturated** (oklch chroma 0.27) and reads as "this is a CTA / this is the IB look." Using it as the success-state color would:
- Conflict with the a11y reasoning: success at hue 138 (yellow-green) sits closer to Okabe-Ito's *yellow* than its *bluish-green*. Less safe under deuteranopia.
- Conflict with the spec semantics: in the a11y system, brand-anchor color and status-success color have different jobs. Swapping them would re-collapse what the a11y pass deliberately separated.

So the brand green lives at `--brand-primary` and is used for:
- Sort button (the primary CTA on the page)
- Wordmark dot accent
- Header brand mark hover/focus emphasis
- Build-toggle "active" state

Status pills, banners, warnings, copy-button-success, etc. continue to use the a11y `--acc-*` tokens.

### Contrast verification for `--brand-primary` (`#5EFF0D`)

Against the dark canvas backgrounds:

| Pair | ΔL (oklch) | Approx ratio | WCAG |
|---|---|---|---|
| `#5EFF0D` (L=0.88) vs `--bg` (L=0.18) | 0.70 | ~12.5:1 | AAA |
| `#5EFF0D` (L=0.88) vs `--bg-1` (L=0.21) | 0.67 | ~10:1 | AAA |
| `#5EFF0D` (L=0.88) vs `--bg-3` (L=0.28) | 0.60 | ~7.5:1 | AAA |

Brand green clears AAA against every background token. No luminance adjustment needed.

### IB blue `#0050FF` — not used

`#0050FF` ≈ oklch(0.43 0.27 264) → fails AA against any of our dark backgrounds (~3.0:1). The a11y pass already established `--acc-info` (oklch 0.78 0.13 230) as the link / info color and that token clears AAA. We document IB's blue here for completeness but do not put it in the live palette.

## 9. Tokens mapped to CSS vars (added in this round)

```css
--brand-primary: #5EFF0D;            /* IB anchor green */
--brand-primary-rgb: 94 255 13;       /* for rgba() composition */
--brand-anchor-bg: #0A141E;           /* IB navy, available as deep panel surface */
--brand-radius: 0.5rem;               /* IB medium radius */
--brand-radius-sm: 0.25rem;           /* IB small radius */
--brand-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);   /* IB card lift */
--brand-mark: url('/img/broccoli_shadow_square.png'); /* logo asset */
--brand-font-display: 'Sora', 'Geist', ui-sans-serif, system-ui, sans-serif;
--brand-font-body:    'Open Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
```