The Hair Pantry

Overview

The Hair Pantry embodies a 'Warm Minimalism' aesthetic—a design philosophy that marries Scandinavian clarity with organic, botanical warmth. The brand serves Pakistan's conscious beauty consumer seeking premium, accessible hair care without compromise. The visual language prioritizes legibility and trust through a restrained palette of charcoal (#202020), soft whites (#ffffff), and nature-inspired greens (#9dbc91, #108474), creating an environment where product quality and customer care feel equally paramount. The UI evokes a sense of calm expertise: clean grids, generous whitespace, and purposeful typography communicate that this is a brand that listens and delivers.

The voice is conversational yet authoritative—never breathless, never patronizing. The brand speaks in clear, direct sentences: 'Our Wooden Combs are back after 2 years. Limited pieces available.' Tone markers include specificity (exact product names, precise benefits), warmth (emoji used sparingly but meaningfully, like the heart in 'hair growth serum ❤️'), and a touch of personality (the emoji in promotional copy signals approachability without sacrificing professionalism). Example sentence in brand voice: 'Quality hair care shouldn't cost the earth—we've made it lighter on your pocket and kinder to your scalp.'

Colors

The color system is rooted in trust and nature. Primary (#202020) is the brand's anchor—a sophisticated charcoal used on CTAs, navigation, and emphasis text. It reads as premium without coldness, paired always with pure white (#ffffff) for maximum legibility. Secondary (#9dbc91) is a muted sage green drawn from botanical ingredients; it appears on success states, secondary CTAs, and accent highlights, evoking the natural efficacy of the product line. Tertiary (#108474) is a deeper teal-green reserved for interactive elements, links, and tertiary actions—it provides visual contrast while staying within the natural palette. Error states use #c63f3f (a warm red-brown) rather than pure red, maintaining brand warmth even in warnings. The surface stack uses near-whites (#f9f9f9, #eeeeee, #e8e8e8

Typography

The type system pairs Instrument Sans (headings, 600 weight) with Archivo (body, 400 weight)—a pairing that balances geometric precision with humanistic warmth. Instrument Sans at 600 weight delivers authority and modernity without sterility; Archivo's open counters and generous spacing make long-form content feel approachable. Display (60px, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (40px, -0.01em) structures page sections; Headline-md (28px) introduces subsections. Body-lg (18px, 28px line-height) is reserved for feature callouts and testimonials; Body-md (16px, 24px line-height) is the workhorse for product descriptions and standard copy. Label-md (14px, 500 weight) appears on buttons and form labels; Label-sm (12px) on badges and metadata. Line-height

Layout

The layout follows a 12-column fluid grid with a fixed max-width of 1400px, ensuring content remains readable on ultra-wide displays while adapting gracefully to mobile. Spacing is semantic: lg (40px) separates major sections (hero to product grid, product grid to testimonials); md (24px) divides subsections and card groups; sm (12px) spaces inline elements and list items. The gutter is consistently 24px on desktop, reducing to 12px on tablet and 8px on mobile via media queries. Container max-width of 1400px prevents excessive line lengths while accommodating product grids (typically 3–4 columns on desktop). Whitespace is intentional: the footer background (#f1ffe6, a pale sage) provides visual rest and signals a distinct zone without jarring contrast. Product cards use 20px padding with n

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic z-index jumps. Level 1 (Base): flat surfaces with no shadow; used for cards, inputs, and standard containers. Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to primary buttons, modals, and hover states on cards. Level 3 (Modal/Overlay): box-shadow: 0 24px 80px rgba(17, 24, 39, 0.28); reserved for full-screen modals and critical overlays. The modal overlay itself uses backdrop-filter: blur(4px) with background: rgba(32, 32, 32, 0.3), creating a frosted-glass effect that softens the background with

Shapes

The shape philosophy is 'Geometric Warmth'—combining sharp, modern lines with organic softness. Buttons use 9999px border-radius (full pill shape) to feel approachable and clickable; this is the most-used radius and signals primary interactivity. Cards and containers use 0.5rem (8px) for a subtle, modern edge that avoids harsh corners without feeling overly rounded. Modals and elevated surfaces use 1rem (16px) for a slightly softer appearance, signaling importance and separation from the base layer. Input fields use 0.5rem to align with card styling and create visual cohesion. The rationale: p

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background: {colors.primary} (#202020), color: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 48px, border-radius: 9999px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, background shifts to {colors.primary-container} (#313131) with a 200ms ease-out transition. Secondary buttons use transparent background with a 1px border in {colors.outline} (#c9c9c9); on hover, background becomes {colors.surface-container-high} (#e8e8e8). All buttons use {typography.label-md} (Archivo, 14px, 500 weight) for consistency and legibility.

Containers & Surfaces Product cards use transparent background (--card-product-bg: rgba(0,0,0,0)) with 20px padding and no border. On hover, background transition

Do's and Don'ts

**Do**

• Do use {colors.primary} (#202020) exclusively for primary CTAs and critical interactive elements—it's the brand's signature and should never be diluted or overused.
• Do maintain 1.5x to 1.75x line-height on all body copy to ensure mobile readability and reduce cognitive load; never compress below 1.4x.
• Do apply 40px (lg spacing) between major page sections and 24px (md spacing) between subsections to create visual rhythm and prevent content fatigue.
• Do use 9999px border-radius on all buttons to signal interactivity immediately; this is the most recognizable affordance in the system.
• Do pair Instrument Sans (headings) with Archivo (body) consistently; never substitute or mix weights without explicit design intent.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on text; always use {colors.on-surface} (#202020) or {colors.on-surface-variant} (#767474) to maintain warmth and reduce eye strain.
• Don't apply shadows stronger than {elevation.lg} (0 24px 80px rgba(17, 24, 39, 0.28)) on any element except full-screen modals; excessive depth creates visual noise.
• Don't use {colors.secondary} (#9dbc91) or {colors.tertiary} (#108474) on primary CTAs; these are supporting accents and will dilute brand recognition.
• Don't compress padding below 12px on interactive elements or below 16px on containers; the brand's premium positioning requires generous whitespace.
• Don't mix border-radius values arbitrarily; stick to the defined scale (8px, 12px, 16px, 9999px) to maintain visual consistency and system integrity.