Dark mode
Source Components Patterns Lab Changelog Foundations
Lab / Meta

shawncastillo.com

A design system built for one product — me. The system documents itself as it grows.
Type Meta / This site Live
Stack
Design tokens
Barlow Condensed
Overpass
DM Serif Display
What this is
This site is a design system. Not a portfolio that talks about design systems — one that functions as one. Every element is a named, intentional component. The UI and the documentation are the same thing.
Why it exists
Most portfolios show outputs. This one shows thinking. A designer who builds themselves a design system is saying something without saying it — this is how I work, not just what I've made.
Hidden features
The site has two hidden interaction layers — a token toggle in the nav that reveals the DS layer underneath the UI with token labels on every element, and an accent color switcher inside the token panel that cascades a color change across the entire system in real time. Find them if you can.

Color

A cool, restrained palette. One accent that does the heavy lifting — everything else supports it.

TokenDemoValueUsage
--color-accent
#00e5ccCTAs, active states, highlights
--color-surface
#0e1318Page background
--color-surface-secondary
#161d24Panels, sidebars
--color-surface-elevated
#1a2330Cards, modals
--color-text-primary
#e0f0faHeadings, body copy
--color-text-secondary
#7a9bb5Supporting text
--color-text-tertiary
#3d5870Labels, captions
--color-border
#1e2d3dDividers, borders

Typography

Three typefaces, three jobs. Barlow makes the statement. Overpass does the work. DM Serif adds the human touch.

TokenDemoValueUsage
--font-displayAaBarlow Condensed 800H1, section titles
--font-headingAaOverpass 600Subheadings, card titles
--font-editorialAaDM Serif Display italicQuotes, lede text
--font-bodyAaOverpass 400Body copy, UI text
--font-monoAaui-monospaceLabels, tokens, code

Spacing

Built on an 8pt grid. Generous by design — whitespace is not wasted space, it's part of the system.

TokenDemoValueUsage
--space-xs
4pxTight gaps
--space-sm
8pxSmall gaps, pill padding
--space-md
16pxComponent internal spacing
--space-lg
24pxSection padding, card body
--space-xl
40pxSection margins, page padding
--space-2xl
64pxHero padding, major sections
--space-3xl
96pxPage-level vertical rhythm

Border Radius

Subtle softness across the system. Not sharp enough to feel clinical, not round enough to feel playful.

TokenDemoValueUsage
--radius-sm
4pxInputs, code blocks
--radius-md
8pxButtons, impact cards
--radius-lg
12pxCards, panels, token panel
--radius-full
99pxPills, badges, toggles

Motion

Elastic by default. The spring easing is the primary curve — interactions should feel like they have a little life in them.

TokenValueUsage
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Card hover, toggle, primary interactions
--ease-outcubic-bezier(0.16, 1, 0.3, 1)Photo scale, entrance animations
--ease-subtlecubic-bezier(0.4, 0, 0.2, 1)Color transitions, opacity fades
--duration-fast150msHover states, color changes
--duration-base300msCard lift, panel transitions
--duration-slow500msPhoto scale, page-level motion
← Back to Lab