Portfolio Design System
A single source of truth for the typography, color palette, spacing scale, and reusable UI components powering harrikilpio.com. Built with pure CSS custom properties, Utopia fluid typography, and Astro SSR.
Color Palette
Warm, high-contrast, editorial palette designed for comfort during long reading sessions.
Surfaces & Backgrounds
Foundation layers used to establish depth and contrast across views.
--color-bgMain canvas background (warm beige / soft slate)
--color-surfaceCard & container surface
--color-surface-hoverInteractive surface hover state
--color-surface-elevatedSubtle header / footer elevated surface
Typography & Content
Accessible grayscale hierarchy tuned for maximum readability.
--color-text-primaryHeadlines, strong text & high emphasis
--color-text-secondaryBody copy, descriptions & paragraphs
--color-text-mutedCaptions, hints, timestamps & labels
Borders & Dividers
Structural boundary lines separating sections and card surfaces.
--color-borderPrimary card borders & major dividers
--color-border-subtleHairline dividers & table borders
Accents & Category Highlights
Primary interaction colors and category markers.
--color-accentPrimary CTA and interactive accent
--color-accent-hoverButton & link hover state
--color-accent-subtleLow-contrast accent background
--color-accent-categoryCategory & warning rust accent
--color-accent-category-subtleCategory tag tint
Experience Badges
Semantic tones indicating career proficiency levels.
--badge-experienced-bgExperienced background (sage green)
--badge-experienced-borderExperienced border tone
--badge-comfortable-bgComfortable background (warm gray)
--badge-comfortable-borderComfortable border tone
Typography
Space Grotesk primary typeface paired with system monospace. The type scale dynamically clamps across screen sizes from mobile (320px) to desktop (1400px) with Utopia calculations.
Fluid Type Ladder
Spacing & Layout
An 8-point base grid with 4px sub-increments creates harmonic layout rhythm across margins, paddings, and component gaps.
Container Constraints
--container-max-width900pxCentered main column width providing optimal reading line length
--container-paddingvar(--space-6) = 24pxResponsive horizontal gutters protecting content on small viewports
Borders, Radii & Motion
Tactile edge styling and calibrated transition timings for interactive micro-interactions.
--radius-smInline code, small tags, sub-elements
--radius-mdCards, buttons, table wrappers
--radius-lgModal overlays & featured hero cards
--radius-fullPill badges, status indicators
UI Components
Live instances of portfolio UI components rendered with standard HTML classes.
Experience Badges (.badge)
Used on the homepage and work approach pages to classify skill mastery levels.
.badge.badge--experienced.badge.badge--comfortableWith custom skill textButtons & CTAs (.btn)
Primary call-to-action and secondary navigation buttons.
.btn.btn--primary.btn.btn--secondarySurface Cards (.card)
Bordered content container with hover elevation and accent border highlight.
Design System Architecture
This card element demonstrates the standard .card class styling, including hover background shifts, border accent coloring, and padding tokens.
Data Tables (.table-container)
Responsive scrollable tables with sticky headers and zebra striping.
| Design Token | Category | Default Value | Status |
|---|---|---|---|
--color-bg | Surface Color | #F0ECE4 | Active |
--font-family-sans | Typography | Space Grotesk | Active |
--radius-md | Border Radius | 8px | Active |
--transition-fast | Motion | 150ms ease | Standard |