bitzorcas
中EN

Concept

Design System 1.2

The frozen scope, authority order, stable themes, experience profiles, and implementation status of BitzOrcas Design System 1.2.

Last updated

Design System 1.2

Frozen scope

LayerFrozen responsibilityPage developers provide
Foundation / TokenColor, type, spacing, radius, elevation, motion, z-index, densityNothing
PatternTheme, Shell, Workspace, List, Filter, Saved ViewAn approved selection
RecipeList, Detail, Edit, Wizard, Dashboard, IdentitySDK calls, permissions, fields, columns, copy
Product PageNo new design rulesBusiness content and orchestration

The dependency direction is fixed:

Reference -> System -> Component -> shadcn Compatibility
                              |
                    Pattern -> Recipe -> Page
validates each slicevalidates each slicevalidates each slice

Token Source

Deterministic generator

CSS / TypeScript / schema

Components

Patterns

Recipes

Product Pages

Design Guardian

Frozen means that a page cannot rewrite the stable contract. It does not mean every advanced Pattern has shipped. Implementation gaps continue to converge on the contract and remain explicit in the conformance ledger.

Authority order

Resolve conflicts in this order:

  1. ADR 0801 and frontend/AGENTS.md;
  2. this frozen v1 manual;
  3. Frontend Design Guardian and the UI Done Checklist;
  4. shadcn component contracts;
  5. external design skills, competitors, old screenshots, and Axhub references.

Historical screens provide evidence about domain complexity. They are not a visual baseline.

Stable themes

OrderIDNamePosition
0enterprise-neutralSlateFramework and generic Platform fallback
1legal-navyNavyDefault Legal theme
2legal-amberGoldWarm commercial and premium services
3legal-burgundyBurgundyBoutique firms and partner portals
4legal-jadeJadeKnowledge, compliance, and an East Asian professional tone
5legal-orangeOrangeEnergy, manufacturing, and activity-driven brands

Display names match the name field in theme.tokens.json and the i18n strings. The workspace theme picker shows themes in workspaceBrandThemeIds order: Navy, Gold, Burgundy, Jade, Slate, Orange. Slate (enterprise-neutral) is both the Framework fallback and a selectable option in the workspace picker.

Frozen experience profiles

ProfileShellWorkspaceDensityUse
platform-workbenchSideManaged TabsCompactMain desktop legal workspace
platform-portalTopSingle RouteCompactSmaller portal or search-centered product
identity-flowMinimalSingle RouteComfortableLogin, invitation, MFA, recovery
touch-contextResponsiveSingle RouteComfortableNarrow or touch environment

Density has four levels: dense, compact, comfortable, spacious. The profile table lists only the default level for each scenario. dense targets high-density tables and bulk operations; spacious targets touch and accessibility scaling. Users can switch in preferences.

Theme, Mode, Density, Shell, and Workspace are independent. A theme does not change navigation, and frontend visibility never replaces backend authorization.

Current implementation status

CapabilityDesign contractCurrent code
Token layers and ownershipFrozenLanded in packages/materials; deterministic generator emits CSS/TS/schema
Six brand themesFrozenColor ramps generated; AppearanceProvider injects at runtime
Light/Dark x Brand x DensityFrozenFour density levels, six themes, and mode cascades all implemented
Accessibility overridesFrozenfontScale, highContrast, colorVision, reduceMotion axes implemented
Shell / WorkspaceFrozenSide/Top and Single Route are live; Managed Tabs restore and dirty-state work remains
List / FilterFrozenShared list/filter foundations are live; Advanced Filter, Query Studio, and Saved View advance slice by slice
IdentityDeliveredCompleted as a full tracer-bullet

Reading path

Start with design language, then read token architecture, application shells, list and filter patterns, and implementation gates.

Chapter Navigation

100%

Scroll or use controls to zoom · drag when enlarged · double-click for 100% / 200%