/design-system/app

Application UI

Product interfaces built by Quov: dense, exact, ledger-like. Numbers are the interface; everything else is ruled lines and quiet scaffolding around them.

Agent filequov-app.en.md quov-app.es.md

Color

Color appears only here, and only for meaning: gain, loss, warn and destructive. It is always paired with a sign, a label or a position, so it survives color blindness and grayscale. Semantic hues are darker in the paper theme to hold contrast on pale surfaces.

--gain
Positive returns, deposits, an active or complete status.
dark, defaultoklch(0.75 0.15 160)
light, paperoklch(0.45 0.15 160)
--gain-muted
Background of a gain badge.
dark, defaultoklch(0.75 0.15 160 / 12%)
light, paperoklch(0.45 0.15 160 / 10%)
--loss
Negative returns, sells, an expired status.
dark, defaultoklch(0.7 0.17 25)
light, paperoklch(0.5 0.17 25)
--loss-muted
Background of a loss badge.
dark, defaultoklch(0.7 0.17 25 / 12%)
light, paperoklch(0.5 0.17 25 / 10%)
--warn
Withdrawals, pending states, warnings. The light value corrects the apps’ 0.55, which fails AA.
dark, defaultoklch(0.8 0.15 85)
light, paperoklch(0.48 0.13 85)
--warn-muted
Background of a warn badge.
dark, defaultoklch(0.8 0.15 85 / 12%)
light, paperoklch(0.48 0.13 85 / 10%)
--destructive
Destructive actions and error messages, on background or card only.
dark, defaultoklch(0.65 0.2 25)
light, paperoklch(0.55 0.2 25)

App surfaces, on top of the core palette

--popover
Menus, dropdowns, dialogs.
dark, defaultoklch(0.17 0.015 260)
light, paperoklch(0.99 0.01 75)
--sidebar
The navigation rail.
dark, defaultoklch(0.13 0.01 260)
light, paperoklch(0.93 0.02 75)
--table-header
The header row of a data table.
dark, defaultoklch(0.15 0.01 260)
light, paperoklch(0.48 0.015 75)
--table-header-foreground
Header cell text. The dark value corrects the apps’ 0.55, as muted-foreground does.
dark, defaultoklch(0.64 0.01 260)
light, paperoklch(0.92 0.015 75)

Chart ramp: series differ by lightness, never by hue

--chart-1
First series.
dark, defaultoklch(0.87 0 0)
light, paperoklch(0.18 0 0)
--chart-2
Second series.
dark, defaultoklch(0.55 0 0)
light, paperoklch(0.35 0 0)
--chart-3
Third series.
dark, defaultoklch(0.44 0 0)
light, paperoklch(0.5 0 0)
--chart-4
Fourth series.
dark, defaultoklch(0.37 0 0)
light, paperoklch(0.65 0 0)
--chart-5
Fifth series.
dark, defaultoklch(0.27 0 0)
light, paperoklch(0.78 0 0)

Contrast of the app pairs. Two values differ from what the apps ship today, both to reach AA: the paper warn is 0.48 0.13 85 (0.55 0.15 85 measures 4.2:1), and the dark table header text is 0.64, like muted-foreground. Destructive text stays on background or card.

gain on background
Signed figure
dark9.7:1
light5.6:1
gain on gain-muted
Gain badge
dark8.4:1
light4.8:1
loss on background
Signed figure
dark7.1:1
light5.6:1
loss on loss-muted
Loss badge
dark6.3:1
light4.8:1
warn on background
Warning text
dark10.8:1
light5.6:1
warn on warn-muted
Warn badge
dark9.2:1
light4.9:1
destructive on background
Error message
dark5.7:1
light4.6:1
table-header-foreground on table-header
Table header cells
dark5.8:1
light5.1:1

App shell

A navigation rail and a scrollable content area. Each page has a header bar with its title and actions, then summary figures, then the data.

Overview

Balance: COP 48,250,000.00
Pending: COP 1,200,000.00
As of: 2026-10-25
Return, 12 months: +4.20%

Recent transactions

Date	Description	Type	Amount, COP	Return
2026-10-24	Monthly deposit	Deposit	2,000,000.00
2026-10-18	Position sold	Sell	750,000.00	-1.35%
2026-10-02	Partial withdrawal	Withdrawal	500,000.00
2026-09-30	Monthly return	Return	182,400.00	+4.20%

example data

dark, default

Overview

Balance: COP 48,250,000.00
Pending: COP 1,200,000.00
As of: 2026-10-25
Return, 12 months: +4.20%

Recent transactions

Date	Description	Type	Amount, COP	Return
2026-10-24	Monthly deposit	Deposit	2,000,000.00
2026-10-18	Position sold	Sell	750,000.00	-1.35%
2026-10-02	Partial withdrawal	Withdrawal	500,000.00
2026-09-30	Monthly return	Return	182,400.00	+4.20%

example data

light, paper

Tables

Frame: The table sits in one bordered, rounded frame with hidden overflow. Rows are divided by hairlines.
Header row: table-header background, cells in text-xs uppercase with wider tracking in table-header-foreground. It does not change on hover.
Cells: px-3 py-2.5. Text left-aligned.
Figures: Amounts and percentages right-aligned in font-mono tabular-nums.
Dates: font-mono text-xs tabular-nums in muted-foreground, in a fixed-width column.
Totals: A footer row in font-medium, its label in muted-foreground.
Clickable rows: An absolutely positioned link inside the first cell covers the row. The row itself is never wrapped in a link.
Views: First-level lists offer a table and a card view, switched by a toggle in the page header.

Badges

A muted tint with the semantic text color, small radius, text-xs. Figures inside a badge keep mono tabular numbers and an explicit sign.

+4.20%-1.35%

ActivePendingExpiredCompleted

AuthenticatedElectronictag

dark, default

+4.20%-1.35%

ActivePendingExpiredCompleted

AuthenticatedElectronictag

light, paper

Returns: Gain or loss by the sign of the value, which is always shown.
Status: Active and complete in gain, pending in warn, expired in loss; completed and inactive are neutral (secondary with muted-foreground).
Types: Deposits in gain, sells in loss, withdrawals in warn, buys neutral.
Bordered: A second axis that is not good or bad (for example, how a document was signed): a 20% border in foreground or muted-foreground.
Tags: secondary with secondary-foreground, gap-1.5 between them.

State-driven, not hover-driven: a click expands it and a button collapses it, and the state persists across pages.

Collapsed: w-14, icons only. A click anywhere on the rail expands it.
Expanded: w-56, labels visible, a collapse button at the bottom.
Motion: Width transition of 200 ms; labels fade in over 200 ms. Ease-out, never bounce.
Active item: bg-secondary text-foreground.
Other items: text-muted-foreground, with hover:bg-secondary hover:text-foreground.
Top: The mark at 28 px and the product name in Aoboshi One, which fades in on expand.
Icons: lucide, 16 px, one per item. Never a decorative icon without a label.

Forms

Labels above controls, errors in words. A form reads top to bottom with one primary action.

Emailname@company.com

AmountCOP 0.00Enter an amount greater than zero.

SaveCancelDelete

dark, default

Emailname@company.com

AmountCOP 0.00Enter an amount greater than zero.

SaveCancelDelete

light, paper

Field: Label above the control. gap-2 inside a field, gap-4 between fields.
Control: h-9, rounded-md, border-input, transparent background, px-3, text-sm.
Focus: border-ring with a 3 px ring-ring/50 halo. The only halo in the system, and it marks focus, not depth.
Error: aria-invalid on the control, the message under it in destructive with an icon, saying what to do.
Buttons: Primary (bg-primary), outline (border, hover:bg-secondary), ghost (hover:bg-secondary), destructive (text and a 40% border in destructive). One primary per form.
Figures: Amount, percentage and date inputs use font-mono tabular-nums.

Numbers

Every number that is money, a percentage or a date is set in font-mono tabular-nums, so columns align. No exceptions.

Money: Currency code, comma thousands, two decimals: COP 48,250,000.00. One formatting function for every displayed amount; arithmetic in a decimal library, never in floating point.
Percentages: Two decimals with an explicit sign when the value is a change: +4.20%, -1.35%.
Dates: ISO in tables (2026-10-25); a written date in prose.
Summary figures: A description list: the label (dt) in text-xs muted-foreground over the value (dd) in mono. Never a tile with an icon.
Charts: The achromatic ramp. Semantic colors only for a series that has a sign. No gradients or area fills that decorate.

Rules

Dark by default, paper on a toggle, the same token names in both.
Borders for structure, radius 0.375rem, density over air.
Pair every semantic color with a sign, a label or a position.
Remove before adding: the reader must never have to interpret.

Do not

A generic analytics template: gradient metric tiles, identical card grids.
Shadows, floating cards, cards nested in cards, rounded everything.
Color as decoration, or color as the only carrier of meaning.
A decorative icon standing in for a figure.

Agent file

The rules of this page as a Markdown file for an agent: in a CLAUDE.md, a system prompt or attached to a request. Load quov-brand first; this file applies it and never overrides it. Identical content in English and Spanish.

Englishquov-app.en.mdDownload Open
Españolquov-app.es.mdDownload Open

Fetch from the command line

curl -fLO https://quov.io/design-system/quov-brand.en.md
curl -fLO https://quov.io/design-system/quov-app.en.md
curl -fLO https://quov.io/design-system/quov-app.es.md