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

Liquid Graphite.

Quiet gray metal, light that bends through glass, and one warm ember for the moment you press play. Every surface floats, every corner is soft, and nothing shouts.

02 · PaletteMachined metal, one spark.

Three hero colors, each in three tones: light for the highlight, base for the body, deep for the shadow. Tap any tone to copy its hex.

Graphite
Silver
Ember

Titanium scale

Cool gray · 2° blue bias · 50 → 900

03 · TypeTight, calm, precise.

One family in three voices. Display sits tight at negative tracking. Specs go in mono, the way they're engraved on the hardware.

Hear nothing else.

GEIST 600 · DISPLAY−5.5% tracking
Hero lines, product names

Adaptive noise cancellation that learns your commute.

GEIST 500 · TITLE−3.5% tracking
Section titles, cards

Memory-foam cushions wrapped in protein leather, a knit headband that disappears after five minutes, and 40 hours of battery for the longest flights you take.

GEIST 400 · BODY18 / 28 px
Descriptions, checkout, menus

40 mm driver20 Hz–40 kHz−42 dB ANCBT 5.4254 g

GEIST MONO 500 · SPEC+1% tracking
Specs, prices, labels, tags

04 · Liquid ButtonsPills of light.

Every button is a full pill with a highlight along its top edge. Glass buttons catch your cursor like a polished surface. Press and they sink slightly.

Primary · Graphite

The default action on a page. Inverts in dark mode so it always reads as solid metal.

Accent · Ember

One per screen, at most. Reserved for sound and launches.

Secondary · Glass

Floats over imagery without hiding it. Move your pointer across it to see the light.

Controls
Spatial Audio
Drag to rotate
New

hush One

Over-ear, adaptive noise cancellation, 40 hours of playback. The product card puts every rule on this page together.

Graphite

$449 or $37.41/mo.

05 · Glass MaterialsFour thicknesses.

Glass is a material, not a filter. Pick the thickness by how much needs to stay readable on top of it.

Ultra-thin

blur 6 · fill 18%
Hover states, tags

Thin

blur 14 · fill 44%
Buttons, chips

Regular

blur 28 · fill 55%
Nav, cards, sheets

Thick

blur 48 · fill 72%
Checkout, menus

06 · RulesQuiet on purpose.

If a screen feels loud, take something away.

✓Do

  • Full pill radius on every button and control
  • A top-edge highlight on anything you can press
  • Soft, wide shadows that lift instead of outline
  • One ember element per screen, at most
  • Big product, lots of air around it

✕Don't

  • Hard black outlines or sticker shadows
  • Saturated gradients behind the product
  • Square corners on interactive elements
  • Glass on glass on glass. Two layers is the limit
  • All-caps headlines. Caps are for mono labels only