The system this site is built from.
Every block on the home page is one of 9 components. Tokens set every colour, size and space. AI assistants read the same data over MCP.
Colour
Six tokens. Every text pair meets WCAG AA contrast. The redline colour appears only in inspect mode.
color.bgcolor.surfacecolor.fgcolor.fg-mutedcolor.bordercolor.redline
Type
One family: Archivo. Width is a token, 125% for headings and 100% for reading. JetBrains Mono appears only in code.
type.display-lgShip it.type.headingSelected worktype.bodyFor 8 years I have built enterprise web products.type.codeget_component("Dialog")
Space
Seven steps. Sections sit 96 apart: that is the red measure in inspect mode.
space.1space.2space.3space.4space.5space.6space.7
Components
Nine components build every page. Props are shown as this site uses them.
<Button />- 90%faster builds
<CaseStudy /> - DraftPublished
<PostRow />
| Component | Props | Used on |
|---|---|---|
SiteNav | current | Home, System, Work |
Hero | title, lead | Home |
SectionHeader | title, summary | Home, System |
Button | variant, size, href | Home, System, Work |
CaseStudy | title, summary, tags, href, figure | Home |
PostRow | title, summary, status, href | Home |
Timeline | items | Home |
CodeBlock | label, content, copy | Home, System |
PerfReceipt | source | Home |
Over MCP
The site's MCP server also serves these tokens and components. An AI assistant can build with this system the same way a person reads this page.
tools
list_components()
get_component(name)
get_tokens(group)
> get_tokens("space")
space.1 4
space.2 8
space.3 16
space.4 24
space.5 40
space.6 64
space.7 96