146 lines
7.5 KiB
Markdown
146 lines
7.5 KiB
Markdown
# 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;
|
||
```
|