Jimmy's Barber

Overview

Jimmy's Barber is a Swiss barbershop brand that embodies 'Vintage Metallicism'—a design philosophy that fuses heritage craftsmanship with warm, luminous brass accents against a deeply textured dark canvas. The aesthetic evokes the intimate, ritualistic atmosphere of a 1970s-inspired barber's chair: precise, unhurried, and steeped in masculine tradition. The UI transforms the booking experience into a tactile, almost ceremonial journey, where every interaction feels intentional and grounded in real materials—think burnished metal, aged leather, and candlelit warmth. The brand personality is confident yet approachable: knowledgeable without pretension, meticulous without coldness. Voice: direct, warm, and slightly nostalgic. Example: 'Every cut tells a story. Book yours today.'

Colors

The color system centers on a deep, near-black foundation (#15100c surface) paired with a warm cream (#f2e6cf on-surface) that reads as candlelit against the darkness. The primary accent is a terracotta-red (#bd3d30), used exclusively for call-to-action buttons and critical interactive states—it signals urgency and warmth simultaneously, evoking both the energy of a busy shop and the comfort of a trusted craftsman. Secondary and tertiary roles belong to brass (#cfa15a) and a muted slate-blue (#2d5b6b): brass appears in dividers, kickers, and accent borders to reinforce the metallurgical theme; blue provides subtle contrast in secondary UI elements and data visualization. The surface stack is deliberately compressed—only three ink tones (#15100c, #1d1510, #271c14)—to maintain visual cohesio

Typography

The type system employs a three-family hierarchy: Rye (serif, display-only) for headlines and hero copy, Spectral (Georgia serif, fallback) for body and narrative text, and Oswald (sans-serif) for labels, navigation, and UI microcopy. This pairing communicates 'heritage meets modernity'—Rye's decorative, slightly irregular letterforms evoke hand-painted barbershop signage, while Spectral's classical proportions ground longer-form content in readability. Oswald's geometric precision handles utilitarian tasks (uppercase labels, letter-spacing: 0.14em to 0.42em) without competing for attention. Headlines use font-weight: 400 (regular) to avoid heaviness; the visual hierarchy is achieved through size (display at 113px, headline-lg at 52px, body-lg at 18px) and color contrast rather than weight

Layout

The layout operates on a 12-column grid with a fixed max-width of 1180px, centered with auto margins. Sections use a consistent padding rhythm: 60px vertical (lg spacing) for feature blocks, 40px (md spacing) for card interiors, and 28px (gutter) for horizontal padding on all containers. The design favors a two-column grid at desktop (feature + media, info + contact) that collapses to single-column at 860px breakpoint. White-space is generous but purposeful—the 56px divider padding and 90px gap between feature columns create breathing room that reinforces the 'unhurried' brand voice. Container max-width of 1180px prevents text lines from exceeding 65–75 characters, maintaining readability. Mobile breakpoint at 860px uses grid-template-columns: 1fr and reduces padding to 18px to preserve le

Elevation & Depth

Depth is conveyed through a restrained shadow vocabulary that avoids the flat-design trap while respecting the brand's vintage aesthetic. Level 1 (base) uses no shadow—the dark background (#15100c) and subtle noise texture (opacity: 0.05, mix-blend-mode: overlay) provide sufficient grounding. Level 2 (cards, pricing table) applies box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7)—a soft, spread shadow that suggests depth without harshness. Level 3 (buttons on hover, elevated modals) escalates to 0 22px 40px -12px rgba(189, 61, 48, 0.9), where the shadow takes on the warm red hue of the primary

Shapes

The shape philosophy is 'Architectural Restraint'—minimal rounding that respects the brand's precision-focused identity without adopting the rounded-maximalism of contemporary design. Buttons use border-radius: 3px (sm rounded), a nearly imperceptible curve that suggests craftsmanship rather than friendliness. Cards and containers use 6px (md rounded) to create subtle visual separation without softness. The pricing table and major containers use 8px (lg rounded) as the maximum—any larger would undermine the brand's no-nonsense character. Circular elements (philosophy portrait, badge accents) u

Components

Action Elements Buttons are the primary interactive element and must command attention without aggression. The primary button uses background: #bd3d30, padding: 17px 38px, border-radius: 3px, and a 1.5px border in #8f2c22 (primary-container). On hover, apply transform: translateY(-3px) and escalate the shadow to 0 22px 40px -12px rgba(189, 61, 48, 0.9) to create a subtle lift effect. Transition all properties over 0.25s for snappy feedback. Secondary buttons (navigation CTA) use transparent background with a 1.5px border in brass (#cfa15a) and text-color: brass; on hover, invert to background: brass, color: ink. The arrow icon inside buttons should animate with transform: translateX(5px) on parent hover.

Containers & Surfaces Cards use background: #271c14 (surface-container), padd

Do's and Don'ts

**Do**

• Do use the brass accent (#cfa15a) sparingly—reserve it for dividers, kickers, and secondary interactive states to maintain the red button's dominance.
• Do apply text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.6) to all hero-scale headlines to ensure legibility over photographic backgrounds.
• Do maintain the 3px button border-radius and avoid rounding beyond 8px on any container—the brand's precision depends on architectural restraint.
• Do use Rye serif exclusively for headlines (h1, h2, h3) and Spectral for all body copy; never mix serif families within a single text block.
• Do transition all interactive states over 0.25s (buttons, links, hover effects) to create a cohesive, responsive feel.

**Don't**

• Don't use the primary red (#bd3d30) for anything other than CTAs, error states, and critical interactive elements—overuse dilutes its signal.
• Don't apply shadows larger than 0 22px 40px -12px rgba(189, 61, 48, 0.9) or use hard-edged shadows (positive spread-radius); the brand requires soft, diffuse depth.
• Don't introduce new accent colors (greens, purples, oranges) beyond primary red, secondary brass, and tertiary blue—the palette is intentionally limited to reinforce cohesion.
• Don't use system-ui or generic sans-serif fallbacks in place of Oswald, Spectral, or Rye; always specify the full font stack with Georgia and serif fallbacks.
• Don't round corners beyond 8px on any UI element; the brand's identity depends on sharp, architectural precision, not soft, rounded friendliness.