Documentation

Overview

This documentation serves as the authoritative reference for all Glass Elegance creative outputs. It defines the standards, systems, and methodologies that ensure consistency across every project we deliver.

These guidelines apply to all client deliverables, internal projects, and brand materials produced by the studio.

Design Standards

Core Principles

Every design decision must answer to three tests:

Light test — Does this element behave the way light would in this context?
Breath test — Does it have room to exist? Can it breathe?
Time test — Will this still be right in ten years?

Quality Thresholds

One typeface family per project (excluding code)
Maximum three primary colors plus tints
No element added purely for decoration
Every focal point must be intentional and singular
White space is a design element, not an absence

Typography System

Primary Typeface

Cormorant — A refined, high-contrast serif with roots in Renaissance calligraphy. Used for all headings, body copy, and display text.

font-family: 'Cormorant', Georgia, serif;
font-weight: 300, 400, 500, 600;
font-style: normal, italic;

Type Scale

H1 — clamp(2.8rem, 6vw, 5.5rem), weight 300
H2 — clamp(1.8rem, 3.5vw, 3rem), weight 300
H3 — clamp(1.3rem, 2.5vw, 1.9rem), weight 400
Body — 1.05rem, line-height 1.85, weight 400
Small — 0.88rem, letter-spacing 0.15em, uppercase

Color Palette

Primary Colors

Burgundy — #2d1b1b — Primary dark, backgrounds
Silver — #c0c0c0 — Accent, borders, secondary text
Ivory — #fffff0 — Primary text, headings

Glass Tints

Rose Glass — rgba(200,150,150,0.12) — Panel backgrounds
Rose Glass Alt — rgba(180,120,120,0.08) — Card overlays
Ivory Ghost — rgba(255,255,240,0.08) — Hover states

Components

Glass Panel

Primary container component. Creates the stained glass effect through backdrop-filter and subtle border treatments.

.glass-panel {
  background: rgba(200, 150, 150, 0.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 150, 150, 0.18);
}

Glass Card

Elevated variant for cards and interactive elements.

.glass-card {
  background: linear-gradient(150deg,
    rgba(200,150,150,0.14) 0%,
    rgba(180,120,120,0.08) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(200,150,150,0.20);
}

Grid & Layout

All layouts use a 12-column grid with a maximum width of 1200px and a gutter of 1.5rem. Containers use 2.5rem side padding on desktop, scaling down responsively.

Accessibility

All interactive elements keyboard navigable
Color contrast ratios meet WCAG AA for body text
Focus states visible with :focus-visible
Form labels always associated with inputs
Images include descriptive alt text

Production Notes

Export Standards

All final files delivered as PDF/X-1a for print
Digital assets at 2x resolution for retina displays
SVG preferred for icons and logos
All colors converted to sRGB for digital delivery

File Naming

[Client]-[Project]-[Asset]-[Version].[ext]
Example: GLSE-Brand-Logo-v03.svg

Contents