The Continuum
The system this site is built from. Type, colour, spacing, grid, components, motion. Change a token here and the whole site follows.
01
Typography
Aa — I design digital products
Aa — editorial accent
Aa — body copy, interface, navigation. Set at 1.0625–1.1875rem with 1.6 line-height.
Aa — Labels, metadata, numerals
Hero
Page title
Section
Subsection
Heading
Supporting statement, 34ch max.
Body copy. Measure capped at 58–62ch so lines stay readable.
02
Colour
Ivory
Paper
Sand
Ink
Charcoal
Grey
Violet
Violet Ink
The accent appears only on interactive elements, the availability indicator and the process line. Project imagery supplies the rest of the colour. Dark sections invert the same tokens — nothing is redefined twice.
03
Space & grid
04
Components
Art-directed
placeholder
Drop an <img> inside to replace
05
Motion & rules
- 01Timing. 280ms for hover feedback, 500ms for transitions, 700–900ms for reveals. Easing:
cubic-bezier(.2,.7,.2,1). - 02Reveals. Opacity plus a 14px rise, staggered 60–90ms between siblings. Once only — nothing re-animates on scroll back.
- 03Motion earns its place. If an animation doesn't clarify structure or give feedback, it's removed.
- 04Reduced motion is honoured. Transforms, marquee, custom cursor and hover previews all switch off; nothing becomes invisible or unreachable.
- 05Borders. One hairline,
1px solid rgba(22,21,15,.12). Sections are separated by rules, not boxes. Radius is 2–4px, or a full pill on controls. - 06Shadow. Exactly one, on the floating hover preview. Nothing else lifts off the page.
- 07Breakpoints. 1440 / 1280 / 1024 / 900 / 768 / 430 / 390. Layout collapses at 900px; navigation collapses at 860px.
- 08Contrast. Ink on ivory ≈ 15:1. Small violet text uses
#3A1FD6. Colour never carries meaning alone.