Design
Library
The complete component reference for this design system. Live previews and copy-paste JSX for every component.
Design Tokens
The foundation of the design system — colors, shadows, and spacing that all components are built from.
Sienna Scale
Primary brand color — used for CTAs, accents, and interactive highlights.
50
#fef6f0
100
#fde9d9
200
#fbd0b2
300
#f7ad7f
400
#f38149
500
#d16014
600
#b54e0e
700
#963f0c
800
#7a330f
900
#652c0f
Teal Scale
Secondary brand color — used for complementary accents and dark section backgrounds.
50
#f0f9fa
100
#d9f0f3
200
#b7e3e8
300
#86cdd7
400
#4eafbd
500
#0c5661
600
#0a4a54
700
#093e46
800
#08333a
900
#072a30
Base Colors
Neutral palette — cream background, warm-gray surface, charcoal text.
cream
warm-gray
charcoal
Shadow Scale
Two shadow styles — hard-edged offset shadows for interactive elements, and standard elevations for cards.
Hard Shadow (Primary)
Used on primary buttons
shadow-[4px_4px_0px_rgba(26,22,20,1)]Hard Shadow (Small)
Hover state for primary buttons
shadow-[2px_2px_0px_rgba(26,22,20,1)]Elevation (lg)
Cards and floating elements
shadow-lgElevation (xl)
Modals and overlays
shadow-xlTypography
Two typeface families — IBM Plex Mono for headings and labels, Manrope for body text.
Type Scale — Headings
All headings use IBM Plex Mono. Global styles in globals.css apply font-family automatically to h1–h6.
Design System
Component Library
Section Title
Subsection Heading
Card Title
Small Heading
Body Text — Manrope
Body text in three sizes. Use text-charcoal for primary, text-charcoal/70 for secondary content.
The quick brown fox jumps over the lazy dog. This is base body text at 16px with comfortable 1.6 line height for readability.
Secondary body text at 14px. Used for descriptions, captions, and supporting content that should recede slightly.
Caption text at 12px. Metadata, timestamps, and fine print.
Labels & Annotations
Monospace micro-labels for metadata, section numbers, and inline code.
Use the useScrollAnimation hook to trigger entrance animations.
Muted & Accent Text
Opacity-based text hierarchy and the sienna left-border accent for highlighted content.
Secondary description text at 55% opacity — used throughout for supporting content that shouldn't compete with primary headings.
Highlighted content with a sienna left-border accent. Used for callouts, pull quotes, and important notes.
Inputs
Form elements with consistent 2px border style and sienna focus rings.
Text Input
Standard text field with label, placeholder, helper text, and sienna focus ring.
Textarea
Multi-line text input with resize disabled. Consistent with text input styling.
Select Dropdown
Custom-styled select with a chevron icon overlay.
Checkbox & Radio
Uses accent-color to apply sienna tint to native checkboxes and radios.
Toggle Switch
CSS-only toggle using a hidden checkbox and peer utilities.
Error State
Red border and error message. Use border-red-400 and a helper span with text-red-500.
Cards
Four card variants — frosted glass, accent border, dark, and informational callout.
Default Card
White/60 frosted glass with subtle border and shadow. Sits naturally on cream backgrounds.
Project Highlight
A brief description of this project or piece of content. Enough context to give the reader a sense of what they're looking at.
Accent Card
Left sienna border for callouts, highlights, and featured content blocks.
Featured Work
The sienna left border draws the eye and signals that this content is particularly important or worth highlighting.
Dark Card
Charcoal background for use in dark sections. Cream text with sienna category label.
Frontend
Design System
Charcoal background with cream text. Comfortable in dark sections and creates strong visual contrast.
Callout Card
Sienna-tinted background for informational notes, tips, and warnings.
Heads up
An informational callout. Use for tips, contextual warnings, and notes that shouldn't block the user but are worth reading.
Badges & Tags
Monospace labels, status indicators, pills, and count badges.
Tech / Skill Tags
Monospace tags for technologies, skills, and categories. Two styles — light and dark backgrounds.
Status Badges
Status indicators with colored dot and semantic background tints.
Pill Badges
Rounded pills for labels, versions, and feature flags.
Count Badge
Numeric notification counter positioned absolutely on a button or icon.
Modals
Accessible dialog overlays with backdrop blur, keyboard handling, and focus management.
Info Modal
Standard information dialog. Closes on Esc, backdrop click, or the close button. Focus moves to close button on open.
Confirm / Destructive Modal
Confirmation dialog for destructive actions. Warning icon, red delete button.