Website built by Ilan Vexlender ← Back to portfolio
Brand Kit · Design Language “Millimeter”

Precision, by the millimeter.

Fade Lab treats every cut like a measurement. The brand borrows its rules from the clipper: hard steps, exact numbers, clean lines, and one red stripe from the barber pole.

Spec sheetREV. 01
Display
Archivo Condensed 900
Text
IBM Plex Sans / Mono
Accent
Pole Red #E0261B
Corners
2 px, never round
Steps
#0 → #8 · 1.5 → 25 mm
02

Color

A lab bench of paper and ink, with the barber pole as the only color. Tap a color to copy its hex.

Pole Blue appears in one place only: the spinning barber pole. Use it for the pole, the loading state and the favicon stripe. Every button, link and highlight uses Pole Red.

03

Type

A condensed display face for the sign above the door, a plain sans for reading, and a mono face for every number on the ticket.

Skin fade.

ARCHIVO 900 · 62% WIDTHUppercase only
Headlines, signage, prices

A cut that grows out clean in three weeks, not two.

ARCHIVO 700 · 100% WIDTH−2% tracking
Section titles, service names

Every booking starts with a two-minute consult. We check the crown, the growth pattern and how you style it at home, then pick the guard numbers together.

IBM PLEX SANS 40018 / 28 px
Descriptions, policies, bios

#1 → #4 taper45 min₪110Tue 17:30

IBM PLEX MONO 500Tabular numbers
Guards, times, prices, labels
04

The guard system

Clipper guards are the brand's measuring scale. The nine guard numbers drive the gray tints and the spacing tokens, and they name the cuts on the menu.

#26 mm · ¼ inch
Pick a guard

Short and even

The classic short back and sides. Shows the scalp under bright light.

GuardLengthSpace tokenTint
05

Components

Buttons fill up in five hard steps on hover, the same five steps as the logo. Nothing fades smoothly except the haircut.

Buttons

Red is for the one action that books a chair. Hover over any button to see the stepped fill.

Live queue
2 in queue · ~25 min

Walk-ins see the real wait before they leave home. Solid bars are in a chair, dashed bars are waiting.

Service menu
Barber card
DN
Daniel N.Chair 02 · 9 years · fades and tapers
Free 17:30Skin fadeBeard
Tue 3 NovPick a time
06

Rules

If it can be measured, show the number.

✓Do

  • 6.1Show real numbers: guard, minutes, price, chair
  • 6.2Hard steps on every hover and transition
  • 6.3Hairline rules and a visible grid
  • 6.4One red action per screen
  • 6.5Photos in black and white, shot straight on

✕Don't

  • 6.6Vintage clichés: mustaches, skulls, script fonts
  • 6.7Rounded pills or soft shadows
  • 6.8Smooth gradients, except in the haircut itself
  • 6.9Blue outside the pole
  • 6.10Vague promises. “Best cut in town” is not a measurement