@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.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- 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/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
|
+
```
|