Base

Foundations, before the page

Tokens and primitives for niṣṭhā. Colour, type, spacing, radius, focus, motion — everything the landing page and product screens will draw from.

Colour

Palette

Six brand colours. Paper carries most of the layout; Tiber is niṣṭhā's own mark, never the customer's card. Tangerine is the single accent — one colour, used for action.

Tiber

#06392F

Coffee Bean

#40312F

Tangerine

#FF6E3A

Dill

#4E6813

Cherry

#74070E

Paper

#FBF8F3

Type

Scale

Instrument Serif · display · 60px · -0.02em · 1.04

The loyalty card that lives on their phone

Instrument Serif · h2 · 40px

Nothing to download, nothing to buy

Hanken Grotesk · body · 15px · 1.58 · 64ch max

No app to download. No hardware to buy. It works with the Square till already sitting on your counter — the barcode scanner reads a code on the customer's phone the same way it reads a tin of beans.

IBM Plex Mono · numbers / codes / labels

LC-4F9K21QX7T-88M2

Tiro Devanagari Sanskrit · wordmark

निष्ठा

Spacing

8px base

Macro rhythm is generous — 96px between sections.

8
16
24
32
48
64
96

Radius & structure

No shadows — hairlines only

4 · tag
6 · default
pill

Components

Button

Card

Nothing to buy

It uses the barcode scanner already sitting on your counter. No new hardware, no monthly rental.

Badge & Tag

Brand Active Overdue New MOCK LIVE

Field, Input, Select

Shown on the customer's card.

Enter a valid email.

Checkbox, Radio, Switch

Dialog

Native <dialog>, styled to the system.

Redeem reward?

This will use one free coffee for this customer.

The rule

The card carries the cafe's colour, never Tiber

Tiber is niṣṭhā's own mark. The customer-facing card always uses the cafe's own brand colour instead — an independent isn't advertising a vendor.

Fable Coffee
7 of 8 stamps · 1 to a free coffee