Diaels Jewelry

Overview

Diaels Jewelry embodies Architectural Minimalism—a design philosophy that treats luxury as the absence of excess. The brand celebrates handcrafted pieces through a refined, gallery-like interface that prioritizes the product over decoration. The aesthetic is deliberately austere: clean white surfaces (rgb(255, 255, 255)), deep navy accents (#0b193e), and warm earth tones (#562524) create a sophisticated backdrop where jewelry becomes the focal point. The UI evokes the feeling of stepping into a high-end boutique: serene, intentional, and unhurried.

The brand voice is confident yet approachable—never breathless or hyperbolic. Diaels speaks with the precision of a craftsperson: "Your Story, Set in Stone" conveys narrative depth without sentimentality. Vocabulary favors concrete terms (handcrafted, radiant, heirloom) over marketing clichés. Tone is warm but measured, inviting customers to invest in pieces that will outlast trends. Example sentence: "Each ring is designed to mark the moments that matter most—refined, radiant, and uniquely yours."

Colors

The Diaels color system operates on a principle of restraint and contrast. Primary white (#ffffff) serves as the dominant surface, creating breathing room and emphasizing product photography. The true accent color is deep navy (#0b193e), used sparingly on CTAs ("SHOP NOW" buttons), links, and focus states—it signals intention and luxury without aggression. Secondary earth tones—warm terracotta (#562524) and teal (#108474)—appear in hero sections and collection highlights, evoking natural materials and gemstone palettes. Neutral grays (#121212 for text, #666666 for secondary text, #eeeeee for dividers) maintain legibility and hierarchy. The color stack follows Material 3 conventions: surface-container-lowest (#f9f9f9) for subtle backgrounds, surface-container (#eeeeee) for interactive state

Typography

The type system pairs Cormorant Garamond—a high-contrast serif with classical proportions—for display and headline levels (74px, 48px, 36px), establishing luxury and heritage. Poppins, a geometric sans-serif, handles body copy (16px–18px) and maintains readability at smaller scales. Assistant, a humanist sans-serif, bridges the gap for labels and metadata (14px–20px). This pairing creates visual hierarchy through contrast: serifs signal timelessness, sans-serifs signal clarity. Display text (74px, 500 weight, -0.02em letter-spacing) commands attention without aggression; body text (16px, 400 weight, 0.06rem letter-spacing) breathes with generous line-height (24px). On small labels over product images, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Headlines use -0.0

Layout

Diaels employs a 12-column grid with a maximum container width of 1600px, allowing flexibility across desktop and mobile. The gutter is set to 50px on desktop, creating generous white space that mirrors the brand's minimalist philosophy. Section spacing uses the lg token (40px) for major divisions, md (24px) for component clusters, and sm (12px) for micro-interactions. Hero sections span full-width with asymmetric layouts—product imagery on the right, copy on the left—creating dynamic visual tension while maintaining clarity. Collection grids use 4 columns on desktop, 2 on tablet, 1 on mobile, with consistent 28px horizontal spacing and 8px vertical spacing between items. The page rhythm prioritizes whitespace: sections are separated by 40px–64px vertical margins, allowing the eye to rest

Elevation & Depth

Diaels uses minimal shadow elevation to maintain its clean, architectural aesthetic. Depth is conveyed primarily through color contrast and spatial arrangement rather than dramatic shadows. Level 1 (Base): flat white surface (rgb(255, 255, 255)) with no shadow. Level 2 (Cards/Containers): subtle shadow 0 3px 8px rgba(0, 0, 0, 0.15) applied only to interactive elements like product cards on hover, creating a gentle lift. Level 3 (Modals/Overlays): slightly stronger shadow 0 15px 30px rgba(0, 0, 0, 0.05) for modals and dropdown menus, maintaining visual hierarchy without overwhelming the interfa

Shapes

Diaels employs Architectural Sharpness—a design language of precise, minimal curves that reflect the precision of jewelry craftsmanship. Border-radius is kept minimal: buttons and inputs use 0–4px (DEFAULT), creating clean, almost-square forms that feel intentional and refined. Product cards use 8px (md) for subtle softening without compromising the structured aesthetic. Navigation elements and badges use 10px (lg) for slightly more breathing room. The full (50%) radius is reserved exclusively for circular elements like avatar placeholders or toggle switches. This hierarchy—sharp corners for p

Components

Action Elements Buttons are the primary interaction mechanism and must communicate luxury through restraint. The primary button uses a white background (rgb(255, 255, 255)) with a 1px navy border (#0b193e) and navy text, creating a clean, inverted aesthetic. On hover, the button fills with a light gray background (#f3f3f3) and maintains navy text, providing clear feedback within 200ms. The secondary button inverts this: navy background (#0b193e) with white text (rgb(255, 255, 255)), used for high-priority CTAs like "SHOP NOW." Both buttons use 16px Jost font-family with 16px font-size and 48px height, maintaining consistent touch targets. Padding is 16px horizontal, 0px vertical (height handles vertical centering). Focus states add a 3px outline in rgba(11, 25, 62, 0.2) at 3px offset,

Do's and Don'ts

**Do**

• Do use white space generously—minimum 40px between major sections—to reinforce the gallery-like, unhurried aesthetic.
• Do apply navy (#0b193e) exclusively to interactive elements (buttons, links, focus states) to create consistent visual language and guide user attention.
• Do pair Cormorant Garamond headlines with Poppins body copy to create clear hierarchy through serif/sans-serif contrast.
• Do maintain 1px borders on buttons and inputs rather than shadows to preserve architectural precision and luxury positioning.
• Do use 200ms ease-in-out transitions for all hover/focus states to provide smooth, intentional feedback without feeling sluggish.

**Don't**

• Don't use rounded corners larger than 10px—excessive rounding undermines the brand's architectural, precision-focused aesthetic.
• Don't apply shadows to primary buttons or cards by default; reserve shadows for modals and overlays only.
• Don't use more than two accent colors (navy + earth tones) in a single section; visual restraint is core to the brand.
• Don't set body text smaller than 16px or larger than 18px; readability must never be sacrificed for design aesthetics.
• Don't use system fonts or generic sans-serifs; always load Cormorant Garamond, Poppins, and Assistant to maintain brand consistency.