06 · UI Kit & Coverage
UI Kit: the production contract
This chapter connects Omninal's DTCG token source to production components. The web primitives keep shadcn/ui structure and Lucide icons while documenting states, content, accessibility, and Storybook behavior. Native token outputs are ready; native component implementations are shown as a separate delivery state.
One token source, explicit platform boundariesDTCG 2025.10 · primitive → semantic → component · Light / Dark aliases
DTCG 2025.10 Token pipeline ready
- 01Primitive
Raw values; never consumed directly by product UI.
- 02Semantic
Mode-aware roles shared by design and code.
- 03Component
Scoped aliases for predictable component behavior.
globals.css consumes generated semantic mappings; it is no longer a competing source of truth. A token pull request can produce aligned artifacts for every target below.
Platform availability
- Web / React13 primitives ready
- Figma VariablesManifest ready
- SwiftUITokens ready
- ComposeTokens ready
- Android XMLTokens ready
“Tokens ready” means generated native values and aliases exist. It does not mean the full native component library has shipped.
Current component coverage13 web primitives · documented states · automated and manual WCAG 2.2 AA fixtures
Production web
Real React components run this site and have isolated Storybook stories.
Behavior verified
Keyboard, focus, disabled, RTL, long-copy, and 200% text fixtures are covered.
Native boundary
SwiftUI, Compose, and XML receive tokens now; component ports follow in the next release.
| Component | Documented scope | Web status | Native status |
|---|---|---|---|
Button | 6 variants · 3 sizes · loading · disabled | Ready | Token contract |
Badge | Default · secondary · outline · destructive | Ready | Token contract |
Alert | Information · destructive · title · description | Ready | Token contract |
Card | Header · content · footer · financial data | Ready | Token contract |
Checkbox | Unchecked · checked · disabled · focus | Ready | Token contract |
Input | Default · focus · invalid · disabled · help | Ready | Token contract |
Label | Control association · required context | Ready | Token contract |
RadioGroup | Selection · keyboard · disabled | Ready | Token contract |
Select | Trigger · listbox · keyboard · long copy | Ready | Token contract |
Separator | Horizontal · vertical · decorative | Ready | Token contract |
Switch | On · off · disabled · focus | Ready | Token contract |
Tabs | Selection · roving keyboard focus · panels | Ready | Token contract |
Textarea | Default · focus · invalid · long copy | Ready | Token contract |
Coverage language is deliberate: Ready means a real, documented web component exists. Token contract means native code can consume the same values, but the native component itself is not yet presented as complete.
The full theme token mapThe official shadcn token list → Omninal values (Light / Dark) — background/foreground in pairs
| Token | Light | Dark | Role |
|---|---|---|---|
--background / --foreground | #FFFFFF · #181D33 | #0B0F1E · #E9EDF6 | Page ground and default text |
--card / --popover（+fg） | #FFFFFF · #181D33 | #131A32 · #E9EDF6 | Card containers / overlays |
--primary（+fg） | #155DFC · #FFFFFF | #6E9BFF · #0B0F1E | Primary buttons, selection, brand emphasis |
--secondary（+fg） | #EEF1F6 · #1A2236 | #1C2540 · #E9EDF6 | Secondary buttons, low-emphasis fills |
--muted（+fg） | #F1F4F9 · #5D6478 | #1B2438 · #8A93AD | Weak grounds, placeholders, secondary text |
--accent（+fg） | #E9F0FF · #15439E | rgba(110,155,255,.14) · #B9CDFF | Hover / selected states |
--destructive | #DC2626 | #F87171 | Dangerous actions, errors (one step lighter in dark) |
--warning | #F59E0B · #B45309 | #FBBF24 | Extended via the official @theme inline pattern |
--border / --input / --ring | #E6E9F1 ×2 · #155DFC | #26304A ×2 · #6E9BFF | Strokes / form edges / focus rings |
--chart-1 … --chart-5 | #155DFC #0D9488 #7C5CFC #EA580C #E3B341 | #6E9BFF #2DD4BF #A78BFA #FB923C #EAC54F | = the Color chapter's data-viz sequence |
--sidebar（族） | #FAFBFD 族 | #0E1426 族 | A dedicated set for product sidebars |
--radius | 0.625rem（10px） | 0.625rem（10px） | sm 6 / md 8 / lg 10 / xl 14, officially derived |
Developer setup · install & themeInstall components with the official CLI → paste the Omninal theme block to apply the theme
components.json + CLI
{
"style": "base-nova",
"rsc": true,
"tailwind": {
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"iconLibrary": "lucide"
}
npx shadcn@latest init
npx shadcn@latest add button badge card input select \
textarea switch checkbox radio-group tabs table \
dialog dropdown-menu tooltip alert avatar progress \
accordion breadcrumb pagination command slider \
skeleton separator kbd empty sonnerThe official default expresses color in oklch; this theme block writes equivalent hex — the two mix freely. Dark mode switches on the official .dark class; the toggle in this site's header is the live example.
app/globals.css · the Omninal theme block
:root {
--radius: 0.625rem;
--background: #ffffff; --foreground: #181d33;
--card: #ffffff; --card-foreground: #181d33;
--popover: #ffffff; --popover-foreground: #181d33;
--primary: #155dfc; --primary-foreground: #ffffff;
--secondary: #eef1f6; --secondary-foreground: #1a2236;
--muted: #f1f4f9; --muted-foreground: #5d6478;
--accent: #e9f0ff; --accent-foreground: #15439e;
--destructive: #dc2626;
--border: #e6e9f1; --input: #e6e9f1; --ring: #155dfc;
--chart-1: #155dfc; --chart-2: #0d9488; --chart-3: #7c5cfc;
--chart-4: #ea580c; --chart-5: #e3b341;
--sidebar: #fafbfd; --sidebar-foreground: #181d33;
--sidebar-primary: #155dfc; --sidebar-primary-foreground: #ffffff;
--sidebar-accent: #e9f0ff; --sidebar-accent-foreground: #15439e;
--sidebar-border: #e6e9f1; --sidebar-ring: #155dfc;
}
.dark {
--background: #0b0f1e; --foreground: #e9edf6;
--card: #131a32; --card-foreground: #e9edf6;
--popover: #131a32; --popover-foreground: #e9edf6;
--primary: #6e9bff; --primary-foreground: #0b0f1e;
--secondary: #1c2540; --secondary-foreground: #e9edf6;
--muted: #1b2438; --muted-foreground: #8a93ad;
--accent: rgba(110,155,255,.14); --accent-foreground: #b9cdff;
--destructive: #f87171;
--border: #26304a; --input: #26304a; --ring: #6e9bff;
--chart-1: #6e9bff; --chart-2: #2dd4bf; --chart-3: #a78bfa;
--chart-4: #fb923c; --chart-5: #eac54f;
--sidebar: #0e1426; --sidebar-foreground: #e9edf6;
--sidebar-primary: #6e9bff; --sidebar-primary-foreground: #0b0f1e;
--sidebar-accent: rgba(110,155,255,.14);
--sidebar-accent-foreground: #b9cdff;
--sidebar-border: #1e2a4a; --sidebar-ring: #6e9bff;
}Button6 variants × 3 sizes × states — labels open with a verb and name the object
Variants
With icons · sizes · states
Badges & statusStatus semantics run on the functional color tokens
DefaultSecondaryOutlineDestructiveSettledPending approvalIn transit
FormsInput · Select · Textarea · Switch · Checkbox · Radio — helper text names numbers and boundaries
Single-payment limit $100,000; anything above routes to approval.
Tabs · cards · alertsTabs · Card · Alert — errors state the boundary first, then the way out, and close on the safety of funds
Available balance, in-flight transactions, and week-over-week movement across all accounts. One source of truth, answerable in real time.
Available Balance
All accounts · live
$2,485,302.18
↑ 4.2% vs last week · 12 in flight
72% of this month's budget used
Stablecoin rail enabled
USDC settlement is now a smart-routing option for cross-border payments.
Payment exceeds the single-payment limit
The limit is $100,000 per payment. Adjust the amount, or submit for approval. No funds have moved.
Toast · the settlement receipt
Payment settled
$50,000.00 → SUPPLIER-UID · USDC · instant
A success receipt = amount + recipient + rail + timing, all verifiable — the receipt is a miniature statement.
Data tableWith Avatar / Badge / row actions — amounts right-aligned and tabular
| Recipient | Rail | Status | Amount | |
|---|---|---|---|---|
| S SUPPLIER-UID | USDC · stablecoin | Settled | $50,000.00 | |
| P PAYROLL-EU | EUR · SEPA | Pending approval | €128,400.00 | |
| A AGENT-PROC-01 | USD · smart routing | In transit | $8,250.00 |
Extended components & micro-interactionsSkeleton · Empty · Kbd · chart tokens · settlement motion
Empty state
No transactions in flight
Send your first payment and live settlement progress appears here.
Skeleton
Kbd
Press ⌘ K to open the command palette
Chart tokens · --chart-1 … --chart-5
Micro-interactions · the settlement motif inside components (chapter 04 in full)
Global loading
Settlement success
Batch payout · in flightsettled.
Dark mode referenceOne component tree · .dark swaps the tokens — relationships hold, values change
Light
Treasury overview
3 rails · live
$2,485,302.18
12 in flight47 settled today
New paymentDark
Treasury overview
3 rails · live
$2,485,302.18
12 in flight47 settled today
New paymentThe kit is the recipes, compiled: every component color comes from the Color chapter's tokens (chart-1…5 is the data-viz sequence, the warning triple is the functional three-level structure), radii derive from --radius 0.625rem on the official scale, spacing runs the Typography chapter's 8pt system, the focus ring is 3px translucent Omninal Blue, and state colors switch by market token — recipe ⑤, Product UI, running on real components.