Files
sortof/docs/brand-tokens-2026-05-01.md

7.5 KiB
Raw Blame History

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

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