Switch between the rendered Visual preview and the Raw DESIGN.md.
Salon Cass embodies luxury, elegance, and bold sophistication through a premium hair and beauty brand identity. The design exudes confidence and exclusivity, combining rich jewel tones with warm metallics to create an aspirational, high-end aesthetic. The visual language emphasizes glamour and empowerment, with a strong emphasis on celebrity styling and bespoke luxury services. The brand communicates trustworthiness and premium quality through refined typography, selective color use, and sophisticated imagery of professionally styled hair and fashion-forward aesthetics.
Key Characteristics
#320D9F): Core brand color used extensively across CTAs, navigation links, text accents, and key interactive elements; represents luxury, creativity, and brand identity#D4AF37): Metallic gold used in logo and premium branding; conveys luxury and exclusivity#334FB4): Secondary accent for emphasis and depth in supporting elements#242833): Deep neutral used for sophisticated text and subtle background variations#320D9F): Royal Purple for buttons, links, and interactive states#4A1FD9): Slightly lighter purple for hover states on clickable elements#F3F3F3): Soft background for subtle contrast and form inputs#E9E9EB): Delicate neutral for secondary backgrounds and dividers#DEDEDE): Borders and subtle UI separation#C1C1C1): Input field borders and secondary dividers#121212): Primary text color for body content; near-black for maximum legibility#FFFFFF): Primary surface color, high contrast text backgrounds#FFFFFF): Primary background for forms, cards, and content areas#C1C1C1): Default border for input fields and card containers#DEDEDE): Lightweight separation between sections#47C70F): Green confirmation and positive action indicators; used for success messaging and validation feedbackPrimary: Jost — provides modern, geometric elegance for headlines and display text. Fallback: Montserrat, sans-serif
Secondary: Assistant — clean, professional typeface for body and UI text. Fallback: Arial, sans-serif
Monospace: Courier New — for technical content and code display
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Jost | 40px | 400 | 48px | 0px | Brand hero text and main page titles |
| Heading / H2 | Assistant | 13.65px | 400 | 20.15px | 0px | Section subheadings and subsection titles |
| Heading / H3 | Jost | 18px | 400 | 23.4px | 0px | Card titles and prominent section headers |
| Body Large | Assistant | 16.8px | 400 | 25.2px | 0px | Primary body text, form labels, descriptive content |
| Body Standard | Assistant | 15.75px | 400 | 18.75px | 0px | Navigation links and secondary content |
| Body Small | Assistant | 13px | 400 | 16.9px | 0px | General paragraph text and descriptions |
| Label | Assistant | 16.8px | 400 | 25.2px | 0px | Form field labels and input descriptors |
| Button Text | Arial | 13.33px | 400 | normal | 0px | CTA and interactive button text |
| Link | Assistant | 14.7px | 400 | 25.9px | 0px | Hyperlinks and navigation items |
| Caption | Assistant | 11.55px | 400 | 13.75px | 0px | Small supporting text, footnotes, metadata |
#320D9F#FFFFFF13.33px40012px 32px6px0px none0px 4px 12px rgba(50, 13, 159, 0.15)47px#4A1FD9, box shadow 0px 6px 16px rgba(50, 13, 159, 0.25)#2A0A7F, box shadow inset 0px 2px 4px rgba(0, 0, 0, 0.2)#DEDEDE, text color #999999#FFFFFF#320D9F13.33px40012px 32px6px2px solid #320D9Fnone47px#F3F3F3, border color #4A1FD9, text color #4A1FD9#E9E9EB, box shadow inset 0px 2px 4px rgba(50, 13, 159, 0.1)transparent#320D9F13.33px40012px 0px0px0px nonenone39.89px#4A1FD9, text decoration underline#2A0A7Ftransparent#320D9F16px8px50%0px none46.2px46.2pxrgba(50, 13, 159, 0.08), border radius 50%#FFFFFF#12121232px0px1px solid #DEDEDE0px 2px 8px rgba(0, 0, 0, 0.05)0px 4px 16px rgba(0, 0, 0, 0.1)#F3F3F3#12121240px0px0px nonenone18px16.8px#FFFFFF#1212120px0px0px none0px 2px 8px rgba(0, 0, 0, 0.08)16.8px1:1.2translateY(-4px), box shadow 0px 8px 20px rgba(0, 0, 0, 0.12)#FFFFFF#12121216.8px40015.75px0px1px solid #C1C1C1none47.25px#320D9F, box shadow 0px 0px 0px 2px rgba(50, 13, 159, 0.1)#999999#E74C3C0px 0px 0px 2px rgba(231, 76, 60, 0.1)#E74C3C#47C70F0px 0px 0px 2px rgba(71, 199, 15, 0.1)#F3F3F3#999999#DEDEDEnot-allowed#FFFFFF#12121216.8px15.75px0px1px solid #C1C1C147.25px100% (responsive)20px × 20px#FFFFFF1px solid #C1C1C12px#320D9F#FFFFFF#320D9F20px × 20px50%#FFFFFF1px solid #C1C1C12px solid #320D9F8px diameter, background #320D9F#FFFFFF#320D9F15.75px40031.5px 0px29.6px32px#4A1FD9, text decoration underline (offset 4px)#2A0A7F, font weight 50013px#666666> (color #999999)#320D9F8px around separators#FFFFFF#320D9F16px1px solid #DEDEDE48px15.75px#320D9F15.75px400underline (default)#4A1FD9#2A0A7F#6B3FAE#320D9F0px0pxunderline (default), none (hover)#121212#FFFFFF12px 31.5px0px47.25px15.75px#242833#FFFFFF#12121240px0px0px 8px 32px rgba(0, 0, 0, 0.15)rgba(0, 0, 0, 0.5)46px × 46px, positioned top-right, icon #320D9F40px400#320D9F20pxBase Unit: 4px
Spacing Scale (multiples of 4px):
4px (1×) — micro spacing for compact elements8px (2×) — tight spacing between inline elements12px (3×) — small gaps between related content16px (4×) — standard spacing between sections20px (5×) — comfortable spacing between content blocks28px (7×) — large spacing for section separation32px (8×) — generous padding for containers and cards36px (9×) — extra-large spacing for major sections40px (10×) — prominent section spacing44px (11×) — hero and landing zone spacing48px (12×) — maximum spacing for top-level sections52px (13×) — extra spacing for full-width section separationUsage Context:
1200px for desktop content32px (16px left + right per column)32px (desktop), 20px (tablet), 16px (mobile)Generous and intentional whitespace reinforces premium positioning and luxury brand identity. Whitespace provides visual breathing room, reduces cognitive load, and directs attention to high-impact imagery and messaging. Cards, sections, and content blocks are generously spaced vertically (40–52px between major sections) to emphasize exclusivity and careful curation. Horizontal whitespace maintains breathing room within content, preventing dense text blocks and supporting scanability for luxury-conscious users.
| Level | Treatment | Use |
|---|---|---|
| Flat (0) | box-shadow: none | Default text, plain backgrounds, static content |
| Raised (1) | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) | Standard cards, subtle depth, secondary containers |
| Elevated (2) | box-shadow: 0px 4px 12px rgba(0, 0, 159, 0.15) | Primary buttons, hovered cards, modal content |
| High (3) | box-shadow: 0px 6px 16px rgba(50, 13, 159, 0.25) | Button hover states, expanded cards, emphasized elements |
| Maximum (4) | box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.15) | Modals, dropdowns, floating panels, highest priority UI |
Shadow Philosophy: Shadows are used sparingly and strategically to create subtle depth without overwhelming the clean, modern aesthetic. The primary approach employs soft, directional shadows that lift elements slightly from the surface, creating a sense of hierarchy and interactivity. Royal Purple is incorporated into shadows for buttons and primary interactive elements, reinforcing brand color and creating cohesive visual emphasis. Shadows increase on hover and active states to provide tactile feedback, communicating affordance and responsiveness. Modals and floating UI use maximum shadows to distinctly separate them from background content, establishing clear layering and focus.
| Breakpoint | Width | Primary Changes |
|---|---|---|
| Mobile | 320px–639px | Single-column layout; 16px container padding; 32px section spacing; full-width cards; stacked navigation in drawer; 14px body text |
| Tablet | 640px–1023px | Two-column grid option; 20px container padding; 40px section spacing; flexible form layouts; consolidated navigation bar |
| Desktop | 1024px+ | Full 12-column grid; 32px container padding; 48–52px section spacing; side-by-side content/image layouts; full horizontal navigation |
| Large Desktop | 1440px+ | Max-width container (1200px) centered; extended horizontal padding; asymmetrical hero layouts; 6-column card grids |
48px for all interactive elements (buttons, links, form inputs)48px for icon buttons and tap targets12px around clickable areas to ensure comfortable touch activation16px minimum between adjacent interactive elements to prevent accidental mis-taps8px vertical, 12px horizontal minimum for text links in dense layouts#320D9F)#FFFFFF)#320D9F)#4A1FD9)#121212)#FFFFFF)#F3F3F3)#C1C1C1 or #DEDEDE)#320D9F)#121212)#47C70F)Color Priority: Every interactive element (button, link, input focus, active navigation item) must use Royal Purple (#320D9F). Never deviate to alternate accent colors on primary CTAs.
Spacing Consistency: Apply spacing exclusively from the defined scale (4px, 8px, 12px, 16px, 20px, 28px, 32px, 36px, 40px, 44px, 48px, 52px). No arbitrary padding or margins.
Typography Hierarchy: Match font sizes and families exactly to the Hierarchy table. Jost for headings (18px+), Assistant for body and UI (13–16.8px), Arial for buttons (13.33px). Do not mix or adjust sizes outside the defined scale.
Responsive Container: Always wrap main content in a max-width 1200px centered container with 32px padding on desktop, 20px on tablet, 16px on mobile. Use width: 100% for flexibility.
Button Styling: Primary buttons must have background: #320D9F, color: #FFFFFF, padding: 12px 32px, border-radius: 6px, and box-shadow: 0px 4px 12px rgba(50, 13, 159, 0.15). Hover state must increase shadow to Level 3.
Input Styling: All text inputs and textareas require background: #FFFFFF, border: 1px solid #C1C1C1, padding: 15.75px, border-radius: 0px (sharp corners), and focus state with border-color: #320D9F and box-shadow: 0px 0px 0px 2px rgba(50, 13, 159, 0.1).
Card & Container Defaults: Cards must default to background: #FFFFFF, border: 1px solid #DEDEDE, padding: 32px, border-radius: 0px, and box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05). Featured cards use background: #F3F3F3 with no border.
Section Spacing: Major sections stack with margin-bottom: 48px (desktop), 40px (tablet), 32px (mobile). Maintain consistent whitespace to reinforce luxury positioning.
Touch Accessibility: All interactive elements must be at least 48px × 48px in height/width. Buttons must have minimum 12px padding. Ensure 16px minimum spacing between adjacent clickable targets.
Text Legibility: Body text must never be smaller than 13px. Navigation and UI text minimum 14.7px. Headings (H2+) follow the Hierarchy table exactly. Line height for body text is minimum 1.2× font size (e.g., 16.8px text = 20.15px line height minimum).