DESIGN.md

version	0.5.0
name	Nexus Design System
description	Nexus precision creative tool: neutral surfaces, cobalt interaction, offline system typography. Light/default; sole token authority with DESIGN.dark.md.
colors	brand-deep-blue brand-cyan brand-white brand-deep-blue-800 brand-deep-blue-900 brand-deep-blue-1000 brand-cyan-800 brand-cyan-900 brand-cyan-1000 brand-deep-blue-alpha-100 brand-deep-blue-alpha-200 brand-cyan-alpha-100 brand-cyan-alpha-200 background-100 background-200 background-300 gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 gray-1000 gray-alpha-100 gray-alpha-200 gray-alpha-300 gray-alpha-400 gray-alpha-500 gray-alpha-600 scrim blue-700 blue-800 blue-900 blue-1000 blue-1100 red-700 red-800 red-900 red-1000 amber-700 amber-800 amber-900 amber-1000 green-700 green-800 green-900 green-1000 teal-700 teal-800 teal-900 teal-1000 purple-700 purple-800 purple-900 purple-1000 pink-700 pink-800 pink-900 pink-1000 #202936 #3263C7 #FFFFFF #19212D #121923 #0C121B #2B56B0 #254A98 #203F82 #20293614 #20293624 #3263C71F #3263C733 #FFFFFF #F5F6F8 #EBEDF0 #F5F6F8 #EBEDF0 #DCE0E5 #BDC4CD #89939F #606B79 #505B69 #3D4755 #2B3441 #181F29 #181F290A #181F290F #181F2914 #181F291F #181F292E #181F293D #10172266 #3263C7 #2B56B0 #254A98 #203F82 #193469 #BF3545 #A72C3B #8C2330 #711C27 #926100 #7D5100 #654100 #503300 #237544 #1B6238 #154F2D #103E23 #146F65 #105D55 #0D4B45 #0A3B37 #7346AD #623A95 #512F7D #402564 #AD3567 #952C58 #7D2449 #651D3B
typography	font-display display-32 display-24 display-20 heading-32 heading-24 heading-20 heading-16 label-14 label-12 copy-16 copy-14 copy-13 button-14 button-12 label-12-mono copy-13-mono reading-prose-measure reading-prose-line-height reading-prose-paragraph-spacing copy-12 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 32px 600 1.25 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 24px 600 1.3 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 20px 600 1.3 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 32px 600 1.18 -0.025em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 24px 600 1.25 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 20px 600 1.3 -0.015em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 16px 600 1.4 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 14px 500 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 12px 600 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 16px 400 1.6 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 14px 400 1.55 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 13px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 14px 600 1.25 0 fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 12px 600 1.25 0.01em fontFamily fontSize fontWeight lineHeight letterSpacing ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", monospace 12px 500 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", monospace 13px 400 1.5 0 66ch 1.75 1.25em fontFamily fontSize fontWeight lineHeight letterSpacing system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 12px 400 1.5 0
spacing	base space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-16 space-24 4px 4px 8px 12px 16px 24px 32px 40px 64px 96px
rounded	control card popover fullscreen pill 4px 8px 8px 12px 9999px
elevation	elevation-0 elevation-1 elevation-2 elevation-3 elevation-4 shadow-card shadow-popover shadow-modal none 0 1px 2px #181F2910 0 2px 6px #181F291A 0 8px 24px -8px #181F2933 0 16px 48px -12px #181F2947 {elevation.elevation-1} {elevation.elevation-3} {elevation.elevation-4}
motion	duration-instant duration-state duration-popover duration-modal duration-enter duration-exit ease-standard ease-emphasized 0ms 120ms 160ms 200ms 160ms 140ms cubic-bezier(0.2, 0, 0, 1) cubic-bezier(0.16, 1, 0.3, 1)
components	button focus-ring input-select-textarea select card table badge-status-pill toast sidebar-nav listbox dialog popover sheet tabs states launch-daemon editor data-table context-menu desktop-window-chrome app-menu native-dialogs daemon-status-indicator shell-nav logo connection-setup finding-status-pill finding-triage memory-pending-count memory-review-button memory-task-kind-brainstorm memory-task-kind-outline memory-task-kind-chapter memory-task-kind-research memory-task-kind-unknown memory-task-kind-base memory-fragment-summary memory-fragment-id memory-inspector-header memory-inspector-field-label memory-inspector-field-value memory-fragment-filter-input reading-chapter-nav reading-progress-indicator reading-maturation-badge soul-viz-keyword-cluster-node soul-viz-timeline-axis soul-viz-drift-band soul-narrative-prose soul-growth-curve-stroke canvas reading-annotation-highlight-yellow reading-annotation-highlight-blue reading-annotation-highlight-green reading-annotation-highlight-pink reading-annotation-inspector reading-selection-toolbar reading-chrome-novel reading-chrome-essay reading-chrome-game-bible reading-chrome-script footer-profile setup-wizard-step setup-wizard-surface primary secondary tertiary destructive sizes disabled backgroundColor textColor borderColor rounded height typography hoverBackgroundColor hoverTextColor activeBackgroundColor activeTextColor {colors.blue-700} {colors.brand-white} none {rounded.control} 40px {typography.button-14} {colors.blue-800} {colors.brand-white} {colors.blue-900} {colors.brand-white} backgroundColor textColor borderColor rounded height typography hoverBackgroundColor hoverBorderColor {colors.background-100} {colors.gray-1000} {colors.gray-500} {rounded.control} 40px {typography.button-14} {colors.background-200} {colors.gray-alpha-500} backgroundColor textColor borderColor rounded height typography hoverBackgroundColor transparent {colors.gray-1000} none {rounded.control} 40px {typography.button-14} {colors.gray-alpha-100} backgroundColor textColor borderColor rounded height typography hoverBackgroundColor activeBackgroundColor {colors.red-800} #ffffff none {rounded.control} 40px {typography.button-14} {colors.red-700} {colors.red-900} tiny small default large height typography 24px {typography.button-12} height typography 32px {typography.button-12} height typography 40px {typography.button-14} height typography 48px {typography.button-14} backgroundColor textColor cursor {colors.gray-100} {colors.gray-700} not-allowed outer inner width-outer width-inner {colors.blue-700} {colors.background-100} 2px 2px default error disabled textarea placeholder helperText errorHelperText backgroundColor textColor borderColor rounded height typography {colors.background-100} {colors.gray-1000} {colors.gray-500} {rounded.control} 40px {typography.copy-14} backgroundColor textColor borderColor rounded height typography {colors.background-100} {colors.gray-1000} {colors.red-700} {rounded.control} 40px {typography.copy-14} backgroundColor textColor borderColor rounded height typography {colors.gray-100} {colors.gray-700} {colors.gray-alpha-300} {rounded.control} 40px {typography.copy-14} minHeight 96px textColor {colors.gray-700} typography {typography.copy-13} textColor typography {colors.red-1000} {typography.copy-13} default paddingInlineStart paddingInlineEnd chevronInset {spacing.space-3} {spacing.space-8} {spacing.space-3} default compact hero title backgroundColor borderColor rounded padding shadow {colors.background-100} {colors.gray-alpha-400} {rounded.card} {spacing.space-6} {elevation.shadow-card} padding {spacing.space-4} padding {spacing.space-8} voice interface content typography {typography.heading-16} typography {typography.display-20} header row idText backgroundColor typography textColor borderBottomColor {colors.background-200} {typography.label-12} {colors.gray-900} {colors.gray-alpha-400} typography textColor secondaryTextColor hoverBackgroundColor selectedBackgroundColor {typography.copy-14} {colors.gray-1000} {colors.gray-900} {colors.background-200} {colors.background-300} typography {typography.label-12-mono} base soft solid height paddingInline rounded typography fontWeight 24px 8px {rounded.pill} {typography.label-12} 600 neutral running queued warning error preset backgroundColor textColor borderColor {colors.gray-alpha-100} {colors.gray-900} {colors.gray-alpha-400} backgroundColor textColor borderColor color-mix(in srgb, {colors.green-700} 16%, transparent) {colors.green-1000} color-mix(in srgb, {colors.green-700} 50%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.teal-700} 16%, transparent) {colors.teal-1000} color-mix(in srgb, {colors.teal-700} 50%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.amber-700} 16%, transparent) {colors.amber-1000} color-mix(in srgb, {colors.amber-700} 50%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.red-700} 16%, transparent) {colors.red-1000} color-mix(in srgb, {colors.red-700} 50%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.purple-700} 16%, transparent) {colors.purple-1000} color-mix(in srgb, {colors.purple-700} 50%, transparent) neutral running queued warning error preset backgroundColor textColor borderColor {colors.gray-1000} #ffffff transparent backgroundColor textColor borderColor {colors.green-800} #ffffff transparent backgroundColor textColor borderColor {colors.teal-800} #ffffff transparent backgroundColor textColor borderColor {colors.amber-800} #ffffff transparent backgroundColor textColor borderColor {colors.red-800} #ffffff transparent backgroundColor textColor borderColor {colors.purple-700} #ffffff transparent backgroundColor borderColor shadow rounded maxWidth titleTypography bodyTypography {colors.background-100} {colors.gray-alpha-400} {elevation.shadow-popover} {rounded.popover} 360px {typography.label-14} {typography.copy-13} width backgroundColor dividerColor itemHeight itemRounded itemTypography activeBackgroundColor activeTextColor activeBarColor 248px {colors.background-100} {colors.gray-alpha-400} 36px {rounded.control} {typography.label-14} {colors.gray-alpha-100} {colors.gray-1000} {colors.blue-700} maxHeight 320px backgroundColor rounded shadow maxWidth width maxHeight padding {colors.background-100} {rounded.popover} {elevation.shadow-modal} 560px calc(100% - 2rem) 85vh {spacing.space-6} backgroundColor borderColor shadow rounded itemHeight {colors.background-100} {colors.gray-alpha-400} {elevation.shadow-popover} {rounded.popover} 36px backgroundColor borderColor shadow width {colors.background-100} {colors.gray-alpha-400} {elevation.shadow-modal} min(100vw, 280px) list trigger backgroundColor borderColor rounded padding gap {colors.background-200} {colors.gray-alpha-400} {rounded.card} 4px 4px default hover active disabled focusVisible typography textColor height paddingInline rounded {typography.button-12} {colors.gray-800} 32px 12px {rounded.control} backgroundColor textColor {colors.gray-alpha-100} {colors.gray-1000} backgroundColor textColor shadow {colors.background-100} {colors.gray-1000} shadow-card textColor cursor {colors.gray-700} not-allowed {components.focus-ring} spinner loading empty error success warning info disabled size color 16px {colors.blue-1000} typography textColor gap paddingBlock {typography.copy-14} {colors.gray-700} {spacing.space-2} {spacing.space-6} titleTypography titleColor descriptionTypography descriptionColor paddingBlock gap {typography.display-24} {colors.gray-1000} {typography.copy-14} {colors.gray-900} {spacing.space-16} {spacing.space-2} titleTypography titleColor descriptionTypography descriptionColor backgroundColor borderColor rounded padding retryTypography retryColor {typography.heading-16} {colors.red-1000} {typography.copy-14} {colors.red-900} color-mix(in srgb, {colors.red-700} 6%, transparent) color-mix(in srgb, {colors.red-700} 30%, transparent) {rounded.card} {spacing.space-4} {typography.label-14} {colors.brand-deep-blue} backgroundColor borderColor color-mix(in srgb, {colors.green-700} 6%, transparent) color-mix(in srgb, {colors.green-700} 30%, transparent) backgroundColor borderColor color-mix(in srgb, {colors.amber-700} 6%, transparent) color-mix(in srgb, {colors.amber-700} 30%, transparent) backgroundColor borderColor color-mix(in srgb, {colors.blue-700} 6%, transparent) color-mix(in srgb, {colors.blue-700} 30%, transparent) opacity 0.5 splash main-banner status-indicator titleTypography helperTypography spinnerSize maxWidth {typography.heading-24} {typography.copy-14} 32px 28rem backgroundColor borderColor titleTypography titleWeight descriptionTypography paddingInline paddingBlock color-mix(in srgb, {colors.amber-700} 10%, transparent) {colors.gray-alpha-400} {typography.copy-14} 600 {typography.copy-13} {spacing.space-6} {spacing.space-3} {components.daemon-status-indicator} surface surface-muted border border-active toolbar-control-bg toolbar-control-hover toolbar-control-active save-clean save-dirty save-error selection {colors.background-100} {colors.background-200} {colors.gray-alpha-400} {colors.blue-700} transparent {colors.gray-alpha-100} {colors.gray-alpha-200} {colors.green-700} {colors.amber-700} {colors.red-700} color-mix(in srgb, {colors.blue-700} 14%, transparent) row-hover row-selected row-edited row-protected cell-edit-bg cell-edit-border column-divider {colors.background-200} {colors.background-300} color-mix(in srgb, {colors.amber-700} 8%, transparent) color-mix(in srgb, {colors.purple-700} 6%, transparent) {colors.background-100} {colors.blue-700} {colors.gray-alpha-200} bg border item-hover item-active item-disabled shortcut native-action native-icon native-disabled native-danger {colors.background-100} {colors.gray-alpha-400} {colors.gray-alpha-100} {colors.gray-alpha-200} {colors.gray-700} {colors.gray-700} {colors.gray-1000} {colors.gray-900} {colors.gray-700} {colors.red-700} window-bg window-border titlebar-safe-area window-radius window-drag-region-height {colors.background-100} {colors.gray-alpha-400} 28px {rounded.card} 0px label secondary disabled danger {colors.gray-1000} {colors.gray-700} {colors.gray-700} {colors.red-700} title body secondary danger warning {typography.heading-20} {typography.copy-14} {colors.gray-900} {colors.red-700} {colors.amber-700} healthy-bg healthy-text starting-bg starting-text degraded-bg degraded-text stopped-bg stopped-text color-mix(in srgb, {colors.green-700} 10%, transparent) {colors.green-1000} color-mix(in srgb, {colors.teal-700} 10%, transparent) {colors.teal-1000} color-mix(in srgb, {colors.amber-700} 12%, transparent) {colors.amber-1000} color-mix(in srgb, {colors.red-700} 12%, transparent) {colors.red-1000} logo-plate-variant logo-compact-mark-height-px logo-shell-height-px logo-clear-space-ratio active-bar-color brand-mark-on-light brand-accent-on-light brand-mark-on-dark brand-accent-on-dark logo-primary-square.svg 14 20 0.25 {colors.blue-700} #202936 #3263C7 #8EB1F4 #A5C1F7 min-size-px compact-mark-height-px shell-height-px clear-space-ratio alt-text 24 14 20 0.25 Nexus security-note warning info-note fingerprint-block form-gap form-section-gap label-gap helper-text-size helper-text-color backgroundColor borderColor textColor borderWidth rounded padding iconColor {colors.brand-deep-blue-alpha-100} {colors.brand-deep-blue-alpha-200} {colors.gray-900} 1px {rounded.card} {spacing.space-4} {colors.brand-deep-blue} backgroundColor borderColor textColor borderWidth rounded padding iconColor color-mix(in srgb, {colors.amber-700} 8%, transparent) color-mix(in srgb, {colors.amber-700} 20%, transparent) {colors.gray-900} 1px {rounded.card} {spacing.space-4} {colors.amber-700} backgroundColor borderColor textColor borderWidth rounded padding iconColor {colors.gray-alpha-100} {colors.gray-alpha-300} {colors.gray-800} 1px {rounded.card} {spacing.space-4} {colors.gray-600} backgroundColor borderColor textColor borderWidth rounded padding fontFamily fontSize fontWeight lineHeight {colors.background-200} {colors.gray-alpha-400} {colors.gray-1000} 1px {rounded.control} {spacing.space-3} ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", monospace 13px 400 1.5 {spacing.space-6} {spacing.space-8} {spacing.space-1} 13px {colors.gray-700} open triaged in_review resolved wont_fix duplicate base backgroundColor textColor borderColor color-mix(in srgb, {colors.amber-700} 12%, transparent) {colors.amber-1000} color-mix(in srgb, {colors.amber-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.teal-700} 10%, transparent) {colors.teal-1000} color-mix(in srgb, {colors.teal-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.blue-700} 10%, transparent) {colors.blue-1000} color-mix(in srgb, {colors.blue-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.green-700} 10%, transparent) {colors.green-1000} color-mix(in srgb, {colors.green-700} 30%, transparent) backgroundColor textColor borderColor {colors.gray-alpha-100} {colors.gray-900} {colors.gray-alpha-300} backgroundColor textColor borderColor color-mix(in srgb, {colors.purple-700} 10%, transparent) {colors.purple-1000} color-mix(in srgb, {colors.purple-700} 30%, transparent) height paddingInline rounded typography 24px 8px {rounded.pill} {typography.label-12} panel-bg panel-border row-active action-button executor-select {colors.background-100} {colors.gray-alpha-400} {colors.background-300} secondary input-select-textarea.default backgroundColor textColor borderColor base color-mix(in srgb, {colors.red-700} 12%, transparent) {colors.red-1000} color-mix(in srgb, {colors.red-700} 30%, transparent) height minInlineSize paddingInline rounded typography 20px 20px 6px {rounded.pill} {typography.label-12} basis primary backgroundColor textColor borderColor color-mix(in srgb, {colors.amber-700} 12%, transparent) {colors.amber-1000} color-mix(in srgb, {colors.amber-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.blue-700} 10%, transparent) {colors.blue-1000} color-mix(in srgb, {colors.blue-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.teal-700} 10%, transparent) {colors.teal-1000} color-mix(in srgb, {colors.teal-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.purple-700} 10%, transparent) {colors.purple-1000} color-mix(in srgb, {colors.purple-700} 30%, transparent) backgroundColor textColor borderColor {colors.gray-alpha-100} {colors.gray-900} {colors.gray-alpha-300} height paddingInline rounded typography 24px 8px {rounded.pill} {typography.label-12} typography {typography.copy-14} typography textColor {typography.copy-13-mono} {colors.gray-800} panel-bg panel-border row-active {colors.background-100} {colors.gray-alpha-400} {colors.background-300} typography textColor {typography.label-14} {colors.gray-900} typography textColor {typography.copy-13} {colors.gray-1000} basis input-select-textarea.default chrome-bg chrome-border control-prev control-next volume-group-bg volume-group-border {colors.background-200} {colors.gray-alpha-400} button.secondary basis button.secondary basis {colors.background-300} {colors.gray-alpha-300} track fill label {colors.gray-alpha-200} {colors.blue-700} {colors.gray-700} chapter-completion-state world-kb-density-count open-findings-count base ChapterStatusBadge basis backgroundColor textColor borderColor color-mix(in srgb, {colors.teal-700} 10%, transparent) {colors.teal-1000} color-mix(in srgb, {colors.teal-700} 30%, transparent) backgroundColor textColor borderColor color-mix(in srgb, {colors.amber-700} 12%, transparent) {colors.amber-1000} color-mix(in srgb, {colors.amber-700} 30%, transparent) height paddingInline rounded typography 20px 6px {rounded.pill} {typography.label-12} shape size fill stroke label circle min-max 10px-44px by frequency color-mix(in srgb, {colors.purple-700} 18%, transparent) {colors.purple-700} {colors.gray-1000} line tick label {colors.gray-alpha-400} {colors.gray-400} {typography.label-12} @ {colors.gray-700} fill fill-2 fill-3 fill-4 fill-5 fill-6 step-stroke label color-mix(in srgb, {colors.blue-700} 16%, transparent) color-mix(in srgb, {colors.purple-700} 16%, transparent) color-mix(in srgb, {colors.teal-700} 16%, transparent) color-mix(in srgb, {colors.amber-700} 16%, transparent) color-mix(in srgb, {colors.pink-700} 16%, transparent) color-mix(in srgb, {colors.green-700} 16%, transparent) {colors.gray-alpha-200} {typography.label-12} @ {colors.gray-900} {typography.copy-16} @ {colors.gray-900} {colors.purple-700} canvas-surface canvas-grid canvas-grid-gap canvas-grid-dot-size canvas-node-fill canvas-node-fill-hover canvas-node-border canvas-node-border-selected canvas-edge canvas-edge-hover canvas-port canvas-minimap canvas-strategy-accent canvas-outline-accent canvas-worldkb-accent canvas-timeline-accent canvas-layer-brief-accent canvas-layer-narrative-accent canvas-layer-moment-accent canvas-write-dirty canvas-write-conflict canvas-write-success canvas-write-stale-bg node-width canvas-outline-volume-fill canvas-outline-chapter-card-status-pending canvas-outline-chapter-card-status-drafted canvas-outline-chapter-card-status-completed canvas-outline-timeline-event-pin canvas-outline-foreshadow-edge canvas-outline-timeline-marker canvas-outline-conflict-marker canvas-outline-scene-fill canvas-outline-scene-border canvas-outline-scene-status-drafted canvas-outline-scene-status-completed canvas-outline-beat-fill canvas-outline-beat-border canvas-worldkb-entity-card-fill-default canvas-worldkb-entity-card-fill-hover canvas-worldkb-entity-card-fill-selected canvas-worldkb-entity-card-stroke-default canvas-worldkb-entity-card-stroke-selected canvas-worldkb-promotion-pending canvas-worldkb-promotion-confirmed canvas-worldkb-promotion-rejected canvas-worldkb-promotion-merged canvas-worldkb-source-anchor-edge canvas-worldkb-source-anchor-node canvas-worldkb-computable-badge canvas-worldkb-conflict-marker canvas-worldkb-conflict-marker-fill canvas-worldkb-nonspatial-row-highlight canvas-worldkb-focus-ring canvas-worldkb-relationship-edge canvas-worldkb-relationship-edge-default canvas-worldkb-relationship-edge-symmetric canvas-worldkb-relationship-edge-custom canvas-worldkb-relationship-confidence-low canvas-worldkb-relationship-confidence-mid canvas-worldkb-relationship-confidence-high canvas-worldkb-relationship-grounded-badge canvas-worldkb-relationship-asserted-badge canvas-worldkb-relationship-inspector-fill #E4E7EC rgba(0,0,0,0.05) 20px 1.5px {colors.background-100} {colors.background-200} {colors.gray-alpha-500} {colors.blue-1000} {colors.gray-500} {colors.gray-800} {colors.gray-700} {colors.gray-alpha-600} {colors.purple-700} {colors.amber-900} {colors.teal-900} {colors.blue-1000} {colors.amber-900} {colors.blue-1100} {colors.gray-900} {colors.amber-700} {colors.red-700} {colors.green-700} color-mix(in srgb, {colors.amber-700} 8%, transparent) strategy-root strategy-primary strategy-secondary outline-scene-beat default 260px 140px 150px 160px 176px {colors.background-200} {colors.gray-500} {colors.blue-700} {colors.green-700} {colors.amber-700} {colors.purple-700} {colors.teal-700} {colors.red-700} {colors.background-100} {colors.gray-alpha-500} {colors.blue-700} {colors.green-700} {colors.background-200} {colors.gray-alpha-500} {colors.background-100} {colors.background-200} color-mix(in srgb, {colors.blue-700} 12%, {colors.background-100}) {colors.gray-alpha-500} {colors.blue-700} {colors.amber-700} {colors.green-700} {colors.red-700} {colors.purple-700} {colors.purple-700} color-mix(in srgb, {colors.purple-700} 10%, transparent) {colors.teal-700} {colors.red-700} color-mix(in srgb, {colors.red-700} 10%, transparent) {colors.background-200} {colors.blue-700} {colors.gray-500} {colors.gray-500} {colors.purple-700} {colors.pink-700} {colors.red-700} {colors.amber-700} {colors.green-700} color-mix(in srgb, {colors.blue-700} 12%, transparent) color-mix(in srgb, {colors.purple-700} 12%, transparent) {colors.background-100} backgroundColor textColor color-mix(in srgb, {colors.amber-700} 18%, transparent) {colors.amber-1000} backgroundColor textColor color-mix(in srgb, {colors.blue-700} 12%, transparent) {colors.blue-1000} backgroundColor textColor color-mix(in srgb, {colors.green-700} 16%, transparent) {colors.green-1000} backgroundColor textColor color-mix(in srgb, {colors.pink-700} 16%, transparent) {colors.pink-1000} width backgroundColor borderColor textColor elevation 320px {colors.background-100} {colors.gray-alpha-400} {colors.gray-1000} {elevation.elevation-3} backgroundColor borderColor textColor shadow {colors.background-100} {colors.gray-alpha-400} {colors.gray-1000} {elevation.elevation-3} chapter-title scene-separator epigraph fontFamily fontSize fontWeight lineHeight letterSpacing color {typography.font-display} 28px 600 1.3 -0.01em {colors.gray-1000} color fontSize textAlign paddingBlock {colors.gray-500} 16px center 12px fontStyle textAlign color paddingLeft italic right {colors.gray-700} 25% section-heading blockquote footnote-marker fontFamily fontSize fontWeight lineHeight letterSpacing color marginTop system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif 18px 500 1.4 -0.01em {colors.gray-1000} 28px borderLeft paddingLeft fontStyle color 3px solid {colors.gray-alpha-400} 16px italic {colors.gray-900} verticalAlign fontSize color super 0.75em {colors.teal-700} term-link definition-callout category-badge color textDecoration cursor {colors.teal-700} underline dotted pointer backgroundColor borderLeft padding labelColor labelFontWeight color-mix(in srgb, {colors.teal-700} 6%, transparent) 3px solid {colors.teal-700} 12px 16px {colors.teal-900} 600 backgroundColor textColor color-mix(in srgb, {colors.amber-700} 12%, transparent) {colors.amber-1000} character-name parenthetical scene-heading textAlign textTransform fontWeight fontSize letterSpacing marginTop color center uppercase 700 14px 0.08em 20px {colors.gray-1000} fontStyle color paddingLeft italic {colors.gray-700} 32px fontWeight textTransform fontSize letterSpacing color marginTop 700 uppercase 14px 0.05em {colors.gray-900} 24px avatar-size avatar-rounded avatar-bg avatar-bg-hover avatar-bg-active avatar-text avatar-text-active avatar-fallback-bg avatar-fallback-text add-button-bg add-button-border add-button-text add-button-hover-bg add-button-hover-border add-button-hover-text gap 32px {rounded.pill} {colors.gray-alpha-100} {colors.gray-alpha-200} {colors.blue-1000} {colors.gray-1000} {colors.brand-white} {colors.gray-alpha-200} {colors.gray-700} transparent {colors.gray-alpha-400} {colors.gray-700} {colors.gray-alpha-100} {colors.gray-alpha-500} {colors.gray-1000} {spacing.space-2} step-row-height step-circle-size step-circle-active-bg step-circle-active-text step-circle-complete-bg step-circle-complete-text step-circle-pending-bg step-circle-pending-text step-connector step-label-typography step-label-active-color step-label-pending-color wizard-max-width wizard-max-height wizard-padding 40px 32px {colors.blue-1000} {colors.brand-white} {colors.green-700} #ffffff {colors.gray-alpha-100} {colors.gray-700} {colors.gray-alpha-400} {typography.label-14} {colors.gray-1000} {colors.gray-700} 480px 720px {spacing.space-8} card-bg card-border card-shadow card-rounded step-panel-width step-panel-right-divider step-panel-padding-x step-panel-padding-y content-panel-padding-x content-panel-padding-y input-row-gap input-row-min-height input-row-bg input-row-border input-row-rounded input-row-padding-x input-row-padding-y input-row-label-color input-row-path-color input-row-icon-color cta-primary-max-width cta-container-gap step-transition-duration {colors.background-100} {colors.gray-alpha-400} {elevation.shadow-modal} {rounded.popover} 208px {colors.gray-alpha-200} {spacing.space-6} {spacing.space-8} {spacing.space-10} {spacing.space-8} {spacing.space-3} 48px {colors.background-200} {colors.gray-alpha-400} {rounded.control} {spacing.space-4} {spacing.space-3} {colors.gray-700} {colors.gray-1000} {colors.blue-1000} 400px {spacing.space-4} duration-state

Nexus Design System

Overview

Nexus is a precision creative tool: a neutral workbench with clear boundaries, comfortable reading regions, and deliberate cobalt interaction. Preserve the Nexus name and the five-node timeline mark. Warm-paper surfaces, global literary serif, cyan glow, and marketing motion are not the active language.

This light/default frontmatter and DESIGN.dark.md are the sole token authority. version: 0.5.0 is this repository's design-contract revision, continuing its existing schema: nested component recipes, semantic rounded keys, space-* steps, and scalar typography metrics are intentional. Do not flatten/rename them to match an external template. Every frontmatter key exists in both themes; only values differ. Level 3 describes specification completeness, not a claim of rendered QA.

The implementation contract and complete Studio inventory live in .mstar/specs/active/surfaces/design-studio.md. No app-specific palette, shadow table, font stack, or live token override is allowed.

Design Concept — Precision Creative Tool

• Silver-neutral light planes and graphite dark planes distinguish workspace, panel, and raised content. No grain, glass, decorative gradients, or full-width marketing heroes.
• Cobalt denotes action, focus, selection, and timeline activity. Semantic hues still distinguish success/running, warning/stale, error, queued, presets, and annotation categories. Color is never the only status cue.
• Interface and authoring titles are both sans. Content voice remains a larger title hierarchy, not a different typeface. Existing font-display, display-*, and CardTitle.voice consumers remain valid.
• Compact chrome uses existing 32px controls; form/default 40px and large 48px remain. Reading is not squeezed to match toolbars.
• Motion communicates changes, not personality. No hover translation, scale-on-press, animated gradients, or perpetual decorative motion.

Brand Colors

All brand values are in colors. Public names brand-deep-blue, brand-cyan, their extended steps, blue-*, and package brandColors.deepBlue/cyan/white remain unchanged. These are stable API identifiers, not promises of historical pigment: brand-cyan now carries the theme's cobalt signal. No new alias or compatibility layer is introduced.

brand-deep-blue remains a dark structural pigment in both themes, suitable for bright-fill labels and fixed dark brand surfaces, never dark-theme paragraph text. brand-cyan and blue-700 match per theme; their 800/900/1000 steps deepen in light and brighten in dark. blue-1100 is retained and now explicitly present in dark. Package numeric brandColors exports are generated light/default snapshots; theme-aware UI reads CSS, not JavaScript constants.

Background-driven contrast invariant

Foreground follows the actual fill, not the page name. Light primary uses blue-700 fill and brand-white text; dark primary uses blue-700 fill and brand-deep-blue text. Hover/active use blue-800/900. Light destructive uses white on the red scale; dark uses deep-blue on its brighter red scale. Never place white on a bright dark-theme accent.

Colors

• background-100: document/raised reading plane; background-200: quiet groups; background-300: stronger panel/selection plane.
• Gray 100–300: neutral fills; 400–500: borders and subdued graphical detail; 600–700: secondary/helper copy; 800–1000: increasing text emphasis. Do not set active small text in gray-500. Use gray-700 for Studio metadata instead of the old gray-500 convention.
• Gray-alpha: hover washes and decorative separators. Input boundaries use opaque gray-500; a low-alpha divider is not a control's only affordance.
• scrim: backdrop only; text lives on an opaque dialog/popover plane above it.
• red: failed/destructive/conflict; amber: warning/stale/review; green: success/healthy/running/completed; teal: queued/starting; blue: info/interaction/timeline; purple: preset/strategy/research; pink: annotation/relationship category. Preserve labels and icon/shape cues.
• All existing component status, finding, memory, reading, SOUL, and canvas families remain. Literal semantic tints in recipes are resolved from the same color scales; they are not independent palettes.

Contrast

WCAG sRGB calculations below are design-time arithmetic, not browser verification. AA minimum: 4.5:1 normal text, 3:1 large text and required graphical affordances. Alpha fills must be composited over the actual backing plane before evaluating contrast. Disabled controls and decorative grids are not active text targets; never apply their exemption to helper text.

Pair	Light	Dark
gray-1000 / background-100	16.58:1	16.15:1
gray-700 / background-300	5.89:1	6.78:1
gray-600 / background-300	4.62:1	4.98:1
blue-700 / background-300 (focus/interaction)	4.78:1	6.52:1
Primary label / blue-700	5.61:1	6.81:1
Primary label / blue-800	6.86:1	8.08:1
Primary label / blue-900	8.36:1	9.54:1
Destructive label / red-800	6.85:1	7.59:1

These pairs do not certify arbitrary class combinations or app pages. Studio must exercise actual rest/hover/active/focus and both-theme surfaces before acceptance. Focus adjacent to primary fills needs the opaque background gap below.

Typography

Exact families and metrics live in typography. UI/prose/display use the OS sans stack: system-ui, Apple/Segoe UI, then named Simplified Chinese system fallbacks (PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Noto Sans CJK SC). No network font request is needed. Do not claim identical glyph metrics across operating systems. Keep Latin and CJK in the same specimen and inspect punctuation, glyph fallback, and baseline alignment. Do not introduce a font dependency solely for visual novelty.

• Display 32/24/20: creative-entity titles and reading headings, sans; CardTitle content remains 20px vs interface 16px.
• Heading 32/24/20/16: page through panel hierarchy, weight 600. Preserve the token metrics, not overrides such as leading-tight that erase them.
• Label 14/12: 1.5 line height, no tracking; no all-caps treatment for Chinese.
• Copy 16/14/13/12: prose, explanatory text, dense helpers; copy-12 formalizes an existing Tailwind utility rather than adding a new control.
• Button 14/12: weight 600, 1.25 line height, one line when practical; do not clip glyphs to enforce density.
• Mono: OS monospace stack with CJK sans fallback. IDs/code remain legible offline; numerical columns use tabular figures.
• Reading measure 66ch, line-height 1.75, paragraph gap 1.25em in both themes. Main prose is 16px; responsive containers constrain the measure, never shrink the font to fit.

The old Source Serif 4 font-face declarations and Studio-only preloads are removed from the active pipeline. Existing web/desktop files and preloads are outside this change's edit scope; their unused packaged font files do not constitute an active typography authority. No replacement asset is required.

Spacing & Layout

Base 4px; retain the nine public space steps. Rhythm: 4–8px inside a control/label group, 12–16px between related controls, 24px between groups, 32–40px between gallery sections. Default card padding 24px, compact 16px, large composition 32px. Do not turn every sample into a nested card.

Use existing Tailwind v3 breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. The former 401/601/961 breakpoint prose is retired; no screen-key remapping is needed. Studio content cap 1400px; horizontal padding 24px desktop / 16px narrow. A fixed section rail is allowed at lg and above; below lg place it above the content. Top navigation wraps with all five labels visible below md. Header has a 56px minimum height, not a fixed height that clips wrapped content.

Existing control sizes stay tiny 24px / small 32px / default 40px / large 48px. Tiny is for compact pointer/keyboard chrome, not the only touch affordance. Studio chrome uses a 44px minimum hit area at narrow/coarse-pointer layouts without changing public size enums. Tables and canvas fixtures use labeled local overflow regions; never hide document overflow to conceal broken layout.

Elevation

Exact elevation-0–4 and existing shadow-card/popover/modal projections are in frontmatter. Rest card/node = elevation-1; interactive hover = elevation-2; popover/menu/tooltip = elevation-3; modal/dragging = elevation-4. Flat grouping = elevation-0. Shadows separate planes, not brand glow. Preserve existing public shadow names; new code may use elevation names directly.

Interactive card hover changes border/shadow only, without moving text. Canvas dragging elevation changes immediately so the node tracks the pointer. Selected nodes keep their accent stroke plus a 2px ring and a textual/shape selection cue, not a shadow alone.

Motion

Context	Token	Value
Filtering / hash jump / pair layout	duration-instant	0ms
Rest / hover / active	duration-state	120ms
Popover / tooltip	duration-popover	160ms
Dialog	duration-modal	200ms
Enter	duration-enter	160ms
Exit	duration-exit	140ms

Easings: standard cubic-bezier(0.2, 0, 0, 1); emphasized cubic-bezier(0.16, 1, 0.3, 1). Menus/dialogs/toasts fade; no translation is required. Reduced motion removes decorative transitions/transforms and makes state visibility immediate. The Toast exit timer remains 140ms for normal motion, 0ms for reduced motion, without changing toast duration/queue APIs. Loading progress may use an existing spinner when progress is real; reduced motion uses a static icon plus status text. No pretend progress values or new animation library.

Shapes

Control 4px; card/popover 8px; fullscreen 12px; pill 9999px. Pills are for compact status/avatar shapes, not the default container. Logo geometry and asset corner radii are frozen, independent of UI radius tokens.

Focus

Every keyboard target has a visible indicator. components.focus-ring encodes a 2px background gap and a 2px outer blue-700 band: 0 0 0 2px var(--color-background-100), 0 0 0 4px var(--color-blue-700). Do not suppress outline without providing this ring. Shared primitives provide their own focus-visible treatment so external consumers do not rely on Studio global CSS. Forced-colors mode preserves an outline. Active controls never use the disabled opacity wash.

Logo Usage

Five-node wide timeline axis: ring, ring, solid center, ring, ring. Preserve SVG paths, viewBoxes, packaged assets, PNG provenance, and desktop icon outputs. Plain marks and square plates are distinct contracts; retain all public logo variant names and exports.

Asset	Treatment
logo-primary.svg / logo-white-bg.svg	Frozen baked gradient pigments; wide geometry reference and installed-identity asset
logo-primary-square.svg / logo-white-bg-square.svg	Frozen square plates; keep all existing plate and desktop icon uses
logo-white.svg / logo-mono.svg	Frozen monochrome/gradient assets on the appropriate contrasting plate
logo-text.svg	Existing asset wordmark; SVG loaded as an image does not inherit a parent CSS currentColor; retain the existing tested image treatment
NexusMark	Inline currentColor timeline mark; live theme pigment from shared tokens
NexusLogoVariant	Four existing elegant/nature/parchment/scifi palette specimens retained as explicitly labeled historical geometry/pigment references, not active application themes

Frozen asset pigments may differ from live cobalt tokens. This is a deliberate asset boundary, not a second active theme: Brand separates installed asset references from live token-driven mark and CSS swatches. Do not claim frozen cyan pixels equal brandColors.cyan. Never recolor the assets with CSS filters to simulate a new logo, nor regenerate desktop icons. Existing wordmark image inversion used for contrasting placement may remain; it is not token recoloring.

General mark height 24px, compact titlebar mark 14px, square shell plate 20px, clear space ≥25% of rendered height. Wide marks use height + width auto; do not squeeze them into a square. Identity text uses the existing logo-text asset rather than newly typeset imitation. Ordinary page titles may say Nexus Design Studio. Images use alt="Nexus"; inline marks retain unique accessible title/description IDs.

Voice & Content

Helpful, precise, local-first. Title Case for existing English nav labels/page titles; sentence case for helper text, errors, loading, and toasts. Keep existing localized product vocabulary.

Buttons use a clear verb when the object is obvious: Save, Create, Delete. Dialog/page titles and accessible names retain the object (Delete Work); use Action + object where context would otherwise be ambiguous. Do not expand source-level product copy changes into apps/web. Errors state what happened and a recoverable next action. Empty states explain the first action; loading says what is happening with an ellipsis; success/toasts name the changed object without “successfully” or a trailing period. No decorative emoji, fake metrics, or marketing slogans.

Component Primitives

All current public signatures remain. Dialog, States (EmptyState/Loading/ErrorState), Table and other app-proven primitives MAY be promoted to public component families under the library discipline: pure presentational, caller-owned copy via props, a per-component test, and export via src/index.ts with no deep imports. Values are frontmatter recipes; behavior remains native or owned by the existing component.

• Button: four variants × four sizes; source-compatible asChild, refs, native attributes and callbacks. Primary uses the new blue-700/800/900 recipe. Disabled remains non-interactive. No layout transform on hover/press.
• Badge: neutral/running/queued/warning/error/preset × soft/solid. Preserve default soft and state meaning. Soft uses named semantic fills/borders; solid chooses text by fill luminance. Domain badges retain every finding/task/chapter status.
• Card: preserve interactive?: boolean as a visual opt-in and voice?: 'interface' | 'content'; no synthetic click behavior. Content voice now uses the larger sans display tier. Host still owns role, tabindex, and action semantics.
• Input / Select / Textarea / Label: native behavior, refs, invalid/aria-invalid and id/htmlFor remain. Label/control/helper/error composition stays fixture/app-owned; helper IDs use aria-describedby; errors are readable and identified beyond a red border. Native Select remains native.
• Tabs: preserve existing controlled/uncontrolled props and values. Baseline TabsTrigger has no disabled prop; do not add one to satisfy a generic matrix. Show supported rest/hover/selected/focus, and label disabled as unsupported. Repair keyboard arrow navigation and unique tab/panel associations internally without changing signatures.
• Toast: existing success/error/warning/info, real queue/dismissal/portals and caller-owned copy. Dialog/Toast portals stay in their rendering document, including comparison frames. Long text wraps, viewport inset is respected.
• TransportErrorBlock: existing six kinds and optional actions; compact text-link CTAs, not filled buttons in an alert. Preserve kind-to-action/callback/copy rules.
• Compute composites: existing field schemas, entity pickers, proposal sections, statuses, run tables, node chrome, inspector props remain. Show existing empty/populated/invalid/disabled/truncated/overflow/provenance states as supported, never simulate network state inside a pure primitive.
• Dialog / Sheet: promoted to public @42ch/nexus-ui families (V1.148 P1). Radix-based modal / end-rail drawer with caller-owned copy (title, description, closeLabel); scrim overlay, shadow-elevation-4, dialog/sheet sizing tokens. Light/dark parity is token-driven (--nexus-* projections); apps/web keeps locale-aware copy through thin wrappers. Dialog/Popover recipes also govern menus/tooltips.
• States: promoted to a public @42ch/nexus-ui family (V1.148 P1): Spinner, LoadingState, EmptyState, UnavailableState, ErrorState. Caller-owned copy with English fallbacks; loading voice (present participle + ellipsis), empty-state content voice (font-display display tier), and error pattern (what happened + next action) per §Voice & Content; error surface consumes the error-surface tokens. Light/dark parity via token projections plus explicit dark: hooks (Spinner blue-1000/blue-700, retry deep ink/cobalt).
• Table: promoted to public @42ch/nexus-ui primitives (V1.148 P1): native Table/TableHeader/TableBody/TableRow/TableHead/TableCell; background-200 header well, label-12 head, background-200 row hover with token-driven reduced-motion-safe motion; the overflow-x narrow-screen wrapper is owned by the primitive.
• EmptyCreateCard: promoted to a public @42ch/nexus-ui primitive (V1.148 P1): dashed-card create affordance matching the list-item card footprint (V1.125 P2 AC-V1125-5); caller-owned copy/icon/callback, disabled gate with native tooltip, icon brand-deep-blue on light / blue-700 on dark.
• ListStateContainer: promoted to a public @42ch/nexus-ui L2 pattern (V1.149 P1): the single four-branch list container (loading/error/empty/ready) composing the promoted States primitives — loading shows LoadingState, error shows ErrorState with an optional caller retry, ready renders caller children; empty shows EmptyState with caller-owned emptyTitle/emptyHint/emptyAction (English fallback title "Nothing here yet"), so empty vs "no selection context" is distinguished by caller copy. Voice, error-surface tokens, and content-voice headline are inherited from the States recipes; no query/router/i18n deps.
• ConfirmDialog: promoted to a public @42ch/nexus-ui L2 pattern (V1.149 P1): the destructive/irreversible-action confirmation over the promoted Dialog + Button primitives. Caller-owned copy (title, optional description, confirmLabel, cancelLabel) and caller-owned decision (onConfirm) / open state (open/onOpenChange). destructive maps the confirm action to the Button destructive recipe (red-800 fill, background-driven label contrast); otherwise the primary recipe. pending disables both actions and shows the busy spinner — a slow confirm cannot be double-fired or cancelled mid-flight.
• FormDialog / FormSection: promoted to public @42ch/nexus-ui L2 patterns (V1.149 P1). FormDialog is the form-in-modal over the promoted Dialog + Button: caller-owned field controls render inside a native form with the caller's onSubmit; native validation stays on the caller's field attributes; the dialog owns the title/description header, the right-aligned action bar (secondary cancel / primary submit), an optional inline error slot (role=alert, error-surface tokens, copy caller-owned), and the pending busy state (actions disabled + spinner; dismissal via X/Escape/overlay and implicit form submit are intercepted while pending, so a slow submit cannot be double-fired, cancelled, or lost to native navigation). FormSection is the shared field group: native fieldset/legend (heading-16 voice), optional description, the same inline error slot, and a space-4 stacked field layout.
• ListPageLayout: promoted to a public @42ch/nexus-ui L2 pattern (V1.150 P1): the shared list-page chrome behind findings/works/chapters/sessions/schedule/capabilities/strategies/modules/memory pages — Card > CardHeader title/description + actions slot > filters row > results region > load-more footer. Caller-owned copy (title, optional description) and caller-owned slots (filters toolbar, actions header affordance, children results region, footer pagination); the caller composes ListStateContainer/Table inside children (composition, not prop tunneling), so filter/list/pagination state all stay app-side. Voice and surface tokens are inherited from the promoted Card recipe; no query/router/i18n deps.
• SettingsSection / SettingRow: promoted to public @42ch/nexus-ui L2 patterns (V1.150 P2). SettingsSection is the settings section chrome parallel to FormSection minus the error slot: caller-owned title, optional description helper copy, caller-owned cards/forms in children; native fieldset/legend group semantics with the shared heading voice. SettingRow is the label/control/hint row inside a section card: label copy on the promoted Label, htmlFor wires Label → control a11y (the app useId pattern), caller-owned control in children, optional hint helper copy under the control (the caller owns the control's aria-describedby wiring).
• SettingsLayout: promoted to a public @42ch/nexus-ui L2 pattern (V1.150 P2): the settings section nav rail + outlet region promoted from the app frame. Caller-owned section registry (sections: id/label/icon, i18n resolution stays app-side), caller-owned selection (activeId / onNavigate), hiddenIds entrance hide-table (AR-15 precedent), navLabel nav aria-label copy, and optional page chrome (title/helper) replacing the frame's showPageChrome mode; section outlet content stays caller-owned children. The typed registry, URL aliasing, and section content renderers stay app-side; no query/router/i18n deps.
• ListDetailShell: promoted to a public @42ch/nexus-ui L2 pattern (V1.150 P3): the fixed-width responsive master/detail split behind findings-page and modules-page — stacks below lg, 360px detail column at lg (lg:grid-cols-[minmax(0,1fr)_360px]). Both regions are caller-owned slots (list, detail); the shell owns no open/close state — the caller renders the detail panel or a "no selection" EmptyState in detail and owns selection state, per the contract amendment vs the prototype rev 1 sketch (no detailOpen/onDetailClose, no drag-resize — no consumer implements either). No query/router/i18n deps.
• FieldRow / DetailCard: promoted to public @42ch/nexus-ui L2 patterns (V1.150 P3), the read-only detail parts family. FieldRow is the label/value pair behind the app-side work-timeline-inspector / timeline-moment-inspector / modules-page DetailField shapes: caller-owned label/value copy, and the row renders nothing when value is null/undefined/'' (shared null-hide behavior) so callers can map rows over sparse data without guarding each row. DetailCard is the detail panel chrome (findings-page detail Card shape) composing the promoted Card/CardHeader/CardTitle/CardDescription/CardContent primitives: caller-owned title and optional description copy, FieldRow groups or any caller content in the body. Voice and surface tokens are inherited from the Card recipe; no query/router/i18n deps. (HubCard stays app-side per the plan D5 keep decision: single consumer, no second reuse demand recorded.)

Form Field

Label htmlFor matches control id; the caller composes helper/error text and aria-describedby. Input/Select/Textarea own only native control styling and invalid state. Required/optional copy, validation, submit and routing are caller-owned. This contract is complete here, with no dependency on a local process document.

Canvas Surface

Keep all existing canvas/outline/worldkb/timeline/layer/SOUL/annotation tokens and width slots. Canvas is neutral, with a subtle decorative grid (20px pitch, 1.5px dots); node plane, border, selection ring, and semantic spine carry hierarchy. Strategy/outline/worldkb/timeline stay distinct semantic accents. Brief/narrative/moment accents remain separate from status. Keep geometry, node widths and product behavior unchanged. Selection uses accent plus ring/state text; conflict uses label/icon plus red. Local overflow is allowed for intrinsically wide graph specimens.

Product-surface Recipes

Existing editor, data-table, context-menu, desktop-window-chrome, app-menu, native-dialog, daemon indicator, connection/setup, finding, memory, reading, SOUL, footer-profile, and wizard frontmatter remain named contracts, not permission to edit those product surfaces. Their values flow through shared CSS where projected. Profile-specific reading title/blockquote/script rules and annotation semantics remain; the active title family is now sans. Setup remains a 480px portrait card capped at min(720px,85vh), horizontal steps, scrollable body, anchored actions. Retained step-panel tokens serve existing consumers but do not authorize restoring a retired vertical wizard.

Implementation Mapping

One pipeline: DESIGN pair → shared token projection → shared Tailwind utilities and existing brand projections → public primitives → Studio and web consumers. Full projection/compiler contract: Studio spec §3.5. Shared :root and .dark are the only theme value layers. Pair view uses isolated documents loading the same entrypoint and CSS, not nested .dark/light-reset subtrees.

All existing CSS names and Tailwind utility keys are retained, including historical structural names under --color-*; do not rename them while web edits are excluded. New missing color, typography and brand-step projections follow the documented mapping. Existing shadow names remain projections of the elevation scale, not duplicated shadow values. brandColors literal values are generated light snapshots; --nexus-brand-* and --color-* resolve per theme.

Arbitrary-Value Exceptions

Retain existing min-h-[180px] StrategyGroupNode floor and border-l-[3px] NodeChromeShell spine as structural exceptions. They are not color tokens. Studio-local comparison viewport dimensions and labeled overflow constraints are composition, not global token families. Do not invent new visual pigments or typography outside the DESIGN pair.