@nurix/etna 0.18.19 → 0.18.21

package/data/harnesses/code/skills/design/data/design-md/nurix.md

@@ -0,0 +1,134 @@
+---
+schema: design-md/v1
+product: Nurix
+provenance: default
+sourced: 2026-07-04
+---
+
+# Nurix — the default operator design
+
+The document a zero-input project wears. No project `design.md`, no confirmed library match, and
+this is the brand personality synthesis derives from. It is a *deliberate* operator reading of the
+Nurix brand — engineered, calm, dense-capable, never decorative — not a marketing transcription: the
+brand's marketing surfaces breathe; an operator surface earns its density and keeps one accent.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat: hierarchy is carried by hairline `border`, type weight, and
+color contrast — never by heavy shadow. A single accent, Nurix `primary` (vibrant blue), reserved for
+the one action that matters on a surface. The neutral ramp is a cool slate that leans faintly toward
+the brand's Deep Navy, so the whole UI reads engineered rather than flatly gray. The anchor surface is
+a white content canvas beside a faintly cool-tinted `sidebar`. Density is `standard` and steps denser
+per surface archetype — dense-capable, not cramped.
+
+## 2 Color Roles
+
+Light values first. One accent — `primary` is the only chromatic hue that carries meaning; status
+hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `oklch(1 0 0)` | page, cards, and overlays — the dominant surface |
+| `foreground` | deep cool slate `oklch(0.2077 …)` | all primary ink |
+| `muted` / `secondary` | faint cool tint `oklch(0.9683 …)` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | mid slate `oklch(0.5544 …)` | labels, captions, secondary text |
+| `border` / `input` | hairline `oklch(0.9288 …)` (brand `#E2E8F0`) | every separator, grid line, and field edge |
+| `primary` | vibrant blue `oklch(0.5211 …)` (brand `#245AE2`) | the one primary action; active nav; key interactive detail |
+| `accent` | blue-tint `oklch(0.9603 …)` | selected/hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | red `oklch(0.5771 …)` | destructive actions and error state only |
+| `success` / `warning` | green / amber | status signalling only, never chrome |
+
+Electric Lime and Deep Navy are brand graces, not operator tokens: they carry no role here (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the UI, body, and headings all ride it; heading weight and
+tracking, not a second family, carry the display voice. `font-mono` is Geist Mono for IDs, codes,
+timestamps, and log lines. Numeric columns render `tabular-nums` (Inter carries `tnum`) so figures
+align down a column (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, table dense | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight one step for emphasis; never change size to emphasize.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, no pill. Secondary:
+  `secondary` fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
+  full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`, shadow only when lifted (`shadow-intensity`);
+  inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it (floor P3).
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 ·
+32 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
+`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
+tables full-width. Density is governed globally by `density-tier` (rewriting the spacing scale through
+`density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. No level stacks a heavier shadow to signal rank; rank is border and position.
+
+Focus is a 2px `ring` outline (never a glow), visible on every interactive element (floor P6).
+Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is predominantly flat.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** promote a second chromatic accent. Electric Lime and Deep Navy stay brand-decorative — a
+  lime "success" reads yellow and fails contrast; status uses `success` / `warning` / `destructive`.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale`.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are for confirmations
+  only.
+- **Don't** signal elevation with heavy drop shadows.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action. If two things want the accent, one of them is not primary.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace (P3).
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
+- Every workflow completes from the keyboard; the `ring` focus outline is always visible (P6).
+- Stay flat — hairline and weight before shadow. Reach past a hairline only for a real overlay.
+- One accent. Lime and navy are not operator colors here.