Documentation — GLASS ELEGANCE I

Complete design system documentation for the GLASS ELEGANCE I template. Includes color specifications, typography guidelines, and implementation details.

COLOR PALETTE

Deep Navy	`#0f1923`
Frosted White	`rgba(255, 255, 255, 0.08)`
Glass Border	`rgba(255, 255, 255, 0.12)`
Gold Accent	`#c9a84c`
Champagne	`#f7e7ce`

TYPOGRAPHY

TYPEFACE

Cinzel — A single typeface system. Weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold). Letter-spacing: 0.2em to 0.5em for display text. Body text: 0.85rem with 2em line-height.

GLASS EFFECTS

GLASS CARD

background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 2px;

GLASS NAVIGATION

background: rgba(15, 25, 35, 0.7);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);

ANIMATION

TRANSITIONS

Standard duration: 0.4s ease for hover states. Color transitions: 0.3s ease. Transforms scale on interaction for depth feedback. No jarring or excessive animation—maintain dignity.

RESPONSIVE

BREAKPOINTS

Desktop: 1200px max-width content areas. Tablet: 768px breakpoint collapses grids to single column. Mobile: Full-width layout with adjusted padding (2rem).