2. Global Theme Settings & Design System• 5 min read 2. Global Theme Settings & Design System
Configure champagne gold accent tokens, serif headings, micro-animations, product card hover modes, container widths, and architectural spacing.
2. Global Theme Settings & Design System
Novakrift is built upon an architectural design system powered by CSS custom properties and high-fashion editorial typography tokens.
2.1 Managing Color Schemes & Champagne Gold Accent Tokens
- **Accent Color:** Champagne Gold (`#A6793E` / `--color-accent-gold`)
- **Background Surface:** Editorial Cream (`#F5F1E8` / `--color-bg-primary`)
- **Typography Dark:** Obsidian Noir (`#1A1A1A` / `--color-text-primary`)
- **Border Lines:** Sandstone (`#E5DFCF` / `--color-border-subtle`)
2.2 Typography Setup (Serif Headings & Body Fonts)
- **Serif Headings:** *Playfair Display* with wide letter-spacing (`tracking-tight` / `font-serif-luxury`).
- **Body Text:** *Inter* for clean legibility across mobile & desktop.
2.3 Micro-Animations & Product Card Hover Modes
- Card hover effect swaps to 2nd product image, reveals size pills (XS, S, M, L), and enables instant color swatch previews.
2.4 Container Widths & Architectural Spacing
- Standard container max-width set to `1280px` (`max-w-7xl`). Hero split media supports full-bleed 100vw viewport sizing.