06 · UI Kit & Homepage
产品 UI 套件：shadcn/ui × Omninal
本章记录 Omninal 的 shadcn/ui 主题实现方式。token 命名与层级对齐 shadcn 当前规范，组件保留默认结构和度量，图标使用 Lucide。开发和设计交付时，应优先替换 token 与主题变量，不重写组件结构。本站页面本身即运行在这套主题上（含明暗双模）。
首页展示 · Homepage首页 Hero 的参考组合：Deep Trust + Global Corporate
omninal.com
Omninal统一架构产品线场景开发者查看说明
Omninal · Unified Money Platform
一个架构，四个产品。
每一笔钱，可见、可控、可编程。
每一笔钱，可见、可控、可编程。
Omninal is the unified money platform for global business — one architecture to hold, move, and control money across currencies, stablecoins, and every payment rail.
Multi-currency + StablecoinMulti-rail 智能路由Programmable 资金规则Agent-native 支付
One architecture. Four product surfaces.
同一套账户、账本和规则支撑不同产品入口。首页信息架构应体现这一关系。
说明：此预览复刻官网 Hero——导航用组合标（图标 = Omninal Blue），强调字 = 蓝→青文字级渐变（每屏一处）。背景细网格取自图形语言章；两个 CTA 即下方 Button 组件。
主题 Token 全量映射shadcn 官方 token 清单 → Omninal 值（Light / Dark）——background/foreground 成对出现
| Token | Light | Dark | 用途 |
|---|---|---|---|
--background / --foreground | #FFFFFF · #181D33 | #0B0F1E · #E9EDF6 | 页面底与默认文字 |
--card / --popover（+fg） | #FFFFFF · #181D33 | #131A32 · #E9EDF6 | 卡片容器 / 浮层 |
--primary（+fg） | #155DFC · #FFFFFF | #6E9BFF · #0B0F1E | 主按钮、选中、品牌强调 |
--secondary（+fg） | #EEF1F6 · #1A2236 | #1C2540 · #E9EDF6 | 次级按钮、低强调填充 |
--muted（+fg） | #F1F4F9 · #5D6478 | #1B2438 · #8A93AD | 弱底、占位、辅助文字 |
--accent（+fg） | #E9F0FF · #15439E | rgba(110,155,255,.14) · #B9CDFF | 悬停 / 选中态 |
--destructive | #DC2626 | #F87171 | 危险操作、错误（深色端浅一档） |
--warning | #F59E0B · #B45309 | #FBBF24 | 按官方 @theme inline 方式扩展 |
--border / --input / --ring | #E6E9F1 ×2 · #155DFC | #26304A ×2 · #6E9BFF | 描边 / 表单边 / 焦点环 |
--chart-1 … --chart-5 | #155DFC #0D9488 #7C5CFC #EA580C #E3B341 | #6E9BFF #2DD4BF #A78BFA #FB923C #EAC54F | = 色彩章数据可视化序列 |
--sidebar（族） | #FAFBFD 族 | #0E1426 族 | 产品侧栏专用一组 |
--radius | 0.625rem（10px） | 0.625rem（10px） | sm 6 / md 8 / lg 10 / xl 14 官方派生 |
开发者接入 · Install & Theme官方 CLI 安装组件 → 粘贴 Omninal 主题块，完成主题接入
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 sonner官方默认以 oklch 表达色值；主题块用等价 hex 书写，可直接混用。dark 模式按官方 .dark class 切换——本站右上角的切换按钮即实例。
app/globals.css · Omninal 主题块
: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 变体 × 3 尺寸 × 状态——文案：动词开头，说清动作对象
变体 Variants
带图标 · 尺寸 · 状态
徽章与状态 · Badge状态语义沿用功能色 token
DefaultSecondaryOutlineDestructive已结算待审批在途
表单 · FormInput · Select · Textarea · Switch · Checkbox · Radio——提示文案给出数字与边界
单笔上限 $100,000，超出需审批。
标签页 · 卡片 · 提示Tabs · Card · Alert——错误提示先讲边界，再给出口，最后确认资金安全
全部账户的可用余额、在途交易与本周变化汇总。统一事实源，实时可答。
Available Balance
全部账户 · 实时
$2,485,302.18
↑ 4.2% vs 上周 · 12 笔在途
本月预算使用 72%
稳定币轨道已启用
USDC 结算现可作为跨境付款的智能路由选项。
付款超出单笔限额
单笔上限 $100,000。调整金额，或提交审批。资金未发生变动。
Toast · 结算成功回执
付款已结算
$50,000.00 → SUPPLIER-UID · USDC · 即时到账
成功回执 = 金额 + 对象 + 轨道 + 时效，全部可核对——回执即微型对账单。
数据表 · Table含 Avatar / Badge / 行内操作——金额右对齐 + tabular
| 收款方 | 轨道 | 状态 | 金额 | |
|---|---|---|---|---|
| S SUPPLIER-UID | USDC · 稳定币 | 已结算 | $50,000.00 | |
| P PAYROLL-EU | EUR · SEPA | 待审批 | €128,400.00 | |
| A AGENT-PROC-01 | USD · 智能路由 | 在途 | $8,250.00 |
扩展组件与微交互Skeleton · Empty · Kbd · Chart tokens · 落定动效
Empty · 空状态
还没有在途交易
发起第一笔付款后，这里会显示实时结算进度。
Skeleton · 加载占位
Kbd
按 ⌘ K 打开命令面板
Chart Tokens · --chart-1 … --chart-5
微交互 · 落定母题在组件里的样子（详见 04 章）
全局加载
结算成功
批量 Payout · 在途settled.
暗色模式对照同一组件树 · .dark 换 token——关系不变，值变
Light · 浅色模式
Treasury 总览
3 条轨道 · 实时
$2,485,302.18
在途 12今日落定 47
新建付款Dark · 深色模式
Treasury 总览
3 条轨道 · 实时
$2,485,302.18
在途 12今日落定 47
新建付款套件即配方的代码化身：所有组件颜色来自色彩章的 token（chart-1…5 即数据可视化序列、warning 三级即功能色三级），圆角走 --radius 0.625rem 官方派生比例，间距来自字体章的 8pt 系统，焦点环 = 3px 半透明 Omninal Blue，状态色按市场 token 切换——这就是产品界面组（⑤）配方在真实 UI 上的样子。