Color
Sampled from the brand, grouped by role. Each chip is split — light on the left, dark on the right — showing the real value used in each theme.
Radius
Typography
Newsreader for display, Onest for UI and body, Geist Mono for code and IDs. Icons and badges ride inline with text.
Type families
Type scale
Heading & text colours
Icons
Regular · default · ink-soft
Accent · ember
Status badges
Soft tier for tables and lists; loud tier for emphasis that must catch the eye.
Soft tier · status in tables & rows
Loud tier · solid, for emphasis
Inline elements
Read the setup guide, run ikon deploy, then press ⌘ K to open the command palette. Inline icons such as sit on the text baseline, and a reference like INV-0042 stays in mono.
Forms
Custom form controls — cselect.js, segmented.js, datetime-picker.js, checkboxes, radios, switches, and the output calculator.
Segmented control
Use for 2–4 mutually exclusive form modes — e.g. account type. Switches field groups via data-segmented-panels.
Custom select (cselect)
Always cselect — never a native <select>. Backed by a hidden input for form posts.
Fields
Enter a valid email address.
Visible to your team only.
Two-column row
File / image picker
Checkboxes & radios
Checkboxes
Radios
Switch / toggle
Date & time pickers
Custom calendar and time picker via datetime-picker.js.
Output calculator
Data display
Cards for shapes of data, charts for trends, a workhorse table, and the states around them — empty, loading, mobile.
Data cards
One card type per shape of data — match the card to what you're showing.
Charts
Apache ECharts via data-chart — switch types with a segmented control.
Progress & slider
Determinate completion bars and a range slider with ember gradient fill.
Table
Comparable row data — numbers right-aligned, status as soft badges, actions in the row menu.
| Name | Reference | Amount | Status | Date | ||
|---|---|---|---|---|---|---|
| Acme Ltd | REF-0001 | 12,450 | Paid | 01 Jul | ||
| Beta Corp | REF-0002 | 8,200 | Pending | 28 Jun | ||
| Gamma Inc | REF-0003 | 4,750 | Overdue | 15 Jun | ||
| Delta Co | REF-0004 | 2,100 | Draft | — |
Table modifiers
striped and compact for dense, scannable lists.
| Label | Reference | Amount | Status |
|---|---|---|---|
| Item one | REF-0001 | 12,450 | Paid |
| Item two | REF-0002 | 8,200 | Pending |
| Item three | REF-0003 | 4,750 | Paid |
| Item four | REF-0004 | 2,100 | Overdue |
Empty states
Loading skeletons
Mirror the shape of the content they replace — same sizes and positions so nothing jumps.
Table rows
Card grid
Mobile list
Feedback
Toasts, modals, popovers, tooltips, confirmations, drawers, and progress indicators.
Notifications / toasts
Top-right, auto-dismiss (~3.5s), solid semantic icon chip. Fire a live toast below.
Modals
Popovers
Tooltips
Confirmation dialogs
Drawers
Progress indicators
Linear
Circular
Spinners
Accordion
FAQ-style collapsible sections — open header sits raised.
Invoices sync automatically every hour from your connected accounting provider.
Yes — export CSV or PDF from any list view using the Export button.
Platform
HTMX partial page updates loaded globally from base.html.
HTMX
Fetch a small HTML fragment without a full page reload.