Reference

Styleguide

Contrast ratios are measured against the page colour of the scheme they belong to, light first. Nothing here should ever need a value outside the scales.

Colour

--surfacePagecream #FDF9F3 / ink #0C3242—
--surface-sunkenCode, callouts#EFEDE8 / #1F42501.12:1 / 1.26:1 vs page
--textBody textink #0C3242 / cream #FDF9F312.9:1
--text-mutedMeta, captions#48646E / #CDD1D06.0:1 / 8.8:1
--linkBody links#0A6F94 / #6EC9E85.4:1 / 7.2:1
--accent-textOrange as text#B94614 / #FF9F6B5.1:1 / 6.7:1
--accent-fillPrimary button fill#F75E1A / #F75E1A3.1:1 / 4.2:1 vs page
--borderRules, hairlines#C2D1D8 / #55727E1.5:1 / 2.6:1
--focusFocus ring#0C83AE / #6EC9E84.1:1 / 7.2:1
--ruleQuote rule#0C83AE / #6EC9E84.1:1 / 7.2:1

Type scale

Hear the future--size-49 · 49px · Home hero, desktop
Hear the future--size-39 · 39px · H1 desktop / hero mobile
Hear the future--size-31 · 31px · H1 mobile / H2 desktop
Hear the future--size-25 · 25px · H2 mobile / H3 desktop
Hear the future--size-20 · 20px · Body desktop, H3 mobile
Hear the future--size-18 · 18px · Body mobile
Hear the future--size-16 · 16px · Nav, code, tables
Hear the future--size-14 · 14px · Meta, captions

Spacing scale

--space-4
--space-8
--space-12
--space-16
--space-24
--space-32
--space-48
--space-64
--space-96

States

Buttons

Primary Ghost

Tab to each. Hover each. The primary label is ink on raw pulse at 4.2:1, which holds because it is never smaller than 25px — large text at any weight, 3:1 floor. Weight is not part of the guarantee: before the webfont arrives the label renders in whatever bold face the reader's machine has, or in none. Hover darkens the fill to --pulse-700 and flips the label to cream at 5.1:1.

Links

A default link, and the same link after you hover it. Tab through this paragraph to see the focus ring: 2px solid --focusat 2px offset, which clears the 3:1 non-text floor on both the page and the sunken surface.

Components

TagPill

astro design-systems 4 posts accessibility TypeScriptMarkdown

Link, link with count, aria-current="page", then two static chips. Hover and tab each. Both forms share one box, so a stack badge and a tag link never differ in size. The count is announced as "design-systems 4 posts".

PostCard

15 September 20266 min read

A post with tags

The card is an editorial entry, not a box: one hairline above it and nothing else.

15 September 20261 min read

A post with no tags at all

The tag row is omitted rather than rendering an empty list.

ProjectCard

In progress

An in-progress project

Status, title, one-line pitch, stack badges. Only the title is interactive.

Astro
TypeScript
CSS

Shipped

A shipped project

A longer pitch, here to show that the badges still land on the same baseline as the card beside it.

Markdown

Archived

An archived project

Archived is the third and last status value.

GitHub Actions
CSS

Pagination

A missing neighbour omits its cell rather than greying out a link. At one page the component renders nothing at all, which is why there is no fourth example.

Breadcrumb

Prose

A second-level heading

Body copy at the current breakpoint's size, 1.65 line height, capped at the 720px column so the measure stays readable.

A third-level heading

List item with a --token in it.
A second item, 8px below the first.

A quote, marked by a 3px rule in the signal blue.

--space-24: 1.5rem;