Design System

Reference

Design System

Visual reference for all design tokens, component patterns, and animations used across this portfolio. Click any color swatch to copy its value.

Colors

Core Palette

Accent

Text

Border

Mobile Override

Typography

Font Families

Figtree

font-display

Display headings — section titles, hero h1, case study titles (weight 800 only)

Figtree, ui-sans-serif, system-ui, sans-serif

The quick brown fox jumps over the lazy dog. 0123456789

Inter

font-sans

Body text, UI elements, all non-heading text

Inter, ui-sans-serif, system-ui, Arial, sans-serif

The quick brown fox jumps over the lazy dog. 0123456789

JetBrains Mono

font-mono

Section labels, code, meta text

JetBrains Mono, ui-monospace, SFMono-Regular, monospace

The quick brown fox jumps over the lazy dog. 0123456789

Type Scale

Hero Heading

text-4xl sm:text-5xl md:text-6xl font-bold font-display tracking-tighter text-text-primary

Design Systems & Craft

Section Heading

text-2xl sm:text-3xl font-bold tracking-tight text-text-primary

Featured Work

Card Heading

text-lg font-bold text-text-primary

Project Title

Section Label

section-label

Case Study

Body

text-base text-text-secondary leading-relaxed

A seasoned design leader with deep expertise in product strategy, systems thinking, and cross-functional collaboration.

Meta Label

text-xs font-mono uppercase tracking-widest text-text-muted

Last updated Feb 2026

Tag

tag

Design Systems

Buttons

Primary

Sky blue rounded (4px) button. Used for primary CTAs.

.btn-chassis .btn-chassis-primary

Secondary

Light gray rounded (4px) button. Used for secondary actions on light backgrounds.

.btn-chassis .btn-chassis-secondary

Ghost

Frosted glass rounded (4px) button. Used for actions on dark backgrounds.

.btn-chassis .btn-chassis-ghost

Component Patterns

System 7 Card

.system7-card

White card with subtle border and backdrop blur. Primary container pattern.

System 7 card with content inside

<div class="system7-card p-6">Card content</div>

Section Label

.section-label

Monospace uppercase accent label used above section headings.

Section Title

<p class="section-label">Section Title</p>

Tag / Badge

.tag

Small uppercase pill for categorization and metadata.

Design SystemsReactTailwind

<span class="tag">Label</span>

Gradient Divider

.gradient-divider

Thin horizontal rule using border color.

Content above

Content below

<div class="gradient-divider"></div>

External Link

.link-external

Sky blue dotted-underline link that becomes solid on hover.

Check out the project documentation for more details.

<a href="#" class="link-external">Visit site</a>

Polaroid Frame

.polaroid-frame

Image container with layered shadows and slight rotation.

Photo caption

<div class="polaroid-frame"><img src="..." alt="..." /></div>

Shadows

Polaroid Frame

.polaroid-frame

0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)

Animations

Fade In

.animate-fadeIn

Simple opacity fade for general elements.

Scale In

.animate-scaleIn

Scale + fade for modals, popovers, cards.

Portfolio Reveal

.portfolio-reveal

Page-level reveal on initial load.

Chat Slide In

.chat-panel-enter

Chat panel entrance from right edge.

Chat Slide Out

.chat-panel-exit

Chat panel exit to right edge.

Typing Dots

.typing-dot

Bouncing dots in chat typing indicator.

Message In

.message-enter

Chat message entrance with subtle upward slide.

CSS Custom Properties

Variable	Value	Description
--bg-primary	#e5e7eb	Page background (white on mobile)
--bg-secondary	rgba(255, 255, 255, 0.5)	Card / overlay background
--bg-accent	#f3f4f6	Subtle accent background
--text-primary	#111827	Primary text color
--text-secondary	#374151	Secondary text color
--text-muted	#6b7280	Muted / tertiary text
--border-color	#d1d5db	Default border color
--accent-color	#38bdf8	Brand accent (sky-400)
--accent-dark	#0284c7	Dark accent (sky-600)
--accent-light	#7dd3fc	Light accent (sky-300)

DTCG Export

Download the design system as a JSON file following the W3C Design Tokens Community Group (DTCG) specification. Compatible with Figma Variables plugins and other design token tools.

How to Use

1Download the design-tokens.json file using the button above
2For Figma: Install a DTCG-compatible plugin like Design Tokens to Variables or Tokens Studio
3For Code: Use tools like Style Dictionary to transform tokens into CSS, SCSS, or other formats
4The DTCG format ensures interoperability between design and development tools

Included Tokens

Colors

Accent (sky scale)
Background & surface
Text (primary, secondary, muted)
Border
Mobile override

Typography

Font families (Inter, JetBrains Mono)
Font sizes (xs to 7xl)
Font weights
Line heights

Spacing & Effects

Border radius
Shadows (chassis, card, polaroid)
Animation durations

DTCG Format

Tokens follow the DTCG specification with $type and $value properties:

{
  "color": {
    "accent": {
      "default": {
        "$type": "color",
        "$value": "#38bdf8",
        "$description": "Brand accent (sky-400)"
      }
    }
  },
  "typography": {
    "fontWeight": {
      "bold": {
        "$type": "fontWeight",
        "$value": 700,
        "$description": "Bold weight"
      }
    }
  },
  "shadow": {
    "polaroid": {
      "$type": "shadow",
      "$value": "0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.15)",
      "$description": "Polaroid frame shadow"
    }
  }
}