Design Tokens


Design tokens

The schema of record for hperkins.blog. Every swatch, type step, and spacing bar below renders from a live Global Styles token. If a token drifts, this page drifts with it.

Color

Neutral base, structural neutrals, three semantic state tokens, and one action color.

base
#fbfaf7

contrast / ink
#16150f

muted
#605c50

line
#e4e0d6

surface
#f3f0e8

State + action tokens

status-merged
#2f6b3a

status-review
#b8722a

status-pending
#605c50

accent (action)
#7a2e1d

Type scale

xs / 0.8125rem — mono UI, chips, cite

small / 0.875rem — captions, meta

medium / 1.0625rem — body copy

large — subheads (clamp 1.375–1.75rem)

x-large — section heads

xx-large — display

Spacing

Semantic spacing tokens. Each bar is the literal token width.

chip-row / 0.75rem

artifact-terminus / 1.25rem

quote-indent / 2rem

Patterns

Proof bar

Artifact row

core/ai — provider abstraction

PR #501 ↗ · merged

AI Provider for Codex — local runtime

Read more ↗ · shipped

agent-skills — taxonomy skill

PR #49 ↗ · in review

Quote

Where state lives is a design decision, and the boundary is testable. If the governance isn’t part of the architecture, it’s just a promise in the readme.

Henry Perkins — AI Governance