---
name: atlas-design
description: Use this skill to generate well-branded interfaces, prototypes, slides, and product surfaces for Atlas — the organisation-ledger workforce tool. Contains the Atlas visual contract (Flush raspberry-coral accent over warm Plum neutrals, Newsreader display serif + Hanken Grotesk UI + IBM Plex Mono), the colour + type tokens, the brand assets, and the reusable React component + applied UI-kit library.
user-invocable: true
---

# Atlas Design System

The reusable Open Design skill for generating Atlas-branded artifacts — internal workforce / organisation-ledger surfaces in the visual language of the captured Atlas prototype. Read [`DESIGN.md`](DESIGN.md) first; it is the canonical rules document and overrides any drift below.

## What's inside

This package is the Atlas Design System distilled into a reusable Open Design package. It contains everything an agent needs to generate Atlas-branded artifacts without re-deriving tokens, voice, or component contracts.

- [`DESIGN.md`](DESIGN.md) — canonical rules document (visual theme, color, typography, spacing, layout, components, motion, voice, anti-patterns). Treat as the source of truth.
- [`README.md`](README.md) — package overview, product context, preview manifest, reuse workflow.
- [`colors_and_type.css`](colors_and_type.css) — single-file CSS entry (webfonts + every CSS custom property + opt-in helpers).
- [`styles.css`](styles.css) — modular CSS entry that `@import`s each `tokens/*.css` file.
- [`tokens/`](tokens/) — per-concern token files: `colors.css`, `typography.css`, `spacing.css`, `radii-shadows.css`, `fonts.css`.
- [`preview/`](preview/) — focused review cards (colors, typography, spacing, radii, shadows, components, icons sprite, brand assets).
- [`assets/`](assets/) — brand atoms: `atlas-app-icon.svg`, `atlas-logo.svg`, `atlas-logo-inverse.svg`, `atlas-mark.svg`, the full inline icon sprite (`icons.svg`), and the brand card.
- [`build/`](build/) — runtime asset surfaces (Claude-style `build/`): `icon.svg`, PNG app-icon exports, `logo.svg`, `logo-inverse.svg`, `icons-sprite.svg`.
- [`fonts/`](fonts/) — reserved for self-hosted font binaries (currently the package loads Newsreader / Hanken Grotesk / IBM Plex Mono via Google Fonts CDN).
- [`source_examples/`](source_examples/) — preserved high-signal source files: `Button.jsx`, `Chip.jsx`, `Avatar.jsx`, `AllocationBar.jsx`, `StatStrip.jsx`, `atlas-data.js`, `AtlasScreens.jsx`, `atlas-runtime.js`.
- [`components/`](components/) — reusable React components (core: Button, Chip, Avatar, Field, FieldRow, Hint, ValidationMessage · feedback: Toast, Banner, ConflictBanner · workforce: AllocationBar, StatStrip / StatTile) with peer `.d.ts` and `.prompt.md` companions.
- [`guidelines/`](guidelines/) — standalone HTML specimen cards (color-accent, color-neutral, color-semantic, type-display, type-ui, type-mono, spacing-scale, radii-shadows, forms, feedback).
- [`templates/atlas-page/`](templates/atlas-page/) — the Atlas app shell template (`AtlasPage.dc.html` + helpers).
- [`ui_kits/app/`](ui_kits/app/) — runnable desktop applied interface: the full Atlas Workforce prototype with Dimension Explorer, matrix, people, events, costs, command palette, event drawer, and scrubber.
- [`ui_kits/mobile/`](ui_kits/mobile/) — consultation-first mobile reference kit: Work groups, Functions, People, icon-triggered command search, global time-machine sheet, detail sheet, and guided action sheet.
- [`context/`](context/) — intake provenance (`source-context.md`) and the original local code snapshot under `context/local-code/atlas-design-system/files/`.

## Source context

Atlas has no GitHub or Figma source. The package was built from a single linked local code folder captured into `context/local-code/atlas-design-system/files/`. The Atlas prototype is the source of truth. See [`context/source-context.md`](context/source-context.md) for the snapshot inventory.

## When to use this skill

Invoke this skill when the user asks for any of the following on the Atlas product or in its visual language:

- A new Atlas screen, surface, drawer, or modal (HR dashboards, allocation views, reporting trees, matrix tables).
- Throwaway prototypes or mocks that should "feel like Atlas" — premium-fintech, dense, raspberry-coral + plum.
- Internal slide decks or briefing material that should match Atlas's visual identity.
- Reusable component work in the same family (a new chip variant, a new KPI tile, a new ledger-style timeline).
- Event creation drawer primitives, validation states, toasts, banners, or conflict handling for the M2 drawer-based milestone.
- Any artifact where the user explicitly references "Atlas", "the workforce tool", "the organisation ledger", or names a captured component (AllocationBar, StatStrip, etc.).

Do **not** use this skill for:

- Marketing / public landing pages (Atlas is internal — there is no consumer brand layer here).
- Mobile full-edit ports that shrink the desktop app into a phone viewport. Atlas mobile is consultation + guided actions only.
- Generic SaaS sketches that would dilute the Newsreader + Hanken pairing.

## How to use

1. **Read [`DESIGN.md`](DESIGN.md) first.** It is the canonical rules document and overrides any guidance that drifts elsewhere.
2. **Treat the package as layered.** The root [`index.html`](index.html) is the design-system catalog. `ui_kits/app/` and `ui_kits/mobile/` are applied examples, not the source of truth for tokens or components.
3. **Link the visual contract.** In any generated HTML artifact, add:
   ```html
   <link rel="stylesheet" href="<path>/colors_and_type.css">
   ```
   or, if pulling per-concern, `<path>/styles.css` (which imports each `tokens/*.css`).
4. **Inspect [`preview/`](preview/)** to see how each foundation looks in isolation — colors, typography, spacing, radii, shadows, components, brand assets.
5. **Reuse from [`components/`](components/)** for production-grade React, and from [`source_examples/`](source_examples/) for substantive original implementations and the full applied screens (`AtlasScreens.jsx`) plus the runtime that boots them (`atlas-runtime.js`).
6. **Clone or fork [`ui_kits/app/index.html`](ui_kits/app/index.html)** when you need the desktop product app — it renders the full routed workforce prototype and remains the home for full-edit desktop/tablet workflows.
7. **Clone or fork [`ui_kits/mobile/index.html`](ui_kits/mobile/index.html)** when you need a phone surface — it demonstrates the mobile operating model around the desktop product domains: Work groups, Functions, and People, plus icon-triggered search and a global time-machine sheet. Do not expose matrix editing, bulk edits, cost-table maintenance, or the full event drawer on mobile.
8. **Promote reusable discoveries back into the system.** If an applied kit needs a repeated pattern, update `DESIGN.md`, `components/` or `preview/`, and the relevant test. Do not leave reusable design-system behaviour only inside a product screen.
9. **Preserve brand atoms via real files** — load `assets/atlas-app-icon.svg`, `assets/atlas-mark.svg`, `assets/atlas-logo*.svg`, or `build/icon.svg` with `<img>` / `<object>` / CSS `url(...)`. Do not redraw the mark inline.
10. **Voice & numbers** — sentence case for body & controls, UPPERCASE 0.16em tracked for eyebrows and column headers, British English ("organisation", "allocation"), tabular figures everywhere, money in compact form (€47.7k), dates as `DD MMM YYYY`.

## Design system highlights

- **Single primary accent:** `--at-flush-600 #E03A63` (raspberry-coral). Used at most twice per visible surface.
- **Warm plum-charcoal neutrals:** `--at-plum-100 #F5F1F4` app canvas, `--at-plum-900 #241420` sidebar / overlays. Backgrounds are flat tints — no gradients, no imagery.
- **Editorial display + humanist UI + IBM mono:** Newsreader serif for page titles and big numerals, Hanken Grotesk for all UI text, IBM Plex Mono for event hashes / NetSuite refs.
- **Two-colour person encoding:** employees read plum, contractors read flush — consistently across Avatar, Chip, AllocationBar, and the matrix split bars.
- **Density anchors:** `--control-height: 28px`, `--row-height: 36px`, `--cell-pad-y: 16px`, `--cell-pad-x: 18px`. Atlas is a power-user tool — resist inflating these.
- **Plum-tinted shadows + hairline borders:** depth comes from `--border-subtle` (plum-300) + soft `rgba(30,16,25,*)` shadows, never heavy neutral-black elevation.
- **Signature visualization:** the `AllocationBar` — stacked horizontal capacity %, category-coloured segments, hatched plum tail under 100%, paired with a status chip.
- **Event-language voice:** "Capacity re-allocated", "Contract will end" — every change reads as a ledger entry, never a destructive edit.
- **Mobile operating model:** phone surfaces are consultation + guided actions. Every mobile action must show an impact preview and ledger-event outcome; full-edit mode remains desktop/tablet.

## Anti-patterns the agent must refuse

- Aggressive purple/violet gradient hero backgrounds. Atlas backgrounds are flat plum tints.
- Beige / cream / peach / pink / orange-brown "AI canvas" backgrounds. Neutrals are plum, not warm beige.
- Inter / Roboto / Arial as a **display** face. Display is always Newsreader.
- Emoji, unicode glyph icons, stock photography, hand-drawn humans, or decorative blobs. Icons are line SVGs at 24×24, 1.5px stroke.
- Bouncy / scale-up hover micro-interactions. Hover is colour-only on Atlas.
- Filler stat-slop ("10× faster", "99.9% uptime"). Use real Atlas numerals or honest placeholders.
- Flush as a decorative or secondary colour. Flush is the single accent.
- Exposing project metadata, viewport selectors, theme knobs, or "demo controls" inside an Atlas surface.
- Mobile screens that simply squeeze desktop tables, matrix editing, or the full event drawer into a phone viewport.
- Root package pages that render only one product app and hide the design-system layers.

If any of these creeps in, stop, re-read [`DESIGN.md`](DESIGN.md) section 9, and fix before continuing.