# Northstar / Design system — design contract

## Audience and atmosphere
A focused workspace for the studio's next release. Move from a clear plan to a reviewed handoff.

Cool indigo planning surfaces, comfortable controls and rounded project boards.

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

### Daylight
Cool indigo planning surfaces, comfortable controls and rounded project boards.
- canvas: `#f4f5fb`
- surface: `#ffffff`
- ink: `#192239`
- muted: `#525d75`
- primary: `#343ea3`
- on-primary: `#ffffff`
- border: `#7b829c`
- success: `#e2efdf`
- on-success: `#24452e`
- danger: `#fbe0d9`
- on-danger: `#862f25`
- focus: `#343ea3`

### Nightfall
Cool indigo planning surfaces, comfortable controls and rounded project boards.
- canvas: `#13182c`
- surface: `#1c2440`
- ink: `#f0f3ff`
- muted: `#b7c1dc`
- primary: `#b9c3ff`
- on-primary: `#172044`
- border: `#7f8cb8`
- success: `#234c35`
- on-success: `#d2f4d1`
- danger: `#542a24`
- on-danger: `#ffd9cc`
- focus: `#b9c3ff`

## Typography
Family: system-sans; scale: 16.0px, 20.0px, 25.0px, 31.25px, 39.062px, 48.828px

## Layout and geometry
Spacing: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Radius: 4px, 8px, 14px
Density: comfortable

## 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: planning
Brand: Northstar
Primary task: Ship the next good thing.
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.