The logo, colours, type, surfaces, components, motion and voice behind the Tournant website. Use this page as the reference whenever something new is made.
Tournant
01
Logo
The Tiffin: three stacked tiers and a handle. Counter, kitchen and books, held together. The middle tier is always leaf, or mint on dark.
Tournant
PRIMARY · ON PAGE
Tournant
REVERSED · ON INK
Tournant
ON LEAF
CONSTRUCTION · 64-UNIT GRIDHandle 12×8, tiers 40×13, 3-unit gaps, 4-unit corner radius. Centred on the vertical axis.
CLEAR SPACE · x = ONE TIER
Tournant
Keep at least one tier's height clear on every side. Nothing else sits inside the dashed line.
MINIMUM SIZE
16px
24px
32px
48px
The mark holds up at 16px. Use the full lockup at 20px text height or larger.
APP ICON · INK
APP ICON · PAGE
APP ICON · LEAF
Tournant — Pricing
FAVICON · 16 / 32 / 48
DON'T
✕Stretch or squash it
✕Recolour the tiers
✕Rotate it
✕Add shadows or effects
02
Colour
A calm page, ink for weight, leaf for the brand, chilli only for money owed. Tap a swatch to copy its hex.
ROUGH PROPORTION ON A PAGE
PAGE 62%INK 22%LEAF 9%MINT 4%CHILLI 3%
SUPPORTING
CONTRAST · WCAG
Aa ₹3,420
Ink on Page15.7:1 · AA
Aa ₹3,420
Page on Ink15.7:1 · AA
Aa ₹3,420
Leaf on Page6.5:1 · AA
Aa ₹3,420
Mint on Ink9.9:1 · AA
Aa ₹3,420
White on Leaf7.1:1 · AA
Aa ₹3,420
Chilli on Page4.9:1 · AA
Aa ₹3,420
Body Muted on Page8.3:1 · AA
Aa ₹3,420
Label on Page5.2:1 · AA
03
Typography
One family, three voices. IBM Plex Serif for what we say, Plex Sans for how things work, Plex Mono for every number.
AaIBM Plex SerifHeadlines. Italic leaf for the phrase that matters.ABCDEFGHIJKLM abcdefghijklm 0123456789 ₹
One app runs the counter, the kitchen, the guest's phone and the books.
BodyPlex Sans 400 · 17 / 1.6
Regulars log in with their phone number, see every bill and settle the lot in one tap.
UIPlex Sans 600 · 15–16
Start Free Trial
FiguresPlex Mono 600 · -2%
₹1,84,260
LabelPlex Mono 500 · 12 / +8% · caps
GUEST TABS & PREPAID BALANCES
04
Surfaces & Glow
Frosted glass over soft light. The glow carries across the whole page with no hard edges. Dark cards are rounded and sit on the page, never full width.
Movement tells people something is happening. It is slow enough to follow and never bounces.
EASEcubic-bezier(.2, .8, .2, 1)Fast start, soft landing. Use for slides, reveals and cards.
DURATIONS
Hover, colour0.2–0.3s
Toggles, tabs0.35s
Slides, reveals0.5–0.7s
Hero step2.4s
Glow drift16–23s loop
PROGRESS · CONTINUOUS FILL
Fills like a video scrubber, so people can see the story is moving.REVEAL
Rises 14–28px and fades in
07
Voice
Written by kitchen people for kitchen people. Plain and warm, with short sentences, outcomes over feature names, and honesty about what is still in Beta.
✓ SAYKnow on Sunday night whether the week made money.