Style guide

Living reference for the design system powering this site. Every page imports one stylesheet (public/css/style.css), every color and dimension is a CSS custom property in :root, and every component below is the real markup — no abstractions, no build step.

Tokens

Colors

Solarized-derived palette. Surface and text tokens are semantic aliases over the raw palette — prefer those when adding components.

Palette

--base03

#002b36

--base02

#073642

--base01

#586e75

--base00

#657b83

--base0

#839496

--base1

#93a1a1

--base2

#eee8d5

--base3

#fdf6e3

Accents

--magenta

#d33682

--magenta-light

#ff83cf

--purple

#6c71c4

--purple-light

#B9BEFF

--blue

#268bd2

--blue-light

#73D8FF

--teal

#2aa198

--teal-light

#77EEE5

--yellow

#b58900

--orange

#cb4b16

Surfaces (semantic)

--bg

= --base03

--bg-elev-1

#04323d

--bg-elev-2

= --base02

--bg-card

rgba(255,255,255,.03)

--bg-card-hov

rgba(255,255,255,.06)

--border

rgba(255,255,255,.08)

--border-strong

rgba(255,255,255,.16)

Text (semantic)

--text

= --base2

--text-muted

= --base1

--text-dim

= --base0

--text-accent

= --teal-light

Tokens

Typography

Three families: display, body, mono. Headings scale fluidly with clamp() so the same markup looks right from mobile to ultrawide.

Families

--font-display

Righteous · The quick brown fox

--font-body

Lato · The quick brown fox jumps over the lazy dog.

--font-mono

JetBrains Mono · const x = await orchestrate();

Scale

h1 · clamp(2.4rem, 5vw, 4rem)

Heading 1

h2 · clamp(1.6rem, 3vw, 2.2rem)

Heading 2

h3 · 1.25rem

Heading 3

h4 · 1rem uppercase

Heading 4

body · 17px / 1.6

Body copy. Production AI orchestration with approval gates, audit trails, and the engineering rigor enterprises actually deploy.

.section__lede · 1.1rem

Lede paragraph used under section titles for orientation copy.

code

Inline await contract.run() with mono background.

Tokens

Spacing & layout

Layout containers and rhythm. Fluid values use clamp() so the same constants scale from phone to desktop without breakpoints.

--max-w · 1200px

--max-w-prose · 760px

--gutter · clamp(1.25rem, 4vw, 3rem)

--section-py · clamp(4rem, 8vw, 7rem)

Tokens

Radius & shadow

Three radii, two elevations. Cards use --r-md; inline tags use --r-sm; the biggest surfaces use --r-lg.

Radius

--r-sm · 6px --r-md · 10px --r-lg · 16px

Shadow

--shadow-1 --shadow-2

Live examples

Components

Real classes already shipping on the portfolio, AXED, and CentrOS pages. Copy the markup; it'll pick up the tokens above automatically.

Buttons

Primary action Ghost action

<a class="btn btn--primary">Primary action</a>
<a class="btn btn--ghost">Ghost action</a>

Chips

LangGraph Temporal MCP HITL gates

<span class="chip">LangGraph</span>

Metrics row

40M+

AXED reads

units on CentrOS

agent pipeline stages

<div class="metrics-row">
  <div class="metric">
    <div class="metric__value">40M+</div>
    <div class="metric__label">AXED reads</div>
  </div>
</div>

Section header pattern

Eyebrow

Section title

A short lede explaining what this section covers, kept under the prose max-width for readability.

<span class="section__eyebrow">Eyebrow</span>
<h2 class="section__title">Section title</h2>
<p class="section__lede">Short lede.</p>

Inline code & quotes

Use code inline for symbols, paths, and short snippets. Links like this one get a teal underline that brightens on hover.

Use <code>inline</code> for symbols and paths.