Jump to a page
Search the pages of the app and open one.
Design system
The tokens and the components every screen is built from. Foundations measures each colour pair live, so a change to the theme shows in the numbers.
Colour roles
Each pair is measured from the colours the browser computed for its tokens, light and dark side by side, so a theme change shows in the numbers. Text needs 4.5:1 (WCAG AA); 7:1 is AAA.
Text pairs, both themesMeasuring…
Muted text on a muted fill is held to 4.35:1, the owner's call of Nov 4, 2026, rather than 4.5.
Lines and focus
Swatches only: these are lines, not text.
--border--input--ring--sidebar-borderStatus tones
A status chip's text on its tone, over a card. In dark a tone is a glaze over what lies beneath it, so it is measured blended.
Chart palette
Each mark against a card, which needs 3:1 to be told apart. A slot under it is why every chart keeps its table view.
Categorical, in a fixed order
--chart-1--chart-2--chart-3--chart-4--chart-5Ordinal, for a sequence such as a Deal's Stage
--chart-step-1--chart-step-2--chart-step-3--chart-step-4Type scale
Tailwind's scale, read from the page: size and line height. Each row in English and in Thai, whose marks above and below the line need the height.
Running text
Kun Kode, Former Dev sells office and packaging supplies to companies across Thailand. This paragraph runs to reading length, so that line height and line length can be judged in both scripts.
Numbers and dates
- Money
- ฿1,284,500.00
- Percent
- +12.4%
- Date
- Oct 28, 2026
- Date and time
- Oct 28, 2026, 9:30 AM
Spacing
Tailwind's 4 px step. The gap says how closely two things belong together.
gap-1.5- Measuring…
- Inside a component: an icon and its word
gap-2- Measuring…
- Related items: buttons in a row
gap-4- Measuring…
- A section's parts, cards in a grid, a card's padding
gap-6- Measuring…
- Between a page's blocks
Corner radius
One --radius, and steps scaled from it, so changing it moves every corner together.
rounded-smMeasuring…Keyboard keys, tooltipsrounded-mdMeasuring…Menu items, skeletonsrounded-lgMeasuring…Buttons, inputs, menus, alertsrounded-xlMeasuring…Cards and dialogsrounded-4xlMeasuring…Badgesrounded-fullAvatars
Shadow and elevation
Flat by default: a card is a hairline ring, not a shadow. Shadow is for what floats above the page.
ring-1Cards: a hairline ringshadow-smThe inset page, the floating sidebarshadow-mdMenus, select listsshadow-lgSheets, submenusshadow-xlChart tooltips