Rules
DESIGN.md
Canonical product, visual, interaction, and anti-pattern contract. Read it before producing Atlas work.
Atlas Design System
Use the tree to inspect foundations, component families, applied kits, and quality gates without leaving the catalog.
Atlas is an organisation ledger for workforce management: every organisational fact is stored as a time-bounded event, not a mutable record. The system runs on one Flush accent, warm Plum neutrals, and the Newsreader display serif, and is governed in layers from tokens up to applied kits.
Canonical docs
Agent guide
SKILL.md
How to generate or extend Atlas components without treating an app screen as the whole system.
Overview
README.md
Package governance, layer map, preview manifest, and the reuse workflow.
Package layers
- tokens/Canonical colors, typography, spacing, radii, shadows, and font declarations.
- components/Reusable React primitives with typings and agent prompts.
- preview/ · guidelines/Specimen cards and usage rules that prove token and component behaviour.
- ui_kits/Applied desktop and mobile reference implementations.
- source_examples/ · context/Preserved source used for fidelity comparisons.
- tests/Contract tests that prevent package-shape and product-fidelity regressions.
Primary palette
Flush is the action color. Use 600 for the primary action, focus marker, active row, and allocation segments; keep it out of decorative page washes.
50background
100tint
200soft
300support
400hover
500active
600primary
700error
800strong
900deep
Success
Warning
Info
Error
Neutral palette
Plum is the warm charcoal neutral. The dark sidebar and overlays sit at plum-900, the app canvas is plum-100, and the default hairline is plum-300. Surfaces are flat plum tints, never neutral grey.
50cell
100canvas
200hover
300border
400line
500muted
600meta
700fg-3
800deep
900sidebar
950deepest
Category & on-dark tokens
Category tints give up to five distinguishable series hues for work-group categories, matrix split bars, and Gantt bars. The on-dark status variants are brighter, for dots and markers on plum-900 surfaces (sidebar, scrubber).
cat-1raspberry
cat-2blue
cat-3amber
cat-4green
cat-5teal
success-on-dark
warning-on-dark
role
Typography specimens
Newsreader carries display hierarchy and tabular numbers; Hanken Grotesk carries UI copy; IBM Plex Mono is reserved for references, dates, hashes, and money.
Display · Newsreader
--fs-display-lg
24.2 · 30 people
--fs-h1
Workforce overview
--fs-h2
People & allocation
--fs-h3
Capacity & cost
UI · Hanken Grotesk
--fs-h5
Reporting tree (10)
--fs-body-1
Atlas treats every organisational fact as a time-bounded event rather than a mutable record.
--fs-body-2
Staff Engineer · Milan · Reports to Elena Russo
--fs-body-3
.at-eyebrow
Monthly contractor spend
Mono · IBM Plex Mono
.at-mono
CC-AP-001 · NS-2042 · e-021 · 31 Jul 2026
numerals
€540 · 4 days/wk · €11.7k/month
Spacing scale
Atlas spacing is a compact operational scale: small steps for dense controls, larger bands for section rhythm, and explicit mobile breathing room where touch targets need it.
--space-2xs2xs · 4px
--space-xsxs · 8px
--space-smsm · 12px
--space-mdmd · 16px
--space-lglg · 24px
--space-xlxl · 32px
--space-2xl2xl · 40px
--space-3xl3xl · 48px
--space-4xl4xl · 64px
--space-5xl5xl · 80px
Rows--row-height · 36pxTable rows, sidebar items, and compact navigation.
Controls--control-height · 28pxButtons, pills, filters, and dense form controls.
Matrix Y--cell-pad-y · 16pxVertical padding inside allocation and timeline cells.
Matrix X--cell-pad-x · 18pxHorizontal padding for readable operational tables.
Radius scale
Use small radius for controls, medium radius for operational surfaces, pill radius only for compact metadata, and plum-tinted shadows only when elevation clarifies hierarchy.
--radius-xs · 4px
--radius-sm · 6px · controls
--radius-md · 10px · cards
--radius-lg · 14px · large
Contractor--radius-pill · 999px
Shadow scale
Shadows are plum-tinted and functional. Use them to separate overlays or raised panes from the workspace, not as a decorative glow layer.
Small elevation--shadow-smSubtle hover and compact raised controls.
Medium elevation--shadow-mdPopovers, small drawers, and floating panels.
Large elevation--shadow-lgModals and decisive foreground surfaces.
Lockups
Use the full lockup for package identity, the inverse lockup on plum surfaces, and the compact mark for tight chrome or identity anchors.
assets/atlas-logo.svgassets/atlas-logo-inverse.svgassets/atlas-mark.svg
assets/atlas-logo.svg
assets/atlas-logo-inverse.svg
assets/atlas-mark.svg
App icon
The launch icon is its own asset, not the 40px mark scaled up. It uses a plum product canvas, ledger geometry, and a Flush mark built from paths.
assets/atlas-app-icon.svg
Plum product canvas + Flush app mark
Use the 1024px app icon for installer, favicon, launch surfaces, and app stores. Use the 40px mark only for avatars and dense UI chrome.
Flush-600 · #E03A63
Runtime build assets
The build folder mirrors the source marks used by the packaged app. Keep parity between source SVGs and runtime exports.
build/icon.svg
build/icon-1024.png
build/logo.svg
build/logo-inverse.svg
Icon vocabulary
Atlas icons are 24px line glyphs with 1.5px strokes and currentColor inheritance. Use them as quiet operational signals, not decorative badges.
Status & feedback
alert · check · info · cancel
alert
check-circle
info-circle
cancel-circle
Navigation & hierarchy
arrow · chevron · search · filter-horizontal
arrow-right
chevron-down
search
filter-horizontal
Workforce objects
person · team · dashboard · calendar
user
user-multiple
dashboard
calendar
Finance & allocation
bank · coins · euro · card
bank
coins
euro
card
Complete sprite inventory
All 87 source symbols are rendered here from assets/icons.svg. The grouping is for scanning only; implementation should reference the exact symbol ID shown beside each glyph.
Status and feedback
9 icons
Arrows and hierarchy
11 icons
Finance and allocation
13 icons
Charts and planning
8 icons
People and communication
9 icons
Controls and navigation
11 icons
Security and access
7 icons
Files and actions
7 icons
Signals and objects
12 icons
Usage scale
Keep icons subordinate to labels. Size them by surface density, preserve currentColor, and avoid introducing one-off filled variants.
12-14px
Inline metadata and compact pills
Use for small status chips, table metadata, and dense toolbar affordances.
16px
Default controls
Pair with button labels, sidebar rows, filters, search fields, and form actions.
20-24px
Surface anchors only
Reserve larger icons for empty states, panel headers, and product navigation landmarks.
currentColor
Color comes from the component state
The sprite should inherit text color; status meaning belongs to the host component token.
Motion & interaction
Atlas moves the least amount that still reads as responsive. Transitions are short and token-timed; nothing bounces, scales, or spins forever. Motion confirms an action or eases a surface in; it never decorates. Hover over the rows and replay the panel below to see each rule live.
Transitions & hover
0.1 to 0.18s ease on colour, border-colour, background, and box-shadow. Nothing slower, nothing infinite. Hover darkens borders to plum-700, fills ghost buttons to plum-200, and washes rows to plum-100.
Hover — live
Move the pointer over each to see the only sanctioned hover treatments.
Table or tree row, washes to plum-100
Card, border darkens to plum-700
Entering surfaces
Panels, drawers, and the command palette enter with a soft fade and a 4px rise — opacity 0 to 1, translateY(4px) to 0, over roughly 0.16s. No scale, no slide-in from the edge.
Fade + rise
New event
Drawer body fades up 4px as it mounts.
Press & progress
Press is a colour shift only, never a transform — no shrink, no bounce. The single exception to the no-loop rule is a tiny indeterminate spinner at flush-600 for genuine waits.
Press & spinner
Hold the button down: the fill shifts to flush-700, the box never moves.
Saving to the ledger
Reduced motion
When the operating system requests reduced motion, Atlas drops the rise and fade and the segmented slide, keeping only the colour transition at 120ms or less. Nothing essential depends on movement.
prefers-reduced-motion: reduce
Honoured through a single media query: entering surfaces appear instantly, the segmented thumb snaps, hovers still recolour.
Voice & writing
Atlas states facts; it does not sell. Copy is calm, operational, and precise — mostly declarative noun phrases and short verbs. The same rules govern labels, buttons, hints, and event history so every surface reads in one voice.
Tone
Declarative and operational. Report the state of the organisation; never market it. Second person stays rare.
Operational, not promotional
AvoidAtlas voice
Supercharge your team's productivity
30 people · 24.2 FTE
Oops! Something went wrong.
Allocations must total 100% — currently 80%
Casing & spelling
Sentence case for body, buttons, and chips. Uppercase with 0.16em tracking for eyebrows and column headers. British English throughout.
Casing
Monthly contractor spend
British English
organisation · allocation · cancelled · prioritise · licence. Not organization, canceled, prioritize.
Numbers
Numbers are first-class and always tabular. Headline metrics use the display serif; everything else follows fixed formats.
Formats
Headline metric24.2
FTE24.2 (one decimal)
Percentage30% (whole number)
Money€47.7k (compact)
Date01 Jan 2026
Event language
Every change reads as a ledger entry, never a destructive edit. Past tense for history, future tense for planned events.
Ledger, not edit
AvoidAtlas voice
Edited allocations
Capacity re-allocated
Delete contract
Contract will end 31 Jul 2026
Anti-patterns
The regressions an agent must not reach for when generating Atlas artifacts. Each is paired with the canonical move, so the list reads as a correction, not just a ban. Markers are line SVGs, never emoji — the page holds itself to its own rules.
Colour & accent
Backgrounds are flat plum tints; Flush is the single accent.
AvoidAtlas
Aggressive purple/violet hero gradients
Flat plum tints
Beige, cream, or peach "AI canvas" washes
Warm plum neutrals
Flush for secondary or decorative fills
One accent, at most twice per surface
A left-border accent stripe on every card
The 2px Flush bar only on the active row
Type & iconography
Newsreader is the only display face; icons are line SVGs; Atlas does not market itself.
AvoidAtlas
Inter, Roboto, or Arial as a display face
Newsreader for every display headline
Emoji, unicode glyph icons, or stock photos
Line SVGs on a 24x24 grid, 1.5px stroke
Generic feature-grid icon rows
Plain facts; no self-marketing
Display headlines above 140px
Dense type, never poster-like
Depth & motion
Hover is colour-only, shadows are plum-tinted, nothing decorates.
AvoidAtlas
Bouncy or scale-up hover micro-interactions
Colour-only hover, no transform
Heavy neutral-black shadows
Plum-tinted shadows
Hand-drawn humans, blobs, gradient meshes
No decorative illustration
Scope & honesty
Real numbers only; product surfaces stay clean; applied kits are evidence, not the system.
AvoidAtlas
Filler stat-slop ("10x faster", "99.9% uptime")
Real Atlas numbers or honest placeholders
Theme knobs or demo controls in a product surface
Product surfaces stay free of meta controls
Treating the applied kits as the whole system
Tokens and components stay canonical
Accessibility
Accessibility is a property of the tokens, not a later pass. Every focusable element wears the same ring, text colours meet WCAG AA on their intended backgrounds, every action is reachable from the keyboard, and touch surfaces respect a 44px minimum.
Focus
Focus-visible is the flush ring — flush-600 at 18% alpha — on every focusable element, identical across buttons, inputs, and selection controls. Shown forced below; tab through any real control to see it.
One ring, everywhere
Contrast
Text pairs target at least WCAG AA (4.5:1). The brightest accent, flush-600, is a fill behind bold or large text; flush-700 carries small text and borders on light surfaces.
Token pairs
Body copy
Secondary copy
Inverse on accent
Error text
Keyboard
Every surface is fully operable from the keyboard. The command palette is the global entry point; Escape always backs out; Tab follows reading order.
Core shortcuts
⌘KOpen the command palette
TabMove through controls in reading order
EscClose the drawer, palette, or sheet
↵Commit the focused action or event
Touch targets
On touch, targets are at least 44px, body copy at least 14px, and meta at least 12px. Hover-only affordances always carry a visible touch equivalent.
44px minimum
44px hit area around a 24px control
Body ≥ 14px · meta ≥ 12px
Button
The Core command primitive. Primary, secondary, ghost, danger, and icon variants share height, focus ring, and loading spinner so every entry point reads the same.
Specimens
Rendered directly in the catalog as native markup — 28px tall, hairline border, flush focus ring. Primary uses --at-flush-600; default sits on white; ghost is transparent until hovered.
Variants
With leading icon
Focus-visible · ring
Same ring on every focusable element: --ring-accent.
Chip & Avatar
Compact metadata primitives used in tables, lists, and dense headers. Variants are driven by props instead of new components.
Specimens
Two-colour person encoding everywhere: employees read plum, contractors read flush. The same anchors appear in the chip, the avatar, and downstream in AllocationBar / matrix split bars.
Avatar — sizes & kind tinting
MF
MF
MF
Marco Ferraro
Director of Product · Employee
AP
AP
AP
Alina Petrov
Software Engineer II · Contractor
Form controls
The bare input primitives the rest of the system composes. Field wraps these with a label, hint, and validation; here they stand alone so any surface can reuse them. One baseline: 30px tall, hairline border, small radius, Flush focus ring, token colours only. Flush stays scarce, surfacing only in the focus ring and in the on state of selection controls.
Each control is a self-contained component in components/core/, drop-in like Button and Field and consuming the same tokens. Field composes these for labelled drawer forms. One card per file below; variants live inside their component's card.
Input
Text, numeric, search, and date — all one component. Default on white, Flush focus ring, Flush-700 border on error, tinted fill when disabled.
Text — states
Numeric —
variant="numeric"
Serif tabular figures, right-aligned, for headcount, allocation, and money.
Search — leading icon (
icon prop)
A leading icon shares the control box; the wrapper, not the input, owns the focus ring.
Date — native picker
First iteration uses the native date control on the same .at-control box, so the OS picker opens on click. A fully styled Atlas calendar is a planned follow-up.
Select
Native select with a token chevron; appearance reset so it matches the input box.
Textarea
Resizes vertically only; use for notes and rationale on an event.
Checkbox
Checked fills Flush; the tick is drawn in token white. The type="radio" variant gives the round single-choice control with a Flush dot.
Checkbox
Radio —
type="radio"
Segmented
A few mutually exclusive options inline; the active option rises on a neutral pill that slides, so Flush stays reserved.
Field primitives
Drawer form primitives promoted from the workforce app. Field, FieldRow, Hint, and ValidationMessage share label, hint, and validation rhythm so drawers feel consistent across event types.
Specimens
Promoted from the event drawer pattern: label above, 30px control, 11px hint, Flush focus/error states, and compact equal-column rows. See the Usage rules below.
Field — anatomy
Label sits above the control; the control is 30px on white with a hairline and the flush focus ring; the hint is one sentence below at 11px, tied to the field.
Future-dated changes are accepted
Field — states
Field is label and hint; the control carries the border and ring. Required marks controls that block commit; an error turns the control border flush-700 and reddens the hint. Disabled dims the whole field.
Uses the shared Flush focus ring.
Disabled fields reduce the whole field.
Allocations must total 100%
FieldRow — 2 columns
For related pairs or short triples; keep textareas and allocation controls as full-width Fields.
FieldRow — 3 columns
Hint — tones
Neutral helper outside a single field.
Effective date is in the past.
Allocations must total 100%.
Validation messages
Section-level conditions such as allocation totals; prefer copy that includes the current value. Hint is preventive; error/ValidationMessage report a failure.
components/core/ValidationMessage.jsx
! Allocations must total 100% — currently 80%
! Effective date is in the past
i Future-dated changes are accepted
✓ All allocations balanced
Toast
Transient post-commit result: success, error, or ambient state change. Top-right and host-managed; 4s for success/info, 8s for error, and never auto-dismiss an error without an onDismiss.
✓
Event committed
Capacity re-allocated for Marco Ferraro
!
Could not commit
Server unreachable. Retrying…
i
View date changed
Showing organisation as of 01 Jan 2024
Banner
Persistent state the user must keep while working: historical view, non-production data, or connection loss. Sits at the top of a section or page.
components/feedback/Banner.jsx
ConflictBanner
Only for a concurrency conflict needing a reload or discard decision. Replaces the whole drawer body and never times out; not for validation or network errors.
components/feedback/ConflictBanner.jsx
!
This drawer is out of date
AllocationBar — under / at / over 100%
Stacks per-work-group capacity %, colour-coded by category. Under 100% leaves a hatched plum tail; over 100% saturates as a warning.
components/data/AllocationBar.jsx
The bar in its three states, with the optional total badge (showTotal) on the right — the bar's own balanced / under / over readout. Names, roles, and category chips belong to the Allocation summary surface.
At 100%
Under 100% — hatched plum tail
Over 100% — saturates to flush-700
AllocationChip — legend pill
A colour swatch, the work-group label, and its share. The legend primitive composed by Allocation summary and diff.
components/data/AllocationChip.jsx
Wealth48%
Country Italy28%
Other14%
CodeValue — reference token
Monospace pill for literal system values: cost centres, NetSuite ids, account refs. Reads as a verbatim code, distinct from prose and from tabular numbers.
CC-TR-002
NS-2078
EVT-014
Allocation summary
One surface over the shared AllocationBar with parts you turn on or off: an optional identity, the balance badge, and the category chip row. It covers both the directory person row (identity + bar + balance) and the breakdown strip (bar + balance + chips), so the bar is never re-implemented.
Directory row — identity + bar + balance
Chips off. The same surface that fills a people/team list.
Marco Ferraro
Director of Product
Breakdown — bar + balance + chips
Identity off. The same surface that shows a single entity's dimension split.
Wealth48%
Country Italy28%
Other14%
Allocation diff
The impact-preview surface shown before committing a re-allocation event: before and after capacity as two bars, with per-dimension rows and a signed delta on each changed group.
components/surfaces/AllocationDiff.jsx · applied instance ui_kits/app/allocation.jsx
Before
Wealth50%
Country Italy30%
Other20%
After
Wealth40%-10
Country Italy40%+10
Other20%
Sidebar
A dark plum-900 component inside the otherwise light system. Nav rows read plum-400; the active row washes flush at 16% with a 2px flush marker on the left edge.
components/surfaces/Navigation.jsx · applied instance ui_kits/app/app-shell.jsx
A
Atlas
Organisation
Workforce
Overview 30
Matrix
Work groups
People
Event log
Date pill
The topbar "as of" control that opens the scrubber. A dot encodes whether the global view date is today, in the past, or in the future.
Today18 Jun 2026
As of01 Jan 2026
As of31 Jul 2026
Scrubber
A dark plum-900 overlay component. The timeline carries ledger events colour-coded by kind, a flush today cursor, a legend, and jump chips.
components/surfaces/Scrubber.jsx · applied instance ui_kits/app/overlays.jsx
Time machine
Rebuild the organisation at any past or future date.
21 May 2026
Today
Upcoming events · jump to
08 Junhire · Isabella
30 Junend · Eleonora
31 Julend · Hannes
31 Julend · Beatrice
Grid layout
A row × column grid shell: headers on both axes and count cells with an optional employee/contractor split bar and meta; empty cells stay muted. You give it columns and rows. Shown here with function × work-group sample data; the live function × work-group matrix in the app is an instance bound to the ledger.
components/surfaces/Matrix.jsx · applied instance ui_kits/app/overview.jsx
| Engineering14 people | Finance5 people | Design4 people | |
|---|---|---|---|
| Core Platform | 8 |
— |
2 |
| Country Italy | 4 |
3 |
— |
Dense table
The dense table shell: uppercase 11px column labels, hairline rows, tabular numerics, right-aligned numeric columns, and a PersonCell helper. You give it columns and rows. The applied people, events, reporting, and contractor-cost tables in the app are instances of this chrome.
components/surfaces/Table.jsx · applied instance ui_kits/app/detail-screens.jsx
| Person | Function | Team | FTE |
|---|---|---|---|
| MFMarco Ferraro Director of Product | Product | Core Platform | 1.0 |
| APAlina Petrov Software Engineer II | Engineering | Country Italy | 0.8 |
| ENEva Novak Finance partner | Finance | Revenue Ops | 1.0 |
Stat strip
Joins KPI tiles into one hairline-bordered rectangle: uppercase label, display-serif numeral, and optional meta line. A composed data layout — you give it the stats; the applied overview KPI strips in the app are instances.
components/surfaces/StatStrip.jsx · applied instance ui_kits/app/overview.jsx
Headcount
30
FTE
24.2
Contractors
6
Monthly spend
€47.7k
Assignment timeline
A Gantt layout shell: a month axis, labelled lanes, and bars positioned by date range with a flush today marker. You give it months, rows of bars (positions 0-100), and today. Shown with assignment / role / manager sample lanes; the applied person and team timelines in the app are instances bound to the ledger.
components/surfaces/Timeline.jsx · applied instance ui_kits/app/detail-screens.jsx
Assignment timeline · Last 12 months
21 May → 21 May
JunJulAugSepOctNovDecJanFebMarAprMay
Trading
Role
Manager
Event log
A vertical timeline of event cards — kind + icon, mono event id, date, title, key/value relationship badges, and an author with relative time. You give it events; planned (future) events get an amber node ring. The append-only ledger event log in the app is an instance; every change is a new record, never a destructive edit.
components/surfaces/EventLog.jsx · applied instance ui_kits/app/detail-screens.jsx
Event log
Append-only · every change creates a new record
End · Planned
022
31 Jul 2026
Contract will end
closescontract ends
CG
by Chiara Galli
· in 71 days
Hire
014
08 Jan 2026
Beatrice Sanna joined Trading
roleProduct Manager
typecontractor
CG
by Chiara Galli
· 133 days ago
Detail list
A titled key-value card for identity and detail side panels. You give it rows of label/value; the value is a free node — plain text, a Chip for status, or a CodeValue for reference codes. The applied identity panels in the app are instances.
components/surfaces/DetailList.jsx · CodeValue.jsx · applied instance ui_kits/app/detail-screens.jsx
Identity
TypeContractor
AgencyFreelance
Cost centre
CC-TR-002NetSuite
NS-2078Start08 Jan 2026
End31 Jul 2026
Command palette
Opens with ⌘K / Ctrl+K. A search field, grouped actions and jump targets with a flush active row, a context tag for the current view date, and keyboard hints in the footer.
components/surfaces/CommandPalette.jsx · applied instance ui_kits/app/overlays.jsx
As of 18 Jun 2026
Actions
New event
Adjust allocations
Jump to
Core Platform
Marco Ferraro
↑↓ navigate⏎ selectesc close
Drawer
The reusable drawer shell — eyebrow + serif title + close, a scrollable body, and a footer for actions. It is chrome only: the body and footer are children. The applied event drawers (allocation, hire, role-change, contract-end) are instances that fill it; the drawer appends a ledger record, never a destructive edit.
components/surfaces/Drawer.jsx · applied instance ui_kits/app/overlays.jsx
New event
Re-allocate capacity
Future-dated changes are accepted
✓ All allocations balanced
Topbar
Compact top bar: workspace mark, current workspace and date context, and icon-only global search and time-machine controls. White surface with a hairline bottom border.
A
Atlas
As of 18 Jun 2026
Bottom nav
Primary consultation navigation with three routes: Work groups, Functions, People. Flush wash only on the active route; touch targets stay at least 44px.
Summary
Current-state metrics and a drill-down list. Serif numerals in a hairline grid; each row carries a person-count chip and an allocation bar.
Headcount33
FTE28.4
Groups9
Planned3
Event feed
Replaces dense ledger tables on mobile: chronological cards with a kind dot, ledger copy, and a mono event reference.
Capacity re-allocated
Ledger entry visible at the selected global view date.
hash: b81244Contract will end
Marco Silva · effective 31 Jul 2026.
ev: 0c91d2Detail sheet
Full-height sheet for a person, team, or event: sticky title, current allocation, and the ledger row tied to the view date.
Detail
Core Platform
Current allocationWork group
Capacity re-allocated
Ledger entry visible at the selected global view date.
hash: b81244Decision queue
Pending manager decisions as stacked rows, not a data table. Mobile prepares a ledger event; the full edit stays on desktop.
Action sheet
One guided action flow: a single primary action, an explicit impact preview, and the ledger-event preview before confirmation.
Action
Review guided action
Impact preview
24.2 FTE
24.7 FTE
Ledger event to append
Capacity re-allocated · effective 01 Jul 2026.
draft: ev_pending_capacityImpact preview
Explains the result before confirmation: before/after totals, affected people, and the effective date.
Impact preview
24.2 FTE
24.7 FTE
Command search
Full-screen search and jump targets: a search field first, then grouped results for work groups, functions, people, and events. Keyboard hints stay hidden on touch.
Date scrubber
A dark bottom-sheet time machine opened from the topbar; the selected date applies across Work groups, Functions, and People.
Time machine
Time machine
18 Jun 2026
JanJunDec
Role changeCapacityContract end
Package tests
Run from the package root. They guard package shape, component-family coverage, mobile information architecture, and brand-asset parity.
- Design system contractRoot catalog and layered package shape.
node tests/design-system-contract.test.js - M2 component familiesForm, validation, and feedback primitive coverage.
node tests/m2-component-families.test.js - Mobile contractWork groups, functions, people, global search and time machine, and spacing constraints.
node tests/mobile-contract.test.js - Brand assetsApp icon source/runtime parity and exported PNG dimensions.
node tests/app-icon.test.js