Working grid
Four columns on mobile, twelve on desktop. Align content to the grid. Compositions can remain asymmetrical.
Design System
Shared colors, typography, spacing and components for this portfolio. CSS tokens define global styles. Page components organize the content.
Shared styles let one change apply across the site.
One signal
Toxic Orange marks action, focus, progress, and live state. Use support colors for secondary surfaces.
Typographic tension
One main heading per screen, with smaller body text and metadata.
Physical motion
Reveals, shifts, rulers, and image crops explain structure. Motion stays direct and respects reduced-motion preferences.
Six colors define background, text and accent roles. Components use these roles so palette changes can apply across pages.
Morning Snow
Primary ground and light ink on deep surfaces.
Amazon Mist
Background for grouped content.
Aqua Mist
Supporting surface and secondary negative-mode information.
Toxic Orange
The sole signal for action, progress, focus, and live state.
Black Kite
Primary ink, hard rules, and negative ground.
Garnet
Deep supporting surface and muted information.
Commerce projects
Project index
Digital product
The brief, decisions and results.
Product, design and engineering.
Each case study explains the problem, decisions and results.
Fig. 01: Four mobile columns and twelve desktop columns.
Georgia is reserved for quotations.
Heros sets headings. Geist Mono sets body text and metadata. Georgia sets quotations.
Shared spacing values control margins, grid gaps, sections and page headers.
SEBASTIAN
Grouped editorial content.
Secondary content background.
Dark background with light text.
Migration proceeds in phases. Each phase preserves content, routes, keyboard access, reduced motion and the current layout.
01 / Foundations
Palette, type scale, spacing, layout, rules, motion, and z-index now resolve through shared CSS tokens.
02 / Shared shell
Layout, navigation, headers, metadata, typography and actions use shared styles.
03 / Index surfaces
Home, Work, Resume, Field Notes and Quote adopt shared spacing without changing their content.
04 / Detail templates
Work and Field Note templates adopt shared figures, body text, metadata and sections.
05 / Governance
Visual checks, accessibility review and a contribution checklist identify inconsistent changes before merge.