ai-runbook-jh: styleguide

Colors

Planed-pine canvas. Graphite ink, walnut for secondary text. Graphite as the single interactive signal. Pencil-red as the one warm accent: title underline and colophon only. Walnut, oak, and ash as quiet phase threads, never used alone to convey meaning.

{colors.paper} #F6EFDD

Default page canvas. Warm planed-pine off-white.

{colors.paper-soft} #ECE2C9

Recessed surface. Phase headers, modal nav, expanded cards.

{colors.paper-deep} #DFD2B3

Deeper recess. Card hover wash, code inline background.

{colors.ink} #1F1E1B

Primary text. Graphite: darker than charcoal, reads like a sharp pencil on raw wood.

{colors.bark} #6B5A41

Secondary text. Walnut tone: warm but quiet, never grey.

{colors.hairline} #D9CDB1

Kerf line: 1px dividers, quiet borders, dashed legends.

{colors.graphite} #2B2A26

The single primary signal. JH mark, active pill fill, focus ring, hover-underline bar. The carpenter's mark on the wood.

{colors.graphite-soft} #E3DCC8

Graphite wash. Foundation-tag background, active-pill hover halo.

{colors.on-graphite} #F6EFDD

Text on graphite fill. AA contrast against the new ink.

{colors.pencil-red} #B8412A

Pencil-red accent. The hand-drawn title underline, the colophon signature, the link mark. Never on fills or focus.

{colors.walnut} #6B4A2B

Phase thread A: Refinement, Validate. Deep wood: the longest grain.

{colors.walnut-soft} #E6D9C0

Walnut wash for collapsed phase headers and tags.

{colors.oak} #8A6A3A

Phase thread B: Plan, Communicate. Medium wood: ringed and even.

{colors.oak-soft} #ECDFC4

Oak wash for collapsed phase headers and tags.

{colors.ash} #5C5A52

Phase thread C: Triage, Build. Cool grey-tan; deliberately quietest so it does not compete with the graphite signal.

{colors.ash-soft} #DDD6C5

Ash wash for collapsed phase headers and tags.

{colors.focus-ring} #2B2A26

Keyboard focus outline. Same as graphite: sharp against planed-pine.

Typography

Fraunces for display, Source Serif 4 for body, Monaspace Xenon for technical labels (slab-serif mono reads like joinery), Architects Daughter for one moment of human warmth in the footer.

{typography.display}

Page title. Fraunces 600: letterpress weight, used once per page.

48px · 600 · lh 1.1

The quick brown fox jumps over the lazy dog.

{typography.display-sm}

Phase headers, modal titles. Fraunces 600.

28px · 600 · lh 1.2

The quick brown fox jumps over the lazy dog.

{typography.body-lg}

Lead paragraphs, plain-language glosses.

18px · 400 · lh 1.65

The quick brown fox jumps over the lazy dog.

{typography.body}

Default body. Book-style serif for readability and warmth.

16px · 400 · lh 1.7

The quick brown fox jumps over the lazy dog.

{typography.body-sm}

Card descriptions, modal helper text.

14px · 400 · lh 1.6

The quick brown fox jumps over the lazy dog.

{typography.mono}

Skill names, code, technical labels. Slab-serif mono: brackets and serifs read like joinery.

14px · 500 · lh 1.5

skill-name-here

{typography.mono-sm}

Phase numbers, tags, eyebrow labels. Drafted-label tracking.

11px · 500 · lh 1.4

skill-name-here

{typography.hand}

Colophon only. The 'kept by jh' drafting-pencil signature in the footer.

22px · 400 · lh 1.3

kept by jh

Spacing

A modest scale. Generous rhythm comes from line-height and section gaps, not from packing more steps onto the ladder.

{spacing.xs} 4px

{spacing.sm} 8px

{spacing.md} 12px

{spacing.base} 16px

{spacing.lg} 24px

{spacing.xl} 40px

{spacing.xxl} 64px

{spacing.section} 96px

Radii

Soft, not pillowy. note is intentionally irregular: used on rare hand-cut elements only.

{rounded.none} 0

{rounded.sm} 2px

{rounded.md} 4px

{rounded.lg} 8px

{rounded.pill} 999px

{rounded.note} 2px 18px 4px 14px

Phase threads & plain-language gloss

Each of the six phases carries a quiet color thread and a plain-words gloss. The thread differentiates; the gloss makes the phase legible to anyone, regardless of role.

Threads

triage → {colors.ash}
refinement → {colors.walnut}
plan → {colors.oak}
build → {colors.ash}
validate → {colors.walnut}
communicate → {colors.oak}
cross-cutting → {colors.bark}

Plain-language glosses

triage: Deciding which tickets are worth working on right now.
refinement: Filling in the gaps so the team can estimate and start the work.
plan: Writing down the approach in a file before opening the editor.
build: Doing the work, and keeping the commits clean as you go.
validate: Checking it actually works: for keyboards, screens, and real browsers.
communicate: Wrapping it up so the next person, including future you, isn't lost.
cross-cutting: Habits that run alongside everything: watch your tone, back up your claims, watch what you share.

Components

Every component used in the AI runbook renders below, live. Each carries its token recipe as a disclosure: open it to see exactly which tokens compose it.

btn-primary

Primary action. Graphite fill: used sparingly, one per region.

Token recipe

backgroundColor: {colors.graphite}
textColor: {colors.on-graphite}
typography: {typography.mono-sm}
rounded: {rounded.md}
padding: 10px 18px

btn-quiet

Secondary action. Hairline border, no fill.

Token recipe

backgroundColor: transparent
textColor: {colors.ink}
typography: {typography.mono-sm}
rounded: {rounded.md}
padding: 10px 14px

card

Skill card, collapsed state. Hairline border, no shadow.

example-skill A short, calm description of what this skill is for. open full skill

Token recipe

backgroundColor: {colors.paper}
textColor: {colors.ink}
rounded: {rounded.lg}
padding: 20px 22px

card-expanded

Skill card, expanded inline. Soft-paper back signals open state.

example-skill Expanded state. Hairline shifts to graphite; back lifts to paper-soft.

Foundation

Next

open full skill

Token recipe

backgroundColor: {colors.paper-soft}
textColor: {colors.ink}
rounded: {rounded.lg}
padding: 20px 22px 24px

pill

Phase mini-map tab, modal nav pill. Active state fills with graphite.

Token recipe

backgroundColor: transparent
textColor: {colors.bark}
typography: {typography.mono-sm}
rounded: {rounded.pill}
padding: 6px 14px

pill-active

Active pill. Graphite fill, planed-pine text.

Token recipe

backgroundColor: {colors.graphite}
textColor: {colors.on-graphite}
typography: {typography.mono-sm}
rounded: {rounded.pill}
padding: 6px 14px

chip

typicalNext chip. Renders as a small clickable token.

Token recipe

backgroundColor: {colors.paper-soft}
textColor: {colors.ink}
typography: {typography.mono-sm}
rounded: {rounded.sm}
padding: 3px 9px

tag-foundation

Foundation tag: skill is called by other skills more than used directly. Wears the graphite signal.

Foundation

Token recipe

backgroundColor: {colors.graphite-soft}
textColor: {colors.graphite}
typography: {typography.mono-sm}
rounded: {rounded.sm}
padding: 3px 8px

tag-voice

Voice cross-cutting tag. Walnut thread.

Voice

Token recipe

backgroundColor: {colors.walnut-soft}
textColor: {colors.walnut}
typography: {typography.mono-sm}
rounded: {rounded.sm}
padding: 3px 8px

tag-security

Security cross-cutting tag. Oak thread.

Security

Token recipe

backgroundColor: {colors.oak-soft}
textColor: {colors.oak}
typography: {typography.mono-sm}
rounded: {rounded.sm}
padding: 3px 8px

gloss-block

Plain-language gloss under each phase title. Italic, slightly indented.

Deciding which tickets are worth working on right now.

Token recipe

backgroundColor: transparent
textColor: {colors.bark}
typography: {typography.body-lg}

hand-underline

Hand-drawn pencil-red underline. Animates in on page load under the title; reused as the hover bar under skill-card names. The one warm decorative motif.

Underlined title

Token recipe

dovetail-notch

Small dovetail-tail SVG glyph (trapezoid wider at top). Replaces a generic bullet in phase-section title rows. Tinted with the phase thread color (walnut, oak, or ash).

walnut thread oak thread ash thread

Token recipe

kerf-line

Hairline + three short ticks as a section divider. Reads like a kerf cut on the bench.

Token recipe

colophon

Footer signature: 'kept by jh'. Architects Daughter pencil hand in pencil-red, the rarest mark on the page.

kept by jh

canon · design · skills

Token recipe

typography: {typography.hand}
textColor: {colors.pencil-red}

skip-link

Hidden until keyboard focus jumps it on; sends focus to the #phases main landmark.

Token recipe

backgroundColor: {colors.graphite}
textColor: {colors.paper}
rounded: {rounded.sm}

newcomer-note

Hero aside that orients newcomers. Walnut thread (supportive context), not graphite (signal).

Token recipe

backgroundColor: {colors.paper-soft}
borderLeft: 3px solid {colors.walnut}
typography: {typography.body-sm}
rounded: 0 {rounded.md} {rounded.md} 0
padding: {spacing.base} {spacing.lg}

phaseflow-node

One of the six numbered cards in the phase-flow nav. Anchor link that opens the matching phase section.

01TriageDeciding which tickets are worth working on right now.

Token recipe

backgroundColor: {colors.paper}
textColor: {colors.ink}
rounded: {rounded.md}
padding: {spacing.base} {spacing.sm}

phaseflow-band

Horizontal strip beneath the phase nodes. Carries cross-cutting + contracts metadata.

cross-cutting · run through every phase · voice·security

Token recipe

backgroundColor: {colors.paper-soft}
textColor: {colors.bark}
typography: {typography.mono-sm}
rounded: {rounded.md}
padding: {spacing.sm} {spacing.base}

usage-modes

Three-column panel below the phase cards: autonomous chain, one-off, mix. Explains how to drive the skills.

Three ways to drive the skills

Pick the mode that fits the work in front of you.

One-offPull a single skill when you want it.

Token recipe

backgroundColor: {colors.paper}
border: 1px solid {colors.hairline}
rounded: {rounded.lg}
padding: {spacing.lg} {spacing.base}

accent-legend

Key for the card accent tags (Foundation, Voice, Security). Sits at the top of #phases as a caption for the cards below.

Skills are marked when they are foundational, voice-sensitive, or security-sensitive.Foundation called by other skillsVoice written for an audienceSecurity touches secrets

Token recipe

border: 1px dashed {colors.hairline}
textColor: {colors.bark}
typography: {typography.body-sm}
rounded: {rounded.md}
padding: {spacing.sm} {spacing.base}

Known gaps

What this system explicitly does not cover. Honest limits keep the contract clear.

Dark mode: tracked in issue #1 (after-hours oiled-walnut workshop).
Animation timings beyond the page-load reveal, underline hover, and 150ms pill/card transitions.
Print stylesheet: out of scope for v1.
Color-only signals: every color cue is reinforced by a label, number, or shape.