Visual language / 01Precision. Care. Confidence.

Precision.
With a human touch.

TETRI’S SMILE
Design system

A considered expression of modern dental care. Precise typography, reflective materials, generous space, and purposeful motion bring the TETRI identity to life.

TETRI’S SMILE precision-led visual identity

01 / Color

Tiffany blue gives the identity its signature. Chrome, silver, and pearl carry the light, with deep midnight and obsidian grounding the cinematic transitions.

TETRI identity

01
TETRI Midnight#071725 · --tetri-midnight
02
TETRI Chrome / Silver#C6D0D6 · --tetri-chrome
03
TETRI Pearl#F3F5F6 · --tetri-pearl
04
TETRI Tiffany Blue#81D8D0 · --tetri-tiffany

Cinematic foundation / Feedback

01
Obsidian Dust#0B0B0B · --c-obsidian-dust
02
Soft Concrete#F1F1F1 · --c-soft-concrete
03
Pure White#FFFFFF
04
Voltage Red#E10000
05
Greenline Circuit#2E9A00
Concrete / 20%
Concrete / 6%
Concrete / 1%
Voltage / 20%

02 / Typography

Gotham carries the precision of the identity. Helvetica Neue keeps the supporting voice clear, calm, and human. Thin and book weights preserve the cinematic contrast. Compare Gotham, Manrope, and Inter ↗

Display / Thin100px / 90% / −8px

Precision.
Care. Confidence.

Display / Book100px / 90% / −10px

A smile.
A new feeling.

Heading / Thin + Book52px / 90% / −4.16px

Precision meets
a human touch

Body / Light15px / 135% / −0.15px

A smile is personal. Our visual language balances the precision of modern dentistry with a calm, welcoming experience. Every detail has room to feel considered.

Label / Bold12px / 110% / −0.12px

The practice   /   Smile journeys   /   Consultation ↗

Gotham Thin

Aa — Precision & care

Gotham Book

Aa — Precision & care

Gotham Light

Aa — Precision & care

Gotham Medium

Aa — Precision & care

Gotham Condensed Thin

Aa — Precision & care

Helvetica Neue Thin

Aa — Precision & care

Helvetica Neue Light

Aa — Precision & care

Helvetica Neue Bold

Aa — Precision & care

03 / Space

Small intervals keep details precise. Larger intervals create a deliberate rhythm between images, headlines, and chapters.

--44px
--1616px
--2020px
--4040px
--5656px
--7272px
--9696px
--120120px
--144140px*

Values shown at the 1440px reference width. *The original token named --144 resolves to 8.75rem, or 140px.

04 / Elements

Rounded calls to action provide a soft counterpoint to the typography. Navigation stays simple, led by labels and fine rules.

Midnight surface / ActionBook a consultation44px height · full radius · 20px inset
Pearl surface / ActionBook a consultationInverted color · shared motion
Navigation / Chapter ITypographyThin display face · expanding rule
Navigation / Chapter IICompositionGenerous hit area · clear focus state

05 / Motion

Movement follows an expressive ease: a slow beginning, confident acceleration, and measured arrival. Scroll chapters reveal rather than compete.

Default ease

cubic-bezier(.83, 0, .17, 1)
Interaction duration: 600ms

The specimen animation respects your reduced-motion preference.

06 / Composition

The TETRI experience moves between a welcoming space and precise material detail. Contrasting scales, asymmetry, and negative space keep that story composed.

A sunlit treatment suite inside TETRI
Welcome / Wide frame01
A real restoration model from the TETRI laboratory
Precision / Tall frame02
01 / Precision & warmth

Balance a reflective detail with a welcoming environment. Let a single strong gesture lead each composition.

02 / Room to breathe

Use open space to convey calm. Keep supporting copy compact and close to its point of reference.

03 / Responsive rhythm

Desktop compositions become a deliberate single-column sequence on smaller screens, preserving the hierarchy.