Design System
A live inventory of the classes and components used across the portfolio.
Primitives
Visual foundations
Primitive
Color tokens
Core colors used for text, surfaces, borders, and accent moments across the portfolio.
Background
--background
Surface
--surface
Text
--text
Muted
--muted
Accent
--accent
Accent Soft
--accent-soft
Border
--border
Surface Strong
--surface-strong
Primitive
Flat surfaces
The page uses a quiet paper background, solid surfaces, and primary-color accents without decorative background effects.
Body background
--background
Panel surface
--surface
Inset surface
--surface-inset
Primitive
Typography
The system uses a sans body face for interface copy and a serif display face for headlines and emphasis.
Body font
--font-body
Geist
Interface copy, buttons, labels, and long-form supporting text use the body font stack.
Display font
--font-display
Junicode
Used for hero headlines, section titles, and larger editorial moments.
Primitive
Borders & radius
Corners stay tight and borders are explicit, with no shadow-based elevation.
Radius scale
2px / 0.25rem / 0.375rem / 0.5rem
Elevation
--shadow
Flat depth preset
Inset surface
--surface-inset
Flat supporting surface
Classes
Global utility classes
Class
.panel
Primary flat container used for cards, detail panels, and feature blocks.
Panel
Flat surface with a visible border and no shadow.
Class
.panel-muted
Lower-contrast container used for secondary navigation and supporting blocks.
Muted panel
Softer fill and border for quieter interface moments.
Class
.accent-ring
Accent-led border treatment used to mark focal surfaces.
Accent ring
Adds restrained geometric emphasis around highlighted elements.
Class
.font-display
Display serif used for section titles, hero headlines, and large emphasis copy.
Junicode display styling for headlines
Class
.text-balance
Improves wrapping on multi-line copy blocks where balance matters more than strict line fill.
This line is intentionally long enough to show how balanced wrapping keeps a block of text feeling more composed.
Class
.ui-button-*
Button size and variant classes expressed through the shared UiButton component.
Components
Reusable UI components
Component
UiButton
Link-aware button wrapper with primary and secondary variants.
Component
SectionHeading
Standardized page and section intro used across the site.
Component
SectionHeading preview
Component
HoverPanel
Motion wrapper that adds lift and scale feedback to cards.
HoverPanel
Hover this card to inspect the motion behavior.
Component
HeroArt
Generative surface used in hero and case-study previews.
HeroArt compresses the visual language of the portfolio into a reusable branded surface.
Component
DetailAccordion
Expandable narrative block used on detail pages for challenge, process, and outcome content.
Designed for structured long-form content without abandoning the visual tone of the portfolio.
Component
ExperimentPreview
Adaptive preview shell that renders either a HeroArt block or the Chladni simulation depending on the experiment.
Component
ChladniCanvas
Generative particle field used as the custom live preview for the Chladni experiment.
Component
FadeIn
Viewport-triggered reveal wrapper used throughout the site for staggered section entrances.
FadeIn
This preview is wrapped in the same reveal component used on the page itself.
App Shell
Layout-level components
Component
SiteHeader
Global navigation shell that reads from the shared nav items and stays pinned at the top of every page.
Live globally
The actual SiteHeader is already mounted above this page as part of the app shell.
Component
SiteFooter
Global footer that mirrors primary navigation and contact information.
Live globally
The actual SiteFooter is already mounted below this page and updates automatically with shared nav content.
Component
PageTransition
Route-level transition wrapper applied by the root layout when pages enter or exit.
PageTransition
This preview sits inside the same route-transition wrapper used by the app shell.