@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.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/rules/general.md +2 -1
- package/data/harnesses/code/skills/design/SKILL.md +65 -0
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
- package/data/harnesses/code/skills/design/references/create.md +126 -0
- package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
- package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
- package/data/harnesses/code/skills/design/references/improve.md +85 -0
- package/data/harnesses/code/skills/design/references/interaction.md +77 -0
- package/data/harnesses/code/skills/design/references/introspect.md +100 -0
- package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
- package/data/harnesses/code/skills/design/references/personality.md +504 -0
- package/data/harnesses/code/skills/design/references/structure.md +138 -0
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
- package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
- package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
- package/data/harnesses/etna/CLAUDE.md +1 -1
- package/data/harnesses/etna/harness.json +2 -2
- package/data/harnesses/etna/rules/general.md +2 -1
- package/data/harnesses/mobile/harness.json +2 -2
- package/data/harnesses/mobile/rules/general.md +2 -1
- 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
|
+
```
|