275 lines
24 KiB
JSON
275 lines
24 KiB
JSON
{
|
|
"schemaVersion": 2,
|
|
"generatedAt": "2026-08-06T22:59:45.9531815+08:00",
|
|
"title": "Design System: Intercompany Ledger",
|
|
"extensions": {
|
|
"colorMeta": {
|
|
"canvas": {
|
|
"role": "neutral",
|
|
"displayName": "Void Canvas",
|
|
"canonical": "#050706",
|
|
"tonalRamp": ["oklch(15% 0.008 150)", "oklch(25% 0.008 150)", "oklch(35% 0.008 150)", "oklch(47% 0.008 150)", "oklch(59% 0.008 150)", "oklch(71% 0.008 150)", "oklch(83% 0.008 150)", "oklch(95% 0.008 150)"]
|
|
},
|
|
"canvas-soft": {
|
|
"role": "neutral",
|
|
"displayName": "Soft Void",
|
|
"canonical": "#090d0b",
|
|
"tonalRamp": ["oklch(15% 0.012 150)", "oklch(25% 0.012 150)", "oklch(35% 0.012 150)", "oklch(47% 0.012 150)", "oklch(59% 0.012 150)", "oklch(71% 0.012 150)", "oklch(83% 0.012 150)", "oklch(95% 0.012 150)"]
|
|
},
|
|
"navigation": {
|
|
"role": "neutral",
|
|
"displayName": "Navigation Graphite",
|
|
"canonical": "#090c0b",
|
|
"tonalRamp": ["oklch(15% 0.009 150)", "oklch(25% 0.009 150)", "oklch(35% 0.009 150)", "oklch(47% 0.009 150)", "oklch(59% 0.009 150)", "oklch(71% 0.009 150)", "oklch(83% 0.009 150)", "oklch(95% 0.009 150)"]
|
|
},
|
|
"glass": {
|
|
"role": "neutral",
|
|
"displayName": "Graphite Glass",
|
|
"canonical": "rgba(20, 26, 23, 0.82)",
|
|
"tonalRamp": ["oklch(15% 0.016 150)", "oklch(25% 0.016 150)", "oklch(35% 0.016 150)", "oklch(47% 0.016 150)", "oklch(59% 0.016 150)", "oklch(71% 0.016 150)", "oklch(83% 0.016 150)", "oklch(95% 0.016 150)"]
|
|
},
|
|
"surface-solid": {
|
|
"role": "neutral",
|
|
"displayName": "Solid Graphite",
|
|
"canonical": "#131916",
|
|
"tonalRamp": ["oklch(15% 0.015 150)", "oklch(25% 0.015 150)", "oklch(35% 0.015 150)", "oklch(47% 0.015 150)", "oklch(59% 0.015 150)", "oklch(71% 0.015 150)", "oklch(83% 0.015 150)", "oklch(95% 0.015 150)"]
|
|
},
|
|
"surface-raised": {
|
|
"role": "neutral",
|
|
"displayName": "Raised Graphite",
|
|
"canonical": "#18201c",
|
|
"tonalRamp": ["oklch(15% 0.019 150)", "oklch(25% 0.019 150)", "oklch(35% 0.019 150)", "oklch(47% 0.019 150)", "oklch(59% 0.019 150)", "oklch(71% 0.019 150)", "oklch(83% 0.019 150)", "oklch(95% 0.019 150)"]
|
|
},
|
|
"surface-muted": {
|
|
"role": "neutral",
|
|
"displayName": "Muted Glass",
|
|
"canonical": "rgba(255, 255, 255, 0.035)",
|
|
"tonalRamp": ["oklch(15% 0 0)", "oklch(25% 0 0)", "oklch(35% 0 0)", "oklch(47% 0 0)", "oklch(59% 0 0)", "oklch(71% 0 0)", "oklch(83% 0 0)", "oklch(95% 0 0)"]
|
|
},
|
|
"line": {
|
|
"role": "neutral",
|
|
"displayName": "Graphite Hairline",
|
|
"canonical": "rgba(255, 255, 255, 0.09)",
|
|
"tonalRamp": ["oklch(15% 0 0)", "oklch(25% 0 0)", "oklch(35% 0 0)", "oklch(47% 0 0)", "oklch(59% 0 0)", "oklch(71% 0 0)", "oklch(83% 0 0)", "oklch(95% 0 0)"]
|
|
},
|
|
"line-strong": {
|
|
"role": "neutral",
|
|
"displayName": "Strong Hairline",
|
|
"canonical": "rgba(255, 255, 255, 0.16)",
|
|
"tonalRamp": ["oklch(15% 0 0)", "oklch(25% 0 0)", "oklch(35% 0 0)", "oklch(47% 0 0)", "oklch(59% 0 0)", "oklch(71% 0 0)", "oklch(83% 0 0)", "oklch(95% 0 0)"]
|
|
},
|
|
"ink": {
|
|
"role": "neutral",
|
|
"displayName": "Primary Ink",
|
|
"canonical": "#f2f7f4",
|
|
"tonalRamp": ["oklch(15% 0.012 150)", "oklch(25% 0.012 150)", "oklch(35% 0.012 150)", "oklch(47% 0.012 150)", "oklch(59% 0.012 150)", "oklch(71% 0.012 150)", "oklch(83% 0.012 150)", "oklch(95% 0.012 150)"]
|
|
},
|
|
"ink-soft": {
|
|
"role": "neutral",
|
|
"displayName": "Soft Ink",
|
|
"canonical": "#a6b0aa",
|
|
"tonalRamp": ["oklch(15% 0.012 150)", "oklch(25% 0.012 150)", "oklch(35% 0.012 150)", "oklch(47% 0.012 150)", "oklch(59% 0.012 150)", "oklch(71% 0.012 150)", "oklch(83% 0.012 150)", "oklch(95% 0.012 150)"]
|
|
},
|
|
"ink-muted": {
|
|
"role": "neutral",
|
|
"displayName": "Muted Ink",
|
|
"canonical": "#89938d",
|
|
"tonalRamp": ["oklch(15% 0.012 150)", "oklch(25% 0.012 150)", "oklch(35% 0.012 150)", "oklch(47% 0.012 150)", "oklch(59% 0.012 150)", "oklch(71% 0.012 150)", "oklch(83% 0.012 150)", "oklch(95% 0.012 150)"]
|
|
},
|
|
"action": {
|
|
"role": "primary",
|
|
"displayName": "Command Emerald",
|
|
"canonical": "#37eb89",
|
|
"tonalRamp": ["oklch(15% 0.12 150)", "oklch(25% 0.14 150)", "oklch(35% 0.16 150)", "oklch(47% 0.18 150)", "oklch(59% 0.19 150)", "oklch(71% 0.18 150)", "oklch(83% 0.14 150)", "oklch(95% 0.06 150)"]
|
|
},
|
|
"action-strong": {
|
|
"role": "primary",
|
|
"displayName": "Signal Emerald",
|
|
"canonical": "#70ffae",
|
|
"tonalRamp": ["oklch(15% 0.12 150)", "oklch(25% 0.14 150)", "oklch(35% 0.16 150)", "oklch(47% 0.18 150)", "oklch(59% 0.19 150)", "oklch(71% 0.18 150)", "oklch(83% 0.14 150)", "oklch(95% 0.06 150)"]
|
|
},
|
|
"action-dark": {
|
|
"role": "primary",
|
|
"displayName": "Emerald Ink",
|
|
"canonical": "#08160e",
|
|
"tonalRamp": ["oklch(15% 0.055 150)", "oklch(25% 0.055 150)", "oklch(35% 0.055 150)", "oklch(47% 0.055 150)", "oklch(59% 0.055 150)", "oklch(71% 0.055 150)", "oklch(83% 0.055 150)", "oklch(95% 0.055 150)"]
|
|
},
|
|
"action-wash": {
|
|
"role": "primary",
|
|
"displayName": "Emerald Wash",
|
|
"canonical": "rgba(55, 235, 137, 0.11)",
|
|
"tonalRamp": ["oklch(15% 0.12 150)", "oklch(25% 0.14 150)", "oklch(35% 0.16 150)", "oklch(47% 0.18 150)", "oklch(59% 0.19 150)", "oklch(71% 0.18 150)", "oklch(83% 0.14 150)", "oklch(95% 0.06 150)"]
|
|
},
|
|
"positive-wash": {
|
|
"role": "primary",
|
|
"displayName": "Positive Wash",
|
|
"canonical": "rgba(55, 235, 137, 0.10)",
|
|
"tonalRamp": ["oklch(15% 0.12 150)", "oklch(25% 0.14 150)", "oklch(35% 0.16 150)", "oklch(47% 0.18 150)", "oklch(59% 0.19 150)", "oklch(71% 0.18 150)", "oklch(83% 0.14 150)", "oklch(95% 0.06 150)"]
|
|
},
|
|
"warning": {
|
|
"role": "secondary",
|
|
"displayName": "Review Amber",
|
|
"canonical": "#ffbc52",
|
|
"tonalRamp": ["oklch(15% 0.09 80)", "oklch(25% 0.11 80)", "oklch(35% 0.13 80)", "oklch(47% 0.15 80)", "oklch(59% 0.16 80)", "oklch(71% 0.15 80)", "oklch(83% 0.11 80)", "oklch(95% 0.04 80)"]
|
|
},
|
|
"warning-wash": {
|
|
"role": "secondary",
|
|
"displayName": "Amber Wash",
|
|
"canonical": "rgba(255, 188, 82, 0.11)",
|
|
"tonalRamp": ["oklch(15% 0.09 80)", "oklch(25% 0.11 80)", "oklch(35% 0.13 80)", "oklch(47% 0.15 80)", "oklch(59% 0.16 80)", "oklch(71% 0.15 80)", "oklch(83% 0.11 80)", "oklch(95% 0.04 80)"]
|
|
},
|
|
"danger": {
|
|
"role": "secondary",
|
|
"displayName": "Blocked Red",
|
|
"canonical": "#ff626d",
|
|
"tonalRamp": ["oklch(15% 0.10 20)", "oklch(25% 0.13 20)", "oklch(35% 0.16 20)", "oklch(47% 0.19 20)", "oklch(59% 0.21 20)", "oklch(71% 0.19 20)", "oklch(83% 0.13 20)", "oklch(95% 0.05 20)"]
|
|
},
|
|
"danger-wash": {
|
|
"role": "secondary",
|
|
"displayName": "Red Wash",
|
|
"canonical": "rgba(255, 98, 109, 0.11)",
|
|
"tonalRamp": ["oklch(15% 0.10 20)", "oklch(25% 0.13 20)", "oklch(35% 0.16 20)", "oklch(47% 0.19 20)", "oklch(59% 0.21 20)", "oklch(71% 0.19 20)", "oklch(83% 0.13 20)", "oklch(95% 0.05 20)"]
|
|
},
|
|
"info": {
|
|
"role": "tertiary",
|
|
"displayName": "Evidence Blue",
|
|
"canonical": "#66a8ff",
|
|
"tonalRamp": ["oklch(15% 0.09 255)", "oklch(25% 0.11 255)", "oklch(35% 0.13 255)", "oklch(47% 0.15 255)", "oklch(59% 0.16 255)", "oklch(71% 0.15 255)", "oklch(83% 0.11 255)", "oklch(95% 0.04 255)"]
|
|
},
|
|
"info-wash": {
|
|
"role": "tertiary",
|
|
"displayName": "Blue Wash",
|
|
"canonical": "rgba(102, 168, 255, 0.11)",
|
|
"tonalRamp": ["oklch(15% 0.09 255)", "oklch(25% 0.11 255)", "oklch(35% 0.13 255)", "oklch(47% 0.15 255)", "oklch(59% 0.16 255)", "oklch(71% 0.15 255)", "oklch(83% 0.11 255)", "oklch(95% 0.04 255)"]
|
|
}
|
|
},
|
|
"typographyMeta": {
|
|
"display": { "displayName": "Entry Display", "purpose": "Sign-in identity statement only." },
|
|
"headline": { "displayName": "Workbench Headline", "purpose": "Portal page titles and first-view orientation." },
|
|
"title": { "displayName": "Panel Title", "purpose": "Panel, dialog, and compact section headings." },
|
|
"body": { "displayName": "Operational Body", "purpose": "Navigation, controls, evidence descriptions, and workflow copy." },
|
|
"label": { "displayName": "Evidence Label", "purpose": "Table headers, metadata, badges, and compact context." },
|
|
"data": { "displayName": "Tabular Evidence", "purpose": "Amounts, dates, account suffixes, counts, ratios, and balances." }
|
|
},
|
|
"shadows": [
|
|
{ "name": "panel-float", "value": "0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.035)", "purpose": "Floating sidebar, dialog, toast, and sign-in form." },
|
|
{ "name": "low-glass", "value": "0 12px 32px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025)", "purpose": "Panels, metric cards, alerts, and account cards at rest." },
|
|
{ "name": "command-glow", "value": "0 0 28px rgba(55, 235, 137, 0.12)", "purpose": "Focused search and selected identity cues only." }
|
|
],
|
|
"motion": [
|
|
{ "name": "state-fast", "value": "150ms", "purpose": "Hover, focus, field, row, and button state changes." },
|
|
{ "name": "structure-standard", "value": "260ms", "purpose": "Metric movement and mobile sidebar transitions." },
|
|
{ "name": "navigation-repeat", "value": "180ms", "purpose": "Brief repeat navigation after cancelling any previous view animation." },
|
|
{ "name": "first-load", "value": "440ms with 38ms stagger capped at 260ms", "purpose": "One-time workbench entrance sequencing." },
|
|
{ "name": "ease-out", "value": "cubic-bezier(0.22, 1, 0.36, 1)", "purpose": "Entrances and structural motion." },
|
|
{ "name": "reduced-motion", "value": "0.01ms", "purpose": "Forced near-instant animation and transition duration when reduced motion is requested." }
|
|
],
|
|
"breakpoints": [
|
|
{ "name": "rail", "value": "1180px" },
|
|
{ "name": "recompose", "value": "900px" },
|
|
{ "name": "mobile", "value": "720px" },
|
|
{ "name": "narrow", "value": "460px" }
|
|
]
|
|
},
|
|
"components": [
|
|
{
|
|
"name": "Primary Button",
|
|
"kind": "button",
|
|
"refersTo": "button-primary",
|
|
"description": "The sole filled command treatment for a page or decision group.",
|
|
"html": "<button class=\"ds-btn-primary\" type=\"button\">查询往来</button>",
|
|
"css": ".ds-btn-primary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; border-radius: 13px; background: var(--color-primary, #37eb89); color: var(--color-primary-dark, #08160e); font: 700 13px/1.55 var(--font-ui, sans-serif); cursor: pointer; box-shadow: 0 8px 24px rgba(55, 235, 137, 0.18); transition: transform 150ms, box-shadow 150ms, background 150ms; } .ds-btn-primary:hover { background: var(--color-primary-strong, #70ffae); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(55, 235, 137, 0.25); } .ds-btn-primary:active { transform: scale(0.985); } .ds-btn-primary:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; }"
|
|
},
|
|
{
|
|
"name": "Secondary Button",
|
|
"kind": "button",
|
|
"refersTo": "button-secondary",
|
|
"description": "A bordered graphite command for supporting or reversible actions.",
|
|
"html": "<button class=\"ds-btn-secondary\" type=\"button\">重新检查</button>",
|
|
"css": ".ds-btn-secondary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--color-line, rgba(255,255,255,.09)); border-radius: 13px; background: rgba(255, 255, 255, 0.045); color: var(--color-ink, #f2f7f4); font: 700 13px/1.55 var(--font-ui, sans-serif); cursor: pointer; transition: transform 150ms, background 150ms, border-color 150ms; } .ds-btn-secondary:hover { border-color: var(--color-line-strong, rgba(255,255,255,.16)); background: rgba(255,255,255,.08); transform: translateY(-1px); } .ds-btn-secondary:active { transform: scale(0.985); } .ds-btn-secondary:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; }"
|
|
},
|
|
{
|
|
"name": "Evidence Field",
|
|
"kind": "input",
|
|
"refersTo": "field",
|
|
"description": "A labelled inset field for dates, accounts, keywords, and audited decisions.",
|
|
"html": "<label class=\"ds-field\"><span>截止日期</span><input type=\"text\" value=\"2026.07.31\"></label>",
|
|
"css": ".ds-field { min-width: 220px; display: flex; flex-direction: column; gap: 6px; color: var(--color-ink-soft, #a6b0aa); font: 13px/1.55 var(--font-ui, sans-serif); } .ds-field span { color: var(--color-ink-muted, #89938d); font-size: 11px; } .ds-field input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--color-line, rgba(255,255,255,.09)); border-radius: 11px; outline: 0; background: rgba(2,5,3,.48); color: var(--color-ink, #f2f7f4); transition: border-color 150ms, box-shadow 150ms, background 150ms; } .ds-field input:focus { border-color: rgba(55,235,137,.5); background: rgba(2,5,3,.7); box-shadow: 0 0 0 3px rgba(55,235,137,.08); } .ds-field input:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; }"
|
|
},
|
|
{
|
|
"name": "Active Navigation Item",
|
|
"kind": "nav",
|
|
"refersTo": "navigation-active",
|
|
"description": "The current destination within either portal's independent sidebar.",
|
|
"html": "<button class=\"ds-nav-active\" type=\"button\" aria-current=\"page\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z\"/></svg><span>管理总览</span></button>",
|
|
"css": ".ds-nav-active { width: 210px; min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.075); color: var(--color-ink, #f2f7f4); font: 13px/1.55 var(--font-ui, sans-serif); cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.2); transition: transform 150ms, background 150ms; } .ds-nav-active svg { width: 17px; height: 17px; fill: none; stroke: var(--color-primary, #37eb89); stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(55,235,137,.42)); } .ds-nav-active:hover { background: rgba(255,255,255,.095); transform: translateX(2px); } .ds-nav-active:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; }"
|
|
},
|
|
{
|
|
"name": "Warning Status",
|
|
"kind": "chip",
|
|
"refersTo": "status-warning",
|
|
"description": "Explicit pending-review state; wording remains visible alongside color.",
|
|
"html": "<span class=\"ds-status-warning\">单边待核</span>",
|
|
"css": ".ds-status-warning { min-height: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border: 1px solid rgba(255,188,82,.18); border-radius: 8px; background: var(--color-warning-wash, rgba(255,188,82,.11)); color: var(--color-warning, #ffbc52); font: 500 10px/1.4 var(--font-ui, sans-serif); white-space: nowrap; }"
|
|
},
|
|
{
|
|
"name": "Interactive Metric Card",
|
|
"kind": "card",
|
|
"refersTo": "metric-card",
|
|
"description": "One of four first-view signals, with native button semantics when interactive.",
|
|
"html": "<button class=\"ds-metric\" type=\"button\"><span class=\"ds-metric-copy\"><span>待审核事项</span><strong>7 <small>项</small></strong></span><span class=\"ds-metric-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"m9 11 2 2 4-4M5 4h14v16H5z\"/></svg></span><span class=\"ds-metric-foot\"><b>2 项高风险</b> · 影响当前结账</span></button>",
|
|
"css": ".ds-metric { width: 268px; min-height: 142px; display: grid; grid-template-columns: minmax(0,1fr) 46px; align-content: space-between; gap: 14px; padding: 20px; border: 1px solid var(--color-line, rgba(255,255,255,.09)); border-radius: 22px; background: var(--color-surface, rgba(20,26,23,.82)); color: var(--color-ink, #f2f7f4); text-align: left; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(24px) saturate(125%); transition: transform 260ms cubic-bezier(.22,1,.36,1), border-color 260ms, box-shadow 260ms; } .ds-metric:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.17); box-shadow: 0 24px 54px rgba(0,0,0,.3); } .ds-metric:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; } .ds-metric-copy { display: flex; flex-direction: column; color: var(--color-ink-soft, #a6b0aa); font: 12px/1.4 var(--font-ui, sans-serif); } .ds-metric-copy strong { margin-top: 7px; color: var(--color-ink, #f2f7f4); font: 700 31px/1 var(--font-data, sans-serif); } .ds-metric-copy small { color: var(--color-ink-muted, #89938d); font: 11px var(--font-ui, sans-serif); } .ds-metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-line, rgba(255,255,255,.09)); border-radius: 15px; background: rgba(255,255,255,.055); color: var(--color-danger, #ff626d); } .ds-metric-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ds-metric-foot { grid-column: 1 / -1; color: var(--color-ink-muted, #89938d); font: 11px/1.4 var(--font-ui, sans-serif); } .ds-metric-foot b { color: var(--color-danger, #ff626d); }"
|
|
},
|
|
{
|
|
"name": "Graphite Glass Panel",
|
|
"kind": "card",
|
|
"refersTo": "panel",
|
|
"description": "A meaningful work region divided internally by hairlines instead of nested cards.",
|
|
"html": "<section class=\"ds-panel\"><header><div><h2>优先处理</h2><p>影响当前账期可结性的事项</p></div><a href=\"#\">查看全部 7 项</a></header><div class=\"ds-panel-row\"><strong>流水覆盖缺口</strong><span>2 个账户待处理</span></div></section>",
|
|
"css": ".ds-panel { width: 380px; overflow: hidden; border: 1px solid var(--color-line, rgba(255,255,255,.09)); border-radius: 22px; background: var(--color-surface, rgba(20,26,23,.82)); color: var(--color-ink, #f2f7f4); font: 13px/1.55 var(--font-ui, sans-serif); box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(22px) saturate(120%); } .ds-panel header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 17px; border-bottom: 1px solid var(--color-line, rgba(255,255,255,.09)); } .ds-panel h2 { margin: 0; font-size: 15px; } .ds-panel p { margin: 3px 0 0; color: var(--color-ink-muted, #89938d); font-size: 11px; } .ds-panel a { color: var(--color-primary, #37eb89); text-decoration: none; } .ds-panel a:hover { color: var(--color-primary-strong, #70ffae); } .ds-panel a:focus-visible { outline: 2px solid var(--color-primary-strong, #70ffae); outline-offset: 3px; } .ds-panel-row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 17px; } .ds-panel-row span { color: var(--color-ink-muted, #89938d); font-size: 11px; }"
|
|
}
|
|
],
|
|
"narrative": {
|
|
"northStar": "The Midnight Evidence Desk",
|
|
"overview": "This is a quiet, high-consequence operations room for financial evidence. A near-black scene keeps attention on state and action; translucent graphite surfaces reveal hierarchy without turning every section into a decorative card. Emerald behaves like an illuminated command channel, while amber and red identify review pressure and blocked work.\n\nThe administrator and cashier portals are sibling workbenches, not skins of one generic dashboard. They share material, type, and interaction grammar, but their navigation, first-view metrics, priorities, data scope, and primary commands remain distinct. The administrator sees group-wide calculation health and exception pressure; the cashier sees account coverage, uploads, confirmations, and work required before closing.\n\nThe interface is dense enough for repeated operational use, yet each first view opens with four prominent metric cards and a clear action hierarchy. Every balance carries a cutoff date and unresolved amount nearby. Muted copy remains readable on the primary glass surface; the shipped muted token measures 5.73:1 there.",
|
|
"keyCharacteristics": [
|
|
"Near-black continuous canvas with restrained translucent graphite glass.",
|
|
"Floating desktop sidebar and narrow sticky top bar establish the workbench frame.",
|
|
"Four prominent metric cards expose workload, risk, completion, and closing state.",
|
|
"Emerald is reserved for commands, focus, confirmed progress, and positive outcomes.",
|
|
"Amber and red carry explicit text for review and blocked states; color never acts alone.",
|
|
"Stable tabular numerals support scanning amounts, dates, balances, and counts.",
|
|
"First load uses a measured staged reveal; repeat navigation uses a brief 180ms transition.",
|
|
"Both portals retain independent routes, navigation models, and information priorities."
|
|
],
|
|
"rules": [
|
|
{ "name": "The One Command Light Rule", "body": "Emerald is the only global action accent. Do not introduce cobalt, purple, or a second brand-action hue.", "section": "colors" },
|
|
{ "name": "The State Is Evidence Rule", "body": "Amber and red must be paired with explicit status text and a consequence or recovery action when one exists.", "section": "colors" },
|
|
{ "name": "The Stable Evidence Rule", "body": "Comparable numbers use tabular figures and stable alignment. Never communicate debit, credit, or risk from typographic style alone.", "section": "typography" },
|
|
{ "name": "The Zero Tracking Rule", "body": "Keep letter spacing at zero. Hierarchy comes from size, weight, spacing, and material contrast.", "section": "typography" },
|
|
{ "name": "The Two Workbenches Rule", "body": "Do not merge the administrator and cashier portals into one route with hidden controls. Shared components may be reused, but each portal owns its navigation and first-view priorities.", "section": "layout" },
|
|
{ "name": "The Four Signals Rule", "body": "Both portal home views open with four prominent metrics. Preserve their stable dimensions and button semantics when they navigate or execute an action.", "section": "layout" },
|
|
{ "name": "The Glass With Restraint Rule", "body": "Blur and translucency establish material, but every surface still needs a readable border and sufficient tonal separation. Do not stack glass cards inside glass cards for decoration.", "section": "elevation" },
|
|
{ "name": "The Motion Has Memory Rule", "body": "Sequenced motion belongs to first load only. Repeat navigation is brief and does not replay the full entrance choreography.", "section": "elevation" },
|
|
{ "name": "The Radius By Responsibility Rule", "body": "Small radii belong to controls and statuses, large radii to major surfaces, and the extra-large radius to application-frame objects. Do not make every element equally round.", "section": "shapes" }
|
|
],
|
|
"dos": [
|
|
"Do keep the canvas near-black and use translucent graphite only for meaningful surfaces.",
|
|
"Do preserve four prominent first-view metrics with cutoff and unresolved context nearby.",
|
|
"Do keep administrator and cashier portals separate at the route, navigation, and information-priority levels.",
|
|
"Do expose status in words, not color alone, and place recovery near blocked work.",
|
|
"Do keep muted text at or above the shipped 5.73:1 contrast on primary glass.",
|
|
"Do replace tokens and component rules in place when evolving the visual system.",
|
|
"Do keep initial sequencing one-time and repeat navigation to the brief 180ms transition."
|
|
],
|
|
"donts": [
|
|
"Don't reintroduce warm paper, cobalt commands, cream surfaces, or a light-theme visual vocabulary.",
|
|
"Don't add a theme override layer after the existing stylesheet; update the canonical tokens and component definitions in place.",
|
|
"Don't use !important in business-component rules. Priority forcing is reserved for accessibility utilities such as visually hidden or [hidden], and reduced-motion enforcement.",
|
|
"Don't stack cards inside cards, add decorative glass, or amplify blur and glow beyond the shipped restraint.",
|
|
"Don't infer financial direction, ownership, subject, or risk from a name, color, or visual position alone.",
|
|
"Don't edit imported evidence through UI styling patterns that imply source rows are mutable."
|
|
]
|
|
}
|
|
}
|