caiwuzongzhang/DESIGN.md

---
name: "Intercompany Ledger"
description: "Two distinct financial operations workbenches built as a near-black evidence room with graphite glass and emerald commands."
colors:
  canvas: "#050706"
  canvas-soft: "#090d0b"
  navigation: "#090c0b"
  glass: "rgba(20, 26, 23, 0.82)"
  surface-solid: "#131916"
  surface-raised: "#18201c"
  surface-muted: "rgba(255, 255, 255, 0.035)"
  line: "rgba(255, 255, 255, 0.09)"
  line-strong: "rgba(255, 255, 255, 0.16)"
  ink: "#f2f7f4"
  ink-soft: "#a6b0aa"
  ink-muted: "#89938d"
  action: "#37eb89"
  action-strong: "#70ffae"
  action-dark: "#08160e"
  action-wash: "rgba(55, 235, 137, 0.11)"
  positive-wash: "rgba(55, 235, 137, 0.10)"
  warning: "#ffbc52"
  warning-wash: "rgba(255, 188, 82, 0.11)"
  danger: "#ff626d"
  danger-wash: "rgba(255, 98, 109, 0.11)"
  info: "#66a8ff"
  info-wash: "rgba(102, 168, 255, 0.11)"
typography:
  display:
    fontFamily: "Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, system-ui, sans-serif"
    fontSize: "clamp(38px, 5vw, 70px)"
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: "0"
  headline:
    fontFamily: "Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, system-ui, sans-serif"
    fontSize: "clamp(26px, 3vw, 35px)"
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: "0"
  title:
    fontFamily: "Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, system-ui, sans-serif"
    fontSize: "15px"
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: "0"
  body:
    fontFamily: "Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, system-ui, sans-serif"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "0"
  label:
    fontFamily: "Microsoft YaHei UI, PingFang SC, Noto Sans CJK SC, system-ui, sans-serif"
    fontSize: "10px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0"
  data:
    fontFamily: "Segoe UI, Microsoft YaHei UI, system-ui, sans-serif"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: "0"
rounded:
  sm: "10px"
  md: "16px"
  lg: "22px"
  xl: "28px"
components:
  button-primary:
    backgroundColor: "{colors.action}"
    textColor: "{colors.action-dark}"
    typography: "{typography.body}"
    rounded: "13px"
    padding: "0 15px"
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.action-strong}"
    textColor: "{colors.action-dark}"
    rounded: "13px"
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "13px"
    padding: "0 15px"
    height: "40px"
  field:
    backgroundColor: "rgba(2, 5, 3, 0.48)"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "11px"
    padding: "9px 11px"
    height: "40px"
  panel:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
  metric-card:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "20px"
    height: "142px"
  navigation-active:
    backgroundColor: "rgba(255, 255, 255, 0.075)"
    textColor: "{colors.ink}"
    rounded: "14px"
    padding: "0 12px"
    height: "43px"
  status-success:
    backgroundColor: "{colors.positive-wash}"
    textColor: "{colors.action}"
    rounded: "8px"
    padding: "2px 8px"
    height: "23px"
    typography: "{typography.label}"
  status-warning:
    backgroundColor: "{colors.warning-wash}"
    textColor: "{colors.warning}"
    rounded: "8px"
    padding: "2px 8px"
    height: "23px"
    typography: "{typography.label}"
  status-danger:
    backgroundColor: "{colors.danger-wash}"
    textColor: "{colors.danger}"
    rounded: "8px"
    padding: "2px 8px"
    height: "23px"
    typography: "{typography.label}"
---

# Design System: Intercompany Ledger

## Overview

**Creative North Star: "The Midnight Evidence Desk"**

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.

The 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.

The 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.

**Key Characteristics:**

- 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.

## Colors

The palette is dark, cool-neutral, and operational: a nearly black field, green-black graphite surfaces, high-clarity text, and sparse luminous semantic signals.

### Primary

- **Command Emerald:** The sole dominant action color for primary commands, active focus, selected controls, confirmed progress, and links that cause navigation.
- **Signal Emerald:** A brighter hover and emphasis state for command affordances; use it sparingly so the interface does not become neon.
- **Emerald Ink:** The dark text color placed on filled emerald controls for legibility.
- **Emerald Wash:** A translucent state field for selected items, confirmation summaries, and compact identity marks.

### Secondary

- **Review Amber:** Marks incomplete coverage, pending review, expiring work, and caution that still has a recovery path.
- **Blocked Red:** Marks failed continuity, overdue work, destructive consequences, and states that prevent closing.

### Tertiary

- **Evidence Blue:** Supports informational callouts where neither success nor risk is implied.

### Neutral

- **Void Canvas:** The uninterrupted application background and the darkest visual anchor.
- **Graphite Glass:** The shared translucent material for panels, metric cards, query bands, and the sign-in form.
- **Solid Graphite / Raised Graphite:** Opaque fallbacks and denser transient layers.
- **Hairline / Strong Hairline:** Low-contrast structure for glass boundaries, rows, fields, and decision layers.
- **Primary Ink:** High-emphasis headings, values, and action labels.
- **Soft Ink:** Operational body copy and secondary values.
- **Muted Ink:** Metadata, descriptions, cutoff context, and helper text; never reduce its shipped contrast.

**The One Command Light Rule.** Emerald is the only global action accent. Do not introduce cobalt, purple, or a second brand-action hue.

**The State Is Evidence Rule.** Amber and red must be paired with explicit status text and a consequence or recovery action when one exists.

## Typography

**Display Font:** Microsoft YaHei UI, falling back through PingFang SC, Noto Sans CJK SC, system UI, and sans-serif.

**Body Font:** The same Chinese-first UI stack for predictable density and platform rendering.

**Data Font:** Segoe UI with the UI stack as fallback; numeric evidence always enables tabular figures.

**Character:** The type system is neutral, compact, and sturdy. Scale and weight establish hierarchy without letter-spacing effects, decorative type, or oversized dashboard copy.

### Hierarchy

- **Display:** Reserved for the sign-in identity statement; it does not enter either operational portal.
- **Headline:** Portal page titles and first-view orientation.
- **Title:** Panel titles, dialog titles, and compact section anchors.
- **Body:** Controls, navigation, evidence descriptions, and operational copy.
- **Label:** Table headers, metadata, badges, and compact context.
- **Data:** Amounts, dates, ratios, account suffixes, metrics, and balance results.

**The Stable Evidence Rule.** Comparable numbers use tabular figures and stable alignment. Never communicate debit, credit, or risk from typographic style alone.

**The Zero Tracking Rule.** Keep letter spacing at zero. Hierarchy comes from size, weight, spacing, and material contrast.

## Layout

Desktop portals use a fixed floating sidebar beside a fluid workspace. The sidebar occupies a 234px visual rail inside a 252px application column, offset 18px from the viewport. The sticky top bar is 78px high, and the main work area is capped at 1560px with 32px desktop insets.

The opening dashboard rhythm is invariant: page heading, four metric cards, calculation or blocking context, then portal-specific action and evidence regions. Administrator work pairs a larger priority queue with a compact company-pair query; cashier work pairs a larger task list with account coverage. Evidence tables retain column integrity and scroll horizontally when necessary.

At 1180px the sidebar compresses to an icon rail, the four metrics become two columns, and major two-column work areas stack. At 900px search is removed from the top bar and complex ledgers recompose. At 720px the sidebar becomes a 242px off-canvas surface, the top bar becomes 64px high, main insets tighten to 13px, and primary mobile actions may become icon-only when their accessible name remains present. Metric cards stay two-up. At 460px their internal height increases to protect wrapping; role selection becomes one column.

**The Two Workbenches Rule.** 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.

**The Four Signals Rule.** Both portal home views open with four prominent metrics. Preserve their stable dimensions and button semantics when they navigate or execute an action.

## Elevation & Depth

Depth is a restrained hybrid of tonal layering, translucent glass, hairline borders, blur, and low black shadows. Primary content panels use the lower shadow; the floating sidebar, dialog, sign-in form, and toast use the stronger panel shadow. Emerald glow belongs only to active identity or focus cues. The broad glass is intentionally more restrained than the pinned reference so dense financial content remains calm.

### Shadow Vocabulary

- **Panel Float:** Used by the floating sidebar, dialogs, toast, and sign-in form to separate decision or frame layers.
- **Low Glass:** Used by panels, metric cards, alerts, and account cards at rest.
- **Command Glow:** Used on primary action hover and selected identity marks; it is not general decoration.

First-load content enters over 440ms with a short capped stagger. Subsequent portal navigation uses 180ms. Ordinary component transitions use 150ms; structural sidebar motion uses 260ms with the standard emphasized ease. Reduced-motion mode collapses animation and transition duration to a near-instant value.

**The Glass With Restraint Rule.** 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.

**The Motion Has Memory Rule.** Sequenced motion belongs to first load only. Repeat navigation is brief and does not replay the full entrance choreography.

## Shapes

The system uses rounded, engineered silhouettes rather than pills or sharp ledger boxes. Base controls and compact indicators begin at the small radius; structured surfaces use medium and large radii; only the floating sidebar and sign-in form reach the extra-large radius. Icon buttons remain stable squares, and avatars alone are circular.

Hairline borders are part of the material model, not optional ornament. They separate translucent surfaces from the near-black canvas and divide evidence rows without resorting to multiple background cards.

**The Radius By Responsibility Rule.** 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.

## Components

### Buttons

- **Shape:** Compact rounded rectangle with a stable 40px minimum height; small variants remain 34px high.
- **Primary:** Filled Command Emerald with dark text, strong weight, and a restrained green shadow.
- **Hover / Focus:** Brighten to Signal Emerald and lift by one pixel; keyboard focus uses a visible two-pixel emerald outline with offset.
- **Secondary:** Translucent graphite with a hairline border and light ink; it gains contrast on hover without becoming a second primary action.
- **Icon buttons:** Stable 40px squares with an accessible label and tooltip. Mobile may visually hide primary-action text only when the accessible name remains.

### Chips

- **Style:** Status chips are compact rounded rectangles, not decorative pills. Wash, border, text, and explicit wording share the same semantic family.
- **State:** Success, warning, danger, and neutral are distinct; selected filters use emerald wash or a restrained neutral selection field.

### Cards / Containers

- **Corner Style:** Major glass surfaces use the large radius; the sidebar and sign-in form use the extra-large radius.
- **Background:** Primary panels and metric cards use Graphite Glass; nested content is expressed with dividers or subtle tonal fields rather than another floating card.
- **Shadow Strategy:** Low Glass at rest, Panel Float only for frame and decision layers.
- **Border:** Every glass surface keeps a visible hairline boundary.
- **Internal Padding:** Metric cards use a generous 20px desktop inset, reduced to 15px on mobile.

### Inputs / Fields

- **Style:** Dark inset field, 40px minimum height, compact 11px corner, and persistent label above the control.
- **Focus:** Border shifts toward emerald and receives a low-opacity three-pixel focus halo; the global focus outline remains available.
- **Error / Disabled:** Error uses explicit red text and consequence. Disabled commands retain their label and use opacity plus the disabled cursor.

### Navigation

The sidebar floats as a framed glass rail. Navigation rows use soft ink at rest, a subtle translated hover, and a bordered translucent active field with an emerald icon. The administrator and cashier lists remain independent. At tablet width the rail collapses to icons with accessible names; on mobile it becomes an off-canvas surface that restores focus when dismissed.

### Metric Cards

Four metric cards form the first operational scan. Each has a label, a large stable value, a compact icon tile, and a consequence line. Interactive metrics are buttons or otherwise carry button semantics and full keyboard handling. Warning and danger use their semantic colors only for the relevant icon or consequence, not the entire card.

### Evidence Tables and Ledgers

Tables use continuous rows, muted headers, tabular numeric alignment, and subtle hover wash. Expanded company ledgers reveal counterparty and subject details in place before linking to a company-pair report and original bank evidence. On narrow screens, preserve evidence through reflow or horizontal scrolling rather than deleting financial context.

## Do's and Don'ts

### Do:

- **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.

### Don't:

- **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.