@nurix/etna 0.18.19 → 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 (94) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  4. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  5. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  6. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  66. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  67. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  76. package/data/harnesses/code/skills/design/references/create.md +126 -0
  77. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  78. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  79. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  80. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  81. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  82. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  83. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  84. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  85. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  86. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  87. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  88. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  89. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  90. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  91. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  92. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  93. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  94. package/package.json +1 -1
@@ -0,0 +1,237 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Coinbase
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Coinbase — the operator reading
9
+
10
+ The institutional-calm reading of Coinbase's brand — a quietly-confident financial-services look that
11
+ happens to trade crypto. Coinbase's own surfaces are marketing-editorial: an 80px hero display,
12
+ full-bleed near-black heroes carrying floating product-UI mockup cards, a white/gray/dark band rotation
13
+ at a 96px rhythm. This entry keeps what survives at operator scale — the pure-white canvas, the single
14
+ scarce Coinbase Blue accent, the cool near-black ink, the rounded geometry, the editorial-calm type
15
+ voice — and leaves the heroes, hero display, mockup stacks, and 96px rhythm behind. Where a fellow
16
+ exchange (Binance) runs a dense trading terminal, Coinbase reads calmer — its density lives behind login
17
+ walls, so the operator tier stays an honest `standard`. Both machine blocks are fully valued; each
18
+ judgment away from the marketing surfaces is annotated `# derived:` where the corpus is silent.
19
+
20
+ ## 1 Visual Theme
21
+
22
+ Light by default; the near-black editorial heroes are marketing and stay behind. Flat: depth comes from
23
+ card-on-card layering and 1px hairlines, never decorative shadow. A single accent — Coinbase Blue
24
+ `primary` (`#0052ff`) — is used scarcely, one or two blue moments per surface, on the one action that
25
+ matters. Ink is a cool near-black `foreground` (`#0a0b0d`) on a pure-white `background` (`#ffffff`); the
26
+ neutral field is a cool gray ladder (`#f7f7f7` → `#eef0f3`) that reads institutional, not flatly warm.
27
+ The geometry is rounded — soft corners throughout, sharp corners essentially absent. Density is
28
+ `standard` and editorially calm; the anchor surface is a white canvas beside a faintly cool `sidebar`.
29
+
30
+ ## 2 Color Roles
31
+
32
+ Light values (the manifest carries hex — the corpus's native format). One accent: `primary` is the only
33
+ chromatic hue that carries brand meaning; the trading up/down hues and sub-brand gold speak status only.
34
+
35
+ | Role | Value | Allowed where |
36
+ | --- | --- | --- |
37
+ | `background` / `card` / `popover` | pure white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
38
+ | `foreground` | cool near-black `#0a0b0d` | all primary ink and headings |
39
+ | `muted` | soft gray `#f7f7f7` | hover rows, subtle fills, quiet alternating bands |
40
+ | `secondary` | strong gray `#eef0f3` | secondary button fill, one step darker than canvas |
41
+ | `muted-foreground` | cool gray `#5b616e` | labels, captions, secondary running text |
42
+ | `border` / `input` | hairline `#dee1e6` | every separator, grid line, and field edge — the highest-frequency token |
43
+ | `primary` | Coinbase Blue `#0052ff` (press `#003ecc`, disabled `#a8b8cc`) | the one primary action; active nav; the inline brand link — used scarcely |
44
+ | `accent` | blue wash `#e6eeff` | selected/hovered rows and nav — a light wash of `primary`, on-accent surfaces only |
45
+ | `ring` | `primary` blue | the focus outline — inputs focus to a 2px Coinbase Blue edge |
46
+ | `destructive` | trading-down red `#cf202f` | destructive actions, error state, and down-moves |
47
+ | `success` | trading-up green `#05b169` | success status and up-moves |
48
+ | `warning` | gold `#f4b000` | caution status only — never a chrome fill |
49
+
50
+ The `#0a0b0d` near-black is ink here, not a page surface — the full-bleed dark heroes it powers stay
51
+ behind (§9). Blue stays scarce; the up/down hues live only in figures and status.
52
+
53
+ ## 3 Typography
54
+
55
+ One sans, one mono. `font-sans` is Inter — the corpus-named substitute for both CoinbaseDisplay and
56
+ CoinbaseSans; the single sans serves UI, body, headings, and labels, with heading weight and the
57
+ editorial negative tracking carrying the display voice. `font-mono` is JetBrains Mono (substitute for
58
+ CoinbaseMono) — the "trustworthy number" voice for asset prices, percent changes, IDs, and timestamps.
59
+ Numeric columns render `tabular-nums` so figures align down a column.
60
+
61
+ | Step | Role | Size · line | Weight · tracking |
62
+ | --- | --- | --- | --- |
63
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
64
+ | h2 | section head | 18px / 1.33 | `font-weight-strong` · `heading-tracking` |
65
+ | h3 | card / group head | 16px / 1.25 | `font-weight-strong` |
66
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
67
+ | small | labels, meta, dense table | 13px / 1.5 | `font-weight-normal` |
68
+ | caption | uppercase eyebrow | 12px / 1.5 | `font-weight-strong`, uppercase |
69
+ | number | table figures, prices | 14px / 1.4 · 500 | `font-mono`, `tabular-nums` |
70
+
71
+ The corpus's editorial signature — a modest display weight (400) with strong negative tracking — lives
72
+ on the 80/64/52px hero display, which stays behind. At operator heading scale, weight steps to
73
+ `font-weight-strong` (600) while the negative tracking carries.
74
+
75
+ ## 4 Component Stylings
76
+
77
+ Every recurring operator component composes from the primitives — no literal values.
78
+
79
+ - **Button** — `primary`: filled Coinbase Blue on `primary-foreground`, `radius` (8px), no hero pill;
80
+ press darkens to the active blue, disabled fades. Secondary: `secondary` gray fill, `foreground`.
81
+ Tertiary: transparent text in `primary`.
82
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
83
+ 2px Coinbase Blue edge, no glow.
84
+ - **Card** — `card` surface on a 1px `border`; card radius steps one or two up from control radius (the
85
+ corpus's containers are notably round); shadow only when a card must lift off the canvas.
86
+ - **Table / asset row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection
87
+ tints `accent`; price/amount cells take `font-mono` + `tabular-nums`; direction cells take `success`
88
+ (up) / `destructive` (down) as text color, never a fill.
89
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
90
+ beside the work, not over it.
91
+ - **Badge / avatar** — pill/full radius (the round brand nod): badges take hairline `border`, `muted` /
92
+ status fill, uppercase caption (`success` / `warning` / `destructive`, never `primary`); asset glyphs
93
+ sit on a full-circle `muted` plate — the one place full-round geometry carries.
94
+
95
+ ## 5 Layout
96
+
97
+ Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the marketing 96px
98
+ section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: topbar
99
+ `topbar-height` (64px, Coinbase's native top-nav height), sidebar `sidebar-width-expanded` /
100
+ `sidebar-width-collapsed`, side panel `side-panel-width` / `side-panel-width-rich`, modal cap
101
+ `modal-width-max`, forms `form-max-width`, tables full-width. Density is governed globally by
102
+ `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides; the
103
+ layout breathes a hair more than a dense console, editorial calm carried through spacing.
104
+
105
+ ## 6 Depth
106
+
107
+ Flat, layering-first. Hierarchy comes from the surface ladder and hairlines, not shadow:
108
+
109
+ - **0 — canvas** `background` (`#ffffff`), no border.
110
+ - **1 — panel / card** `card` on a 1px `border`; the corpus builds depth by floating one card over
111
+ another, so rank reads by hairline and position, not brightness. Shadow only when a card must lift.
112
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the single
113
+ soft shadow tier (`sm`); no level stacks a heavier shadow to signal rank.
114
+
115
+ Focus is a 2px `ring` (Coinbase Blue) outline, never a glow, on every interactive element; three
116
+ z-levels: content, sticky chrome, overlay.
117
+
118
+ ## 7 Do's & Don'ts
119
+
120
+ - **Do** reserve `primary` (Coinbase Blue) for the single most important action, active nav, and inline
121
+ brand links — one or two blue moments per surface. Its scarcity is the brand.
122
+ - **Do** keep the geometry rounded — 8px controls, rounder cards, pill badges, full-circle glyphs — and
123
+ build depth by layering cards over hairlines, the way the marketing surfaces float mockups.
124
+ - **Do** carry every figure in `font-mono` with `tabular-nums`; direction rides `success` /
125
+ `destructive` as text color.
126
+ - **Don't** introduce a second brand accent — the trading up/down hues and the sub-brand gold are
127
+ status/chart roles; and never use green or red as a button or surface fill (direction is text only).
128
+ - **Don't** pill dense operator buttons — the hero pill CTA stays behind; buttons take 8px `radius`,
129
+ pill radius is for badges and chips.
130
+ - **Don't** signal elevation with heavy or stacked drop shadows — the system has one soft tier.
131
+
132
+ ## 8 Responsive
133
+
134
+ The operator sweep is 375 / 768 / 1024 / 1440.
135
+
136
+ | Breakpoint | What changes |
137
+ | --- | --- |
138
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; asset rows stack ticker over price |
139
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
140
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
141
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
142
+
143
+ ## 9 Agent Prompt Guide
144
+
145
+ Directives the emitting agent follows verbatim:
146
+
147
+ - Anchor on the pure-white canvas; accent only the primary action in Coinbase Blue. If two things want
148
+ the blue, one is not primary — keep it to one or two moments per surface.
149
+ - Keep the geometry rounded and calm: 8px controls, 16–24px cards, pill badges, full-circle glyphs.
150
+ Never sharp-corner a control.
151
+ - Every numeric column is `tabular-nums` and every price / ID / timestamp is `font-mono`; direction and
152
+ status ride `success` / `destructive` as text color, never a fill.
153
+ - Stay flat — layer cards over hairlines before any shadow; reach past the single soft tier only for a
154
+ true overlay. Emphasise by weight, not size; carry the negative `heading-tracking` on headings.
155
+ - Leave the marketing skin behind (heroes, 80px display, mockup stacks, band rotation, 96px rhythm,
156
+ hero pill CTA). What carries: the palette, its cool temperature, the single scarce blue, the rounded
157
+ geometry, the tabular number voice, and card-on-card flat depth.
158
+
159
+ ```yaml design-primitives
160
+ radius: 8px # corpus: compact rows at rounded.sm (8px), inputs at 12px; operator base honors the round, sharp-corners-absent character
161
+ shadow-intensity: 0.35 # derived: corpus ships one soft tier (0 4px 12px rgba(0,0,0,0.04)) — near-flat, layering carries depth
162
+ border-weight: 1px
163
+ density-gap: 1
164
+ density-inset: 1
165
+ font-sans: Inter, system-ui, sans-serif # corpus: CoinbaseDisplay + CoinbaseSans → Inter is the documented substitute; one sans slot serves both voices
166
+ font-mono: JetBrains Mono, ui-monospace, monospace # corpus: CoinbaseMono → JetBrains Mono substitute; the trustworthy-number voice
167
+ font-weight-normal: 400 # corpus: body-md weight 400
168
+ font-weight-strong: 600 # corpus: titles/buttons/nav-emphasis weight 600; the hero display 400 is a marketing calm that stays behind
169
+ heading-tracking: -0.015em # corpus: the -1.5% editorial negative tracking (substitute note) is the display signature; carried to operator heading scale
170
+ duration-unit: 50ms # derived: corpus declares animation timings out of scope; functional operator base
171
+ duration-fast: 100ms # derived: corpus silent on motion
172
+ duration-normal: 150ms # derived: corpus silent on motion
173
+ duration-slow: 250ms # derived: corpus silent on motion
174
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
175
+ contrast-boost: 1 # derived: editorial-calm brand, not a dense grid; hairlines already carry structure
176
+ icon-stroke: 1.5 # derived: corpus iconography is "geometric and minimal" → a light 1.5 stroke suits the refined read
177
+ icon-size-base: 16px # derived: base control icon; corpus asset glyphs are 32px circles
178
+ sidebar-width-expanded: 248px # derived: no app sidebar in corpus (marketing top-nav only); operator standard
179
+ sidebar-width-collapsed: 56px # derived: corpus has no shell; operator standard icon rail
180
+ topbar-height: 64px # corpus: top-nav height 64px
181
+ side-panel-width: 420px # derived: corpus has no shell; operator standard detail width
182
+ side-panel-width-rich: 640px # derived: corpus has no shell; content-heavy detail width
183
+ modal-width-max: 560px # derived: corpus has no shell; confirmations only
184
+ form-max-width: 640px # derived: corpus content caps ~1200px (marketing); operator forms cap comfortably
185
+ table-row-height: 44px # derived: corpus's interactive height is 44px (button/search-pill/nav); rows honor it, calm not cramped
186
+ verbosity: default # derived: editorial-calm voice — neither compact-terminal nor explanatory-full
187
+ feedback: subtle
188
+ density-tier: standard # rationale: corpus reads editorially calm ("density lives behind login walls") — a fellow exchange runs dense; Coinbase holds an honest standard tier to keep its differentiated calm
189
+ product-traits: [crypto-exchange, trading-desk, fintech, dashboard]
190
+ ```
191
+
192
+ ```yaml lever-manifest
193
+ version: 1
194
+ fonts: { sans: "Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
195
+ color-tokens:
196
+ light:
197
+ background: "#ffffff"
198
+ foreground: "#0a0b0d"
199
+ card: "#ffffff"
200
+ card-foreground: "#0a0b0d"
201
+ muted: "#f7f7f7"
202
+ muted-foreground: "#5b616e"
203
+ border: "#dee1e6"
204
+ input: "#dee1e6"
205
+ ring: "#0052ff"
206
+ primary: "#0052ff"
207
+ primary-foreground: "#ffffff"
208
+ accent: "#e6eeff" # derived: light Coinbase-Blue wash for row/nav selection; corpus has no light-blue surface token
209
+ accent-foreground: "#0052ff"
210
+ destructive: "#cf202f" # derived: the trading-down red doubles as the destructive/error hue
211
+ destructive-foreground: "#ffffff"
212
+ success: "#05b169"
213
+ warning: "#f4b000" # derived: the sub-brand gold (illustrative-only in marketing) is the only warm hue; promoted to warning status
214
+ popover: "#ffffff"
215
+ popover-foreground: "#0a0b0d"
216
+ secondary: "#eef0f3"
217
+ secondary-foreground: "#0a0b0d"
218
+ chart-1: "#0052ff" # Coinbase Blue
219
+ chart-2: "#05b169" # trading-up green
220
+ chart-3: "#cf202f" # trading-down red
221
+ chart-4: "#f4b000" # sub-brand gold
222
+ chart-5: "#7c828a" # derived: neutral cool gray for a fifth series
223
+ sidebar: "#f7f7f7" # derived: operator sidebar tinted from surface-soft (corpus is top-nav only)
224
+ sidebar-foreground: "#0a0b0d"
225
+ sidebar-primary: "#0052ff"
226
+ sidebar-primary-foreground: "#ffffff"
227
+ sidebar-accent: "#e6eeff" # derived: the blue-wash selection tint
228
+ sidebar-accent-foreground: "#0052ff"
229
+ sidebar-border: "#dee1e6"
230
+ sidebar-ring: "#0052ff"
231
+ spacing-scale: [4, 8, 12, 16, 20, 24, 32, 48]
232
+ radius-scale: [0, 4, 8, 12, 16, 24, 9999]
233
+ shadow-levels: [none, sm]
234
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
235
+ icons: { family: lucide, stroke: 1.5 }
236
+ accent-count: 1
237
+ ```
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Composio
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Composio — dark developer-infrastructure operator design
9
+
10
+ An operator reading of Composio, a developer-tools brand for AI-agent tool integration. Composio is
11
+ **categorically dark** — a near-black canvas holding white type and a single electric-blue voltage —
12
+ so this entry keeps dark as the default theme (the categorically-dark override of the general
13
+ light-default). Carrying in: the palette, the cool near-black temperature, the compact
14
+ developer-ergonomic radii, the single sans voice. Staying behind: the marketing signature — the 2×2
15
+ terminal-mockup hero, the spotlight glows, the 72px display, the 96px section rhythm.
16
+
17
+ ## 1 Visual Theme
18
+
19
+ Dark by default — a light inversion is the opt-in, not the base. Flat: hierarchy comes from a
20
+ brightness-step surface ladder (`background` → `card` → `secondary`/`accent`), hairline `border`, and
21
+ type weight, never from drop shadow. A single accent, Composio Blue `primary` (`#0007cd`), reserved
22
+ for the one action that matters — primary CTA, active nav, key interactive detail. The neutral ramp is
23
+ a true cool near-black: canvas `#0f0f0f`, cards `#181818`, elevated fills `#222222`. The anchor surface
24
+ is a near-black content canvas beside a same-tone `sidebar` that the hairline `border` delineates.
25
+ Density is `standard` — technical but not cramped, inheriting the marketing's composure over terminal-cramming.
26
+
27
+ ## 2 Color Roles
28
+
29
+ Dark values are the default theme (the manifest carries them in `color-tokens.light`, the primary map).
30
+ `primary` is the only chromatic hue that carries meaning; cyan and violet are illustration-only and
31
+ take no operator role; status hues speak only status.
32
+
33
+ | Role | Value | Allowed where |
34
+ | --- | --- | --- |
35
+ | `background` | `#0f0f0f` | the page floor — near-black canvas, the dominant surface |
36
+ | `card` / `popover` | `#181818` / `#2a2a2a` | content cards; overlays and dropdowns lift to the top surface |
37
+ | `foreground` | `#ffffff` | primary ink — table values, headings, high-emphasis text |
38
+ | `muted` / `secondary` | `#222222` | subtle fills, secondary buttons, disabled surfaces |
39
+ | `muted-foreground` | `#a8a8a8` | labels, captions, running secondary text |
40
+ | `border` / `input` | `#222222` / `#333333` | every separator and grid line; fields take the stronger hairline edge |
41
+ | `primary` | `#0007cd` | the one primary action; active nav; brand detail |
42
+ | `accent` | `#2a2a2a` | hover and selected rows — a neutral lift, never a second hue |
43
+ | `ring` | `#1a26ff` | the focus outline — the brighter blue glow tone, legible on near-black |
44
+ | `destructive` | `#ff4d4d` | destructive actions and error state only |
45
+ | `success` / `warning` | `#33d17a` / `#f5a524` | status signalling only, never chrome |
46
+
47
+ Pure black `#000000` is reserved for code, terminal, and log surfaces — never as general chrome (see §7).
48
+
49
+ ## 3 Typography
50
+
51
+ One sans, one mono. `font-sans` is abcDiatype (the licensed brand face) with Inter as the open
52
+ substitute at weight 500 / -1.5% tracking — UI, body, and headings all ride it; weight and tight
53
+ tracking, not a second family, carry the display voice. `font-mono` is JetBrains Mono for code, CLI,
54
+ IDs, and log lines. 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.25 | `font-weight-strong` · `heading-tracking` |
59
+ | h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
60
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
61
+ | body | UI + prose | 16px / 1.5 | `font-weight-normal` |
62
+ | small | labels, meta, dense table | 14px / 1.5 | `font-weight-normal` |
63
+ | caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+0.08em`, uppercase |
64
+ | code | IDs, CLI, log lines | 13px / 1.5 | `font-mono` · 400 |
65
+
66
+ Bump weight for emphasis, never size; display weight never drops below 500.
67
+
68
+ ## 4 Component Stylings
69
+
70
+ - **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (8px), no pill. Secondary:
71
+ `secondary` fill, `foreground`, `radius`. Ghost: transparent, `accent` on hover.
72
+ - **Input** — `card` fill, 1px `input` border (`border-weight`), `radius`; focus draws the `ring` at
73
+ full 2px, no glow.
74
+ - **Card** — `card` surface stepped one brightness rung above `background`, 1px `border`, `radius`;
75
+ depth from the surface step, not shadow.
76
+ - **Table row** — height `table-row-height`; `border` grid lines; `accent` on hover and selection;
77
+ `tabular-nums` on numeric columns; IDs in `font-mono`.
78
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
79
+ for content-heavy), beside the work, not over it.
80
+ - **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
81
+ `success` / `warning` / `destructive`, never `primary`. Pill radius is legal for small label badges only.
82
+
83
+ ## 5 Layout
84
+
85
+ Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 96`. Shell
86
+ dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
87
+ `sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
88
+ `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width.
89
+ Density is governed globally by `density-tier` through `density-gap` and stepped per archetype by the
90
+ surface catalog — never by absolute overrides.
91
+
92
+ ## 6 Depth
93
+
94
+ Flat, brightness-step depth — the brand's signature. Rank rises by surface brightness, not shadow:
95
+
96
+ - **0 — canvas** `background` (`#0f0f0f`), no border.
97
+ - **1 — panel / card** `card` (`#181818`) one rung up, on a 1px `border`.
98
+ - **2 — overlay** `popover` / side panel / modal (`#2a2a2a`), the top rung; `shadow-intensity` stays
99
+ near-absent even here — the brightness step carries the lift.
100
+
101
+ Code, terminal, and log surfaces recess to pure `#000000`. Focus is a 2px `ring` outline in the
102
+ `primary-glow` blue (never a glow), on every interactive element. Three z-levels: content, chrome, overlay.
103
+
104
+ ## 7 Do's & Don'ts
105
+
106
+ - **Do** reserve `primary` (Composio Blue) for the single most important action on a surface;
107
+ everything else is neutral or status.
108
+ - **Do** carry depth with the brightness-step ladder and hairlines — the brand adds no drop-shadow tiers.
109
+ - **Do** render code, CLI, IDs, and timestamps in `font-mono`; apply `tabular-nums` to numeric columns.
110
+ - **Do** keep CTAs at `radius` (8px) — compact developer-ergonomic geometry, not full pills.
111
+ - **Don't** promote a second chromatic accent — cyan (`#00d4ff`) and violet (`#7b3aed`) are
112
+ illustration-only; pill the primary CTA; or reach for a radius outside `radius-scale`.
113
+ - **Don't** use pure `#000000` outside code/terminal/log surfaces, signal elevation with heavy drop
114
+ shadows, or drop display weight below 500.
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`); top nav → hamburger; tables scroll overflow |
124
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
125
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
126
+
127
+ ## 9 Agent Prompt Guide
128
+
129
+ Directives the emitting agent follows verbatim:
130
+
131
+ - Run dark by default — this brand is categorically dark; the light map is the opt-in, not the base.
132
+ - Lead every list surface with its table; lead every entity with its primary read, not its chrome.
133
+ - Accent only the primary action with Composio Blue. If two things want the accent, one is not primary.
134
+ - Depth is a brightness step, never a shadow — step surfaces up from `background` to `card` to overlay.
135
+ - Code, CLI, IDs, and log lines are `font-mono`; numeric columns are `tabular-nums`; code surfaces
136
+ recess to `#000000`.
137
+ - Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
138
+ - Leave the marketing behind — no terminal-mockup hero, no spotlight glows, no 72px display, no 96px
139
+ band rhythm. The palette, near-black temperature, 8px radii, and single sans voice carry; the show does not.
140
+
141
+ ```yaml design-primitives
142
+ radius: 8px # derived: corpus CTAs/inputs sit at rounded.md 8px — the operator default; cards take 12px from the scale
143
+ shadow-intensity: 0.2 # derived: brand uses brightness-step elevation, not shadow — keep shadow near-absent
144
+ border-weight: 1px
145
+ density-gap: 1
146
+ density-inset: 1
147
+ font-sans: abcDiatype, Inter, ui-sans-serif, system-ui, sans-serif # abcDiatype is the licensed brand face; Inter (500 / -1.5%) is the shipped substitute
148
+ font-mono: JetBrains Mono, ui-monospace, monospace
149
+ font-weight-normal: 400
150
+ font-weight-strong: 600 # derived: corpus display sits at 500 but component titles at 600; operator strong weight takes 600
151
+ heading-tracking: -0.015em # derived: the Inter-substitute spec (-1.5%) gives operator headings the Composio tight-display character
152
+ duration-unit: 50ms # derived: corpus declares motion out of scope; standard operator base
153
+ duration-fast: 100ms # derived: corpus silent on motion
154
+ duration-normal: 150ms # derived: corpus silent on motion
155
+ duration-slow: 250ms # derived: corpus silent on motion
156
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard functional easing; corpus silent on motion
157
+ contrast-boost: 1.1 # derived: #222 hairlines on #0f0f0f read faintly — nudge up a step so dense grids read as grids
158
+ icon-stroke: 1.75 # derived: corpus silent on icons; one step under lucide's 2 for a refined operator stroke
159
+ icon-size-base: 16px # derived: corpus silent on icons; standard operator base
160
+ sidebar-width-expanded: 248px # derived: corpus is marketing-only; standard operator shell
161
+ sidebar-width-collapsed: 56px # derived: standard operator icon rail
162
+ topbar-height: 56px # derived: corpus marketing nav is 64px; operator topbar tightens to 56px
163
+ side-panel-width: 420px # derived: corpus has no side panel; standard operator width
164
+ side-panel-width-rich: 640px # derived: standard content-heavy width
165
+ modal-width-max: 560px # derived: standard operator modal cap
166
+ form-max-width: 640px # derived: standard operator form width
167
+ table-row-height: 44px # derived: aligns with corpus 44px text-input height; comfortable on dark at standard density
168
+ verbosity: default
169
+ feedback: subtle
170
+ density-tier: standard # derived: the marketing breathes (96px rhythm); the operator translation stays composed, not terminal-dense
171
+ product-traits: [dev-tools, integrations, dashboard, api-console]
172
+ ```
173
+
174
+ ```yaml lever-manifest
175
+ version: 1
176
+ # categorically dark: the primary theme map holds Composio's near-black brand values (dark-default)
177
+ fonts: { sans: "abcDiatype, Inter, ui-sans-serif, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#0f0f0f"
181
+ foreground: "#ffffff" # derived: promote strong ink to primary text for operator legibility (corpus default running text is body #a8a8a8)
182
+ card: "#181818"
183
+ card-foreground: "#ffffff"
184
+ muted: "#222222"
185
+ muted-foreground: "#a8a8a8"
186
+ border: "#222222"
187
+ input: "#333333" # derived: fields take the stronger hairline for a visible edge on dark
188
+ ring: "#1a26ff" # derived: the brighter primary-glow tone gives a legible focus ring on near-black
189
+ primary: "#0007cd"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#2a2a2a" # derived: hover/selection uses surface-strong so it lifts above the resting card without a second hue
192
+ accent-foreground: "#ffffff"
193
+ destructive: "#ff4d4d"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#33d17a"
196
+ warning: "#f5a524" # derived: corpus ships no warning hue; a standard amber fills the status slot, off-brand-neutral so it reads only as status
197
+ popover: "#2a2a2a" # derived: corpus dropdown menus use surface-strong #2a2a2a — overlays lift to the top surface
198
+ popover-foreground: "#ffffff"
199
+ secondary: "#222222"
200
+ secondary-foreground: "#ffffff"
201
+ chart-1: "#1a26ff" # derived: primary #0007cd is too dark on near-black for a data mark; use the brighter primary-glow
202
+ chart-2: "#00d4ff"
203
+ chart-3: "#33d17a"
204
+ chart-4: "#7b3aed"
205
+ chart-5: "#f5a524" # derived: amber widens the categorical hue spread beyond the corpus blue/cyan/green/violet
206
+ sidebar: "#0f0f0f"
207
+ sidebar-foreground: "#a8a8a8" # derived: nav items sit at body gray until active, then go white/primary
208
+ sidebar-primary: "#0007cd"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#222222"
211
+ sidebar-accent-foreground: "#ffffff"
212
+ sidebar-border: "#222222"
213
+ sidebar-ring: "#1a26ff" # derived: matches the primary-glow focus ring on dark
214
+ spacing-scale: [4, 8, 12, 16, 20, 24, 32, 48, 96]
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
+ ```