Keyzar Jewelry

Overview

Keyzar Jewelry embodies **Architectural Minimalism**—a design philosophy that strips away ornamentation to reveal pure, intentional form. The brand serves affluent, discerning customers seeking custom engagement rings and fine jewelry that transcend fleeting trends. The visual language is deliberately restrained: a monochromatic palette anchored in black (#000000) and white (#ffffff), paired with warm accent tones (terracotta #e86c5c, soft gold #f7d9b5) that evoke the precious materials at the heart of the collection. The UI conveys quiet confidence and timeless sophistication, allowing the jewelry itself—and the customer's emotional journey—to remain the focal point.

Keyzar's voice is refined yet approachable, never precious or condescending. The tone favors clarity over flourish: "Save 25% Sitewide" and "Your Sunsent Proposal" speak directly to life's pivotal moments without sentimentality. Typography choices reinforce this: TheSeasons (a serif display font) paired with ProximaNova (a clean, geometric sans-serif) creates visual tension between heritage and modernity. The brand personality is consultative—Keyzar positions itself as a trusted guide through the engagement and wedding jewelry journey, not a distant luxury authority.

Colors

The color system is built on a **high-contrast, jeweler-centric palette** that mirrors the luxury jewelry industry's visual conventions while maintaining contemporary restraint. **Primary (#000000)** is the dominant accent—used on CTAs, navigation, and interactive elements—creating decisive visual hierarchy. **On-Primary (#ffffff)** ensures legibility on dark backgrounds. The **surface stack** (ranging from #ffffff at surface-bright to #d8d8d8 at surface-container-highest) provides subtle depth without sacrificing the clean, minimalist aesthetic; the progression uses increments of 5–10% opacity shifts rather than dramatic jumps. **Secondary (#e86c5c)**, a warm terracotta, appears on accent elements, badges, and supporting CTAs, evoking the warmth of rose gold and precious metals. **Tertiar

Typography

The type system balances **classical elegance with contemporary clarity**. **Display (70px, weight 300, TheSeasons)** is reserved for hero headlines—its light weight and serif character evoke heritage and timelessness, while the generous 80px line-height ensures breathing room on premium hero sections. **Headline-lg through headline-md** (48px–32px, weight 600, ProximaNova) handle section titles and card headers, using the geometric sans-serif to ground the design in modernity. **Body-lg and body-md** (18px–16px, weight 400) serve product descriptions and body copy, maintaining 24–28px line-heights for comfortable reading at all sizes. **Label-md (13.12px, weight 600)** is applied to button text and form labels, with 0.01em letter-spacing to add subtle refinement. All interactive text uses

Layout

Keyzar employs a **fluid 12-column grid** with a max-width of 1280px, centered on desktop and full-bleed on mobile. The **gutter spacing is 24px** (md unit), creating a balanced rhythm between content blocks. **Section separation uses lg spacing (40px)** vertically, while **card padding uses md spacing (24px)** internally. The hero section spans full-width with a warm beige background (#f7ede5 or #e4c5ab), anchoring the page with emotional resonance. Product grids use 3–4 columns on desktop, collapsing to 2 on tablet and 1 on mobile. **Container max-width of 1280px** ensures readability without excessive line lengths. Whitespace is treated as a design element: generous margins around CTAs (40px lg spacing above/below), breathing room between navigation items (24px gutter), and minimal padd

Elevation & Depth

Keyzar uses **subtle, restrained shadow treatment** to create depth without visual heaviness. **Level 1 (Base)**: No shadow; flat surfaces at surface-container-lowest (#f5f5f5) or surface (#ffffff). **Level 2 (Standard Cards)**: `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` applied to product cards, form containers, and modals—a soft, diffuse shadow that suggests gentle elevation. **Level 3 (Hover/Elevated States)**: `box-shadow: 0 0 18px rgba(0, 0, 0, 0.2)` on card-hover and interactive overlays, creating a more pronounced lift. Buttons use no shadow in default state; on hover, they transition

Shapes

The shape philosophy is **Refined Geometry**—combining sharp, architectural lines with selective softness to balance precision and approachability. **Buttons use full radius (9999px)**, creating pill-shaped forms that feel contemporary and friendly while maintaining the luxury aesthetic. **Cards and containers use md radius (0.75rem / 12px)**, a subtle curve that softens corners without appearing playful or casual. **Input fields use DEFAULT radius (0.5rem / 8px)**, a minimal curve that preserves the technical, form-like character of inputs. **Dividers and borders are sharp (0px radius)**, rei

Components

Action Elements **Button-primary** (black background, white text, pill-shaped, 48px height, 12px 24px padding) is the dominant CTA, used for "Shop Engagement Rings," "Book Appointment," and checkout actions. On hover, the background transitions to primary-fixed (#404040) with a 200ms ease-in-out timing, maintaining contrast while signaling interactivity. **Button-secondary** (transparent background, black border 2px, black text) is used for secondary actions like "See what our clients have to say"—it maintains visual hierarchy through restraint. On hover, the background fills with surface-container-high (#e2e2e2), creating a subtle press effect. **Button-ghost** (no border, transparent background, black text) is reserved for tertiary actions and navigation links; on hover, it gains a l

Do's and Don'ts

**Do**

• Do use black (#000000) and white (#ffffff) as the primary contrast pair—they reinforce the luxury, minimalist aesthetic and ensure accessibility (WCAG AAA compliance).
• Do apply the full-radius pill shape exclusively to buttons and CTAs to signal interactivity; avoid using it on cards or containers, which would dilute its meaning.
• Do maintain the 24px gutter spacing between grid columns and 40px lg spacing between sections—this rhythm is fundamental to the brand's refined pacing.
• Do use ProximaNova for all body and label text, and reserve TheSeasons serif for display headlines only—mixing them elsewhere dilutes the intentional typographic hierarchy.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) consistently to elevated surfaces; avoid custom shadows that deviate from this palette.

**Don't**

• Don't use the secondary color (#e86c5c) as a primary CTA background—it's reserved for accents and badges. Primary CTAs must remain black (#000000) to maintain visual authority.
• Don't apply rounded corners to dividers, borders, or grid lines—they must remain sharp (0px radius) to reinforce the architectural minimalism.
• Don't exceed 3 levels of shadow elevation; the system uses only base (none), md (0 3px 8px), and lg (0 0 18px). Custom shadows create visual inconsistency.
• Don't use the tertiary blue (#3860be) for primary interactive elements; it's a supporting accent only. Overuse dilutes the black/white contrast hierarchy.
• Don't reduce button padding below 12px vertical or 24px horizontal—the 48px height and generous padding reinforce the premium, spacious feel of the brand.