DataPay · Brand
Design language
Everything on this page is rendered by the same components and tokens the product ships, so it cannot drift from what is actually live. If a lockup here looks wrong, the product is wrong.
The mark
Two arcs and a block. The left arc is ink, the right is brass, the centre block is jade — the same three roles the palette uses everywhere else.
The wordmark
“Data” in ink, “Pay” in brass, leaning −9°. Never flat, never monochrome, never all one colour. Use DataPayWordmark rather than typing the letters — every place that hand-rolled it drifted.
Full lockup
Mark plus wordmark, with an optional tagline in the mono face. This is the form for page heroes and sign-in screens; navs use the mark and wordmark without a tagline.
Colour
Brass is the one with a rule attached: it means value. Token balances, prices, money. Using it as a general accent is the fastest way to make the palette meaningless.
Core
var(--ink)#12151ABody text, the wordmark's “Data”, the mark's left arc.var(--porcelain)#FBFAF7Page ground. Never pure white.var(--jade)#0E7A5CPrimary action, links, the mark's centre block.var(--jade-bright)#12946FThe same, on dark surfaces.var(--brass)#A67C21Value and money ONLY, plus the wordmark's “Pay”. Never body text.var(--brass-bright)#D4AA45Value and money, on dark surfaces.var(--mist)#8C939CSecondary labels, taglines, quiet metadata.State
var(--danger)#9C3C34Destructive actions, errors, the undeliverable-order strip.var(--danger-soft)#F8EFECError banner grounds.var(--jade-soft)#E7F0ECSuccess banner grounds, quiet jade fills.var(--edge)rgba(18,21,26,0.09)Every hairline. Surfaces separate by edge, not shadow.Typography
Cabinet Grotesk · Extrabold · var(--font-display)
Real household demand
Headings only. Tight tracking, never below 800 weight.
Switzer · 400/500/600 · var(--font-body)
Answer a few short questions a day and earn tokens. Free, and always anonymous.
Body, labels, buttons. The workhorse.
Spline Sans Mono · 400–600 · var(--font-mono)
HOUSEHOLD DEMAND, COLLECTIVISED · ₹1,24,500 · 12,480
Eyebrows, and every figure that reads down a column. Tabular figures line up row to row; display-size numbers keep proportional figures instead.
The public site
The homepage speaks to households, and it is allowed to play: a tilted white tile behind the mark, numbered sun-yellow dots on the three steps, a token diamond, a hard yellow shadow under the store badge, a caption pill set at a slight angle. Photographs of real members, never stock. None of this leaks into the ops or organization portals, which stay plain.
Tints
var(--mk-sun)#F2B233Number stickers, the Play badge's offset shadow, the token diamond's outer ring.var(--mk-sun-tint)#FBEFD0The tokens band on the homepage. Never a card.var(--mk-leaf-tint)#E4EFDCPhoto placeholders while an image loads.Kannada display
Baloo Tamma 2 · 400–800 · falls in behind Cabinet Grotesk
ನಿಮ್ಮ ಮನೆಗೆ ಏನು ಬೇಕು, ಹೇಳಿ.
Cabinet Grotesk has no Kannada glyphs. Baloo Tamma 2 sits next in the stack, so a Kannada heading is rounded and warm and an English one keeps the brand face — no per-language switching. Its Latin is not used for English headings.
Rules
- Brass means money. Value, prices, token counts, and the “Pay” in the wordmark. Nothing else.
- Surfaces separate by hairline, not shadow. One ambient shadow exists and it is reserved for genuinely floating objects.
- The ground is porcelain, not white. Pure white belongs to cards.
- Never re-type the wordmark. Import the component. Three navs proved why.
- Dark mode is chosen, not inverted. Each token has a declared dark value; nothing is flipped automatically.
- Play belongs on the public site. Stickers, tilts and the sun tint are for pages a household reads. Ops and organization screens stay plain.
Assets
For decks, partner sites and press. The SVGs are the same files the product serves.
- Mark — SVGSquare, scales to any size.
- Lockup with tagline — SVGMark, wordmark and tagline together.
- Social image — PNG1200×630, for link previews.
