One system.
Every portfolio page.

Semantic roles, two themes.

Use the theme toggle to inspect the same roles in light and dark. Project artwork and product screenshots retain their original palettes.

Space Grotesk + DM Sans.

Space Grotesk carries headings and labels. DM Sans carries body copy. Section headings scale from 32 to 51 px; small card titles use 19 px. Body copy is 16 px, supporting text 14 px, captions 12 px.

Homepage and case study hero titles use larger responsive display styles. Product typography inside screenshots is preserved.

A repeatable rhythm.

Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40, 48 and 64 px. Layout uses content-driven heights; screenshot galleries keep their intended column counts.

Small cards and large panels have different jobs.

Project covers, banners, metadata rows, section labels, research grids, image galleries, footer and scroll progress are shared portfolio patterns. Their established artwork and animations remain part of the system.

Preserve the work being shown.

Use original screenshots at their natural aspect ratio, with no cropping or content edits. Images are responsive and have descriptive alt text. Frames use an 8 px radius; project banners use 16 px. Galleries collapse at their documented content breakpoints.

Visible feedback, restrained motion.

Use 150 ms for quick feedback, 250 ms for standard transitions, and 750 ms for reveals. Existing artwork animations retain dedicated timing tokens. Hover, keyboard focus, pressed and disabled states must be intentional. Reduced-motion preferences disable decorative animations and reveals.

All pages include Skip to content. Theme choice persists in the browser. Links and buttons remain native, keyboard-accessible HTML elements.

Change the source, not individual pages.

1. Edit design-system/tokens.json for shared values.
2. Run python scripts/build-tokens.py to regenerate CSS.
3. Use ds-card, ds-panel, ds-grid, ds-control and ds-image for shared component roles.
4. Keep canonical rules in components.css. Use layout.css for page composition and artwork.
5. Keep new shared values semantic. Add product-specific artwork values only when a semantic role would be misleading.
6. Run python scripts/check-design-system.py before publication.

CSS is the reusable component layer for this static HTML site. Content remains in each project’s HTML file; no framework dependency is required.

The source of truth.

Legacy names such as --paper and --ink are aliases to canonical semantic roles. Dimension and palette primitives preserve exact existing artwork and layout values.