Boho Salon

Overview

Boho Salon is a luxury nail care destination in Dubai that transforms the nail salon experience through a commitment to health, sustainability, and refined aesthetics. The brand embodies 'Eco-Luxe Minimalism'—a design philosophy that marries organic, earthy warmth with architectural precision. The visual language centers on warm terracotta and chocolate browns (#8f4832, #a4493d) paired with clean white surfaces and subtle warm grays (#fcf8f4, #f1f1f1), creating an atmosphere that feels both sophisticated and approachable. The UI evokes a sense of calm professionalism: users encounter generous white space, deliberate typography hierarchy, and warm accent colors that guide attention without aggression.

The brand voice is educational yet warm, never clinical or corporate. Boho speaks with authority about nail health and eco-friendly practices, but in conversational, accessible language. The tone avoids jargon; instead, it explains builder gel benefits and vegan polish commitments as natural extensions of self-care. Example sentence in brand voice: 'We use vegan, cruelty-free polish because caring for your nails means caring for the planet too.'

Colors

The color system is anchored in warm earth tones that reflect both the salon's boho aesthetic and the natural beauty of healthy nails. Primary (#8f4832) is a rich, muted terracotta—the signature accent used on CTAs ('Book Appointment'), navigation headers, and interactive focus states. It appears frequently but never dominates; instead, it acts as a warm anchor against the predominantly white canvas. Secondary (#ea8325) is a vibrant burnt orange reserved for highlights, badges, and secondary CTAs; it energizes without overwhelming. Tertiary (#2db742) is a fresh, natural green used sparingly for success states and eco-friendly messaging badges.

The surface stack is deliberately warm-shifted: surface-container-lowest (#fcf8f4) is a barely-off-white with a warm cream undertone, used for inpu

Typography

The type system reflects a 'Heritage-Modern' sensibility: Frunchy (a custom or display serif) anchors headlines and the brand logo, conveying luxury and craft; Montserrat (geometric sans-serif) handles UI labels and body copy, ensuring legibility and contemporary feel; Playfair Display (high-contrast serif) appears in secondary headlines for editorial moments. Display and headline-lg use Frunchy at 60px and 38px respectively, with tight letter-spacing (-0.04em, -0.02em) to create visual impact. Body text (Open Sans, 18px, 400 weight, 28px line-height) is set generous and airy, reflecting the brand's commitment to clarity and accessibility. Labels use Montserrat at 14px with 600 weight and 0.01em letter-spacing, providing subtle emphasis without heaviness. On small labels over busy backgrou

Layout

The page employs a fluid 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The header spans full-width at 64px height with primary background (#8f4832) and white text, anchoring the brand identity at the top. Hero section uses centered, large typography (headline-lg, 38px) with 40px (lg spacing) margin separation above and below, creating visual breathing room. Content sections are separated by lg spacing (40px) vertically and gutter spacing (24px) horizontally. The 'Book Appointment' CTA button is positioned in the header's top-right, ensuring immediate discoverability. Input fields and form elements use md spacing (24px) for padding and gap, with sm spacing (12px) between label and input. Image galleries (nail portfoli

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic z-index stacking. The elevation system uses warm-tinted shadows that reinforce the primary color: sm elevation (0 1px 2px rgba(0,0,0,0.06)) is applied to subtle UI elements like list items and badges; md elevation (0 4px 12px rgba(0,0,0,0.08)) lifts cards and form containers slightly; lg elevation (0 0 18px 0px rgba(143, 72, 50, 0.56)) is reserved for hover states on primary buttons and modal overlays, using the primary color at 56% opacity to create a warm, inviting glow. The header uses no shadow, sitting flush with t

Shapes

The shape philosophy is 'Warm Geometry'—sharp enough to feel contemporary and intentional, yet rounded enough to feel approachable and organic. Buttons use rounded.DEFAULT (0.5rem / 8px), a subtle rounding that suggests friendliness without softness. Cards and containers use rounded.md (0.75rem / 12px), creating a gentle frame around content. Input fields match buttons at rounded.DEFAULT (8px), maintaining visual consistency in interactive elements. Badges and tags use rounded.full (9999px), the traditional pill shape, which signals secondary or supplementary information. The header and full-w

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary background (#8f4832) with white text, Frunchy 17px 900 weight, and 16px 36px 14px padding (asymmetric vertical padding for optical centering). On hover, the background shifts to primary-container (#a4493d) and gains a warm shadow (0 0 18px 0px rgba(143, 72, 50, 0.56)), creating a subtle lift effect with 200ms ease-out transition. The button-secondary variant uses white background with a 1.4px solid primary border and primary text, allowing secondary CTAs to coexist without visual dominance. Both variants maintain 48px height for touch-friendly sizing.

Containers & Surfaces Cards use surface background (#ffffff) with md rounding (12px) and md elevation shadow (0 4px 12px rgba(0,

Do's and Don'ts

**Do**

• Do use primary (#8f4832) for all primary CTAs and interactive focus states—it's the brand's signature warm accent and should guide user attention.
• Do maintain generous white space (lg spacing, 40px) between major content sections to reflect the brand's commitment to clarity and calm.
• Do apply warm-tinted shadows (using primary color at reduced opacity) rather than neutral black shadows to reinforce the eco-luxe aesthetic.
• Do use Frunchy for headlines and CTAs to establish luxury and craft; reserve Montserrat for UI and body copy for contemporary legibility.
• Do test input fields and small text over surface-container-lowest (#fcf8f4) backgrounds to ensure the warm undertone doesn't reduce contrast.
• Do use tertiary green (#2db742) exclusively for eco-friendly messaging and success states, reinforcing the brand's sustainability commitment.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always shift toward warm undertones (#2d2926 for text, #fcf8f4 for surfaces) to maintain the boho warmth.
• Don't apply neutral gray shadows (rgba(0,0,0,x))—always use primary-tinted shadows (rgba(143, 72, 50, x)) to keep the visual language cohesive.
• Don't round button corners beyond DEFAULT (8px)—they should feel intentional and premium, not soft or playful.
• Don't use secondary orange (#ea8325) on primary CTAs; reserve it for badges, highlights, and secondary actions only.
• Don't exceed 1280px container max-width on desktop—the brand values breathing room and rejects cramped, dense layouts.
• Don't mix serif and sans-serif typefaces in the same headline—use Frunchy OR Playfair Display, never both in one visual hierarchy level.