Hairnerds Studio

Overview

Hairnerds Studio is a bold, personality-forward hair salon brand that redefines grooming as self-expression and discovery. The design system embodies 'Energetic Minimalism'—a movement that pairs stark black canvases with vibrant accent colors, clean geometric typography, and warm earth-tone supporting palettes to create an approachable yet sophisticated visual identity. The brand serves clients seeking personalized hair experiences and professional guidance, evoking confidence, playfulness, and transformation. The UI voice is conversational and encouraging, never clinical: direct, warm, and celebratory of individual style. Example: 'Your hair tells your story—let's make it a good one.'

Colors

The color system is anchored by a signature **Primary Red (#f8312f)** deployed on all call-to-action buttons, interactive states, and brand highlights—this is the energy of the brand. It pairs with a deep **Dark Red (#be3433)** for hover and active states, creating tactile feedback through color intensity. The **Secondary Turquoise (#128dcd)** and **Tertiary Green (#4aaf69)** serve as supporting accents for secondary actions, status indicators, and promotional elements, each with their own light container variants (#e7f4fa, #edf7f0) for non-interactive backgrounds. The surface stack uses a pure **Black (#000000)** as the dominant canvas, with **Light Ivory (#fbf8f1)** as the inverse surface for modals, cards, and high-contrast sections. Neutral grays (#282623, #595954, #666666) handle body

Typography

The type system pairs **Space Grotesk** (700 weight, geometric and bold) for all headlines, CTAs, and brand-forward moments with **Open Sans** (400 weight, warm and readable) for body copy and supporting text. Display (96px, -0.04em tracking) commands hero sections; Headline-lg (48px) anchors major sections; Body-md (16px, 24px line-height) ensures legibility on black backgrounds with 1.5x line-height for breathing room. Labels use Space Grotesk at 16px/700 weight with 0.01em tracking for crisp button text. On small labels over busy backgrounds or promotional imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to maintain contrast. The type pairing communicates 'modern yet approachable'—geometric precision softened by humanist warmth.

Layout

The layout operates on a **12-column fluid grid** with a max-width of 900px, centered on viewport. The gutter is 24px (md spacing), applied consistently to section margins and container padding. White-space is generous: lg spacing (40px) separates major sections (hero, testimonials, gallery), while md spacing (24px) divides subsections and card groups. The header uses px 64px horizontal padding on desktop, reducing to px 24px on mobile. Container max-width of 900px ensures readability and focus on the black canvas. Spacing scale: xs (4px) for micro-interactions, sm (12px) for input padding, md (24px) for card padding and section gaps, lg (40px) for major section breaks, xl (64px) for hero breathing room.

Elevation & Depth

Depth is achieved through **layered shadows and contrast**, not through multiple background colors. Level 1 (Base): pure black background (#000000) with no shadow. Level 2 (Standard Card): white or light-ivory surface with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift. Level 3 (Elevated/Modal): same surface with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) and a 1px border at rgba(0, 0, 0, 0.1) to define edges. Interactive elements (buttons) use the Level 2 shadow by default; on hover, they transition to Level 3 shadow (0 6px 16px rgba(248, 49, 47, 0.25)) and translate up 2px, c

Shapes

The shape philosophy is **'Soft-Technical'**: rounded corners are present but restrained, balancing geometric precision with approachability. Buttons and inputs use 1rem (16px) border-radius, creating a friendly but professional appearance. Cards use 1.5rem (24px) for a softer, more inviting container. Small UI elements (badges, tags) use full (9999px) for pill-shaped forms. The 4px border-radius is reserved for dropdown panels and micro-components. This hierarchy—larger radius for primary containers, smaller for utility elements—guides visual hierarchy and communicates interaction priority.

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses #f8312f background, white text (Space Grotesk 16px/700), 12px 32px padding, 48px height, and 1rem border-radius. On hover, the background shifts to #be3433 and the shadow expands to 0 6px 16px rgba(248, 49, 47, 0.25) with a -2px translateY for lift. Active state darkens further and compresses shadow to 0 1px 4px. **button-secondary** inverts the logic: #fbf8f1 background with a 2px #f8312f border, black text, same padding and height. Hover swaps background to a light gray (#f0f9fa) and text to primary red. All buttons use transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces **card** components use #fbf8f1 background, 24px padding, 1.5rem border-radius,

Do's and Don'ts

**Do**

• Do use primary red (#f8312f) exclusively for CTAs, active states, and brand moments—never dilute it with secondary colors on the same element.
• Do maintain 1.5x line-height on body text over black backgrounds (24px for 16px text) to ensure legibility and breathing room.
• Do apply consistent 24px gutter spacing between sections and 12px padding inside cards to create rhythm and predictability.
• Do layer shadows progressively: md shadow for cards, lg shadow for modals, and add color-tinted shadows (rgba(248, 49, 47, 0.25)) on primary button hover for brand reinforcement.
• Do use Space Grotesk for all headlines and CTAs to maintain geometric brand personality; reserve Open Sans for body and supporting text only.

**Don't**

• Don't use primary red on non-interactive elements or backgrounds—it must signal actionability and urgency, never decoration.
• Don't apply shadows to elements on the black background without sufficient contrast; always pair with a light surface or use color-tinted shadows.
• Don't mix rounded-corner sizes arbitrarily; stick to the scale (sm: 4px, DEFAULT: 8px, lg: 16px, xl: 24px, full: pill) to maintain visual consistency.
• Don't reduce line-height below 1.5x on body text, especially on black backgrounds; readability suffers and the brand feels cramped.
• Don't use secondary colors (turquoise, green) for primary CTAs or dominant interactive elements; they are supporting accents only.