avaTOK
DESIGN SYSTEM · V1 · DESI PRESS

The desi
press kit.

Everything the new avaTOK is made of — the ground colours, the four voices of type, the torn paper, the stamps and the marginalia. Built so the next twenty pages look like they came off the same press.

Creator marketplace
01 · THE ETHOS

Six rules the page already keeps.

Named so the next page follows them deliberately instead of by imitation.

A
01

Type is the poster

Headlines are set in heavy condensed caps at 80–110px with a hard offset shadow. They are not labels on a layout — they are the layout. Everything else negotiates around them.

02

Ink, never light

Shadows are solid, zero-blur offsets in near-black — on text and on cards alike. Nothing glows, nothing blurs, nothing has a gradient. This is a press, not a screen.

03

Price in the title

The rupee figure lives inside the headline, not in a corner badge — WALK & TALK WITH ROHAN · ₹129. Cost is part of the offer's name, so nobody has to hunt for it.

04

Torn, not cut

Where an image meets a card body, the seam is a deckle tear, not a straight rule. Collage art gets ripped edges over flat colour blocks. The page should feel assembled by hand.

05

Speak two languages

English carries the product; Hindi and Hinglish carry the feeling — Chai ho jaye?, Aapki awaaz, duniya tak. Never a translation of the same line. Always the aside that only a local would write.

1:1
06

Faces, not features

Every card leads with a real person in a real place — a Kolkata street, a Mumbai seafront. The product is people. Icons and diagrams stay out of the hero.

02 · PALETTE

Two grounds. One red.

A section sits on either cream or terracotta — never both, never a third. Everything else is a card fill or an ornament.

GROUNDS — PICK ONE PER SECTION
Cream · default
Paper#F6E4CD
The working page. Black display type, red accents, illustration collage. Use for anything informational.
Terracotta · feature
Terracotta#D46E59
The showcase band. Cream display type with black shadow, cards floating on top. One or two per page, no more.
INK & SIGNAL — THESE THREE CARRY MEANING
Ink#161614

All display type on cream, every border, every offset shadow. Warm near-black, never pure #000.

Signal red#D93825

The second half of a headline, the primary button, LIVE dots, the TOK in the logo, stamp ink. The only colour that means act now. It is a cream-ground token — on terracotta it drops to 1.4:1 and vanishes, so red type there becomes bone white with an ink shadow instead.

Aa
Bone white#FDF1D3

Display type on terracotta and on dark cards, plus card interiors on cream. Warm — a true white breaks the press illusion.

CARD FILLS — ONE PER CARD, ROTATE ACROSS A ROW
Deep teal#2D7180

Cream text. Safe-space, trust, verification.

Butter#F4D8A0

Ink text. Warmth, chat, adda, conversation.

Oat#D9C3A0

Ink text. The quiet neutral — pairs with serif titles.

Brick#B8382A

Cream text. Sits on terracotta without vibrating.

Marigold#EA9101

Ornament and collage blocks only. Never a card body.

!
Contrast rule for card fillsTeal and brick take bone white display type; butter and oat take ink. Never cream-on-butter or ink-on-teal — the offset shadow stops reading and the whole card goes muddy.

The same pairing governs the 9px stub row, where it matters more because the type is tiny: on butter and oat the stubs and duration take #5A3D33 — the body colour, not the lighter label brown, which is a near-miss on oat. On teal and brick they go close to bone: #D6ECEE and #FBE4DF. Card prose on brick is plain #FDF1D3 — a tinted version drops under 4.5:1. Brick itself is #B8382A, not the lighter #C54131 sampled off the reference: at 9px the lighter fill leaves bone white a shade under AA.
03 · TYPOGRAPHY

Four voices.

A poster shout, a hand-painted signboard, a plain speaking voice and a ticket stub. Each one has exactly one job and they never swap.

Anton 400 · THE SHOUT

Every headline, card title, price and nav label. Always uppercase, tracking −0.015em. Leading is 1.0–1.08 — tighter than that and the offset shadow of one line lands on the cap-height of the next. On a coloured ground it always carries that shadow, so it never goes below 1.0.

India has stories.
Go live.
Playfair Display 700–900 · ROMAN & ITALIC

The signboard voice. 900 italic for warm, personal offers; 900 roman caps for stately ones. One card in a row of four, not two — it is a change of key, not a second default.

Kolkata Adda with Riya · ₹149
Walk & talk with Rohan · ₹129
Instrument Sans 400 / 500 / 600 / 700

Every sentence a human reads. Base 17px / 1.55 / weight 500. It is deliberately plain — the display type is doing the shouting, so the prose gets out of the way.

Book a private one-to-one conversation with a new girl friend, boy friend, confidant or chat buddy. Check their calendar, choose a time and spend it together live.
Silkscreen 700 · THE TICKET STUB

Pixel caps for eyebrows, stat chips, durations, category tags and section numbers. 10–13px, tracking +0.1–0.16em. Never longer than four words — it is a stamp, not a sentence.

LIVE FRIENDS · PRIVATE 1:1
10 MIN RESPONSE ✓ 1.2K TALKS ★ 4.9 · 238
QUEER-FRIENDLY  ·  SAFE SPACE  ·  30 MIN
SCALE — DESKTOP
Hero96–112px · Anton
lh 1.02 · shadow 6px
Section head58–66px · Anton
lh 1.02 · max 22ch
Card title30–34px · Anton or Playfair
lh 1.06 · shadow 3px
Nav / button15–17px · Anton caps
tracking +0.04em
Lede20–22px · Sans 500
max 44ch
Body17px / 1.55 · Sans 500
Card body15px / 1.45 · Sans 500
Stub10–13px · Silkscreen
+0.1–0.16em
04 · DEVICES & ORNAMENT

The press effects.

Six moves that make a plain grid look printed. Use two or three per section — all six at once is a scrapbook.

PHOTO / COLLAGE

Deckle tear

The seam between image and card body. A repeating radial-gradient scallop in the body colour, 22px wide × 20px tall, overlapping the image by 1px.

Offset

Hard text shadow

Bone-white caps over solid ink, offset down-right, zero blur. 6px at hero size, 3–4px on cards. Only ever on display type, never on prose.

DESI
DIL SE
GLOBAL

Rubber stamp

A dashed circle in signal red, tilted ±8°, holding three short lines. One per screenful. Carries a slogan or a Hindi line, never navigation.

Aapki awaaz,
duniya tak.

Marginalia

Handwritten asides in Kalam, tilted ±5°, sitting in the whitespace next to a card. Hinglish. Two per page maximum.

Creator marketplace
{{ dotGrid }}

Side rail & grit

Vertical Anton caps pinned to the page edge, plus triangle and cross dot-fields in the margins. Structure disguised as decoration.

AVAILABLE NOW NEXT 5 PM LIVE

Status pill

Pinned top-left over the photo. Dark teal for schedulable, signal red for live now. Silkscreen 9px, no border — it reads as a printed overlay.

05 · TRUCK ART GRAMMAR

Horn OK please.

The ornament layer. Everything above is the restrained press — cream, ink, one red. Truck art is what goes on top of it: the frames, the plaques, the dividers and the section headers. It is loud on purpose, so it is rationed on purpose.

The rule that keeps it from becoming a mela: one truck-art object per section. A framed plaque, or an ornate divider, or a decorated section header — never two, and never inside a creator card. The cards stay plain so the ornament reads as special.

THE TRUCK PALETTE — ORNAMENT ONLY, NEVER A PAGE GROUND
Cobalt#3A3A9E
Sky#00A8F0
Chrome#F0D018
Vermilion#D83030
Emerald#1E9E52 / #15773D
Magenta#F03060
Saffron#F0A830

Seven colours, used in threes. A truck-art object picks one dark (cobalt, emerald, vermilion), one bright (chrome, saffron, magenta) and white for the outlines — that triad is what makes the panels read as painted metal rather than as a colour test.

Emerald is a two-value token. #1E9E52 is the flat ornament green — fine for bands, frames and fields with no type on them. The moment text sits on it, drop to #15773D: bone white on the lighter green measures 3.1:1, on the darker one 5.0:1. Same principle as signal red in §02 — a colour sampled off painted metal is not automatically a colour you can set type on.

THE PLAQUE — THE FLAGSHIP TRUCK-ART OBJECT
Horn OK
please
चल बे फिक्र

How the plaque is built

01Three nested frames — ink outer, bright middle, dark inner. Each ring 3px, each inset 7–9px. Never two rings, never four.
02Bead trim — a repeating radial-gradient dot row along the top and bottom inside edges. This single detail does most of the work.
03Outlined lettering — Anton caps in chrome yellow, -webkit-text-stroke in bone white with paint-order: stroke fill, then a hard drop shadow in the darkest ring colour.
04A Devanagari second line — Baloo 2 at 800. The Hindi is the joke or the blessing, never a translation of the English above it.
05A zigzag skirt — the sawtooth band closes the bottom, in the third colour of the triad.

Use it for the one line per page that is pure brand voice — a manifesto, a CTA header, an empty state. Never for a price or a form label.

PRIMITIVES — ALL PURE CSS, NO IMAGE ASSETS

Zigzag band

Two 135°/225° linear-gradients over a flat fill, 20px tile. The section divider and the skirt on every plaque. Height 18–24px.

Bead trim

A repeating radial-gradient dot row. 12px, 16px or 20px tile. Runs along the inside edge of a frame, or under a section header as a rule.

Scallop skirt

The awning edge — an inverted radial-gradient arc row, 32px tile. Sits at the bottom of a coloured band where a hard rule would feel too abrupt.

Awaz

Outline lettering

Fill, stroke, shadow — three colours, in that order. Only on display type over 32px, only inside a truck-art object. Prose never gets a stroke.

हमारा

Devanagari display

Baloo 2 · 800 with a stepped two-colour shadow. One Hindi word or phrase per object. It carries feeling, never information a user must act on.

Aapki awaaz,
duniya tak.

Handwriting

Kalam · 400 on a torn paper scrap, tilted ±5°. This is the marginalia voice — the aside scribbled on the sticker, not a UI label.

Mehrab arch

The cusped arch panel that holds the centre message. An asymmetric border-radius dome, a rotated square finial on top, and an inset ring in the third colour.

Made

Extruded letters

A ten-step 1px-increment text-shadow stack in a darkened version of the fill — a solid side wall, not a blur. The signboard alternative to the outline treatment; pick one, never both.

Medallion roundel

Concentric rings via inset box-shadows, an octagonal inner field via clip-path, one motif at the centre. The flanking element on either side of an arch.

BORDER BANDS — THE STACK IS THE BORDER

A truck-art border is never one line. It is a stack of thin strips — a dot row, then a chequer, then the wide motif band, then the chequer and dot row again. Eight strip types cover every border on the references, and all eight are one CSS background declaration each. No image assets, no SVG.

Bead rowRADIAL-GRADIENT · 22PX TILE

The outermost strip on almost every reference. Always the first and last band in a stack.

ChequerREPEATING-LINEAR 90° · 18PX

The workhorse separator. Sits either side of a motif band to stop two patterns touching.

Tick rowREPEATING-LINEAR 90° · 13PX

A finer chequer. Use where the border is under 8px tall and squares would read as mush.

Diamond rowFOUR LINEAR-GRADIENTS · 20PX

The lozenge band off the truck cab panels. Reads as woven, so it can carry more height than a chequer.

SawtoothTWO LINEAR-GRADIENTS · 24PX

Triangles pointing down close a band; pointing up they open one. Only ever at the edge of a stack, never in the middle.

Fan scallopRADIAL-GRADIENT ARCS · 32PX

The awning. Softer than a sawtooth — use it when the band below carries faces or photography.

Candy stripeREPEATING-LINEAR 45° · 16PX

The barber twist that edges rose panels. One per stack — two diagonals in one border start to shimmer.

Petal rowOFFSET RADIAL ARCS · 26PX

Interlocking half-discs, top and bottom offset by half a tile. The cheapest way to fake a floral band.

MOTIF BAND · NEEDS ART
Motif bandREPEATING PNG / SVG TILE

Roses, lotuses, peacocks, the pair of eyes. The only band CSS cannot fake — it needs a real tile asset, drawn once and repeated.

THE STACK — THIN, THIN, WIDE, THIN, THIN
Desi dil se

Five band types, mirrored about the wide one: chequer 12px, bead 20px, candy 14px, motif 76px, then the same three back out. The stack is always symmetrical and always odd-numbered, so there is one unmistakable centre. Nothing above 5 strips per side — at 7 it stops reading as a border and starts competing with the content.

WHERE A BAND STACK GOES
Full-bleed section divider — the whole stack, edge to edge, between two sections. Page top and bottom — a 3-strip stack pinned above the nav and below the footer, framing the document. Plaque and frame edges — one or two strips, top and bottom of a truck-art object. Under a section header — a single bead or chequer strip in place of a hairline rule. Category tile tops — one strip per tile, band type varying by category.
AND WHERE IT DOES NOT
As a page or section background — bands are edges, never fields. Around a creator card — the cards stay plain, always. Two full stacks visible at once on the same screen. Behind or beside body copy, where the repeat fights the reading rhythm. On any interactive edge — inputs, dropdowns, tabs, table rules.
THE TRIPTYCH — HOW THE PRIMITIVES COMPOSE
Horn OK
please
सफ़र मुबारक

Centre arch, flanked by identical medallion stacks, closed top and bottom by a bead row and a zigzag. That is the whole composition — one message in the middle, ornament mirrored either side. Scale it down to a 240px-wide badge or run it full-bleed as a page header; the proportions hold either way.

COMPOSED — A FRAMED SECTION HEADER AND THE SYMMETRY RULE
Awaz dedo
नीम का पेड़ चंदन से कम नहीं

Mirrored composition is the other half of the grammar. Truck panels are symmetrical about a centre line — a motif left, the same motif flipped right, the type down the middle. Use it for headers and empty states; never for a content grid, where symmetry fights scanning.

WHERE TRUCK ART GOES — AND WHERE IT DOES NOT
Yes
Section headers and page-opening plaques Dividers between two sections Empty states, error pages, 404s, success screens The footer band and the app-download strip Category tiles, where the frame carries the identity Margin ornament: paisley, marigold, triangle dot-fields
No
Inside a creator card — the cards stay plain Behind body copy of any length On buttons, form fields, or anything a user types into Prices, durations, ratings, or any number that must be read fast Two objects in one section, or two colours-of-three per object Nav, tables, settings — anywhere the job is comprehension
06 · PARTS

The kit, live.

BUTTONS — ANTON CAPS · RADIUS 100PX · 15PX 30PX
CALENDAR

Primary is always solid signal red with cream caps. The secondary is bone on a 2.5px ink outline. They travel as a pair, red on the left. Hover lifts 2px into an ink shadow — there is no colour change on hover.

STAT CHIPS & META ROW
6 MIN RESPONSE ✓ 987 WALKS ★ 4.8 · 183 ♡ 96% COME BACK
Video ID checked ↗ Share 30 MIN

Three or four chips, never five. Each one is a single number plus one word. The meta row below is plain sans at 14px and carries trust signals only.

CREATOR CARD — THE WORKHORSE. RADIUS 26PX · BORDER 3PX · PHOTO 58% OF HEIGHT
AVAILABLE NOW
PORTRAIT
QUEER-FRIENDLYSAFE SPACE

A queer safe-space chat · ₹199

Come exactly as you are. Alex offers affirming conversation, friendly company and zero assumptions.

10 MIN RESPONSE ✓ 1.2K TALKS
AF Alex Fernandes ✓ 30 MIN
NEXT 5 PM
PORTRAIT
GIRL FRIENDBENGALI · HINDI

Kolkata Adda with Riya · ₹149

Films, food, family or total nonsense — settle in for the kind of adda that makes time disappear.

♡ 420 REGULARS ★ 4.8 · 392
RD Riya Dutta ✓ 30 MIN
WALKING NOW
PORTRAIT
BOY FRIENDVIDEO WALK

Walk & talk with Rohan · ₹129

Join Rohan on an easy evening walk and talk about life like two old friends catching up.

6 MIN RESPONSE ★ 4.8 · 183
RJ Rohan Joshi ✓ 20 MIN
AVAILABLE NOW
PORTRAIT
QUIET COMPANYTAMIL · ENGLISH

Quiet company with Kavya · ₹99

No pressure to perform. Read, work, vent or sit in comfortable silence with someone kind nearby.

♡ 96% COME BACK ★ 4.9 · 251
KI Kavya Iyer ✓ 20 MIN
CARD ANATOMY — TOP TO BOTTOM, ALWAYS THIS ORDER
01Photo — 58% of card height, status pill top-left, heart top-right, deckle tear at the bottom.
02Stub row — relationship type left, languages or format right, Silkscreen 9px.
03Title with price — Anton caps or Playfair, the ₹ figure inside the sentence.
04Two lines of prose — what it actually feels like, in second person.
05Stat chips — two or three, outlined in the text colour.
06Action pair — red BOOK NOW plus bone CALENDAR, equal width.
07Byline — initials disc, verified name, duration far right, above a hairline rule.
NAV — 3PX RULE UNDER, ANTON CAPS, RED SIGN-UP
avaTOK Live events Private sessions AI voice Log in Sign up

Nav labels are Anton caps at 13px, not sans — the poster voice runs all the way to the top of the page. Only the sign-up button takes red; log-in stays plain text. A search field sits between the links and the auth pair on wide screens.

The wordmark is the one place two typefaces touch: ava in Anton, TOK in Playfair italic red, with a hand-drawn underline beneath.

07 · PAGE RECIPE

How to build the next one.

The two page shapes already in play, and the budget that keeps them from turning into a scrapbook.

SHAPE A · COLLAGE HERO (CREAM)

Headline stack left with the second line in red, lede, button pair. Right half is a four-block torn-edge illustration collage. Three preview cards overlap the bottom edge. Vertical rail on the far right, ornament in the left margin.

SHAPE B · CARD SHELF (TERRACOTTA)

Silkscreen eyebrow, two-line headline top-left with the second line in cream-on-shadow, supporting paragraph top-right. Four creator cards below, fills rotating teal → butter → oat → brick so no two neighbours match.

THE ORNAMENT BUDGET — PER SCREENFUL
1
Rubber stampTwo on the hero at the very most, and only if they sit in opposite corners.
2
Marginalia notesHinglish asides with an arrow. Both should point at something real.
1
Serif card per rowOne Playfair title in a row of four. The rest stay in Anton.
0
Gradients, blurs, glowsAlso zero soft shadows, zero glassmorphism, zero emoji in the display type.