name: Liquid Glass Bento colors: surface: '#faf9f6' surface-dim: '#dbdad7' surface-bright: '#faf9f6' surface-container-lowest: '#ffffff' surface-container-low: '#f4f3f1' surface-container: '#efeeeb' surface-container-high: '#e9e8e5' surface-container-highest: '#e3e2e0' on-surface: '#1a1c1a' on-surface-variant: '#42484a' inverse-surface: '#2f312f' inverse-on-surface: '#f2f1ee' outline: '#72787b' outline-variant: '#c2c7ca' surface-tint: '#4c626b' primary: '#041b23' on-primary: '#ffffff' primary-container: '#1a3038' on-primary-container: '#8198a2' inverse-primary: '#b3cad4' secondary: '#3b6750' on-secondary: '#ffffff' secondary-container: '#bdeed0' on-secondary-container: '#416d56' tertiary: '#251600' on-tertiary: '#ffffff' tertiary-container: '#3c2a0c' on-tertiary-container: '#ac906a' error: '#ba1a1a' on-error: '#ffffff' error-container: '#ffdad6' on-error-container: '#93000a' primary-fixed: '#cfe6f1' primary-fixed-dim: '#b3cad4' on-primary-fixed: '#071e26' on-primary-fixed-variant: '#344a52' secondary-fixed: '#bdeed0' secondary-fixed-dim: '#a2d1b5' on-secondary-fixed: '#002113' on-secondary-fixed-variant: '#234f3a' tertiary-fixed: '#fedeb2' tertiary-fixed-dim: '#e0c298' on-tertiary-fixed: '#281800' on-tertiary-fixed-variant: '#584323' background: '#faf9f6' on-background: '#1a1c1a' surface-variant: '#e3e2e0' body-text: '#2C3539' muted-text: '#5C676D' glass-fill: rgba(255, 255, 255, 0.75) glass-border: rgba(197, 168, 128, 0.22) typography: headline-lg: fontFamily: Playfair Display fontSize: 48px fontWeight: '700' lineHeight: '1.2' headline-md: fontFamily: Playfair Display fontSize: 32px fontWeight: '600' lineHeight: '1.3' headline-sm: fontFamily: Playfair Display fontSize: 24px fontWeight: '600' lineHeight: '1.4' body-lg: fontFamily: Plus Jakarta Sans fontSize: 18px fontWeight: '400' lineHeight: '1.6' letterSpacing: 0.5px body-md: fontFamily: Plus Jakarta Sans fontSize: 16px fontWeight: '400' lineHeight: '1.6' letterSpacing: 0.5px label-caps: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: '600' lineHeight: '1' letterSpacing: 3.5px headline-lg-mobile: fontFamily: Playfair Display fontSize: 32px fontWeight: '700' lineHeight: '1.2' rounded: sm: 0.25rem DEFAULT: 0.5rem md: 0.75rem lg: 1rem xl: 1.5rem full: 9999px spacing: grid-gap: 30px section-margin-y: 80px card-padding: 40px gutter: 24px

Design System: Nhi Võ About Resume Page (Liquid Glass Bento)

Project ID: [Pending - Enter your Google Stitch Project ID here]

1. Visual Theme & Atmosphere

The design system embodies a Modern Luxury & Liquid Glass aesthetic. The atmosphere is clean, airy, weightless, and highly professional—combining a structured layout with organic warmth. It mimics a page from a high-end luxury editorial, using translucent frosted-glass cards floating over blurred background colors to establish depth and high visual trust.

2. Color Palette & Roles

• Alabaster Warm Off-White (#FAF9F6): Primary page background. Provides a warm, premium, editorial base.
• Deep Navy/Teal Forest (#1A3038): Primary branding color. Used for headings, site titles, navigation, and primary button backgrounds.
• Rich Forest Green (#2E5A44): Primary accent. Used for highlighting metrics, key links, active hover states, and list bullet markers.
• Muted Gold/Sand (#C5A880): Secondary accent. Used for thin section headers, card borders, and timeline threads.
• Dark Charcoal (#2C3539): Primary body text. Selected for high legibility and contrast against the warm off-white and frosted-glass bases.
• Muted Slate Grey (#5C676D): Muted body text. Used for descriptions, dates, metadata, and background labels.

3. Typography Rules

• Headings (H1, H2, H3, H4): Set in Playfair Display (Serif). Used for names, greetings, and section titles to project luxury and editorial authority.
• Body & UI Elements: Set in Plus Jakarta Sans or Inter (Sans-Serif). Kept clean with normal weight (400) and slight letter-spacing (0.5px) to optimize scanning speed.
• Intro Labels: Small, uppercase caps (11px or 12px) with generous letter-spacing (3px to 4px) in Plus Jakarta Sans for metadata tags.

4. Component Stylings

• Buttons & CTAs: Generous, pill-shaped borders (30px rounded corners) with a solid Deep Navy (#1A3038) fill and white text. Smooth hover states transition to a transparent background with a Navy border and text, shifting slightly upwards (translateY(-2px)).
• Bento Cards: Medium-to-large rounded corners (24px border-radius) for an organic, curved appearance. Background is translucent frosted white (rgba(255, 255, 255, 0.75)) with a high background blur (backdrop-filter: blur(16px)). Bound by a thin, sand-tinted border (rgba(197, 168, 128, 0.22)).
• Elevation & Shadows: Uses a multi-layered, whisper-soft diffused drop shadow (box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02)) which deepens on hover (box-shadow: 0 25px 50px rgba(0, 0, 0, 0.04)) to simulate a physical sheet of glass floating off the surface.
• Timeline Nodes: Hollow circles bound by gold border lines, snapping to solid Forest Green (#2E5A44) with a soft outer green glow when active.

5. Layout Principles

• Asymmetric Bento Grid: Built on a responsive 3-column system on desktop. Larger elements (like the centric story quote) span 2 columns (col-span-2), while smaller elements (like stats or summary blocks) span 1 column, creating a visual rhythm.
• Whitespace & Margins: Generous vertical spacing (30px grid gap, 60px to 90px section margins) to let content breathe. Inner card paddings are kept spacious (40px padding).
• Layered Depth: Large, blurred background color blobs (Forest Green, Gold, and Navy) sit in a background container (z-index: -1, filter: blur(120px)) to provide the colors that render through the frosted glass elements.
• Mobile Responsiveness: All multi-column and Bento layouts smoothly collapse into a single-column grid (100% width cards) at viewport widths below 900px, maintaining clear vertical flow.