chanhdai.com — Design System

1. Visual Theme & Atmosphere

chanhdai.com is a developer portfolio and component library built with Next.js and Tailwind CSS. Its design philosophy is clean precision — a light-mode-first interface that communicates craft through tightly controlled spacing, a strictly defined semantic token system, and restrained use of color. The overall feel is calm and professional, somewhere between a well-maintained open-source documentation site and a personal creative portfolio.

The site runs a comprehensive CSS custom property system built on Zinc (cool grey) tones, with a near-black foreground on pure white. Every color decision maps to a named role (--background, --muted, --border) rather than raw values, revealing a designer who thinks in design tokens, not pixels.

What distinguishes it is the typography pairing: Geist Sans covers the entire interface — no serif, no display typeface, no decorative accent — creating a cohesive, software-native reading experience. The site also includes --expo-out easing as a CSS variable, a subtle clue that animations are thoughtfully tuned rather than defaulted.

2. Color Palette & Roles

All colors defined as CSS custom properties with explicit semantic roles:

Neutral / structural:

• --background: #fff — page canvas
• --foreground: #09090b — near-black Zinc, primary text
• --border / --input / --line: #e4e4e7 — consistent border grey
• --muted: #f4f4f5 — subtle fill for inactive areas
• --muted-foreground: #71717b — secondary/placeholder text
• --surface: #fafafa — slightly off-white for code blocks and inset areas
• --ring: #9f9fa9 — focus indicator

Interactive:

• --primary: #09090b (background), --primary-foreground: #fafafa — filled buttons
• --link: #1447e6 — the only pure chromatic color, a strong blue for hyperlinks
• --secondary: #f4f4f5 / --accent: #f4f4f5 — same value, used for ghost/outline button backgrounds

Status:

• --info: #009cf5 — informational blue
• --success: #00c758 — confirmation green
• --destructive: #e40014 — error red

Sidebar system: Mirrors the main token set with --sidebar-* variants, indicating a docs-style navigation panel.

What’s absent: No dark mode tokens in the default surface. No gradients. No decorative color splashes.

3. Typography Rules

The site commits entirely to Geist Sans — Vercel’s open-source typeface — across every element from headings to body to buttons.

Key rules:

• Only H1 uses negative letter-spacing (−0.75px) — everything else runs at default tracking
• The weight range is narrow: 400 (regular) and 500 (medium) for UI, 600 (semibold) for the page title only
• No serif, no monospace, no display face — complete typographic unity
• Buttons use 500 weight at 14px matching paragraph-level sizing, keeping the interface compact
• A custom --expo-out easing curve is defined for animation timing, suggesting spring-like transitions

4. Component Stylings

Buttons: Two clear types based on interactive state data:

• Primary/filled: --primary (#09090b) background, --primary-foreground text. On hover, slightly transparent (80% opacity on hover). Pill-shaped possible (3.35544e+07px radius detected — near-infinite, producing full rounded).
• Ghost/secondary: Transparent background, text in --muted-foreground, hover brings --accent background fill.

Search bar: Full-width input with border --border, shadow rgba(0,0,0,0.05) 0px 1px 2px, and a 3px focus ring in --ring (semi-transparent). Keyboard shortcut badge (⌘K) appears inline.

Border radii: 6px (inputs, small components), 8px (cards), 12px (larger containers), full-pill for avatars/badges.

Cards: Background --card (#fff) with a 1px inset shadow acting as border (oklch ring at 10% opacity), subtle drop shadow on lift. Flat and light.

Navigation links: Muted text (--muted-foreground) that transitions to full --foreground on hover — a clean brightness bump with no transform.

Progress bar: Defined via --bprogress-* tokens — 2px height, full foreground color, top of page.

5. Layout Principles

• Single breakpoint at 600px — an unusually simple responsive system for a portfolio this polished. The implication is a deliberately minimal layout that works nearly identically on mobile and desktop.
• Main padding: 0px 8px — tight lateral padding, content-forward
• Header padding: 8px 8px 0 — compact navigation bar
• Footer padding: 0px 8px — matches main
• Sections have zero padding, relying on child spacing for rhythm
• Layout is almost certainly grid/flex-based per Tailwind conventions, but no explicit grid gaps are exposed in CSS

6. Depth & Elevation

Elevation is minimal and flat:

• The primary separation mechanism is background color: --background (#fff) vs --surface (#fafafa) vs --muted (#f4f4f5)
• Shadows are very light: rgba(0,0,0,0.05) 0px 1px 2px for small lift, rgba(0,0,0,0.1) 0px 4px 6px -1px for cards
• Borders use oklch(0.141/0.1) 0px 0px 0px 1px inset — an inner ring technique to avoid the “double border” problem with box-border sizing
• No blur effects, no glassmorphism, no dramatic shadows — the aesthetic is deliberately flat with just enough lift to convey interaction affordance

7. Do’s and Don’ts

Do:

• Use CSS custom properties for every color decision — never raw hex values in components
• Apply --link (#1447e6) for all hyperlinks consistently
• Use inset box-shadow for borders (avoids layout shift, cleaner at scale)
• Maintain the two-weight system: 400 for reading, 500 for labels/UI, 600 only for page title
• Use --expo-out easing for any UI transitions

Don’t:

• Introduce hue variation outside the defined --info, --success, --destructive status palette
• Use font-weight 700 — nothing on this site needs bold
• Use borders heavier than 1px
• Stack multiple shadows — keep depth single-layer
• Override Geist Sans with another typeface

8. Responsive Behavior

With only a 600px breakpoint, this design assumes near-identical behavior between phone and desktop. The implication:

• <600px: Likely collapses navigation, reduces content to single column
• ≥600px: Full layout, sidebar may appear, multi-column grid for component listings

The very simple breakpoint structure suggests most layout work is done through Tailwind’s flex/grid utilities rather than responsive CSS rewrites. Type sizes, spacing tokens, and surface colors remain constant across all widths.

9. Agent Prompt Guide

When recreating or referencing chanhdai.com:

“Design a clean developer portfolio with Geist Sans as the sole typeface, a Zinc-based neutral palette anchored by near-black #09090b on pure white. Use a full semantic token system: --background, --foreground, --muted, --border, --surface, --primary, --link. The only hue accent is link blue #1447e6. Typography: 30px/600 for page title (−0.75px tracking), 14–16px/400–500 for all UI. Buttons: filled primary (black bg) and ghost variants. Flat elevation using 1px inset box-shadow borders and 1–2px drop shadows. Single breakpoint at 600px.”

Generated by Sparkbites — extracted from live CSS analysis