Switch between the rendered Visual preview and the Raw DESIGN.md.
Blume Beauty's design system embodies luxury and sophistication through a refined balance of deep, elegant backgrounds with warm metallic accents. The aesthetic combines premium beauty salon sensibilities—opulent yet accessible—with a modern, minimalist layout that emphasizes high-quality imagery and intentional whitespace. The palette evokes timeless elegance through deep charcoal and black foundations, elevated by warm gold tones that suggest sophistication and professional expertise. Typography is bold and confident, complemented by refined serif and sans-serif combinations that convey both artistry and trustworthiness. This is a design language built for visual storytelling, where client transformations are the hero and the interface recedes to let beauty shine through.
Key Characteristics
#C59D5F): Primary call-to-action buttons, navigation highlights, premium service badges, section dividers, and brand accent elements. Used throughout for visual emphasis and luxury positioning.#01020F): Primary background for hero sections and full-bleed dark areas, conveying elegance and visual containment for photography.#5BC0DE): Secondary accent for hover states and interactive feedback, providing visual contrast without competing with gold.#5E3E48): Tertiary accent for subtle brand personality and secondary decorative elements.#FFF5C1): Soft highlight and background tint for section transitions, maintaining warmth while reducing contrast fatigue.#C59D5F): Primary CTA button backgrounds, navigation active states, and bookings.#5BC0DE): Hover effects, focus states, and interactive feedback for secondary actions.#C3C3C3): Footer and secondary navigation links with hover transition to white.#F7F7F7): Primary page background, card surfaces, and content sections. Used most frequently for readability and breathing room.#FFFFFF): Card highlights, modal backgrounds, and contrast elements against dark sections.#000000): Primary body text and high-contrast headings on light backgrounds.#818A91): Secondary body text, captions, and muted navigation. Most-used neutral in the system.#D4D4D4): Borders, dividers, and subtle background variations.#252525): Alternative dark text with slightly less intensity than pure black.#D4D4D4): Card borders, section dividers, and subtle outline strokes.#C3C3C3): Form input borders and input field outlines.#494C4F): Section separators and low-contrast delineation.#39B54A): Booking confirmations, form validation success, and positive feedback messaging.#FDD822): Alert states, important notices, and attention-drawing notifications.#EA4335): Form validation errors, alert messages, and critical system feedback.#CF2E2E): High-priority error states and warning overlays.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | Montserrat | 45px | 800 | 58.5px | 0px | Hero headlines, bold brand statements |
| Heading Large (H2) | Montserrat | 45px | 800 | 58.5px | 0px | Section headings, major content dividers |
| Heading Medium (H3) | MonteCarlo | 30px | 400 | 42.3px | 0px | Decorative accent headings, serif elegance |
| Heading Small (H4) | Montserrat | 30px | 800 | 42.3px | 0px | Subsection titles, card headers |
| Subheading (H6) | DM Sans | 18px | 500 | 19.8px | 0px | Section labels, emphasis text |
| Body Large | Jost | 19px | 400 | 24.7px | 0px | Primary body paragraphs, service descriptions |
| Body Small | Jost | 15px | 400 | 35px | 0px | Secondary body, metadata, captions |
| Navigation Link | DM Sans | 17px | 400 | 17px | 0px | Menu items, navigation labels |
| Link/Button Text | DM Sans | 17px | 400 | 17px | 0px | Hyperlinks, action text |
| Button Label | Arial | 13.33px | 400 | 13.33px | 0px | CTA button text, form buttons |
#C59D5F#FFFFFF18px 20px0px#B8935A, text remains white#A87E50#F7F7F718px 20px0px1px solid #F7F7F7#F7F7F7, text color #01020F#F7F7F750px × 50px18px 20px0px#C59D5F#F7F7F70px88px (vertical centering context)#C59D5F, underline 2px solid #C59D5F#C59D5F, smooth transition#C3C3C36px 0px#FFFFFF#C3C3C30px#FFFFFF#FFFFFF8px1px solid #D4D4D424px0px 2px 8px rgba(0, 0, 0, 0.1)8px 8px 0px 0px16px between image and text0px 4px 16px rgba(0, 0, 0, 0.15), slight scale 1.02#01020F with background image overlay at rgba(0, 0, 0, 0.4)120px 40px600px#FFFFFF#F7F7F796px 40px1200px0 auto104px margin#FFFFFF#2525251px solid #D4D4D44px12px 16px#818A91#C59D5F, outline none, box-shadow 0px 0px 0px 3px rgba(197, 157, 95, 0.1)#F7F7F7, text color #C3C3C3, border 1px solid #D4D4D4#FFFFFF#2525251px solid #D4D4D44px12px 16px120px#C59D5F, box-shadow 0px 0px 0px 3px rgba(197, 157, 95, 0.1)#2525258px#C59D5F#FFFFFF8px 16px50px#39B54A, text #FFFFFF#FDD822, text #000000#EA4335, text #FFFFFF6px 12px50pxThe spacing system is built on a base unit of 4px with a defined scale for consistent rhythm:
4px — icon spacing, tight adjacent elements8px — button icon gaps, compact padding12px — form field padding, input labels16px — card padding, standard element spacing20px — button padding, moderate section spacing24px — card content padding, section subdivisions32px — vertical spacing between content blocks40px — container padding, section internal spacing52px — between-section vertical spacing96px — major section separation104px — full-bleed section gap120px — hero section top/bottom paddingUsage Context:
18px 20px (vertical × horizontal)24px standard, 40px for hero content40px horizontal, 96px–120px vertical104px minimum1200px for centered content sections20px between columns40px on desktop, 24px on tablet, 16px on mobileBlume Beauty's design prioritizes generous whitespace as a luxury signal. Content is never cramped; breathing room around headings, images, and CTAs creates visual hierarchy and reduces cognitive load. Vertical rhythm is maintained through consistent 96px–120px spacing between major sections, with tighter 24px–32px spacing within card groups. This creates a sense of premium, high-end curation rather than information density.
0px — buttons, navigation, bold graphic elements4px — form inputs, minimal UI elements8px — service cards, image containers, moderate prominence50px — badges, small emphasis elements, call-out labels50% — circular avatars, profile images, icons| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, background-color only | Text, borders, background colors, body sections |
| Raised (L1) | 0px 2px 8px rgba(0, 0, 0, 0.1) | Standard cards, form inputs, light elevation |
| Elevated (L2) | 0px 4px 16px rgba(0, 0, 0, 0.15) | Hovered cards, modal backgrounds, interactive focus |
| Prominent (L3) | 0px 8px 24px rgba(0, 0, 0, 0.2) | Modals, dropdowns, floating overlays, high emphasis |
| Floating (L4) | 0px 12px 32px rgba(0, 0, 0, 0.25) | Sticky headers, floating action buttons, persistent overlays |
Shadow Philosophy:
Shadows are used sparingly and subtly to create depth without visual noise. They reinforce the hierarchy of interactive and prominent content while maintaining the clean, minimalist aesthetic. Dark backgrounds (like #01020F) use lighter, softer shadows to preserve contrast. Light backgrounds use slightly stronger shadows to create definition. All shadows use black with alpha transparency to remain harmonious across color backgrounds.
#C59D5F for primary CTAs, active navigation states, and premium service badges to maintain impact.96px vertical spacing between major sections; this luxury feeling is core to the brand.0px border-radius for graphic boldness; maintain this for consistency.6px) and alignment for menu lists to aid scanning.#5BC0DE) — This is reserved for hover states and secondary feedback; don't use as a primary color.16px minimum horizontal padding even on small screens; content should breathe.0px); only use rounded corners for cards (8px) and badges (50px).#252525 on #F7F7F7 for readability.#C59D5F is the brand gold; resist temptation to lighten or warm it for "variation."#01020F; rely on color contrast and borders instead.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, 16px padding, 52px section spacing, stacked navigation, full-width cards |
| Tablet | 768px–1023px | 6-column grid, 24px padding, 96px section spacing, hamburger menu transitions to expanded state at top, two-column card layouts |
| Desktop | 1024px+ | 12-column grid, 40px padding, 104px–120px section spacing, full horizontal navigation, multi-card grids (3–5 columns) |
44px × 44px for buttons and nav icons on touch devices16px 20px (reduced from 18px 20px desktop to fit smaller screens)36px minimum height for text links12px minimum gap to prevent accidental taps50px × 50px minimum even on mobile for navigation and menu toggles88px height) collapses to hamburger toggle icon (50px) at 768px breakpoint; menu slides in from left with full-bleed dark background (#01020F).120px 40px (desktop) → 96px 24px (tablet) → 52px 16px (mobile); text size remains consistent but line-height adjusts for smaller viewports.24px → 16px → 12px.max-width: 100%; never crop critical face/details; use object-fit: cover with center positioning.104px (desktop) → 80px (tablet) → 52px (mobile) between major sections.45px (desktop) to 32px (tablet) to 24px (mobile) using viewport-relative units or breakpoint adjustments.8px gap (instead of side-by-side on desktop).#C59D5F) background, white text#252525) or Near Black (#000000) on light backgrounds#F7F7F7) for content sections#01020F)#000000)#FFFFFF)#C3C3C3), hover to white#D4D4D4)#C59D5F)#39B54A)#EA4335)#FDD822)Color Fidelity: Every CTA button must be #C59D5F (gold). Never deviate; this is the primary brand accent. All hover states transition to a darkened version (#B8935A). Secondary links are #C3C3C3 with white hover.
Typography Exactness: Headings use only Montserrat 800 weight at sizes 45px (H1/H2) or 30px (H4). Body copy is Jost or DM Sans at 15px–19px depending on context. Do not scale typography arbitrarily; stick to the defined hierarchy table.
Spacing Discipline: Section padding is 40px horizontal on desktop. Major section gaps are 96px–120px vertical. Do not add custom margins; use the predefined scale. Mobile reduces to 16px padding, tablet to 24px.
Dark Hero Sections: Any full-bleed dark section uses #01020F background with text overlay at rgba(0, 0, 0, 0.4) opacity. Ensure white text maintains minimum WCAG AA contrast (4.5:1 ratio). Test all hero text for readability.
Button Consistency: All primary CTAs use the gold/white combination (#C59D5F bg, #FFFFFF text) with 0px border-radius and 18px 20px padding. Secondary/ghost buttons are transparent with white border and text. No exceptions.
Card Styling: Service cards have white background (#FFFFFF), 8px border-radius, 1px solid #D4D4D4 border, 24px padding, and elevation shadow 0px 2px 8px rgba(0, 0, 0, 0.1). Hover elevation is L2 (0px 4px 16px rgba(0, 0, 0, 0.15)).
Image Radius: All image containers use 8px border-radius minimum. Hero images that bleed to edges use 0px radius. Portrait photos in cards use 8px 8px 0px 0px (top rounded only).
Navigation Markup: Desktop nav text is DM Sans 17px at #F7F7F7. Active nav items underline with 2px solid #C59D5F and text changes to gold. Footer nav links are gray (#C3C3C3) with white hover. Menu height context is 88px.
Form Field Styling: Inputs and textareas have white background (#FFFFFF), 1px solid #D4D4D4 border, 4px border-radius, 12px 16px padding. Focus state adds box-shadow: 0px 0px 0px 3px rgba(197, 157, 95, 0.1) and border color becomes #C59D5F.
Responsive Collapse Logic: At 768px, switch navigation to hamburger. Reduce section padding to 24px horizontal. Collapse card grids from 3 columns to 2. At 320px, reduce to single column, 16px padding, and scale headings down to 24px. Maintain 52px section gaps on mobile minimum.