Screenshot of Six B

Six B

sixb-dentaire.fr/

a French dental practice that opens on a viewport-filling 54px+ slate-blue "SIX B" wordmark with a photoreal 3D tooth wedged through the letters, then drops into calm white editorial bands of clinical photography and 520px muted-slate prose, the whole thing scrolled on Lenis with a single 0.15s fade as its only motion.

Health Dental strong

Design tokens

white
brand-lightest
brand-light
brand
brand-text
brand-dark
black
display
Figtree (--font-figtree, variable 300-900)
body
Inter (--font-inter, variable 100-900)
mono
none

Do / Don't

Reference it for

  • A confident display-wordmark hero: the brand name set viewport-tall in light-weight Figtree (300 / 54px+) with a 3D object threaded through the letters and nav links pinned to the four corners.
  • A cool monochrome slate system with no accent: text #606979, soft #8594AE, dark #333C4C, panels #F2F4F8 on white, footer on a full slate field, hierarchy carried by tone alone.
  • A frosted pill nav that detaches from the corners and docks to centre-top on scroll (the one real interaction).
  • Restraint as a method for a thin-content service site: 1400px outer / 520px text columns, big 40-96px section gaps, photography and 3D renders doing the work the copy does not.
  • Lenis smooth-scroll plus a single 0.15s cubic-bezier(0.4,0,0.2,1) fade as the entire motion budget on a 16,000px page.

Do not copy

  • The Six B wordmark, the rendered 3D tooth and the practice photography (team portraits, the building render) are brand-coded and licensed/personal; rebuild the *idea* (oversized name + a 3D hero object) with the client's own mark and asset.
  • Inter and Figtree are the Next.js defaults here; the pairing is fine to map, but do not assume the brand intent was specifically these faces, treat Figtree-light-at-display as the move, not the font name.
  • The all-French corner-pinned nav with only three items suits a tiny practice; a site with real depth needs a fuller, more discoverable nav, do not strand links in the corners if there is more than a handful.
  • Do not inherit the thin-content pacing as a target: it reads as deliberate here because the practice is small; a content-rich client needs mid-range type tiers this site omits.

Signature moves

A chrome-free, viewport-filling display-wordmark hero: the brand name set in lig

A chrome-free, viewport-filling display-wordmark hero: the brand name set in light-weight grotesque (Figtree 300, 54px, line-height 1.0) at poster scale with a photoreal 3D object threaded through the letters and nav links pinned to the fou