Foundations

Tokens

Every value below is read live from the page, so it changes with the brand colour, theme and sizes in Conditions. Contrast badges check text against its background (WCAG: 4.5 for text, 3 for large text and icons).

Brand colours

styles/brand.css

Acopone yellow, white and black. The yellow is the brand fill; as text it would fail contrast, so brand text uses --primary-ink, a darker gold the brand engine works out. See Brand colour for any other colour.

--primary

—

Brand fill: main action, selection

--primary-ink

—

Brand as text on cards

--ring

—

Focus rings

--brand

—

Acopone yellow (fixed)

--brand-black

—

Acopone black

--brand-white

—

Acopone white

Surfaces & text

styles/acopone-tokens.css

--background

—

Page

--card

—

Cards and panels

--popover

—

Menus and sheets

--secondary

—

--muted

—

Tiles, tracks, quiet text

--border

—

Hairlines

--input

—

Field borders

Status colours

styles/brand.css · kit/status.tsx

Success, warning, danger and info carry meaning, so they look the same in every app and never borrow the brand. Each comes as five tokens.

--success

—

Fill: dots, bars, solid alerts

--success-soft

—

Soft + ink: badges, alerts, tints

--warning

—

Fill: dots, bars, solid alerts

--warning-soft

—

Soft + ink: badges, alerts, tints

--danger

—

Fill: dots, bars, solid alerts

--danger-soft

—

Soft + ink: badges, alerts, tints

--info

—

Fill: dots, bars, solid alerts

--info-soft

—

Soft + ink: badges, alerts, tints

Token	Use for
--{tone}	Solid fills: dots, meter bars, the one solid alert that mustn't be missed
--{tone}-foreground	Text and icons on the solid fill (black or white, whichever passes)
--{tone}-soft	Tinted backgrounds: badges, alerts, row highlights, icon tiles
--{tone}-ink	Text and icons on soft or on cards; always 4.5:1 or more
--{tone}-edge	Border of tinted surfaces. Transparent, unless the brand is close to this status

How they appear

PaidDue in 2 daysOverdueNewDraft

OnlineSlowOfflineSyncing

Bill settled

Rs 2,340 received by Fonepay.

Printer paper is low

About 20 receipts left.

Couldn't save

Check your connection and try again.

New version

Reload to get the latest changes.

Payment failed

Solid: only for the one message on a screen that must not be missed.

When the brand clashes with a status

A brand within 35° of a status hue (and not grey) is a clash: a red brand next to danger, green next to success, Acopone yellow next to warning. The brand engine resolves it the same way for every app, and two rules hold whatever the brand.

1. Never colour alone

Every status shows an icon or a word (“Failed”, “Low”). Colour only adds to it. This is what makes a clash harmless, and it also covers colour-blind users.

2. Status wins, the brand gives way

The brand is never swapped for a status colour and a status is never tinted with the brand. When they clash, the status colour moves and gets an edge (-edge stops being transparent).

Status	May move hue	Keeps a lightness gap	What happens
Success	up to 55°	—	Moves toward teal or lime, away from the brand.
Warning	up to 22°	12%	Moves toward orange and gets darker or lighter than the brand.
Danger	Never	13%	Stays red. Becomes clearly darker (or lighter) than the brand.
Info	up to 55°	—	Moves toward cyan or violet, away from the brand.

Danger is the strictest: red means danger in every app, so it keeps its hue and separates by lightness. Destructive buttons are soft (tinted) rather than filled, so a red brand's filled main button and a delete button never look alike.See every sample brand resolved →

Type

app/globals.css

Figtree for UI text, Noto Sans Devanagari for Nepali, Space Grotesk for numbers and codes. Sizes follow the Text size setting; the root grows to 18px only on 1440p and larger screens.

Figtree

font-sans · labels and body

हिसाब किताब

Noto Sans Devanagari · fallback

Rs 12,450.00

font-mono · Space Grotesk

text-micro10px

Order for table 12 · ३ जना

Tiny labels on chips

text-caption11px

Order for table 12 · ३ जना

Captions, timestamps

text-xs12px

Order for table 12 · ३ जना

Hints, meta

text-sm14px

Order for table 12 · ३ जना

Most UI text, buttons

text-base16px

Order for table 12 · ३ जना

Body, inputs, section titles

text-lg18px

Order for table 12 · ३ जना

Card titles, empty states

text-xl20px

Order for table 12 · ३ जना

Sub-headings

text-2xl24px

Order for table 12 · ३ जना

Big numbers

text-3xl30px

Order for table 12 · ३ जना

Page titles (phone)

text-4xl36px

Order for table 12 · ३ जना

Page titles

text-5xl48px

Order for table 12 · ३ जना

Hero numbers

normalmediumsemiboldbold

Shape

--radius, --radius-panel/card/row

sm · 6pxSmall tags

md · 8pxBadges

lg · 10pxNotice banner

xl · 14pxList buttons

row · 16pxRows, tiles

card · 22pxSection cards

panel · 32pxFrosted panels, dock

fullButtons, fields, pills

Control heights

components/ui/control.ts

One height scale for every control. They grow with the Buttons & controls setting (except on phones, where nav and menus stay touch-sized).

36pxActions inside a row or card body

42px · 44 touchDefault: toolbars, fields, tabs, segments

48pxThe one full-width action at the foot of a card or dock

Glass & elevation

Surfaces sit on the wallpaper. Panels are frosted; cards are solid. High contrast drops all transparency.

Frosted panel

bg-card/75 · blur 40

Card

solid · hairline

Dock

floating · strong shadow

Motion

lib/motion.ts

Apple-style springs, given as a duration and a bounce.

spring.smooth0.5s · bounce 0

spring.snappy0.5s · bounce 0.15

spring.bouncy0.5s · bounce 0.3

spring.quick0.3s · bounce 0.1

Set Motion to Classic in Conditions to see the instant fallback. Fluid also respects the system's Reduce Motion.

Screens

Designed at 16px on a tablet-sized screen. Everything is in rem, so it scales together.

Phone< 768pxBottom tab bar, dock, sheets. Controls stay touch-sized. Phones held sideways get a side rail.

md≥ 768pxTablet portrait. Top navigation; dock floats higher.

lg≥ 1024pxPanels go side by side; the dock is replaced by inline toolbars.

xl / 2xl≥ 1280 / 1536pxWider content, 3-column cells. Type does not grow until 1440p (18px cap).