Chánh Đại

Overview

Chánh Đại is a design engineer's personal portfolio built on the principle of 'Precision Minimalism'—a design philosophy that strips away visual noise to reveal the essential craft of code and interaction. The brand serves fellow designers, developers, and creative technologists seeking inspiration from meticulous attention to detail and thoughtful implementation. The aesthetic is deliberately austere: a near-white canvas (#ffffff) punctuated by a warm, purposeful amber accent (#fbbf24) that appears only on interactive elements and moments of emphasis. The emotional response is one of clarity and confidence—the user feels they are in the hands of someone who understands that small details compound into excellence. The voice is direct, unpretentious, and technically grounded: 'Creating with code. Small details matter.' Every pixel serves a function; nothing is decorative.

Colors

The color system operates on a principle of 'functional minimalism,' where the palette is deliberately constrained to maximize the impact of intentional color choices. Primary (#fbbf24) is a warm, saturated amber reserved exclusively for interactive elements—buttons, links, and focus states—creating a clear visual hierarchy that guides the user's attention without distraction. The on-primary text color (#78350f) ensures WCAG AAA contrast (7.2:1) against the primary background. Surface colors form a tight grayscale stack: surface (#ffffff) as the base, surface-dim (#fafafa) for subtle depth, and surface-container variants stepping through #e4e4e7, #d4d4d8, and #c4c4c8 to create layered card and container backgrounds. On-surface (#09090b) is near-black (not pure black, which would feel harsh

Typography

The type system uses GeistSans as the primary typeface—a modern, geometric sans-serif that conveys technical precision while remaining warm and approachable. The hierarchy spans from display (60px, 700 weight, -0.04em letter-spacing) for hero moments down to label-sm (12px, 500 weight, 0.05em letter-spacing) for metadata and timestamps. Headline-lg (40px, 600 weight) anchors section introductions, while body-md (16px, 400 weight, 24px line-height) serves as the default reading size with generous line-height for accessibility and comfort. Label-md (14px, 500 weight, 0.01em letter-spacing) is used for button text and UI labels, maintaining visual weight without appearing heavy. GeistMono is reserved for code snippets, technical metadata, and monospaced contexts, always at 12px or smaller to

Layout

The layout follows a 12-column grid system with a container max-width of 1280px, ensuring content remains readable and scannable on all screen sizes. The page rhythm is governed by the spacing scale: lg (40px) separates major sections, md (24px) creates breathing room between cards and components, and sm (12px) provides internal padding within components. The gutter width is consistently 24px, creating a predictable margin on all sides. The design favors generous white space—surfaces are rarely filled edge-to-edge, instead floating with clear separation from their containers. This creates a sense of lightness and focus, allowing each element to breathe. The header uses minimal padding (8px vertical, 8px horizontal) to keep navigation compact and non-intrusive, while the main content area u

Elevation & Depth

Elevation in this system is achieved through subtle layering and border definition rather than dramatic shadows. The shadow palette is minimal: sm elevation (0 1px 2px rgba(0, 0, 0, 0.06)) is used for small interactive elements like buttons and badges, creating a barely-perceptible lift; md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) applies to cards and modals, providing clear separation from the background; lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) is reserved for dropdowns and floating panels that demand maximum visual prominence. Borders are the primary depth tool: all cards and contain

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—a balance between sharp, technical edges and approachable softness. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel friendly and clickable, contrasting with the angular nature of the content. Cards and containers use lg radius (1rem / 16px) to soften corners without appearing rounded, maintaining a modern, structured appearance. Input fields use DEFAULT radius (0.5rem / 8px) for a slightly tighter appearance that feels more technical and form-like. Badges and small UI elements use full radius (9999px)

Components

Action Elements Buttons are the primary interactive element and use the full primary color (#fbbf24) with on-primary text (#78350f) at 40px height with 10px 16px padding and full border-radius. The label-md typography (14px, 500 weight) ensures text is legible and prominent. On hover, the background shifts to primary-fixed-dim (#fcd34d) with a 200ms ease-out transition, creating a subtle brightening effect. Focus states add a 3px outset ring in rgba(251, 191, 36, 0.1). Secondary buttons use transparent backgrounds with a 1px border in outline-variant (#9f9fa9) and on-surface text, providing a lower-emphasis alternative. Ghost buttons (used for tertiary actions) have no border or background, relying on text color and hover state (background-color: surface-container, 150ms transition) fo

Do's and Don'ts

**Do**

• Do use primary (#fbbf24) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do maintain the 24px gutter and md spacing (24px) between sections to create breathing room and prevent visual clutter.
• Do apply the full border-radius (9999px) to buttons and badges to emphasize their interactive nature and create visual distinction from containers.
• Do use the surface-container color stack (#e4e4e7, #d4d4d8, #c4c4c8) for layered backgrounds to create depth without relying on shadows.
• Do apply 1px borders in surface-container-high (#c4c4c8) to all cards and containers for crisp visual boundaries.
• Do use GeistSans for all body text and headlines, reserving GeistMono for code and technical metadata only.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.1)) to cards on hover to create a subtle lift effect with a 200ms transition.
• Do ensure all interactive elements have a focus state with a 3px outset ring in rgba(251, 191, 36, 0.1) for keyboard accessibility.

**Don't**

• Don't use colors outside the defined palette—avoid bright reds, blues, or greens that would disrupt the minimalist aesthetic.
• Don't apply shadows to elements other than cards and modals; use borders instead to maintain visual precision.
• Don't use border-radius values other than those defined in the rounded scale (sm, DEFAULT, md, lg, xl, full); inconsistent rounding creates visual confusion.
• Don't exceed 24px padding inside cards or containers; excessive internal spacing dilutes the sense of structure.
• Don't use system fonts or fallback sans-serifs; always specify GeistSans or GeistMono to maintain brand consistency.
• Don't apply multiple shadows to a single element; the elevation scale is designed to be used exclusively, not layered.
• Don't use the primary color (#fbbf24) for non-interactive elements like backgrounds or text; reserve it for CTAs and focus states only.
• Don't apply transitions longer than 200ms for hover and focus states; faster interactions feel more responsive and precise.