Design System

This page is the single source of truth for site components, tokens, and project-page patterns. Edit a component in src/components/ — every project page imports from here. Use the live previews below to QA before shipping updates to Work, Play, and case studies.

Color tokens

--color-bg

#ffffff

Primary page background

--color-text

#1a1a1a

Main reading text

--color-text-soft

#5a5a5a

Header menu links and subtle emphasis text

--color-link-strong

var(--color-text)

Default for dark links

--color-link-strong-hover

var(--color-text-soft)

Hover for dark links

--color-link-soft

var(--color-text-soft)

Default for softer links

--color-link-soft-hover

var(--color-text)

Hover for softer links

--color-text-muted

#888888

Secondary labels and UI hints

--color-border

#e0ddd8

Cards, separators, subtle outlines

Typography

Display / h1

clamp(1.95rem, 2.5vw, 2.85rem)

Page-level title and hero intro

Industrial design, made tactile.

Section heading / h2

clamp(1.35rem, 1.8vw, 2rem)

Top-level section breaks

Process and outputs

Subheading / h3

1.1rem

Nested sections and card titles

Materials and ergonomics

Body copy

1rem / 1.55

Long-form description text

Used for narrative sections. Keep width around 52-62ch so dense process writing remains easy to scan.

Caption

1.2em / 1.1

Image overlays in case-study grids

Caption style preview Foam model before final chamfer direction

Spacing

0.5em

Tight micro gaps

Horizontal

Vertical

1em

Default gutter + grid gap

Horizontal

Vertical

2.5em

Tight section transitions

Horizontal

Vertical

3em

Tablet section rhythm

Horizontal

Vertical

5em

Desktop section rhythm

Horizontal

Vertical

Layout rules

Fluid site gutter max(1em, calc((100% - 60em) / 2))

Keeps content comfortable at every size while preserving edge breathing room.

Core unit 1em

Use 1em steps before introducing custom values so pages feel related.

Page transition 0.5s overlay fade

Shared entry/exit timing from `Layout.astro` keeps navigation calm.

Component library

14 components across site chrome and project pages. Each card shows a live preview, source file, props, and where it is used today.

Site chrome

Header

Global nav, wordmark swap on inner pages, menu overlay.

Source

src/components/Header.astro

Props

title?, navMenu? (default true)

Class reference

.site-header / .site-header--nav-menu

Used on

All pages

QA checklist

Wordmark kerning pairs, menu open/close, active route state.

Rendered at the top of this page.

SectionSidebarNav

Scroll-spy section nav for long single-column pages.

Source

src/components/SectionSidebarNav.astro

Props

sectionLinks, ariaLabel?, enableEasingDevPanel?

Class reference

.section-sidebar-nav

Used on

/styles, /about

QA checklist

Click scroll offset, active section highlight, mobile hide.

Fixed nav on the left of this page (desktop).

Project shell

ProjectLayout

Case-study page shell: Layout + Header + main slot + Footer + project.css.

Source

src/components/ProjectLayout.astro

Props

title, description

Class reference

.project-page / .project-page__main

Used on

Tapico, The Rams, Conic Collection, ParentPal

QA checklist

Title prop matches header wordmark; description feeds meta.

Wraps project pages — see any case study (e.g. Tapico).

Project content

ProjectTagline

Large display headline under the hero.

Source

src/components/project/ProjectTagline.astro

Props

text

Class reference

.project-tagline

Used on

Tapico, The Rams, ParentPal

QA checklist

80% width desktop; scales to 2em at tablet.

A calculator, but for words.

ProjectProse

Main narrative body for case-study explanations.

Source

src/components/project/ProjectProse.astro

Props

tightTop?, tightBottom? + default slot

Class reference

.project-prose / .project-block

Used on

All project pages

QA checklist

Stay around 80% width desktop, 100% tablet and below.

Designed for narrative flow between media modules. Keep this block comfortable and readable, then let images carry detail.

ProjectSectionTitle

In-page section break heading (Research, Process, etc.).

Source

src/components/project/ProjectSectionTitle.astro

Props

title, tightBottom?, level? (2 | 3)

Class reference

.project-section-title

Used on

Tapico, The Rams, Conic Collection

QA checklist

Heading-only block spacing; level 3 for nested sections.

Research

Project media

ProjectHero

Lead image at top of each project story.

Source

src/components/project/ProjectHero.astro

Props

src, alt, variant? (default | conic)

Class reference

.project-hero / .project-hero__img

Used on

All project pages

QA checklist

Confirm crop focal point and min-height feel on desktop.

ProjectHero preview

ProjectImage

Full-width or constrained standalone image between prose blocks.

Source

src/components/project/ProjectImage.astro

Props

src, alt?, constrained?, mobileHeight?, flush?

Class reference

.project-media / .project-media__img

Used on

Tapico, The Rams, ParentPal, Conic Collection

QA checklist

mobileHeight svh values at 767px; flush for gallery stacks.

ProjectImage preview

ProjectGrid

Two-, three-, or five-column media clusters.

Source

src/components/project/ProjectGrid.astro

Props

cols (2 | 3 | 5) + default slot

Class reference

.project-grid--2/3/5

Used on

Tapico, The Rams, Conic Collection

QA checklist

Validate collapse path at 991px and 767px breakpoints.

Grid cell 1
Grid cell 2
Grid cell 3

ProjectCaptionImage

Grid cell with overlay caption (competitor refs, labeled shots).

Source

src/components/project/ProjectCaptionImage.astro

Props

src, alt?, caption, variant?, square?

Class reference

.project-cell / .project-caption

Used on

Tapico

QA checklist

Caption short; hidden on mobile per project.css.

reMarkable 2 Caption preview
Light Phone II Caption preview
Pomera DM30 Caption preview

ProjectDetailImage

Grid detail shot with optional caption variants.

Source

src/components/project/ProjectDetailImage.astro

Props

src, alt?, caption?, captionVariant? (light | dark | black)

Class reference

.project-detail / .project-detail__img

Used on

Tapico, The Rams, Conic Collection

QA checklist

Min-height 16em; caption variant matches image tone.

First snap Detail with caption
Detail without caption

ProjectContextImage

Moodboard/context cell with caption above image.

Source

src/components/project/ProjectContextImage.astro

Props

src, alt?, caption

Class reference

.project-context-cell / .project-context-caption

Used on

The Rams

QA checklist

Caption above image; used inside context grids.

Dieter Rams BT 3 radio Context preview
Dieter Rams 606 shelving Context preview

ProjectReferenceImage

Linked reference tile with overlay caption.

Source

src/components/project/ProjectReferenceImage.astro

Props

src, alt?, caption, href

Class reference

.project-reference-cell / .project-reference-cell__link

Used on

Conic Collection

QA checklist

External link opens new tab; caption readable on image.

Stacking jugs reference Reference preview
Stacking mugs reference Reference preview

Pending patterns

Raw markup still used on some project pages — not yet extracted into components. Promote these when a second page needs the same pattern.

Captioned constrained image .project-media--constrained + .project-caption--black/dark

Used on: Tapico. Full-width image with caption above (V2 exploded view, keyboard). Candidate: extend ProjectImage with caption prop.

Stacked grid cell .project-cell--stack

Used on: Tapico. Tall two-image stack inside a 5-column grid. Candidate: ProjectDetailImage stack variant or ProjectStackedCell.

Responsive hide / show pair .project-hide-mobile + .project-show-mobile-only

Used on: Tapico, Conic Collection. Desktop grid cell hidden on mobile, alternate full image shown instead.

Interaction sample

Hover tone should stay subtle. This link uses the same transition behavior as inline project links: read case-study details.