Switch between the rendered Visual preview and the Raw DESIGN.md.
The Barber's Cave design system embodies a sophisticated, modern barbershop aesthetic that balances rugged masculinity with refined craftsmanship. The visual language combines deep dark backgrounds with vibrant accent colors, creating an intimate, cave-like atmosphere that feels exclusive and professional. Bold typography and strategic use of white space convey confidence and precision, while photographic elements showcase real barbering artistry. The design carries an edgy, contemporary feel suitable for a specialist barber shop targeting discerning clients who value quality and personal attention. The palette emphasizes contrast and clarity, ensuring every element—from navigation to product showcases—commands attention with intentional hierarchy.
Key Characteristics:
#2266FF): Core interactive element for links, primary buttons, borders, and call-to-action focus states. Dominates the interactive layer throughout the design.#E09900): Warning and emphasis states, used sparingly for secondary highlights and product calls-to-action.#008000): Accent highlight, used for special offers or select interactive states.#F78DA7): Soft accent for premium product or service indicators.#FF6900): Secondary accent for dynamic product imagery or promotional highlights.#7BDCB5): Tertiary accent for alternative interactive states or complementary UI elements.#2266FF): All text links and interactive underlines.#CF2E2E): Error states, destructive actions, critical warnings.#FCB900): Secondary warning state, cautionary messages.#2C3E50): Hover state for dark-themed text elements.#FFFFFF): Primary surface, button backgrounds, contrast layer, text on dark.#444444): Primary body text, default link color, primary text on light backgrounds.#000000): Maximum contrast headings, borders, darkest text.#333333): Secondary dark text, subtle borders.#F9F9F9): Minimal surface variation, near-white backgrounds.#F2F2F2): Subtle background distinction.#EFEFEF): Card backgrounds, container fills.#E8EEF6): Form backgrounds, input surfaces with blue undertone.#ABB8C3): Subtle borders, divider lines, disabled states.#2266FF): Active borders, focused form inputs, outlined button strokes.#CF2E2E): Form validation errors, destructive confirmations.#E09900): Alert states, cautionary indicators, experimental features.#008000): Confirmation states, successful form submissions, positive status.Primary Display & Headings: Bebas Neue, with fallback to Impact, sans-serif for uppercase impact and modern geometric form.
Body & Interface: Open Sans, with fallback to -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for legibility and accessibility.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Bebas Neue | 72px | 500 | 86.4px | 0px | Hero section headings, page titles, maximum impact |
| Section Heading / H2 | Bebas Neue | 52px | 500 | 62.4px | 0px | Major section dividers, feature headings |
| Subsection / H3 | Bebas Neue | 22px | 500 | 22px | 0px | Component headings, card titles, secondary callouts |
| Body Text | Open Sans | 15px | 500 | 24px | 0px | Primary content, paragraphs, descriptions |
| Emphasis Text | Open Sans | 16px | 600 | 20.8px | 0px | Highlighted spans, strong callouts within body |
| Label / Form | Open Sans | 12px | 500 | 23.8px | 0px | Form labels, input annotations, caption text |
| List Item | Open Sans | 14px | 500 | 23.8px | 0px | Bulleted and numbered lists |
| Small / Caption | Open Sans | 14px | 600 | 18.2px | 0px | Metadata, timestamps, fine print |
| Link Text | Open Sans | 11.2px | 600 | 14.56px | 0px | Inline links, breadcrumbs, navigation items |
| Input Placeholder | Open Sans | 13.33px | 400 | normal | 0px | Form input text, placeholder text |
#2266FF#FFFFFF12px 20px48pxrgba(34, 102, 255, 0.4) 0px 0px 8px 2px#1A4DB8 (darkened), shadow intensifies to rgba(34, 102, 255, 0.6) 0px 0px 12px 3px#0F2D7A, shadow remains#ABB8C3, text #FFFFFF, shadow none, opacity 0.5#FFFFFF#44444412px 20px48px2px solid #2266FF#E8EEF6, border color #1A4DB8#D4E1F7, border color #0F2D7A#F2F2F2, border color #ABB8C3, text #ABB8C3#2266FF8px 12px0px#1A4DB8, underline 1px solid #1A4DB8#0F2D7A, underline continues#ABB8C3, no underline#2266FF#FFFFFF60px100% (perfect circle)2px solid #FFFFFFrgba(34, 102, 255, 0.4) 0px 0px 8px 2px#1A4DB8, shadow rgba(26, 77, 184, 0.6) 0px 0px 12px 3px#0F2D7A, border color #E8EEF6#ABB8C3, border color #FFFFFF, opacity 0.5#2266FF#FFFFFF12px 16px21px 0px 0px 21px (left variant)0px 21px 21px 0px (right variant)#1A4DB8#0F2D7A, text weight 700#FFFFFF, background #ABB8C3#FFFFFF#44444424px7px1px solid #E8EEF60px 4px 12px rgba(34, 102, 255, 0.1), border color #2266FF (subtle)#FFFFFF#44444424px7px0px 8px 16px rgba(0, 0, 0, 0.12)0px 12px 24px rgba(0, 0, 0, 0.18)rgba(255, 255, 255, 0.05)#FFFFFF20px7px1px solid rgba(255, 255, 255, 0.1)blur(10px) (optional frosted glass effect)rgba(34, 102, 255, 0.4)#F9F9F9#44444412px 16px7px1px solid #E8EEF6#ABB8C3, opacity 0.7#FFFFFF, border color #2266FF, outline none, box shadow 0px 0px 8px rgba(34, 102, 255, 0.2)#ABB8C3#CF2E2E, background #FEF5F5#EFEFEF, text color #ABB8C3, cursor not-allowed#2C3E508px20px8pxrgba(0, 0, 0, 0) (transparent on dark)#4444440px 16px0px24px horizontal gap#2266FF, border bottom 2px solid #2266FF#2266FF, text weight 600768px breakpoint#444444#2266FF#2266FF with underline0px 5.6px (inline spacing)#FFFFFF#44444416px0px (full-bleed)0px 4px 12px rgba(0, 0, 0, 0.1)12px 16px7px#E8EEF6, text color #2266FF#E8EEF6#2266FF4px 12px21px#444444#2266FF, underline 1px solid #2266FF#2C3E50 (subtle purple-gray)#0F2D7A, underline persists#FFFFFF#E8EEF6, underline 1px solid #E8EEF6Base Unit: 8px — all spacing multiples are 8px-based for consistency and rhythm.
Scale:
4px — micro-spacing for tight inline gaps or icon alignment8px — minimum padding, tight list spacing12px — button vertical padding, compact form fields16px — standard padding, card horizontal padding, medium gaps20px — section horizontal padding, major gaps24px — card standard padding, significant section spacing28px — large container padding32px — horizontal margins for grouped sections56px — section divider spacing60px — major layout breaks64px — large hero padding, full-screen spacing72px — maximum spacing for hero sections and page divisionsUsage Context:
12px vertical, 20px horizontal24px standard; 28px large8px between label and input; 20px between fields56px–64px vertical; 20px–32px horizontal8px item spacing; 16px group spacingMax Width: 1440px (full card width extracted)
Column Strategy: 12-column grid for desktop; 6-column for tablet; 4-column for mobile
Section Layout:
1440px, centered600px, centered with 32px horizontal marginsContainer Horizontal Padding:
32px left and right24px left and right16px left and rightGenerous, intentional whitespace creates breathing room and hierarchical clarity. Dark backgrounds (near-black) allow white text and bright accent colors to pop without crowding. Spacing between major sections (56px–72px) signals new content blocks and invites the eye to transition naturally. Compact internal spacing (8px–16px) within components ensures readability; looser spacing between components creates focus hierarchy. Images span full width with padding context, maintaining visual drama without overwhelming.
0px — Hard edges for technical/tabular components, ghost buttons, and dividers7px — Standard softness for cards, inputs, and container elements21px — Slightly more rounded for toggle/split buttons and badge variants48px — Pill-shaped buttons, maximum roundness for CTAs and small interactive elements100% — Perfect circles for icon buttons and avatar containers| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, flat border only | Inputs, backgrounds, disabled states |
| Raised (L1) | 0px 2px 4px rgba(0, 0, 0, 0.08) | Standard cards, hover state for flat elements |
| Lifted (L2) | 0px 4px 12px rgba(0, 0, 0, 0.12) | Elevated cards, floating buttons, dropdown menus |
| Floating (L3) | 0px 8px 16px rgba(0, 0, 0, 0.18) | Modal dialogs, expanded cards, persistent floating elements |
| Accent (Glow) | rgba(34, 102, 255, 0.4) 0px 0px 8px 2px | Primary CTAs, icon buttons, focus rings |
| Accent Enhanced (Glow) | rgba(34, 102, 255, 0.6) 0px 0px 12px 3px | Hover state for primary buttons, interactive highlights |
Shadow Philosophy: The design uses minimal drop shadows; emphasis is on blue accent glow for interactive elements. Shadows maintain subtlety and prevent visual noise. Dark backgrounds reduce need for shadow depth; instead, glow and color contrast drive hierarchy. Accent shadows (blue glow) guide user attention to primary CTAs and interactive states, creating a clear focus path through the interface.
12px padding for touch targets on buttons and interactive elements#2266FF blue for primary interactive elements; use sparingly for secondary accents only#FFFFFF backgrounds for card/form components on light sections; reserve dark overlays for image-heavy sections20px vertical spacing between distinct sections48px border radius) for primary CTAs to soften the interfacergba(34, 102, 255, 0.4) 0px 0px 8px 2px) to highlight primary button hover and focus states12px on buttons; maintain minimum height of 44px for mobile touch22px (H3 minimum); use body text weight (600) for emphasis instead| Name | Width | Key Changes |
|---|---|---|
| Mobile (XS) | 360–599px | Single-column layout, 16px side padding, hamburger navigation, 16px–24px section spacing |
| Tablet (SM) | 600–899px | 2-column grid, 24px side padding, vertical navigation toggle, 28px–40px section spacing |
| Tablet Large (MD) | 900–1199px | 2–3 column grid, 28px side padding, horizontal navigation restored, 40px–56px section spacing |
| Desktop (LG) | 1200–1439px | 3–4 column grid, 32px side padding, full horizontal navigation, 56px–64px section spacing |
| Desktop XL (XL) | 1440px+ | 12-column grid, max-width container 1440px centered, 72px section spacing, full-width hero |
44px (including padding)44px48px × 48px (icon buttons, circular CTAs)8px minimum between adjacent interactive elements44px minimum on mobile; 40px acceptable on desktop4px above and below text baseline for easier interaction on touch16px margins–8px at tablet; –12px at mobile. Body text remains consistent 15px except captions scale to 12px.8px per breakpoint level (e.g., 24px desktop → 16px tablet → 12px mobile)44px height on mobile; can reduce to 40px on tablet/desktop without affecting accessibility64px spacing at desktop → 48px at tablet → 32px at mobile#2266FF) — use for all primary call-to-action buttons, links, and interactive focus states#FFFFFF background with #2266FF border) — secondary buttons, alternative actions#444444) — all body text, labels, and primary content on white/light backgrounds#FFFFFF) — all text on dark backgrounds, overlays, and dark sections#000000) — maximum contrast for H1/H2/H3 headings; use Bebas Neue font family#FFFFFF) — card backgrounds, form fields, content containers#000000 or rgba(0, 0, 0, 0.95)) — hero sections, image overlays, dark mode sections#EFEFEF) — alternate card backgrounds, subtle section distinction#E8EEF6) — form input borders, card borders, subtle divider lines#2266FF) or Rose Pink (#F78DA7) — product badges, emphasis, special indicators#CF2E2E) — form validation errors, destructive confirmations#E09900) — cautionary states, experimental features, non-critical alerts#008000) — confirmation messages, successful form submissions, positive status#2266FF blue for interactive elements — all primary buttons, links, and focus states must map to Primary Blue for visual cohesion48px and background #2266FF#FFFFFF background, 2px solid #2266FF border, white text color #444444box-shadow: rgba(34, 102, 255, 0.4) 0px 0px 8px 2px44px tall; icon buttons are 60px circular1px solid rgba(255, 255, 255, 0.1) border and rgba(255, 255, 255, 0.05) background#F9F9F9 background by default, switch to #FFFFFF with blue border on focusDesign System Version 1.0 — Extracted from The Barber's Cave, Bollington (barberscavebollington.co.uk)