# Signal / Design system — design contract

## Audience and atmosphere
A compact control room for service owners. Inspect operational work, assign review and acknowledge records locally.

Compact teal operations surfaces, table-first hierarchy and square geometry.

## Principles
Use named semantic roles, clear typographic hierarchy, purposeful spacing and explicit recovery states. Keep light and dark themes equally usable; reserve saturated color for actions and feedback.

## Semantic roles

### Terminal
Compact teal operations surfaces, table-first hierarchy and square geometry.
- canvas: `#101e22`
- surface: `#182a30`
- ink: `#e5f5f4`
- muted: `#adc9ca`
- primary: `#8ce5d0`
- on-primary: `#123b35`
- border: `#739c9d`
- success: `#234c35`
- on-success: `#d2f4d1`
- danger: `#542a24`
- on-danger: `#ffd9cc`
- focus: `#8ce5d0`

### Day shift
Compact teal operations surfaces, table-first hierarchy and square geometry.
- canvas: `#edf5f4`
- surface: `#ffffff`
- ink: `#173633`
- muted: `#4a6965`
- primary: `#186657`
- on-primary: `#ffffff`
- border: `#73958f`
- success: `#e2efdf`
- on-success: `#24452e`
- danger: `#fbe0d9`
- on-danger: `#862f25`
- focus: `#186657`

## Typography
Family: system-sans; scale: 14.0px, 17.5px, 21.875px, 27.344px, 34.18px, 42.725px

## Layout and geometry
Spacing: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Radius: 0px, 2px, 4px
Density: compact

## Implementation
Import tokens.css and components.css. Use sr-screen and sr-card for the supplied components; set data-theme to a documented theme ID. Keep semantic roles stable. For Tailwind v4, import tailwind-v4.css and keep tokens.css next to it; compile in your own Tailwind project. JSON exports use this package's schema, not the DTCG specification.

## States and accessibility
Use the included default, secondary, disabled, focus, error and success states. Preserve visible labels, errors linked by aria-describedby, keyboard order and minimum 44px control height. The sample uses native controls and a responsive single-column fallback. Reduced-motion users get zero token-based transition duration.

Contrast token checks: 20/20
Opaque sRGB token pairs only. Normal-text threshold 4.5&\#58;1, input-boundary/focus threshold 3&\#58;1. Not a WCAG conformance audit; layout, states, keyboard, content, gradients and actual font rendering require browser and manual review.

## Change review
0 token changes. Theme removal, color semantics and type/spacing shifts require screen regression review. Use changes.json to trace exact before/after values.

## Application recipe
Profile: operations
Brand: Signal
Primary task: Every signal. A clear next action.
Records: 6
Layouts: planning uses a project board, editorial an asymmetric spread, operations a dense table with local bulk acknowledgment. All expose review and identity screens.