The Living Styleguide

Spec-Page Design System · Light / Base Theme · spec + implementation in one file

Base theme

Foundations

Tokens, type, spacing, radii — the raw material. Every value here is used verbatim in the shipped pages. Nothing on this board is decorative; it is the source of truth an agent copies from.

Accent palette · the vibrant eight

Teal

#0FB5A6

Pink

#F5568F

Yellow

#FFC933

Coral

#FF7A45

Violet

#8B5CF6

Green

#5CB84E

Magenta

#EE4FD3

Blue

#428DF0

Surfaces & ink

Paper

#FBFAF7

Surface

#FFFFFF

Code well

#20232A

Ink

#1C1E22

Ink-soft

#4A4E56

Line

#E6E3DA

Text-on-tint · darkened accent text on pale fills (badges shown with small-text-safe inks)

Teal · 0B8378 Coral · C4531F Pink · C93368 Violet · 6D3EE0 Yellow · 8F6B08 (sm) Green · 347A2B (sm) Magenta · B31999 Blue · 0F5ABD

Type scale · Fraunces / Inter / JetBrains Mono

h1 · Fraunces 600Money, on the level

h2 · Fraunces 600A section heading

h3 · Fraunces 600A card name

mech · Inter 500The one-line thesis under a head.

body · Inter 400Body copy that lets the point breathe and stay readable.

eyebrow · MonoCategory label

code · Monoconst token = "#0FB5A6";

Spacing scale · base 4px

Radii

2 · brush

8 · callout

10 · code/card

12 · feature

999 · pill

Components

Each row: the live component on the left, its spec and copyable markup on the right. These render from the same CSS the shipped pages use, so what you see is what ships.

The map underneath the catalog

The 22 failure modes are not 22 problems. They are five.

Hero · brush highlight

The signature move

Eyebrow (mono) + Fraunces h1 with one brushed accent word. The brush is the light theme's signature.

Brushed links need color:var(--ink) or they render blue on the highlight.

<span class="brush r1">
  <span class="bg" style="
    background:rgba(15,181,166,.42)"></span>
  <span>five</span>
</span>

Reduces Flags Eliminates Attention Boundary Root 2 Signal Context

Badge / status pill

Tinted labels

Pale accent fill, darkened accent text, mono uppercase, radius 999px.

Yellow & green use the small-text inks (#8F6B08 / #347A2B) — the large-text values fail at badge size.

.badge{padding:5px 12px;
  border-radius:999px;
  font:500 11px 'JetBrains Mono';
  letter-spacing:.1em;text-transform:uppercase}
.b-teal{background:rgba(15,181,166,.14);
  color:#0B8378}

01Fabrication 06Overconfidence 20Lost-in-the-Middle

Chip · deep link

Anchor chips

White pill, hairline border, mono index, label. Hover fills with the accent tint via --rc.

<a class="chip" style="--rc:rgba(15,181,166,.14)">
  <span class="n">01</span>Fabrication</a>

Why this matters

Every deterministic task handed to an agent is a slower, pricier version of a script. Mechanics to code, judgment to agents.

Callout

Aside / caveat

Raised white card, 3px accent left-border, mono label, one line.

.callout{background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--gc);
  border-radius:8px;padding:16px 18px}

# light page, dark code well
--paper:   #FBFAF7   # warm off-white
--surface: #FFFFFF   # cards
accent:   the vibrant eight

Code well

Dark on light

The page is warm and bright, so code drops onto a dark surface to stand out and rest the eye.

bg #20232A · text #E6E3DA
comment #7C828D · keyword #5CD0C4
string #FFC933 · accent #F5568F

One address, not N

Route through a hub; each part knows one destination, not everyone's.

Mechanics to code

One correct output for an input means it is mechanics, not judgment.

Principle grid

The synthesizing close

Two-column white cards, accent top-border, Fraunces h3 + soft body. The payoff section.

.pcard{border-top:3px solid var(--pc);
  border-radius:10px;padding:18px 20px}

Voice & meta

Shared across every theme, stated once here. Full detail is in the embedded comments above this section and in the Typography and team specs.

Voice · page prose

Short declarative sentences. No em dashes for parentheticals; semicolon when both halves stand alone, comma when one leans. No questions as section enders. Name the limit rather than overclaim. Teach by reframing how the thing works, then the mechanism, then the guard.

Meta · every page

GA4 in head. Canonical on /specs/<slug>/. Full OG + Twitter (@revans). TechArticle JSON-LD with real sameAs, dates. FAQPage + visible FAQ only when the page answers searchable questions. OG image is the one manual asset.

Created for you, with ❤️ by Robert Evans · The AI Design Architect