@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: Raycast
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Raycast — operator reading of a categorically-dark developer system
|
|
9
|
+
|
|
10
|
+
Raycast is the rare brand where the doctrine's light default yields: it is *categorically dark* — one
|
|
11
|
+
continuous near-black canvas with no light variant in the source. This entry carries that identity onto
|
|
12
|
+
operator surfaces: the chrome of Raycast's own command palette (near-black surfaces, hairline borders,
|
|
13
|
+
a single white action, ss03-Inter), with the marketing theatre left behind. Because the brand is
|
|
14
|
+
dark-only, the manifest's single color map holds the near-black surfaces directly — brand tokens win
|
|
15
|
+
over the light-default floor, and there is no light variant. Corpus-silent judgments are `# derived:`.
|
|
16
|
+
|
|
17
|
+
## 1 Visual Theme
|
|
18
|
+
|
|
19
|
+
Dark by default; there is no light variant. Flat and shadowless — hierarchy is a four-step surface
|
|
20
|
+
ladder (`background` → `card` → `muted` → overlay), never a drop shadow. Chrome is monochrome: white is
|
|
21
|
+
the single action color, and every primary button is a white rounded-rect on near-black. Color is
|
|
22
|
+
reserved — four saturated hues (blue, green, yellow, red) speak status and category only, never chrome.
|
|
23
|
+
The anchor surface is the near-black canvas carrying hairline-bordered cards; the single accent is
|
|
24
|
+
white. Density is `dense` — Raycast's command-palette chrome runs tight, and operator surfaces inherit it.
|
|
25
|
+
|
|
26
|
+
## 2 Color Roles
|
|
27
|
+
|
|
28
|
+
Dark is native — the manifest's one color map holds these near-black values directly. One monochrome
|
|
29
|
+
action — white — carries every primary; the saturated hues speak only status.
|
|
30
|
+
|
|
31
|
+
| Role | Value | Allowed where |
|
|
32
|
+
| --- | --- | --- |
|
|
33
|
+
| `background` | near-black `#07080a` (canvas) | the dominant page surface, edge to edge |
|
|
34
|
+
| `foreground` | off-white `#f4f4f6` (ink) | primary ink on the canvas |
|
|
35
|
+
| `card` / `popover` | `#0d0d0d` (surface) | cards and overlays — one notch above canvas |
|
|
36
|
+
| `muted` / `secondary` | `#101111` (elevated) | inputs, tertiary buttons, active chips |
|
|
37
|
+
| `muted-foreground` | `#9c9c9d` (mute) | labels, captions, metadata |
|
|
38
|
+
| `border` / `input` | hairline `#242728` | every card edge, grid line, and field border |
|
|
39
|
+
| `primary` | white `#ffffff` | the one primary action — a white pill on black |
|
|
40
|
+
| `primary-foreground` | black `#000000` | text on the white action |
|
|
41
|
+
| `accent` | `#121212` (surface-card) | selected/active rows and nav — a surface lift, not a hue |
|
|
42
|
+
| `ring` | white `#ffffff` | focus outline — the action color, unmistakable |
|
|
43
|
+
| `destructive` | `#ff6161` | destructive actions and error status |
|
|
44
|
+
| `success` / `warning` | `#59d499` / `#ffc533` | status signalling only, never chrome |
|
|
45
|
+
|
|
46
|
+
The four saturated category hues (blue `#57c1ff`, green `#59d499`, yellow `#ffc533`, red `#ff6161`)
|
|
47
|
+
are status/illustration only — never a chrome button, never body text. White carries every action.
|
|
48
|
+
|
|
49
|
+
## 3 Typography
|
|
50
|
+
|
|
51
|
+
One sans, one mono. `font-sans` is Inter with `font-feature-settings: "calt","kern","liga","ss03"`
|
|
52
|
+
enabled globally — the ss03 alternate `g` is the brand's signature and must stay on; without it the
|
|
53
|
+
type reads as plain Inter and loses the voice. `font-mono` is JetBrains Mono for IDs, codes,
|
|
54
|
+
timestamps, log lines (Raycast's marketing rarely shows mono; operator work needs it). Letter spacing
|
|
55
|
+
is *positive* — Raycast opens type rather than tightening it, so headings track `+0.01em`, the rare
|
|
56
|
+
operator system that does. Numeric columns render `tabular-nums`.
|
|
57
|
+
|
|
58
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
59
|
+
| --- | --- | --- | --- |
|
|
60
|
+
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
61
|
+
| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
62
|
+
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` |
|
|
63
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
64
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
65
|
+
| caption | uppercase eyebrow | 12px / 1.5 | `font-weight-strong`, `+0.03em`, uppercase |
|
|
66
|
+
|
|
67
|
+
Hero display (56–64px) stays behind. Emphasise by weight one step, never by size.
|
|
68
|
+
|
|
69
|
+
## 4 Component Stylings
|
|
70
|
+
|
|
71
|
+
- **Button** — `primary`: filled white `primary` on `primary-foreground`, `radius`, a rounded rect,
|
|
72
|
+
never a 9999 pill. Secondary: transparent, `foreground`. Tertiary: `secondary` (elevated) fill.
|
|
73
|
+
- **Input** — `secondary` (elevated) fill, 1px `border` (`border-weight`), `radius`; focus *brightens
|
|
74
|
+
the border* to the `ring`, never a glow.
|
|
75
|
+
- **Card** — `card` surface, 1px `border`, `radius`; no shadow (the surface ladder carries lift),
|
|
76
|
+
inset by `density-inset`.
|
|
77
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; row selection
|
|
78
|
+
tints `accent` (the surface-card lift); `tabular-nums` on numeric columns.
|
|
79
|
+
- **Side panel** — detail and edit open beside the work (`side-panel-width`, `side-panel-width-rich`),
|
|
80
|
+
not over it.
|
|
81
|
+
- **Badge** — hairline `border`, `muted`/status fill; status badges take `success` / `warning` /
|
|
82
|
+
`destructive`, never `primary`; info renders as `accent`-blue on a translucent tint.
|
|
83
|
+
- **Keycap** — a signature primitive: keyboard-shortcut hints render as small keycap glyphs (surface
|
|
84
|
+
fill, faint gradient, tight `radius`). Carry them onto operator shortcut affordances.
|
|
85
|
+
|
|
86
|
+
## 5 Layout
|
|
87
|
+
|
|
88
|
+
Base unit 8px with 2/4/12px tight steps; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 ·
|
|
89
|
+
64` (the 96px marketing section rhythm stays behind). Shell dimensions map one-to-one to the layout
|
|
90
|
+
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (56px,
|
|
91
|
+
the brand's own nav height), side panel `side-panel-width` / `side-panel-width-rich`, modal cap
|
|
92
|
+
`modal-width-max`, forms `form-max-width`, tables full-width. Density is `dense` globally
|
|
93
|
+
(`density-tier`), stepped per archetype by the surface catalog — never by absolute overrides.
|
|
94
|
+
|
|
95
|
+
## 6 Depth
|
|
96
|
+
|
|
97
|
+
Flat and shadowless — the defining trait. Hierarchy comes from the surface ladder, not shadow:
|
|
98
|
+
|
|
99
|
+
- **0 — canvas** `background` `#07080a`, no border.
|
|
100
|
+
- **1 — surface / card** `card` `#0d0d0d` on a 1px `border`, one notch above canvas.
|
|
101
|
+
- **2 — elevated** `muted` `#101111` for inputs, active chips, and nav selection.
|
|
102
|
+
- **3 — overlay** `popover` / side panel / modal — separated by the surface lift plus a hairline;
|
|
103
|
+
`shadow-intensity` is 0, because the brand has no drop shadows at all.
|
|
104
|
+
|
|
105
|
+
Focus is a `ring` outline in white (the action color), always visible; three z-levels: content, chrome, overlay.
|
|
106
|
+
|
|
107
|
+
## 7 Do's & Don'ts
|
|
108
|
+
|
|
109
|
+
- **Do** keep the canvas near-black and build every elevation from the surface ladder.
|
|
110
|
+
- **Do** keep chrome monochrome — white is the one action color; reserve it for the single primary.
|
|
111
|
+
- **Do** enable Inter's `ss03` (with `calt`/`kern`/`liga`) globally; without it the type loses its voice.
|
|
112
|
+
- **Do** carry shortcut hints as keycap glyphs; `tabular-nums` on numerics, `font-mono` on IDs/codes/timestamps.
|
|
113
|
+
- **Don't** add a drop shadow — depth is the surface ladder, never shadow.
|
|
114
|
+
- **Don't** promote a second chromatic action — the four saturated hues are status/category only, never chrome.
|
|
115
|
+
- **Don't** fully-round the CTA — the primary is a rounded rect at `radius`, not a 9999 pill.
|
|
116
|
+
- **Don't** reach for the red diagonal-stripe hero gradient or hero-scale display type — they stay behind.
|
|
117
|
+
- **Don't** pad cards 32px+; run tight at 16–24px.
|
|
118
|
+
|
|
119
|
+
## 8 Responsive
|
|
120
|
+
|
|
121
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
+
|
|
123
|
+
| Breakpoint | What changes |
|
|
124
|
+
| --- | --- |
|
|
125
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; the near-black canvas holds |
|
|
126
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
+
| 1024 | sidebar expands; two-pane list+detail holds side by side |
|
|
128
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
129
|
+
|
|
130
|
+
## 9 Agent Prompt Guide
|
|
131
|
+
|
|
132
|
+
- Treat the default theme as dark — the color map already resolves to near-black; synthesize no light variant.
|
|
133
|
+
- Build depth from the surface ladder (`background` → `card` → `muted` → overlay); never a drop shadow.
|
|
134
|
+
- Keep chrome monochrome: white is the action. If two elements want white, one of them is not primary.
|
|
135
|
+
- Enable Inter's `ss03` (with `calt`/`kern`/`liga`) globally; render shortcut hints as keycap glyphs.
|
|
136
|
+
- The four saturated hues are status/category only — `success`/`warning`/`destructive`/info — never chrome.
|
|
137
|
+
- **Carries over:** near-black canvas + surface ladder, hairline borders, the monochrome white action,
|
|
138
|
+
tight 6–10px radius, ss03-Inter, positive heading tracking, keycap shortcut glyphs.
|
|
139
|
+
- **Stays behind:** the red diagonal-stripe hero gradient, hero-scale display (56–64px), full-bleed
|
|
140
|
+
product-screenshot heroes, the 96px marketing section rhythm.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 8px # rationale: rounded.md (8px) is Raycast's standard button/input/card radius; scale still offers 6/10/16
|
|
144
|
+
shadow-intensity: 0 # derived: the system has no drop-shadow elevation at all — depth is the surface ladder
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 0.85 # derived: command-palette chrome is tight; the operator adaptation runs dense
|
|
147
|
+
density-inset: 0.85 # derived: same dense bias on component insets
|
|
148
|
+
font-sans: Inter, system-ui, sans-serif # rationale: Inter is the whole system's face; enable ss03 globally (see §3)
|
|
149
|
+
font-mono: JetBrains Mono, ui-monospace, monospace # derived: corpus names JetBrains/Geist Mono for code chips; operator IDs and logs need a mono — JetBrains chosen
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 500 # derived: Raycast headings and emphasis sit at 500 — the light weight is signature (display reaches 600, but hero display stays behind)
|
|
152
|
+
heading-tracking: 0.01em # derived: Raycast opens type with positive tracking (+0.2px on headings) rather than tightening — rare and signature
|
|
153
|
+
duration-unit: 50ms # derived: corpus documents no motion; standard operator base
|
|
154
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
155
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
156
|
+
duration-slow: 250ms # derived: corpus silent on motion
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
158
|
+
contrast-boost: 1.05 # derived: hairlines on near-black read faint; a small boost keeps the dense table grid legible
|
|
159
|
+
icon-stroke: 1.75 # derived: refined operator stroke matching Raycast's fine hairline aesthetic (one step under lucide's 2)
|
|
160
|
+
icon-size-base: 16px # derived: standard operator icon size; corpus silent
|
|
161
|
+
sidebar-width-expanded: 240px # derived: operator shell dim (corpus is marketing-nav only); a tight rail for Raycast's compact character
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: icon rail; echoes the corpus 56px nav height
|
|
163
|
+
topbar-height: 56px # rationale: primary-nav height in the corpus is 56px
|
|
164
|
+
side-panel-width: 420px # derived: standard operator side panel; corpus silent
|
|
165
|
+
side-panel-width-rich: 640px # derived: content-heavy side panel; corpus silent
|
|
166
|
+
modal-width-max: 560px # derived: modest confirmation modal; corpus silent
|
|
167
|
+
form-max-width: 640px # derived: standard operator form column; corpus silent
|
|
168
|
+
table-row-height: 36px # derived: dense, echoing the tight command-palette row (6px 10px padding)
|
|
169
|
+
verbosity: compact # derived: Raycast's UI is spare and keyboard-first — minimal chrome copy
|
|
170
|
+
feedback: subtle
|
|
171
|
+
density-tier: dense
|
|
172
|
+
product-traits: [dev-tools, command-palette, launcher, productivity]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light: # dark-native brand: the single required map carries Raycast's near-black surfaces directly — brand tokens win over the light-default floor; there is no separate light variant
|
|
180
|
+
background: "#07080a"
|
|
181
|
+
foreground: "#f4f4f6"
|
|
182
|
+
card: "#0d0d0d"
|
|
183
|
+
card-foreground: "#f4f4f6"
|
|
184
|
+
muted: "#101111"
|
|
185
|
+
muted-foreground: "#9c9c9d"
|
|
186
|
+
border: "#242728"
|
|
187
|
+
input: "#242728"
|
|
188
|
+
ring: "#ffffff"
|
|
189
|
+
primary: "#ffffff"
|
|
190
|
+
primary-foreground: "#000000"
|
|
191
|
+
accent: "#121212"
|
|
192
|
+
accent-foreground: "#ffffff"
|
|
193
|
+
destructive: "#ff6161"
|
|
194
|
+
destructive-foreground: "#07080a" # derived: near-black text is legible on the bright coral; white on #ff6161 fails contrast
|
|
195
|
+
success: "#59d499"
|
|
196
|
+
warning: "#ffc533"
|
|
197
|
+
popover: "#0d0d0d"
|
|
198
|
+
popover-foreground: "#f4f4f6"
|
|
199
|
+
secondary: "#101111"
|
|
200
|
+
secondary-foreground: "#f4f4f6"
|
|
201
|
+
chart-1: "#57c1ff"
|
|
202
|
+
chart-2: "#59d499"
|
|
203
|
+
chart-3: "#ffc533"
|
|
204
|
+
chart-4: "#ff6161"
|
|
205
|
+
chart-5: "#b48cff" # derived: fifth categorical hue — corpus gives four accents; a cool violet completes the set on near-black
|
|
206
|
+
sidebar: "#07080a"
|
|
207
|
+
sidebar-foreground: "#cdcdcd"
|
|
208
|
+
sidebar-primary: "#ffffff"
|
|
209
|
+
sidebar-primary-foreground: "#000000"
|
|
210
|
+
sidebar-accent: "#101111"
|
|
211
|
+
sidebar-accent-foreground: "#ffffff"
|
|
212
|
+
sidebar-border: "#242728"
|
|
213
|
+
sidebar-ring: "#ffffff"
|
|
214
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
|
|
215
|
+
radius-scale: [0, 4, 6, 8, 10, 16, 9999]
|
|
216
|
+
shadow-levels: [none, sm]
|
|
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
|
+
```
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Replicate
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Replicate — the warm-cream operator reading
|
|
9
|
+
|
|
10
|
+
Replicate's public surfaces read as an ML lab notebook crossed with a print zine: a warm cream canvas,
|
|
11
|
+
ink-dark type, dark monospace code wells, and one hot-orange accent used like a stamp. This entry is the
|
|
12
|
+
*operator* reading of that brand — the same warmth and single accent, carried onto a CRM, a queue, or a
|
|
13
|
+
dashboard. The hero-scale display grotesque, full-bleed orange bands, the gradient mesh, and contributor
|
|
14
|
+
mosaics stay behind as marketing furniture. What carries: the cream-not-white temperature, the ink
|
|
15
|
+
foreground, the scarce orange, the soft-rounded corners, and the strict font lanes. Both machine blocks
|
|
16
|
+
are fully valued; every judgment away from the marketing brand is annotated `# derived:` where it lands.
|
|
17
|
+
|
|
18
|
+
## 1 Visual Theme
|
|
19
|
+
|
|
20
|
+
Light by default; dark is opt-in. Flat: hierarchy is color-blocking and hairlines, not shadow — surfaces
|
|
21
|
+
step warm (bone sidebar → cream canvas → white cards) and elevation is a surface swap, never a heavy drop.
|
|
22
|
+
A single accent, Replicate `primary` (hot orange `#ea2804`), is reserved for the one action that matters on
|
|
23
|
+
a surface — treated as a stamp, one orange element per view. The field is warm: the canvas is cream `#f9f7f3`,
|
|
24
|
+
never pure white, and ink is `#202020`, a warm near-black. Corners are soft (`radius` 10px) — the brand has
|
|
25
|
+
no sharp edges — but the marketing full-pill treatment stays behind except on badges. Density is `standard`:
|
|
26
|
+
editorial warmth wants a little air, operator restraint keeps it from sprawling.
|
|
27
|
+
|
|
28
|
+
## 2 Color Roles
|
|
29
|
+
|
|
30
|
+
Light values first (the manifest carries the exact hex). One accent — `primary` is the only chromatic hue
|
|
31
|
+
that carries meaning; status and focus hues speak only their function.
|
|
32
|
+
|
|
33
|
+
| Role | Value | Allowed where |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| `background` | cream `#f9f7f3` | the page canvas — the dominant warm surface, never pure white |
|
|
36
|
+
| `card` / `popover` | white `#ffffff` | data cards, tables, inputs, overlays — the only place white appears |
|
|
37
|
+
| `foreground` | warm ink `#202020` | all primary text |
|
|
38
|
+
| `muted` / `secondary` | bone `#f3f0e8` | hover rows, subtle fills, secondary buttons, inset groups |
|
|
39
|
+
| `muted-foreground` | charcoal `#575757` | labels, captions, metadata, secondary text |
|
|
40
|
+
| `border` / `input` | hairline `#dfddda` | every separator, grid line, and field edge |
|
|
41
|
+
| `primary` | orange `#ea2804` | the one primary action; active nav; inline links |
|
|
42
|
+
| `accent` | pale peach `#fbe9e3` | selected/hovered rows and nav, on-accent surfaces only |
|
|
43
|
+
| `ring` | focus blue `#3b82f6` | the keyboard focus outline — deliberately cool, so focus never reads as the orange CTA |
|
|
44
|
+
| `destructive` | red `#b3261e` | destructive actions and error state only |
|
|
45
|
+
| `success` / `warning` | green `#2b9a66` / gold `#b7791f` | status signalling only, never chrome |
|
|
46
|
+
|
|
47
|
+
The hero glow, hero pink, and orange bands are marketing graces: they carry no role here (see §7).
|
|
48
|
+
|
|
49
|
+
## 3 Typography
|
|
50
|
+
|
|
51
|
+
Two lanes, strictly kept. `font-sans` is basier-square (Geist or Inter substitute) — UI, body, and headings
|
|
52
|
+
all ride it; heading weight and tight tracking, not a second family, carry emphasis. `font-mono` is JetBrains
|
|
53
|
+
Mono for IDs, model slugs, codes, timestamps, and log lines. The hero display grotesque `rb-freigeist-neue`
|
|
54
|
+
is hero-scale (72px+) and stays behind. Numeric columns render `tabular-nums` so figures align down a column.
|
|
55
|
+
|
|
56
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
57
|
+
| --- | --- | --- | --- |
|
|
58
|
+
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
+
| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
+
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
61
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
62
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
63
|
+
| caption | eyebrow / footnote | 12px / 1.33 | `font-weight-strong`, uppercase |
|
|
64
|
+
|
|
65
|
+
Body weight stays 400 — emphasis is weight-to-strong or a switch to `font-mono`, never a bump to 500.
|
|
66
|
+
|
|
67
|
+
## 4 Component Stylings
|
|
68
|
+
|
|
69
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
70
|
+
|
|
71
|
+
- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, soft-cornered, not pill.
|
|
72
|
+
Secondary: `secondary` fill, `border`, `foreground`. Ghost: transparent, `accent` on hover. Pressed
|
|
73
|
+
darkens `primary` one step.
|
|
74
|
+
- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at 2px, no glow.
|
|
75
|
+
- **Card** — white `card` on the cream canvas, 1px `border`, `radius`; shadow only when a true overlay lifts
|
|
76
|
+
(`shadow-intensity`); inset by `density-inset`.
|
|
77
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
78
|
+
numeric columns; row selection tints `accent`.
|
|
79
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for
|
|
80
|
+
content-heavy), beside the work, not over it.
|
|
81
|
+
- **Badge** — pill (`radius-scale` 9999) is allowed here as a brand grace; hairline `border` or status fill,
|
|
82
|
+
uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Code and log
|
|
83
|
+
panels invert to an ink-dark fill with `font-mono` — the one place dark blocking appears in operator chrome.
|
|
84
|
+
|
|
85
|
+
## 5 Layout
|
|
86
|
+
|
|
87
|
+
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96`. Shell dimensions
|
|
88
|
+
map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar
|
|
89
|
+
`topbar-height` (the brand's 60px nav rhythm), side panel `side-panel-width` / `side-panel-width-rich`, modal
|
|
90
|
+
cap `modal-width-max`, forms `form-max-width`, tables full-width. Rows ride `table-row-height` (44px — the
|
|
91
|
+
brand's touch-comfortable button height, an airier operator rhythm). Density is governed globally by
|
|
92
|
+
`density-tier` and stepped per archetype by the surface catalog.
|
|
93
|
+
|
|
94
|
+
## 6 Depth
|
|
95
|
+
|
|
96
|
+
Flat, color-blocked. Hierarchy comes from the warm surface ladder and hairlines, not shadow:
|
|
97
|
+
|
|
98
|
+
- **0 — canvas** `background` cream, no border.
|
|
99
|
+
- **1 — panel / card** `card` white on a 1px `border`; a surface swap to `muted` bone marks an inset group.
|
|
100
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow.
|
|
101
|
+
|
|
102
|
+
No level stacks a heavier shadow to signal rank; rank is surface color, border, and position. Focus is a 2px
|
|
103
|
+
`ring` outline (never a glow), deliberately cool blue so it never collides with the orange CTA. Three
|
|
104
|
+
z-levels: content, sticky chrome, overlay.
|
|
105
|
+
|
|
106
|
+
## 7 Do's & Don'ts
|
|
107
|
+
|
|
108
|
+
- **Do** keep the cream `background` as the page canvas; white is for cards, inputs, and overlays only.
|
|
109
|
+
- **Do** reserve `primary` orange for the single most important action, active nav, and inline links —
|
|
110
|
+
three roles, treated as a stamp: at most one orange element per view.
|
|
111
|
+
- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, slugs, and timestamps.
|
|
112
|
+
- **Don't** replace cream with pure white at the page level — the brand temperature lives in the canvas.
|
|
113
|
+
- **Don't** promote a second chromatic accent. The hot orange is the only accent; success green, warning
|
|
114
|
+
gold, and focus blue are functional, not decorative.
|
|
115
|
+
- **Don't** pill the primary CTA — the full-pill treatment is a marketing signature; operator CTAs keep the
|
|
116
|
+
soft `radius`, and pills stay on badges. Don't reach for the hero display grotesque or heavy drop shadows.
|
|
117
|
+
|
|
118
|
+
## 8 Responsive
|
|
119
|
+
|
|
120
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
121
|
+
|
|
122
|
+
| Breakpoint | What changes |
|
|
123
|
+
| --- | --- |
|
|
124
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
125
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
126
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
127
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
128
|
+
|
|
129
|
+
## 9 Agent Prompt Guide
|
|
130
|
+
|
|
131
|
+
Directives the emitting agent follows verbatim:
|
|
132
|
+
|
|
133
|
+
- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
|
|
134
|
+
- Set the page on the cream `background`; float white `card` surfaces on it — never pure white at page level.
|
|
135
|
+
Accent only the primary action with orange `primary`; if two things want the orange, one is not primary.
|
|
136
|
+
- Every numeric column is `tabular-nums`; every ID, slug, code, and timestamp is `font-mono`.
|
|
137
|
+
- Every workflow completes from the keyboard; the cool-blue `ring` focus outline is always visible. Stay
|
|
138
|
+
flat — warm surface swaps and hairlines before shadow; reach past a hairline only for a real overlay.
|
|
139
|
+
- Leave the marketing furniture behind: no hero grotesque, no full-bleed orange bands, no gradient mesh, no
|
|
140
|
+
contributor mosaics, no pill CTAs. Palette, temperature, soft corners, and font lanes carry; the rest does not.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 10px # derived: brand's soft "no sharp corners" character — the 10px card radius becomes the operator base; the full-pill 9999 marketing treatment stays behind (kept in scale for badges)
|
|
144
|
+
shadow-intensity: 0.3 # derived: elevation is color-blocking, not shadow; a soft drop only lifts a floating thumbnail — keep shadow faint
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1
|
|
147
|
+
density-inset: 1
|
|
148
|
+
font-sans: basier-square, Geist, Inter, system-ui, sans-serif # rationale: brand UI/body family with the corpus-named substitutes; the hero display grotesque rb-freigeist-neue is hero-scale and stays behind
|
|
149
|
+
font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace # brand code family
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 600
|
|
152
|
+
heading-tracking: -0.015em # derived: brand tightens type with negative tracking scaling with size; basier-square headings track -0.35px at 24px ≈ -0.015em
|
|
153
|
+
duration-unit: 50ms # derived: corpus documents no motion; operator functional base
|
|
154
|
+
duration-fast: 100ms # derived: functional operator motion
|
|
155
|
+
duration-normal: 150ms # derived
|
|
156
|
+
duration-slow: 250ms # derived
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard functional easing
|
|
158
|
+
contrast-boost: 1 # derived: ink #202020 on cream is high-contrast; the solid hairline already carries the grid
|
|
159
|
+
icon-stroke: 1.75 # derived: corpus uses illustration, not an icon set; 1.75 suits the friendly-precision character
|
|
160
|
+
icon-size-base: 16px # derived
|
|
161
|
+
sidebar-width-expanded: 248px # derived: operator shell (corpus documents the marketing nav only)
|
|
162
|
+
sidebar-width-collapsed: 56px # derived
|
|
163
|
+
topbar-height: 60px # brand nav-bar height, carried
|
|
164
|
+
side-panel-width: 420px # derived
|
|
165
|
+
side-panel-width-rich: 640px # derived
|
|
166
|
+
modal-width-max: 560px # derived
|
|
167
|
+
form-max-width: 640px # derived
|
|
168
|
+
table-row-height: 44px # brand's 44px button/touch rhythm carried to rows for an airier operator read
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: subtle
|
|
171
|
+
density-tier: standard # derived: editorial warmth wants air, operator restraint keeps it from spacious
|
|
172
|
+
product-traits: [dev-tools, ml-platform, dashboard, api-console]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "basier-square, Geist, Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, SFMono-Regular, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#f9f7f3"
|
|
181
|
+
foreground: "#202020"
|
|
182
|
+
card: "#ffffff"
|
|
183
|
+
card-foreground: "#202020"
|
|
184
|
+
muted: "#f3f0e8"
|
|
185
|
+
muted-foreground: "#575757"
|
|
186
|
+
border: "#dfddda" # derived: solid equivalent of brand hairline rgba(32,32,32,0.12) blended over the cream canvas
|
|
187
|
+
input: "#dfddda" # derived: same hairline, field edges
|
|
188
|
+
ring: "#3b82f6" # brand focus-blue rgba(59,130,246,0.5) flattened to its base hue — functional, not the accent
|
|
189
|
+
primary: "#ea2804"
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#fbe9e3" # derived: pale wash of the orange primary for selected/hover rows and nav
|
|
192
|
+
accent-foreground: "#c01f00" # brand pressed-orange, legible on the pale peach
|
|
193
|
+
destructive: "#b3261e" # derived: a deeper crimson-leaning red, kept distinct from the red-orange primary so delete never reads as the CTA
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#2b9a66"
|
|
196
|
+
warning: "#b7791f" # derived: a muted gold amber, pulled yellower than the primary so warning reads apart from the orange accent
|
|
197
|
+
popover: "#ffffff"
|
|
198
|
+
popover-foreground: "#202020"
|
|
199
|
+
secondary: "#f3f0e8"
|
|
200
|
+
secondary-foreground: "#202020"
|
|
201
|
+
chart-1: "#ea2804"
|
|
202
|
+
chart-2: "#2b9a66"
|
|
203
|
+
chart-3: "#b7791f" # derived: gold, third categorical hue in the warm ramp
|
|
204
|
+
chart-4: "#3b82f6" # derived: focus-blue reused as a cool categorical for contrast
|
|
205
|
+
chart-5: "#575757" # derived: charcoal neutral series
|
|
206
|
+
sidebar: "#f3f0e8" # brand bone — the deeper cream, distinguishing the rail from the canvas
|
|
207
|
+
sidebar-foreground: "#202020"
|
|
208
|
+
sidebar-primary: "#ea2804"
|
|
209
|
+
sidebar-primary-foreground: "#ffffff"
|
|
210
|
+
sidebar-accent: "#fbe9e3"
|
|
211
|
+
sidebar-accent-foreground: "#c01f00"
|
|
212
|
+
sidebar-border: "#dfddda"
|
|
213
|
+
sidebar-ring: "#3b82f6"
|
|
214
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64, 96]
|
|
215
|
+
radius-scale: [0, 4, 6, 10, 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
|
+
```
|