UNOIT Barber

Overview

UNOIT is a premium barbershop brand that embodies 'Architectural Minimalism'—a design philosophy that strips away ornament to reveal essential craft and precision. Located in Darlinghurst, Sydney, UNOIT serves discerning clients seeking award-winning haircuts, luxury grooming treatments, and an elevated aesthetic experience. The visual identity is deliberately austere: pure black (#020202) and white (#ffffff) dominate, with warm neutrals (gainsboro #e5ddd9, dark grey #b3b3b3) providing subtle depth. The UI evokes a gallery-like serenity—clean typography, generous whitespace, and sharp geometric forms communicate expertise and restraint. The brand personality is confident, understated, and unapologetically sophisticated. Voice: precise, never flowery. Example: 'Award-winning fades and keratin treatments. Book your appointment.'

Colors

The color system is rooted in monochromatic sophistication with strategic warm accents. Primary (#020202, pure black) is the dominant accent—used on CTAs ('Book now'), navigation links on hover, and all interactive focus states. It commands attention through contrast against the white surface (#ffffff), not through saturation. Secondary (#505050, dark grey) supports hierarchy in body text and secondary UI elements, while tertiary (#b3b3b3, gainsboro) provides a softer mid-tone for disabled states and tertiary containers. The surface stack is deliberately minimal: surface (#ffffff) is the default, surface-container-high (#e9ecef) is used for hover states on cards and list items, and surface-container-highest (#dddddd) for pressed states. Outline (#b3b3b3) defines subtle borders at 1px on fo

Typography

The type system pairs Jost (geometric sans-serif, 300–700 weights) for headlines and UI labels with Lato (humanist sans-serif, 400–700 weights) for body copy. This pairing communicates both precision (Jost's clean geometry) and approachability (Lato's warmth). Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements like 'BARBER, BUT DIFFERENT.' Headline-lg (40px, 600 weight) anchors section titles, while headline-md (28px, 600 weight) is used for subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading at 1.5–1.6 line-height ratios. Label-md (14px, 600 weight) is applied to button text and form labels, with label-sm (12px, 600 weight, 0.05em tracking) for badges and helper text. On small labe

Layout

The layout employs a 12-column grid with a fixed container max-width of 1200px, centered on desktop with 24px gutters. The page rhythm alternates between full-bleed hero sections (slider with overlaid logo and CTA) and contained content blocks. Whitespace is generous: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) is used within component groups. The hero slider occupies 100vh with a semi-transparent overlay (rgba(0, 0, 0, 0.15)) to ensure text legibility over background imagery. Navigation is fixed at the top with a white background (#ffffff) and 24px horizontal padding. Cards and content blocks use 24px padding internally with 1px borders at outline (#b3b3b3). Mobile breakpoints collapse to single-column at 768px and below, with g

Elevation & Depth

Depth is achieved through subtle shadows and border definition rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and standard containers; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. All cards and containers receive a 1px solid border at outline-variant (#cccccc) to define edges without relying on shadow alone. On hover, cards transition from md to lg shadow with a 300ms ease timing. The hero slider uses n

Shapes

The shape philosophy is 'Architectural Sharpness'—minimal rounding that respects the grid and maintains visual clarity. Buttons use 0px border-radius (sharp corners), reinforcing their role as decisive, action-oriented elements. Form inputs and small UI components use 4px border-radius (rounded.sm converted to 4px), providing a subtle softness without compromising precision. Cards and larger containers use 8px border-radius (rounded.md), balancing approachability with geometric restraint. Badges and pill-shaped elements use full (9999px) border-radius. The hero slider and full-width sections h

Components

Action Elements Buttons are the primary interactive component. Button-primary uses #020202 background, white text, 13px Jost 600 weight, 10px vertical / 20px horizontal padding, and 0px border-radius. On hover, the background transitions to primary-container (#333333) with a 200ms ease transition. Button-secondary is transparent with a 1px outline-variant border, black text, and the same padding and typography. On hover, it fills with surface-container-high (#e9ecef). Both buttons have a minimum height of 44px to meet touch targets. The 'Book now' CTA in the header and hero uses button-primary styling and links to the external Fresha booking system.

Containers & Surfaces Cards are the primary content container. They use a white background (#ffffff), 24px padding, 8px border-radius

Do's and Don'ts

**Do**

• Do use sharp 0px border-radius on buttons and CTAs to emphasize decisiveness and action.
• Do maintain 1px borders on all cards and containers at outline-variant (#cccccc) to define edges without relying on shadow alone.
• Do apply negative letter-spacing (-0.01em to -0.04em) on all headlines to tighten visual weight and reinforce precision.
• Do transition all interactive color changes over 150–300ms with ease timing to telegraph state without jarring shifts.
• Do use lg spacing (40px) between major sections and md spacing (24px) within sections to create breathing room and visual hierarchy.
• Do pair Jost (headlines, labels) with Lato (body) to balance geometric precision with humanist warmth.

**Don't**

• Don't use rounded corners > 12px except on badges; excessive rounding dilutes the architectural minimalism.
• Don't apply shadows > lg (0 8px 24px rgba(0, 0, 0, 0.12)) to avoid visual heaviness; the system relies on borders and color contrast.
• Don't use color to convey state alone; always pair with typography weight or border changes (e.g., hover states should shift both color and shadow).
• Don't exceed 2 font families; Jost and Lato are sufficient; avoid mixing in additional typefaces.
• Don't use primary (#020202) for body text; reserve it for headlines, CTAs, and interactive elements; use on-surface (#020202) for body copy instead.
• Don't animate transitions > 300ms; keep interactions snappy and responsive to user input.