Design System

Tokens, components, and theming.

A reference for the design language powering this portfolio — and the foundation I apply to enterprise design systems at scale.

Color Tokens

Semantic color primitives that adapt to light and dark contexts.

Background

--background

#FFFFFF

Surface

--surface

#FAFAFA

Border

--border

#E4E4E7

Muted

--muted

#71717A

Foreground

--foreground

#09090B

Accent

--accent

#4F46E5

Token Reference

Semantic tokens resolve to primitive values based on active color mode.

tokens.tsTypeScript
// Semantic → Primitive token resolution
1color.background.default→color.white(light)/color.zinc.950(dark)
2color.text.primary→color.zinc.900(light)/color.zinc.50(dark)
3color.border.default→color.zinc.200(light)/color.zinc.800(dark)
4color.action.primary→color.indigo.600(light)/color.indigo.500(dark)
●4 semantic tokensresolves at runtime

Token Swatches

color.background.default
color.white(light)
/
color.zinc.950(dark)
color.text.primary
color.zinc.900(light)
/
color.zinc.50(dark)
color.border.default
color.zinc.200(light)
/
color.zinc.800(dark)
color.action.primary
color.indigo.600(light)
/
color.indigo.500(dark)

Type Scale

Geist Sans — a clean geometric sans-serif optimized for UI legibility.

Display

72px / 600

Designing clarity.

H1

48px / 600

Senior UX Designer

H2

36px / 600

Featured Work

H3

24px / 600

Case Study Overview

Body LG

18px / 400

Crafting enterprise experiences that reduce cognitive load.

Body

15px / 400

End-to-end design work across complex SaaS platforms.

Caption

12px / 500

ENTERPRISE SAAS · CYBERSECURITY

Spacing Scale

8px base grid. All spacing values are multiples of 4px.

4
4px0.25remIcon gap, tight inline spacing
8
8px0.5remComponent inner padding
12
12px0.75remSmall component spacing
16
16px1remCard padding, list gap
24
24px1.5remSection gap, card padding large
32
32px2remLayout padding mobile
48
48px3remSection vertical rhythm
64
64px4remLarge section spacing
96
96px6remPage section padding

Border Radius

Consistent rounding across component contexts.

sm

6px

Tags, badges, chips

md

10px

Buttons, inputs

lg

16px

Cards, panels

xl

24px

Modals, sheets

full

9999px

Pills, avatars

Components

Core interactive components with consistent states.

Buttons

Tags & Badges

Enterprise SaaSCybersecurityDesign SystemsResearchAccessibleAccentAvailable

Card

Card Title

Subtitle / metadata

A flexible card component used for displaying content blocks, case studies, and feature highlights across the portfolio.

Label