Switch between the rendered Visual preview and the Raw DESIGN.md.
Vogue Jewellers embodies timeless luxury and heritage craftsmanship rooted in Sri Lankan fine jewellery tradition. The design system balances classic elegance with contemporary refinement, presenting curated collections through sophisticated imagery and refined typography. The atmosphere is aspirational yet accessible—celebrating the beauty of precious stones and metals while maintaining an air of exclusivity. Rich jewel tones complement warm metallics, creating depth and visual richness that evokes the sparkle and prestige of fine jewellery. The design prioritizes whitespace and clarity to let product photography breathe, while strategic use of gold and deep charcoal grounds the brand in timeless luxury.
Key Characteristics
#0B0B0B): Dominant text, navigation, and high-contrast backgrounds; primary interface color#FFFFFF): Hero card backgrounds, main content surfaces#F8F8F8): Page backgrounds and subtle section dividers#BD9142): Primary luxury accent, secondary CTA elements, premium brand marker#AADDDD): Decorative accents, highlights in product cards, subtle UI flourishes#CEB887): Warm neutrals for borders and secondary surfaces#BD9142): Primary interactive text and "VIEW DETAILS" buttons#0B0B0B): Navigation links and secondary interactive elements#6E6E6E): Secondary text, metadata, reduced-emphasis copy#D0D0D0): Borders, subtle dividers, disabled states#FCFBFE): Subtle background tint for differentiation#E9E6ED): Secondary background tone, card backgrounds#000000): High-contrast text overlays, strong CTAs#F8F8F8): Product card backgrounds, content containers#D0D0D0): Card borders, subtle separation lines#CF2E2E): Error messages and validation failures#FFBA00): Warning alerts and cautionary states#008A20): Success confirmations and positive actions#2EA2CC): Necklace and gemstone category indicator#AA0000): Ring and precious stone category marker#008A20): Success and gemstone accent#720EEC): Premium tier and exclusive offers marker#958E09): Heirloom and classic collection indicatorPrimary: Urbanist, sans-serif
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Secondary: Urbanist, sans-serif (consistent throughout)
Fallback: system fonts as above
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/Hero | Urbanist | 48px | 700 | 56px | -0.5px | Hero taglines, major section headings |
| Heading 1 | Urbanist | 36px | 700 | 44px | -0.3px | Page titles, large section headers |
| Heading 2 | Urbanist | 28px | 700 | 36px | -0.2px | Subsection headers, collection titles |
| Heading 3 | Urbanist | 24px | 700 | 32px | 0px | Card titles, "Our Best Sellers" type headers |
| Heading 4 | Urbanist | 20px | 700 | 28px | 0px | Smaller headings, product category names |
| Body Large | Urbanist | 16px | 400 | 24px | 0px | Main body text, navigation items |
| Body Regular | Urbanist | 16px | 400 | 24px | 0px | Standard paragraph text |
| Body Emphasis | Urbanist | 16px | 600 | 24px | 0px | Bold inline text, "VIEW DETAILS" buttons |
| Caption | Urbanist | 14px | 400 | 20px | 0.5px | Metadata, product descriptions, fine print |
| Label | Urbanist | 12px | 600 | 16px | 0.5px | Form labels, tags, badges |
| Button Text | Urbanist | 16px | 600 | 20px | 0px | CTA button copy, "INQUIRE NOW" style |
| Link | Urbanist | 16px | 400 | 24px | 0px | Inline and standalone links |
| Link Accent | Urbanist | 16px | 600 | 24px | 0px | Gold-colored "VIEW DETAILS" links |
Urbanist for brand cohesion and modern luxury feel#0B0B0B (Deep Charcoal)#FFFFFF (White)16px 32px0px (sharp corners, modern luxury aesthetic)none20px#2A2A2A (slightly lighter charcoal), text white, cursor pointer#000000 (pure black), increased letter-spacing 0.5px#D0D0D0, text #6E6E6E, cursor not-allowedtransparent#BD9142 (Warm Gold)8px 0px0px1px solid #BD914224px#BD9142, text #FFFFFF, transition 200ms#A0763B (darker gold), text whitetransparent#0B0B0B (Deep Charcoal)0px (no padding for navigation items)0pxnone24px#BD9142, underline 1px solid #BD9142, font-weight 600#BD9142, font-weight 600#F8F8F8 (Off-White)1px solid #D0D0D08px16px0px 2px 8px rgba(11, 11, 11, 0.08)0px 8px 24px rgba(11, 11, 11, 0.12), transform translateY(-4px)border-radius: 4px, background #FCFBFE#FFFFFF (left) to #F8F8F8 (right)40px 48px0px (full-width hero sections)360px#FFFFFF48px 32px1400px0 auto0px#FFFFFF1px solid #D0D0D00px12px 16px#0B0B0B2px solid #BD9142, outline none, box-shadow 0px 0px 0px 3px rgba(189, 145, 66, 0.1)#6E6E6E, font-weight 400, opacity 0.7#0B0B0B8px0.5px20px20px2px solid #D0D0D02px#BD9142, border 2px solid #BD9142#FFFFFF#FFFFFF16px 32px (horizontal), 12px (vertical)flex, justify-content: space-between, align-items: center1px solid #E9E6ED#0B0B0B8px 16pxnone#BD9142, font-weight 600, border-bottom 2px solid #BD9142#BD9142, border-bottom 3px solid #BD9142, font-weight 70032px32pxtransparentnone#0B0B0B#BD9142#AADDDD (Rose Gold)#0B0B0B6px 12px4pxinline-block#720EEC (Amethyst)#FFFFFF6px 12px4pxtransparentnone2px solid transparent#6E6E6E12px 20pxtransparent3px solid #BD9142#0B0B0BBase Unit: 4px
Scale:
4px: Minimal gaps, icon spacing8px: Tight component spacing, small margins12px: Form control padding, small card padding16px: Standard padding, nav spacing, medium margins20px: Large padding, section spacing24px: Heading margins, card padding28px: Spacing between card groups32px: Section padding, container spacing36px: Vertical rhythm between major sections40px: Large section padding44px: Extra large component padding48px: Hero section padding, max spacingUsage Context:
12px–16px padding (y) × 24px–32px (x)16px–24px32px–48px vertical12px–16px vertical, 16px–20px horizontal1400px (default container max-width)32px on desktop, 20px on tablet, 16px on mobile#FFFFFF) and off-white (#F8F8F8) backgrounds for visual rhythm400px on desktop, 300px on mobile24px between columns and rowsWhitespace is intentional and luxurious, reflecting the premium nature of fine jewellery. Large gaps between products and sections allow imagery to command attention and showcase craftsmanship. Margins and padding follow the 4px base unit scale, creating a cohesive rhythm. Section breaks use background color shifts rather than heavy borders or dividers. Typography leading (line-height) is generous to maintain elegant readability. Negative space is treated as a design element equal to positive elements.
0px: Buttons, major containers, hero sections (sharp, modern luxury)2px: Checkboxes, radio buttons (minimal rounding)4px: Small badges, form inputs, secondary elements8px: Product card images, card containers, moderate rounding12px: Large cards, expanded containers, softer appearance| Level | Treatment | Use |
|---|---|---|
| Ground (L0) | No shadow, box-shadow: none | Flat backgrounds, base surfaces, page background |
| Raised (L1) | box-shadow: 0px 2px 8px rgba(11, 11, 11, 0.08) | Product cards at rest, subtle elevation, form inputs |
| Floating (L2) | box-shadow: 0px 8px 24px rgba(11, 11, 11, 0.12) | Product cards on hover, dropdown menus, modals |
| Overlay (L3) | box-shadow: 0px 16px 48px rgba(11, 11, 11, 0.16) | Full-page modals, critical overlays, top navigation on scroll |
Shadow Philosophy
Shadows are subtle and restrained, befitting a luxury aesthetic. Rather than dramatic depth, shadows suggest gentle elevation and interactivity. All shadows use the primary charcoal (#0B0B0B) with low opacity (8–16%) to maintain sophistication. Shadows increase only on hover or active states to signal interactivity. Modal and overlay shadows are more pronounced to create clear layering and focus. Cards never exceed L2 elevation to maintain visual coherence and avoid visual clutter.
#BD9142) sparingly for primary CTAs and interactive elements to guide user focus0px border radius to major buttons and hero sections to reinforce modern luxury aesthetic24px–48px) between sections to create premium breathing room#F8F8F8) and lavender (#FCFBFE) backgrounds to subtly differentiate sections without heavy borders#0B0B0B) as primary text color; ensure WCAG AA contrast on all backgrounds#2EA2CC, #AA0000, #008A20) for category badges and semantic status onlyborder-radius: 8px to product card images to soften photography while keeping card containers sharp24px gaps to highlight individual pieces24px) on interactive elements; limit overlay shadows to true overlays8px) with sharp corners (0px) on related components; maintain consistency16px on product cards or less than 8px on form inputs#000000) for body text; reserve it for high-contrast overlays only32px or above 48px; maintain rhythm| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | 1-column grid, full-width sections, 16px horizontal padding, reduced hero min-height: 300px, 14px heading sizes reduced 15%, touch targets 44px × 44px |
| Tablet | 768px–1023px | 2-column product grid, 24px section padding, 32px horizontal container padding, hero min-height: 350px, heading sizes reduced 10% |
| Desktop | 1024px–1399px | 4-column product grid, 32px section padding, 40px horizontal container padding, hero min-height: 400px |
| Large Desktop | 1400px+ | Max-width 1400px container centered, 4-column grid maintained, 48px section padding |
44px × 44px for all interactive elements (buttons, links, form controls)14px 24px (16px text + padding = 44px min height)16px surrounding text on all sides40px × 40px minimum, centered icon at 24px44px, padding 12px 16px44px minimum height in mobile menuHeader Navigation (Desktop → Mobile):
16px spacing100vw width, dark overlay rgba(11, 11, 11, 0.5)Product Grid (4-col → 2-col → 1-col):
24px gap, 100% utilization20px gap, responsive card width16px margin each sideHero Section:
400px, two-column layout (text left, image right)320px, stacked or overlaid text on image280px, single-column stacked, font sizes reduced 20%Form & Input Behavior:
Image Scaling:
100vw, no overflow#0B0B0B) background, white text; gold hover (#BD9142)#BD9142) text, underline on hover#F8F8F8), Light Lavender (#FCFBFE), White (#FFFFFF)#0B0B0B)#6E6E6E)#D0D0D0)#AADDDD), Warm Gold (#BD9142)#AADDDD) bg, charcoal text#720EEC) bg, white text#CF2E2E)#FFBA00)#008A20)Urbanist font at 16px for body, 24px–48px for headings; fallback to system sans-serif0px on buttons and major containers; use 8px only on cards and images#0B0B0B (Deep Charcoal) as primary text color against white/light backgrounds; reserve black (#000000) for high-contrast overlays only#BD9142) signals interactivity—use on hover states, links marked "VIEW DETAILS", and secondary CTAs exclusively24px blur-radius except on modals; use only 8–16% opacity4px; all padding/margin values must be multiples of 4 (8, 12, 16, 20, 24, 28, 32, 36, 40, 48)24px gaps; collapse to 2-col at 768px, 1-col at 320px44px × 44px; buttons minimum 44px height, form inputs minimum 44px height12px 16px paddingtranslateY(-4px) for card elevation on hover280px, tablet 320px, desktop 400px; adjust heading sizes proportionally#CF2E2E (error), #FFBA00 (warning), #008A20 (success)