Design System Demo
This page showcases all design system components used as the foundation of the portfolio website.
Navigate using the header above. Try the theme toggle in the top right.
Color System
Material Design 3 color roles with light-dark() function
Typography
Playfair Display for headings, Inter for body text, fluid scaling
Heading 1
Playfair Display • var(--step-5) • 600 weight
Heading 2
Playfair Display • var(--step-4) • 600 weight
Heading 3
Playfair Display • var(--step-3) • 600 weight
Heading 4
Playfair Display • var(--step-2) • 600 weight
Body text uses Inter - a highly readable sans-serif designed specifically for UI. It pairs beautifully with the serif heading font, providing excellent legibility across all devices and screen sizes. The fluid typography system ensures text scales smoothly from mobile (320px) to desktop (1240px).
Inter • var(--step-0) • 400 weight • 1.6 line-height
Buttons
Accessible, responsive buttons with multiple variants and icon support
Tags
Compact badges for tech stacks, skills, and labels
Fluid Spacing
Utopia-based spacing system that scales from 320px to 1240px
Container Sizes
Narrow Container
Max-width: 960px - Perfect for readable long-form content
Default Container
Max-width: 1200px - Standard content width
Wide Container
Max-width: 1440px - For wider layouts and grids
Built With
Next.js 15
App Router, Server Components, Image optimization
TypeScript
Strict mode, full type safety, no any types
CSS Modules
Scoped styles, zero runtime, automatic code splitting
Modern CSS
light-dark(), clamp(), color-scheme, CSS variables
Utopia Fluid Design
Responsive without breakpoints, fluid typography & spacing
Material Design 3
Color system, semantic naming, accessibility first