Card & panel
A rectangular container with a hairline border. The most-used surface in the system — every section, every list, every chart sits in one.
Default
Hairline border, 12 px radius, 16 × 20 px padding. No shadow.
Three tills active. Yesterday closed clean. Today is tracking 12 % above the Tuesday average — driven mostly by mealie meal at the noon peak.
With header
A 16 × 20 header strip with a thin border-bottom and (optionally) a right-side link or filter.
Sales by hour
Tonal
Brand-soft for hero stats, danger-soft for exception zones.
With table
The cardenation of a data table — a card-wrapped table block with consistent padding.
Open shifts
|
FM
Faith Moyo
Till 02 · since 07:30
| $ 1,842.10 |
|
AC
Alex Chiwanza
Till 01 · since 07:30
| $ 624.80 |
|
SN
Sarah Ndongo
Till 03 · on lunch 14:00 – 14:45
| $ 199.00 |
Anatomy
| Property | Value | Notes |
|---|---|---|
| border | 1 px --border | Hover: --border-strong |
| radius | 12 px | 14 for tonal hero cards |
| padding | 16 × 20 px | — |
| header | padding 16 × 20 + border-bottom subtle | — |
| shadow | none at rest | Earned only by floating surfaces |
Do & don't
Use a card to group related content. Don’t stack lone text blocks in a card.
Add a shadow to make a card "pop". Cards belong on the canvas; shadows belong to popovers.
Use tonal cards sparingly — one or two per surface, for emphasis.
Nest cards. If you need a container inside a container, use spacing or a divider.