@nurix/etna 0.18.18 → 0.18.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/rules/general.md +2 -1
  4. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  5. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  6. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  66. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  67. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  76. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  77. package/data/harnesses/code/skills/design/references/create.md +126 -0
  78. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  79. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  80. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  81. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  82. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  83. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  84. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  85. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  86. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  87. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  88. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  89. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  90. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  91. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  92. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  93. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  94. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  95. package/data/harnesses/etna/CLAUDE.md +1 -1
  96. package/data/harnesses/etna/harness.json +2 -2
  97. package/data/harnesses/etna/rules/general.md +2 -1
  98. package/data/harnesses/mobile/harness.json +2 -2
  99. package/data/harnesses/mobile/rules/general.md +2 -1
  100. package/package.json +1 -1
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: MiniMax
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # MiniMax — operator reading of the AI-infrastructure brand
9
+
10
+ The design a project wears when it names or resembles MiniMax and the user confirms the match. A
11
+ *deliberate* operator reading, not a marketing transcription: MiniMax's public surfaces are stark
12
+ monochrome broken open by vibrant gradient product cards and an oversized 80px hero display. An operator
13
+ surface keeps the monochrome bones, the near-black signature action, and the DM Sans voice — and leaves
14
+ the gradients, the pill-everything CTA, and the hero-scale type behind. Judgments past the corpus are
15
+ annotated `# derived:`.
16
+
17
+ ## 1 Visual Theme
18
+
19
+ Light by default; dark is opt-in. Stark and flat: hierarchy comes from hairline `border`, type weight,
20
+ and near-black ink on a white canvas — never heavy shadow. The single most important action wears the
21
+ brand's signature near-black fill (`primary`, `#0a0a0a`) — the black pill is MiniMax's most recognizable
22
+ element, though in operator work it takes the rectangular `radius`, not the marketing pill. One chromatic
23
+ accent — a deep blue (`ring`, `#1d4ed8`) — is reserved for focus, links, and form activation; chrome
24
+ otherwise stays monochrome. The vibrant product palette (coral, magenta, blue, purple, cyan) never
25
+ touches chrome — it reappears only in charts. The anchor surface is a white content canvas beside a
26
+ faintly tinted `sidebar`. Density is `standard`.
27
+
28
+ ## 2 Color Roles
29
+
30
+ Light values first. One chromatic accent — deep blue carries interactivity, near-black `primary` carries
31
+ the primary action, status hues speak only status, and the brand's saturated palette lives in `chart-*`
32
+ and nowhere else in the chrome.
33
+
34
+ | Role | Value | Allowed where |
35
+ | --- | --- | --- |
36
+ | `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, overlays — the dominant surface |
37
+ | `foreground` | near-black ink `#0a0a0a` | all primary ink, headlines, the primary CTA fill |
38
+ | `muted` / `secondary` | surface `#f7f8fa` | subtle fills, secondary buttons, hover rows |
39
+ | `muted-foreground` | steel `#5f5f5f` | labels, captions, table headers, inactive nav |
40
+ | `border` / `input` | hairline `#e5e7eb` | every separator, grid line, and field edge |
41
+ | `primary` / `primary-foreground` | near-black `#0a0a0a` on white `#ffffff` | the one primary action; active nav marker |
42
+ | `accent` | surface-soft `#f2f3f5` | selected/active rows and nav — neutral, never chromatic |
43
+ | `ring` | deep blue `#1d4ed8` | the focus outline; also links and form activation |
44
+ | `destructive` | soft red `#d45656` | destructive actions and error state only |
45
+ | `success` / `warning` | green `#1ba673` / amber `#d97706` | status signalling only, never chrome |
46
+
47
+ The vibrant brand colors — coral `#ff5530`, magenta `#ea5ec1`, blue `#1456f0`, purple `#a855f7`, cyan
48
+ `#3daeff` — are product-identity graces on marketing; here they seed only the `chart-*` ramp (§7).
49
+
50
+ ## 3 Typography
51
+
52
+ One sans, one mono. `font-sans` is DM Sans — UI, body, and headings all ride it; the brand mixes no
53
+ second sans, and emphasis comes from weight (400 / 500 / 600 / 700). `font-mono` is a system monospace
54
+ for IDs, codes, timestamps, and log lines (the brand ships no dedicated mono). Numeric columns render
55
+ `tabular-nums` so figures align down a column (floor P4).
56
+
57
+ | Step | Role | Size · line | Weight · tracking |
58
+ | --- | --- | --- | --- |
59
+ | h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
60
+ | h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
61
+ | h3 | card / group head | 16px / 1.5 | `font-weight-strong` |
62
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
63
+ | small | labels, meta, dense | 13px / 1.5 | `font-weight-normal` |
64
+ | caption | uppercase eyebrow | 12px / 1.5 | `font-weight-strong`, `+0.02em`, uppercase |
65
+
66
+ The display voice is aggressive negative tracking (-2px at 80px); at operator heading sizes that becomes
67
+ a mild `heading-tracking`. Bump weight one step for emphasis; never change size.
68
+
69
+ ## 4 Component Stylings
70
+
71
+ Every recurring operator component composes from the primitives — no literal values.
72
+ - **Button** — `primary`: filled near-black `primary` on `primary-foreground`, rectangular `radius`, no
73
+ pill. Secondary: transparent with a `foreground` `border`. Tertiary: `card` fill with hairline `border`.
74
+ - **Input** — `background` fill, 1px `border`, `radius`; focus switches the edge to a 2px `ring` (deep
75
+ blue), no glow.
76
+ - **Card** — `card` surface, 1px `border`, `radius`, shadow only when lifted; inset by `density-inset`.
77
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
78
+ numeric columns; selection tints `accent` (neutral, not blue).
79
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
80
+ beside the work, not over it (floor P3).
81
+ - **Badge** — the one place the pill survives: `radius-scale` full (9999), `muted`/status fill, uppercase
82
+ caption. Status badges take `success` / `warning` / `destructive`, never `primary`.
83
+
84
+ ## 5 Layout
85
+
86
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64` (MiniMax
87
+ uniquely carries the 20 step). Shell dimensions map one-to-one to the layout primitives: sidebar
88
+ `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
89
+ `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`, tables
90
+ full-width. Density is governed globally by `density-tier`, stepped per archetype by the surface catalog.
91
+
92
+ ## 6 Depth
93
+
94
+ Flat; hierarchy comes from the surface ladder and hairlines, not shadow:
95
+
96
+ - **0 — canvas** `background`, no border.
97
+ - **1 — panel / card** `card` on a 1px `border`; a whisper of `sm` shadow only when it must lift.
98
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
99
+ shadow. Rank is border and position, never a heavier shadow.
100
+
101
+ Focus is a 2px `ring` outline in deep blue (never a glow), on every interactive element (floor P6). Three
102
+ z-levels: content, sticky chrome, overlay.
103
+
104
+ ## 7 Do's & Don'ts
105
+
106
+ - **Do** reserve near-black `primary` for the single most important action; everything else is neutral
107
+ or status. Carry hierarchy with hairlines, weight, and whitespace — the brand is predominantly flat.
108
+ - **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
109
+ - **Do** send the vibrant brand palette to charts — the one operator place it belongs.
110
+ - **Don't** put a brand color on a button, badge, or large surface — off charts it breaks the monochrome discipline.
111
+ - **Don't** pill the operator CTA — the pill is a marketing signature; operator buttons take the
112
+ rectangular `radius` (badges keep the pill). Don't introduce a second display typeface.
113
+ - **Don't** tint selected rows or active nav with the accent blue — active states stay neutral `accent`;
114
+ blue is reserved for focus, links, and form activation. Don't signal elevation with heavy shadows.
115
+
116
+ ## 8 Responsive
117
+
118
+ The operator sweep is 375 / 768 / 1024 / 1440.
119
+
120
+ | Breakpoint | What changes |
121
+ | --- | --- |
122
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
123
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
124
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
125
+ | 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
126
+
127
+ ## 9 Agent Prompt Guide
128
+
129
+ Directives the emitting agent follows verbatim:
130
+
131
+ - **Carries:** the monochrome bones (near-black ink on white canvas, hairline borders, flat), near-black
132
+ `primary` as the one signature action, the deep-blue accent for focus/links, DM Sans as the single
133
+ family, and the vibrant palette — but only as `chart-*`.
134
+ - **Stays behind:** the gradient product cards, the pill-everything CTA, and the hero-scale 80px display
135
+ type with -2px tracking. None of it enters operator chrome.
136
+ - Lead every list surface with its table; lead every entity with its primary read, not its chrome. Detail
137
+ and edit go in the side panel; a modal is a confirmation, not a workspace (P3).
138
+ - Accent only the primary action; the one chromatic accent (blue) is for focus and links.
139
+ - Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4). Keyboard
140
+ completes every workflow; the `ring` focus outline is always visible (P6). Stay flat — hairline before shadow.
141
+
142
+ ```yaml design-primitives
143
+ radius: 8px # derived: brand rectangular controls (inputs/data-tables) run 6-8px; 8px is the operator base (the marketing 9999 pill stays behind)
144
+ shadow-intensity: 0.4 # derived: brand runs predominantly flat with subtle rgba(0,0,0,0.04-0.08) shadows; shadow only lifts true overlays
145
+ border-weight: 1px
146
+ density-gap: 1
147
+ density-inset: 1
148
+ font-sans: DM Sans, Inter, system-ui, sans-serif
149
+ font-mono: ui-monospace, SFMono-Regular, Menlo, monospace # derived: brand ships no dedicated mono, uses system monospace for code
150
+ font-weight-normal: 400
151
+ font-weight-strong: 600
152
+ heading-tracking: -0.01em # derived: brand display tracks -2px to -0.5px; scaled to operator heading sizes that becomes a mild negative to keep the tight voice
153
+ duration-unit: 50ms # derived: motion not extracted; corpus recommends 150-200ms ease
154
+ duration-fast: 100ms # derived: motion not extracted
155
+ duration-normal: 150ms # derived: corpus recommends 150-200ms ease
156
+ duration-slow: 200ms # derived: corpus recommends 150-200ms ease
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard ease; corpus specifies only "ease"
158
+ contrast-boost: 1
159
+ icon-stroke: 1.75 # derived: corpus does not state stroke; refined operator stroke under lucide's 2
160
+ icon-size-base: 16px
161
+ sidebar-width-expanded: 240px # derived: corpus docs rail ~220px; operator nav widened slightly for icon+label
162
+ sidebar-width-collapsed: 56px # derived: standard icon rail; corpus silent
163
+ topbar-height: 56px # brand platform/docs nav ~56px (denser than the 64px marketing bar)
164
+ side-panel-width: 420px # derived: no side-panel pattern in corpus (marketing/docs only); operator default
165
+ side-panel-width-rich: 640px # derived: content-heavy detail panel
166
+ modal-width-max: 560px # derived: corpus defines a modal elevation level but no width
167
+ form-max-width: 640px # derived: corpus docs prose ~720px; operator form column tightened
168
+ table-row-height: 44px # derived: corpus packs table rows to 16px padding around 14px body -> ~44px
169
+ verbosity: default
170
+ feedback: subtle
171
+ density-tier: standard
172
+ product-traits: [ai-platform, dashboard, dev-tools, admin]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "DM Sans, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#ffffff"
181
+ foreground: "#0a0a0a"
182
+ card: "#ffffff"
183
+ card-foreground: "#0a0a0a"
184
+ muted: "#f7f8fa"
185
+ muted-foreground: "#5f5f5f"
186
+ border: "#e5e7eb"
187
+ input: "#e5e7eb"
188
+ ring: "#1d4ed8"
189
+ primary: "#0a0a0a"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#f2f3f5"
192
+ accent-foreground: "#0a0a0a"
193
+ destructive: "#d45656"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#1ba673"
196
+ warning: "#d97706"
197
+ popover: "#ffffff"
198
+ popover-foreground: "#0a0a0a"
199
+ secondary: "#f7f8fa"
200
+ secondary-foreground: "#0a0a0a"
201
+ chart-1: "#1456f0"
202
+ chart-2: "#ff5530"
203
+ chart-3: "#a855f7"
204
+ chart-4: "#ea5ec1"
205
+ chart-5: "#3daeff"
206
+ sidebar: "#f7f8fa"
207
+ sidebar-foreground: "#0a0a0a"
208
+ sidebar-primary: "#0a0a0a"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#f2f3f5"
211
+ sidebar-accent-foreground: "#0a0a0a"
212
+ sidebar-border: "#e5e7eb"
213
+ sidebar-ring: "#1d4ed8"
214
+ spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 48, 64]
215
+ radius-scale: [0, 4, 6, 8, 12, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 200], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Mintlify
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Mintlify — the mint-accent documentation-platform operator design
9
+
10
+ Mintlify's site is dual-mode: atmospheric sky-gradient marketing heroes float above dense,
11
+ developer-grade documentation surfaces. This entry is the *operator* reading — an internal tool
12
+ (docs-ops console, project queue, usage dashboard, log stream) in Mintlify's language — and it keeps
13
+ the docs side. What carries: the white canvas with cool-gray neutrals and near-black ink, the single
14
+ Mintlify mint accent held scarce, the dark charcoal code inlay, the Inter + Geist Mono pairing, flat
15
+ hairline depth, and the 8px control radius. What stays behind: the sky-to-cream and teal-to-mint
16
+ gradient hero bands, the 72px hero display, the full-pill buttons, the bright testimonial-orange card,
17
+ and the 96/120px marketing section rhythm.
18
+
19
+ **Light holds cleanly.** The white canvas (`#ffffff`) *is* the brand's documentation surface — no
20
+ categorically-dark exception; the light-default floor stands as-is. Judgments away from the marketing
21
+ brand are annotated `# derived:` where the corpus is silent.
22
+
23
+ ## 1 Visual Theme
24
+
25
+ Light by default; dark is opt-in. The UI floats on a white `background` (`#ffffff`); cards sit on the
26
+ same white and read by their hairline `border`, not brightness. Emphatically flat: hierarchy is carried
27
+ by the light-gray hairline (`#e5e5e5`), type weight, and cool-neutral surface tints — never a drop
28
+ shadow. A single chromatic accent, Mintlify mint `primary` (`#00d4a4`), is held scarce: the one primary
29
+ action (ink text on mint, exactly as the brand's green button renders), the focus `ring`, and the
30
+ active-nav indicator. Ink is near-black `foreground` (`#0a0a0a`) — the color the marketing site spends
31
+ on its black-pill button, spent here as text. Density is `standard` — layout-dense, readable prose.
32
+
33
+ ## 2 Color Roles
34
+
35
+ Light values (the manifest carries hex — the corpus's native format). One accent — mint `primary` is
36
+ the only chromatic hue that carries UI meaning; tag-blue, warn-amber, and testimonial-orange are
37
+ chart/status graces (see §7), status hues speak only status.
38
+
39
+ | Role | Value | Allowed where |
40
+ | --- | --- | --- |
41
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
42
+ | `foreground` | near-black ink `#0a0a0a` | headlines and all primary ink |
43
+ | `muted` / `secondary` | cool surface `#f7f7f7` | hover rows, quiet band tints, secondary-button fill, inline-code wells |
44
+ | `muted-foreground` | steel gray `#5a5a5c` | labels, captions, table headers, secondary text |
45
+ | `border` / `input` | light hairline `#e5e5e5` | every separator, grid line, and field edge |
46
+ | `primary` | Mintlify mint `#00d4a4` | the one primary action; the focus `ring`; the active-nav indicator |
47
+ | `primary-foreground` | near-black ink `#0a0a0a` | text on the mint action — the brand's green-button pairing |
48
+ | `accent` | neutral lift `#ededed` | selected / hovered rows and nav — a neutral step; mint stays the indicator, never the fill |
49
+ | `ring` | `primary` mint | the focus outline — mint focuses inputs in the brand, unmistakable because keyboard-first |
50
+ | `destructive` | brand error red `#d45656` | destructive actions and error state only |
51
+ | `success` / `warning` | annotate green `#1ba673` / warn amber `#c37d0d` | status signalling only, never chrome |
52
+
53
+ Mint's power is its scarcity at element scale; the corpus warns against mint on body text or large
54
+ surfaces — it loses signal (see §7).
55
+
56
+ ## 3 Typography
57
+
58
+ One sans, one mono — no third face. `font-sans` is Inter — body, UI, labels, and headings all ride
59
+ it; weight (500/600) and color, never italics, carry emphasis. `font-mono` is Geist Mono for IDs,
60
+ codes, timestamps, log lines, type signatures, and every code surface; numeric columns render
61
+ `tabular-nums`. The Inter/Geist-Mono contrast is the brand's developer-respect signal. The marketing
62
+ display scale (72/56/48px) stays behind — an operator surface tops out at a 24px page title, and
63
+ long-form docs prose holds 16px/1.5 (the brand's "never compress reading copy" rule).
64
+
65
+ | Step | Role | Size · line | Weight · tracking |
66
+ | --- | --- | --- | --- |
67
+ | h1 | page title | 24px / 1.3 | `font-weight-strong` (600) · `heading-tracking` |
68
+ | h2 | section head | 18px / 1.35 | `font-weight-strong` (600) · `heading-tracking` |
69
+ | h3 | card / group head | 15px / 1.4 | `font-weight-strong` (600) · 0 |
70
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` (400) |
71
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` (400) |
72
+ | caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+0.05em`, uppercase |
73
+ | code | IDs, logs, amounts | mono 13px / 1.5 | `font-weight-normal` (400) |
74
+
75
+ Long-form docs prose holds 16px/1.5 — never denser; emphasise by weight or color, never italics (the brand ships none).
76
+
77
+ ## 4 Component Stylings
78
+
79
+ Every recurring operator component composes from the primitives — no literal values.
80
+
81
+ - **Button** — primary: filled mint `primary` on ink `primary-foreground`, `radius` (8px), never a pill (the marketing full-pill stays behind). Secondary: `secondary` gray fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
82
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the mint `ring` at full 2px, no glow — the brand focuses fields in mint.
83
+ - **Card** — white `card` on a 1px `border`; panels read by their hairline, not brightness (nothing sits lighter than white); cards step to 12px `radius`; shadow only when a true overlay must lift; inset by `density-inset`.
84
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection tints `accent` with a mint left-indicator.
85
+ - **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.
86
+ - **Badge** — pill radius (badges and pill-tabs only), `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
87
+ - **Code / log / terminal** — the dark charcoal inlay (`#1c1c1e`) with on-dark text and `font-mono`; the brand's own doc chrome, carried even in a light UI (see §6).
88
+
89
+ ## 5 Layout
90
+
91
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
92
+ 96/120px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
93
+ `sidebar-width-expanded` (240px, the corpus docs sidebar) / `sidebar-width-collapsed` (56px), topbar
94
+ `topbar-height` (56px, the docs top nav), side panel `side-panel-width` (420px) / `side-panel-width-rich`
95
+ (640px), modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Density is governed
96
+ globally by `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
97
+
98
+ ## 6 Depth
99
+
100
+ Flat and hairline-first. Depth comes from the hairline and cool-neutral surface tints, not shadow:
101
+
102
+ - **0 — canvas** `background` (`#ffffff`), no border.
103
+ - **1 — panel / card** white `card` on a 1px `border`; the hairline carries the lift — panels read by their edge, not by a brighter fill. Selected / hover rows step to `accent` (`#ededed`).
104
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow, enough to float an overlay above the canvas. Rank is border and position — never a heavier shadow.
105
+ - **inlay — code / log / terminal** dark charcoal `#1c1c1e` with on-dark text and `font-mono` — Mintlify's product chrome, carried even in a light UI (the code-block wrapper).
106
+
107
+ Focus is a 2px mint `ring` outline (never a glow), visible on every interactive element; three z-levels: content, sticky chrome, overlay.
108
+
109
+ ## 7 Do's & Don'ts
110
+
111
+ - **Do** anchor every surface on the white canvas with cool-gray neutrals and near-black ink.
112
+ - **Do** reserve mint `primary` for the single primary action, the focus `ring`, and the active-nav indicator — its scarcity at element scale is what reads as brand voltage.
113
+ - **Do** pair Inter (UI and prose) with Geist Mono (code) — never introduce a third typeface; the assignment *is* the brand voice.
114
+ - **Do** dress code, log, and terminal panels in the dark charcoal inlay (`#1c1c1e`, `font-mono`), and keep long-form docs prose at 16px/1.5.
115
+ - **Don't** set mint on body text or large fills — it loses signal; keep it to the primary action, ring, and indicator.
116
+ - **Don't** promote a second chromatic accent — tag-blue, warn-amber, error-red, and testimonial-orange are chart/status graces, not UI accents.
117
+ - **Don't** pill the controls — buttons and inputs are 8px `radius`; the marketing full-pill is left behind, pill radius is badges and tabs only.
118
+ - **Don't** signal elevation with heavy shadows, or reach for the atmospheric gradient heroes — hairlines and surface carry depth.
119
+
120
+ ## 8 Responsive
121
+
122
+ The operator sweep is 375 / 768 / 1024 / 1440.
123
+
124
+ | Breakpoint | What changes |
125
+ | --- | --- |
126
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
127
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
128
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
129
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
130
+
131
+ ## 9 Agent Prompt Guide
132
+
133
+ Directives the emitting agent follows verbatim:
134
+
135
+ - Reach for the white canvas with cool-gray neutrals and near-black ink; the quiet palette is Mintlify's docs surface, not its marketing hero.
136
+ - Spend mint once per surface: the primary action, the focus `ring`, the active-nav indicator. If two things want the mint, one of them is not primary. Color otherwise belongs to data and status — never mint on body text or a large fill.
137
+ - Pair Inter (UI and prose) with Geist Mono (code) — never a third face. Render every code, log, and terminal panel in the dark charcoal inlay (`#1c1c1e`), real product chrome, not a light mockup of it.
138
+ - Every numeric column is `tabular-nums`; every ID / code / timestamp / type-signature is `font-mono` (Geist Mono). Keep long-form docs prose at 16px/1.5; operator chrome at 14px.
139
+ - Depth is hairlines and surface tints, never shadow; reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work; keyboard-first, the mint `ring` focus outline always visible.
140
+ - Leave behind: the sky/teal gradient hero bands, the 72px hero display, the full-pill buttons, the testimonial-orange card, and the 96/120px section rhythm — marketing presentation, not operator chrome.
141
+
142
+ ```yaml design-primitives
143
+ radius: 8px # corpus: inputs/search-pill/code-blocks/secondary-cards at rounded.md (8px); cards step to 12px (lg); the full-pill button is marketing — pill is badges/tabs only
144
+ shadow-intensity: 0.4 # derived: docs surfaces run flat (level-0 hairline); the 0.08–0.12 alpha feature/mockup shadows are marketing — only true overlays lift
145
+ border-weight: 1px # corpus: 1px hairlines (#e5e5e5) carry dividers and card edges
146
+ density-gap: 1 # derived: docs are layout-dense but hold 16px/1.5 prose; an honest standard operator tier
147
+ density-inset: 1 # derived: matches density-gap for coherent component insets
148
+ font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif # corpus: Inter across every UI surface, with the documented system fallbacks
149
+ font-mono: Geist Mono, "SF Mono", Menlo, Consolas, monospace # corpus: Geist Mono on every code surface, documented fallbacks
150
+ font-weight-normal: 400 # corpus: body and prose at 400
151
+ font-weight-strong: 600 # corpus: every heading at 600 (button labels/active nav at 500)
152
+ heading-tracking: -0.01em # corpus: negative tracking is display-scale (-2px→-0.5px), relaxing to 0 by 28px; a faint -0.01em keeps operator titles crisp without the hero tightness
153
+ duration-unit: 50ms # derived: corpus notes motion is unextracted (known gap); operator-standard functional base
154
+ duration-fast: 100ms # derived: corpus silent on curve; functional tempo
155
+ duration-normal: 150ms # corpus: recommends 150–200ms ease for state transitions; standard functional tempo
156
+ duration-slow: 250ms # derived: the corpus 150–200ms recommendation extended for overlay/panel transitions
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent on curve; standard functional ease
158
+ contrast-boost: 1 # derived: the light-gray hairlines are intentionally quiet; no boost
159
+ icon-stroke: 1.75 # derived: corpus near-silent on icons (16px chevrons); refined operator stroke one step under lucide's 2
160
+ icon-size-base: 16px # corpus: doc/FAQ chevrons render at 16px
161
+ sidebar-width-expanded: 240px # corpus: documentation left sidebar nav ~240px
162
+ sidebar-width-collapsed: 56px # derived: standard operator icon rail
163
+ topbar-height: 56px # corpus: documentation top nav ~56px (the app-like surface; marketing nav is 64px)
164
+ side-panel-width: 420px # derived: corpus TOC (~200px) is thin; standard operator detail panel
165
+ side-panel-width-rich: 640px # derived: content-heavy detail, near the corpus prose column (~720px)
166
+ modal-width-max: 560px # derived: operator confirmation cap
167
+ form-max-width: 640px # derived: corpus doc prose caps ~720px; operator single-column form caps at 640
168
+ table-row-height: 40px # derived: corpus packs rows to 16px vertical padding on 14px cells; standard operator 40px
169
+ verbosity: default
170
+ feedback: subtle # derived: corpus is quiet (no-hover policy, unextracted motion); gentle present feedback, not austere silence
171
+ density-tier: standard # derived: docs are layout-dense but insist on readable 16px/1.5 prose; an honest standard operator tier
172
+ product-traits: [dev-tools, documentation, dashboard, saas]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif", mono: "Geist Mono, \"SF Mono\", Menlo, Consolas, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#ffffff"
181
+ foreground: "#0a0a0a"
182
+ card: "#ffffff"
183
+ card-foreground: "#0a0a0a"
184
+ muted: "#f7f7f7"
185
+ muted-foreground: "#5a5a5c" # corpus steel — labels, table headers, secondary text
186
+ border: "#e5e5e5"
187
+ input: "#e5e5e5"
188
+ ring: "#00d4a4"
189
+ primary: "#00d4a4"
190
+ primary-foreground: "#0a0a0a" # corpus: the mint button carries ink text, not white
191
+ accent: "#ededed" # derived: corpus hairline-soft as the neutral selection lift; mint stays the indicator, never the fill
192
+ accent-foreground: "#0a0a0a"
193
+ destructive: "#d45656" # corpus brand-error
194
+ destructive-foreground: "#ffffff"
195
+ success: "#1ba673" # corpus brand-annotate green — distinct from the teal-green primary so status reads green, not mint
196
+ warning: "#c37d0d" # corpus brand-warn amber
197
+ popover: "#ffffff"
198
+ popover-foreground: "#0a0a0a"
199
+ secondary: "#f7f7f7" # corpus surface — secondary-button and search-pill fill
200
+ secondary-foreground: "#0a0a0a"
201
+ chart-1: "#00d4a4" # mint — primary series
202
+ chart-2: "#3772cf" # corpus brand-tag blue
203
+ chart-3: "#c37d0d" # corpus brand-warn amber
204
+ chart-4: "#f55a3c" # corpus testimonial-orange — chart-only here, off general chrome
205
+ chart-5: "#7c5cff" # derived: violet for a fifth categorical hue; corpus has no fifth series
206
+ sidebar: "#fafafa" # derived: corpus surface-soft — a faint chrome step below the white canvas so the rail reads distinct
207
+ sidebar-foreground: "#0a0a0a" # derived: base nav ink; resting items dim to steel, active brighten to ink (corpus)
208
+ sidebar-primary: "#00d4a4" # corpus: mint active-nav indicator
209
+ sidebar-primary-foreground: "#0a0a0a"
210
+ sidebar-accent: "#ededed" # derived: neutral active/hover lift over the #fafafa rail (corpus active-nav bg is neutral gray)
211
+ sidebar-accent-foreground: "#0a0a0a"
212
+ sidebar-border: "#e5e5e5"
213
+ sidebar-ring: "#00d4a4"
214
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
215
+ radius-scale: [0, 4, 6, 8, 12, 16, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```