Style guide

Color

There's one dark theme: near-black green neutrals, a glowing mint accent that doubles as the light on the stage, and a marigold I use sparingly. Every pairing gets checked against the surface it sits on.

• --color-bg#070d0b
• --color-surface#0f1714
• --color-raised#16211d
• --color-sunken#040807
• --color-ink#edf3f0
• --color-muted#9db0a7
• --color-line#24332d
• --color-accent#6fcf97
• --color-on-accent#05110b
• --color-accent-soft#11251a
• --color-pop#f2bc5c
• --color-on-pop#0e1513
• --color-pop-text#f2bc5c
• --color-focus#f2bc5c
• --color-device#1a2320

Contrast, checked at build time

Every pairing below meets WCAG 2.2 AA.

Type

Headings use Bricolage Grotesque, which is chunky and a little quirky but still serious. Body text uses Atkinson Hyperlegible Next, designed by the Braille Institute so similar letters like I, l and 1 never get mixed up. Both are self-hosted and subset.

1. step 6Ship the thingclamp(2.6rem, 1.6rem + 4.8vw, 6.4rem)
2. step 5Ship the thingclamp(2.25rem, 1.55rem + 3.2vw, 4.6rem)
3. step 4Ship the thingclamp(1.9rem, 1.5rem + 1.8vw, 3.2rem)
4. step 3Ship the thingclamp(1.8rem, 1.58rem + 1vw, 2.45rem)
5. step 2Ship the thingclamp(1.5rem, 1.38rem + 0.55vw, 1.875rem)
6. step 1Ship the thingclamp(1.25rem, 1.19rem + 0.3vw, 1.45rem)
7. step 0Short sentences. Verbs about shipping.clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem)
8. step -1Short sentences. Verbs about shipping.clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem)

Space, radii and shadows

Spacing runs on a 4px base. Corners get rounder as things get bigger, and shadows are tinted with the ink color so the layers read like real objects.

Motion

Motion is slow and smooth. Devices turn and settle as you scroll, driven by CSS scroll timelines instead of script. All of it switches off when your device asks for reduced motion: durations drop to zero, devices sit still, and the site works exactly the same.

press

90ms

fast

180ms

slow

600ms

page

420ms

ease out

Fast out, gentle landing

ease in-out

Symmetric, for things that travel

Hover and press me

Components

Buttons

Pill buttons that glow on hover and press in a little. Tab to one to see the focus ring.

Cards

The whole card is one link. It lifts under your mouse and presses in when you click it.

Device stage

This is the site's signature: a laptop and a phone set in CSS 3D over a pool of light. They lean toward your mouse, settle into place as they scroll in, and hold still under reduced motion. This one shows the brand-free email mock I use for NDA work.

Tags

• Landing pages
• Responsive email
• HTML5 ads
• Conversion tracking

Device frames and captions

Frames are drawn in CSS, so they cost zero image bytes and never shift the layout.

Accessibility rules

• Every text color pairing meets WCAG 2.2 AA, checked when the site builds.
• Focus is always visible: a 3px marigold ring, offset so it never hides the thing it marks.
• Everything works by keyboard, and a skip link jumps straight to the content.
• Motion is decoration. Reduced-motion settings turn it all off, and nothing depends on it.
• Scroll-driven scenes are progressive: without support, or with reduced motion, you get a still, complete version.
• Every page works with JavaScript turned off.
• Hover effects only apply on devices that can hover, so touch screens never get stuck.

Governance: one token re-skins the site

Every color, size and duration on this site comes from one file of tokens, and components never hard-code values. Change the accent and every button, link, glow and panel follows along, and this page re-checks the contrast on the next build.

--color-accent: #6fcf97;

New components get added here first, in every state, before they show up on a page.