",
"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."
]
}
}