Pearl Perfect Design Room

Overview

Pearl Perfect Design Room is a luxury bespoke jewellery consultancy specializing in custom engagement rings and fine jewellery remodelling. The brand aesthetic embodies 'Refined Minimalism with Romantic Accents'—a design philosophy that marries architectural restraint with delicate, emotionally resonant details. The visual language prioritizes negative space, sophisticated typography, and a carefully curated palette of warm metallics (#d4a574), soft rose (#f78da7), and pristine whites (#ffffff), creating an atmosphere of timeless elegance and intimate craftsmanship. The UI evokes the feeling of stepping into a high-end design studio: calm, unhurried, and deeply intentional.

The brand voice is consultative and refined—never pushy, always knowledgeable. Tone is warm yet professional, with vocabulary drawn from jewellery heritage and design craft ('bespoke,' 'signature,' 'remodelling,' 'consultation'). The brand speaks to clients as partners in creation, not transactions. Example sentence in brand voice: 'Let's craft a ring that tells your story—one that feels as timeless as your commitment.'

Colors

The color system balances warmth and restraint. Primary (#d4a574) is a warm champagne-gold used exclusively for interactive elements—buttons, links, focus states, and key brand moments. It appears sparingly but decisively, signalling intention and luxury. Secondary (#f78da7) is a soft rose accent reserved for highlights, badges, and emotional moments (testimonials, special collections). Tertiary (#006799) provides a cool counterpoint for informational elements and secondary navigation. The surface stack is anchored in pure white (#ffffff) with carefully graded neutrals for depth: surface-container-low (#f0eeec) for subtle backgrounds, surface-container (#e8e5e3) for cards, and outline-variant (#c8c3c2) for borders. On-surface text is a sophisticated charcoal (#333333) for primary content a

Typography

The type system pairs Cormorant Garamond (serif, 300–700 weights) for all editorial and heading content with Poppins (sans-serif, 500–700 weights) for labels, navigation, and UI text. Cormorant's high contrast and elegant proportions communicate luxury and heritage; Poppins provides clarity and modernity in functional contexts. Display (64px, 700 weight, -0.02em tracking) anchors hero sections; Headline-lg (51px, 500 weight) is used for page titles like 'Bespoke Ring Design'; Body-md (14px, 500 weight) carries primary content. Label-md (14px, 600 weight, 0.08em tracking in Poppins) is applied to buttons and navigation to ensure legibility and visual separation. All serif body text uses 24px line-height (1.71 ratio) to accommodate the letterforms' elegance. Apply subtle text-shadow: 0 1px 2

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. The gutter is consistently 24px, creating breathing room between sections. Hero sections use asymmetric layouts (text on left, imagery on right) with 40px (lg spacing) between major sections. Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile. The design favours generous white space—minimum 40px vertical separation between content blocks—reflecting the brand's 'unhurried luxury' philosophy. Narrow text columns (max 600px) are used for body copy to maintain readability of the serif typeface. Navigation sits in a fixed header with 12px vertical padding and 24px horizontal gutter. Section rhythm alternates between full-width imagery and constrained

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid border in outline-variant (#c8c3c2) with box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), creating a barely-perceptible lift. Level 3 (Modals & Overlays): box-shadow: 0 8px 32px rgba(0, 139, 219, 0.15), introducing a cool-toned shadow that references the tertiary blue and suggests depth without heaviness. Hover states on cards transition the shadow from Level 2 to Level 3 over 200ms (cubic-bezier(0.4, 0, 0.2, 1)), signalling inte

Shapes

The shape philosophy is 'Architectural Softness'—sharp enough to feel contemporary and precise, soft enough to feel approachable. Buttons use 4px border-radius (0.5rem), creating a subtle roundness that avoids both hard rectangles and overly playful pill shapes. Cards use 12px border-radius (0.75rem) for a slightly more relaxed container feel. Input fields and smaller UI elements use 4px (DEFAULT). The logo lockup uses a 2px border frame with 8px internal padding, creating a contained, gallery-like presentation. Navigation links have no border-radius (sharp baseline), but hover states introduc

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses 48px height, 16px vertical padding, 32px horizontal padding, 2px solid border in primary gold (#d4a574), and Poppins 14px 600 weight with 0.08em tracking. On hover, the background shifts to primary-fixed-dim (#d4a574) with a 200ms ease transition. Button-secondary mirrors the primary structure but with transparent background and primary gold text; on hover, it gains a surface-container-low (#f0eeec) background while maintaining the border. Both buttons use cursor: pointer and box-shadow: 0 2px 8px rgba(212, 165, 116, 0.12) on active state to signal press depth.

Containers & Surfaces Cards are the primary content container. Base card uses surface (#ffffff) background, 12px border-radius, 24px padding

Do's and Don'ts

**Do**

• Do use primary gold (#d4a574) exclusively on CTAs and interactive focus states—it is the brand's signature accent and must remain rare and intentional.
• Do maintain 40px minimum vertical spacing between major content sections to preserve the 'unhurried luxury' aesthetic.
• Do pair Cormorant Garamond serif for all headlines and body copy with Poppins sans-serif for navigation and labels—never mix them within a single text block.
• Do apply the cool-toned shadow (rgba(0, 139, 219, 0.15)) on elevated cards to create brand-distinctive depth that references gemstone clarity.
• Do use the full 12-column grid and respect the 24px gutter to maintain visual rhythm across all screen sizes.

**Don't**

• Don't use primary gold (#d4a574) as a background fill or for body text—it must remain an accent for interactive elements only.
• Don't apply harsh shadows (box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)) or dark overlays; the brand aesthetic is light, refined, and ethereal.
• Don't mix serif and sans-serif fonts within a single heading or paragraph—maintain clear functional separation between Cormorant and Poppins.
• Don't reduce padding below 12px or border-radius below 4px on interactive elements; the brand values breathing room and clarity.
• Don't use secondary rose (#f78da7) or tertiary blue (#006799) as primary CTAs—they are supporting accents only; primary gold is the only CTA color.