Fresha

Overview

Fresha is a global beauty and wellness booking platform that democratizes access to premium salons, spas, and wellness professionals. The design system embodies a philosophy of "Accessible Elegance"—combining a clean, light-dominant interface with vibrant accent colors (#6950f3 primary, #2d76ec secondary, #1f8900 tertiary) that inspire confidence and discovery. The brand personality is warm, professional, and empowering: it speaks to both beauty professionals seeking to grow their business and consumers seeking their next perfect appointment. The visual language prioritizes clarity and trust through generous whitespace (24px gutter), a humanistic sans-serif stack (AktivGroteskVF + RoobertPRO), and purposeful use of color to guide attention to booking actions. Example sentence in brand voice: "Find your next favorite salon—book instantly, no waiting."

Colors

The color system is anchored by a vibrant purple primary (#6950f3) used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. This accent appears sparingly but decisively, creating visual momentum toward booking. Secondary (#2d76ec, a bright blue) supports secondary actions and highlights, while tertiary (#1f8900, a rich green) signals success states and positive affirmations. The surface stack is built on pure white (#ffffff) as the dominant background, with a carefully calibrated gray scale (surface-dim #f2f2f2, surface-container #eeeeee, surface-container-highest #d3d3d3) for subtle layering and depth without darkness. Text defaults to near-black (#0d0d0d) for maximum legibility at 16px body size. Error states use a warm red (#d4163a) to signal c

Typography

The type system uses a two-font strategy: AktivGroteskVF (a geometric, variable-weight sans-serif) for headlines and UI labels, paired with RoobertPRO (a humanistic sans-serif) for body text and accessibility. Display (64px, 700 weight, -0.03em letter-spacing) commands hero sections with authority; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) organizes subsections. Body text lives at 16px (body-md) with 24px line-height for comfortable reading at 1250px container width. Labels (14px, 600 weight, 0.01em tracking) appear on buttons and form fields with crisp, compact presence. All headlines use -0.02em to -0.03em negative letter-spacing to create visual tightness and premium feel. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (12px)

Layout

The layout operates on a 12-column grid with a 1250px max-width container, centered with symmetric margins. Horizontal rhythm is governed by the 8px unit system: primary spacing uses 24px (md) for section gutters, 40px (lg) for major section breaks, and 64px (xl) for hero-to-content transitions. The hero section spans full-width with a soft gradient background (white to light purple, rgba(105, 80, 243, 0.08)) and contains the h1 headline (64px, 700 weight) centered with 40px bottom margin, followed by body copy (18px, 400 weight) at 60% width for optimal line length (~65 characters). The search bar (input fields + button) sits 24px below copy, using 12px internal padding and 48px height for touch-friendly interaction. Cards and content blocks use 24px padding with 12px gaps between items.

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than color darkening. Level 1 (base content): no shadow, 1px border at rgba(0, 0, 0, 0.05). Level 2 (cards, inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 1px border at surface-container-high (#d3d3d3). Level 3 (modals, popovers, hover states): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 1px border at outline-variant (#bfbfbf). Hover transitions use 200ms cubic-bezier(0.2, 0, 0, 1) to feel responsive without jarring. Focus states on interactive elements apply a 3px inset box-shadow of rgba(105, 80, 243, 0.2) to indicate keyboa

Shapes

The shape language follows "Soft Modernism"—rounded corners are used strategically to soften geometry while maintaining clarity. Buttons and primary CTAs use full border-radius (9999px) to create pill-shaped affordances that feel inviting and clickable. Form inputs use 1.5rem (24px) radius for a friendly, approachable feel. Cards and containers use 1rem (16px) radius as the default, creating subtle rounding that doesn't distract. Smaller UI elements (badges, chips) use 0.75rem (12px) radius. This graduated approach ensures that the most interactive elements (buttons) feel the most inviting, wh

Components

Action Elements Buttons are the primary driver of user intent. Button-primary uses 48px height, 12px vertical + 32px horizontal padding, full border-radius (9999px), and the primary color (#6950f3) with white text. On hover, the background shifts to #5c4ace (primary-fixed-dim) with a 200ms transition. On active, it darkens to #403591 (on-primary-container). All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing. Button-secondary mirrors the primary structure but uses transparent background with a 1px outline at {colors.outline} (#acacac), shifting to surface-container-low (#f5f5f5) on hover. Never use button text smaller than 14px; apply a minimum 48px height for touch targets.

Containers & Surfaces Cards use 24px padding, 1rem border-radius, and a 1px b

Do's and Don'ts

**Do**

• Do use the primary color (#6950f3) exclusively on CTAs, focus states, and brand-critical interactions—never on decorative elements.
• Do maintain 24px minimum gutter spacing between sections and 12px minimum between adjacent items to preserve breathing room.
• Do apply full border-radius (9999px) to all buttons and primary interactive elements for a welcoming, modern feel.
• Do use AktivGroteskVF at 600+ weight for headlines and RoobertPRO at 400 weight for body text to maintain the humanistic, accessible tone.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on hover states for cards and containers to signal interactivity.
• Do use negative letter-spacing (-0.02em to -0.03em) on headlines to create visual tightness and premium presence.

**Don't**

• Don't use the primary color (#6950f3) on non-interactive elements or backgrounds—it must remain reserved for actions and focus.
• Don't collapse spacing below 12px between distinct content zones; whitespace is a design material, not wasted space.
• Don't use sharp corners (0px border-radius) on any interactive element; minimum is 0.25rem (4px) for icon buttons.
• Don't apply shadows darker than 0.12 opacity (elevation-lg) on standard cards; reserve the darkest shadows for modals and overlays.
• Don't mix typefaces within a single text block; use AktivGroteskVF for labels/headings and RoobertPRO for body exclusively.
• Don't use text smaller than 12px for body copy or 14px for labels; accessibility requires minimum 12px at 1.5 line-height.