@nurix/etna 0.19.50 → 0.19.51
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/apollo/harness.json +2 -2
- package/data/harnesses/apollo/skills/design/SKILL.md +55 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +8 -4
- package/data/harnesses/apollo/skills/design/references/content.md +5 -5
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/apollo/skills/design/references/intake.md +11 -7
- package/data/harnesses/apollo/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +26 -6
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/skills/design/SKILL.md +55 -29
- package/data/harnesses/code/skills/design/references/compose.md +8 -4
- package/data/harnesses/code/skills/design/references/content.md +5 -5
- package/data/harnesses/code/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/code/skills/design/references/intake.md +11 -7
- package/data/harnesses/code/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/code/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +26 -6
- package/package.json +2 -2
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/apollo/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/apollo/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/apollo/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/apollo/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/apollo/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/apollo/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/apollo/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/apollo/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/apollo/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/apollo/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/apollo/skills/design/design-md/variants/warm-approachable.md +0 -216
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/code/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/code/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/code/skills/design/data/iconography.md +0 -199
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/code/skills/design/data/tells.csv +0 -34
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/code/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/code/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/code/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +0 -216
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: coinbase
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [fintech, crypto, trading]
|
|
6
|
-
keywords: [calm, institutional, blue, rounded, white, financial]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 coinbase entry (2026-07-04); 2026-07-12 re-audit of Coinbase public brand; Inter substitutes Coinbase Sans/Display; JetBrains Mono substitutes Coinbase Mono"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# coinbase — a glass-walled retail bank lobby that happens to trade crypto
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A midtown retail bank lobby, not a trading pit: white marble counters, one teller light
|
|
16
|
-
in Coinbase Blue, rounded corners on everything, figures printed in a steady mono hand.
|
|
17
|
-
Light default on a pure-white canvas; depth is card-on-card layering over hairlines,
|
|
18
|
-
never decorative shadow. The dark theme is the same lobby after hours — cool navy-black
|
|
19
|
-
surfaces stepped by lightness, the blue teller light still the only voltage.
|
|
20
|
-
|
|
21
|
-
## 2 Color Roles
|
|
22
|
-
Cool near-black `foreground` on the white `background`; `primary` Coinbase Blue is the
|
|
23
|
-
single chromatic accent — one or two blue moments per surface: the primary action, active
|
|
24
|
-
nav, the inline brand link. `accent` is the pale blue wash for selected rows and nav only.
|
|
25
|
-
Trading direction rides `success` (up) and `destructive` (down) as text color, never a
|
|
26
|
-
fill; `warning` gold is caution status only. The `sidebar` sits a faint cool step off the
|
|
27
|
-
canvas, hairline-delineated.
|
|
28
|
-
|
|
29
|
-
## 3 Typography
|
|
30
|
-
Inter (UI, body, headings — the open substitute for Coinbase Sans/Display) over JetBrains
|
|
31
|
-
Mono (the "trustworthy number" voice — prices, percent changes, IDs, timestamps). Register
|
|
32
|
-
scope: the display register speaks only in page titles, empty states, and auth; every
|
|
33
|
-
figure in a table is mono `tabular-nums`. Headings take 600 with the brand's negative
|
|
34
|
-
tracking; emphasis bumps weight, never size.
|
|
35
|
-
|
|
36
|
-
## 4 Component Stylings
|
|
37
|
-
Buttons `radius-sm` (8px), `primary` blue fill, never the hero pill; secondary on
|
|
38
|
-
`secondary` gray. Inputs hairline `border` with a 2px `ring` focus, no glow. Cards on
|
|
39
|
-
`card` with hairline, radius one step up — the corpus's containers are notably round.
|
|
40
|
-
Table rows dense with `border` grid lines, `muted` hover, `accent` selection; price cells
|
|
41
|
-
mono with direction as text color. Detail opens in the side panel; badges are pills on
|
|
42
|
-
hairline; asset glyphs sit on full-circle `muted` plates — the one place full-round carries.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
4px base; sidebar 256/64px; topbar 64px (the brand's nav height); side panel 440/640px;
|
|
46
|
-
content max 1440px; the layout breathes a hair more than a dense console — editorial calm
|
|
47
|
-
carried through spacing, the marketing 96px rhythm left behind.
|
|
48
|
-
|
|
49
|
-
## 6 Depth
|
|
50
|
-
Light: hairlines and card-on-card layering carry all structure; the single soft shadow
|
|
51
|
-
tier appears only on overlays, navy-tinted, never black. Dark: the surface ladder does
|
|
52
|
-
depth — `background` 0.17 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held at
|
|
53
|
-
264. Focus is always the 2px blue `ring` outline.
|
|
54
|
-
|
|
55
|
-
## 7 Motion
|
|
56
|
-
Calm and settled. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
57
|
-
`row-settle` (list arrival fade, 160ms), `blue-press` (primary-action press, 120ms).
|
|
58
|
-
Physicality is granted only to auth and first-run empty states; prices update in place —
|
|
59
|
-
no ticker animation in tables or any keyboard-initiated action.
|
|
60
|
-
|
|
61
|
-
## 8 Iconography & Charts
|
|
62
|
-
Lucide, 2px stroke (the rounded brand nod), 16/20px grid, `muted-foreground` default.
|
|
63
|
-
Charts: hairline axes, no gridline fills, blue-led categorical ramp (`chart-1..5`);
|
|
64
|
-
diverging data runs `destructive` (down) through `muted` to `success` (up) — the trading
|
|
65
|
-
convention; tooltips on `surface-overlay` with mono numerals.
|
|
66
|
-
|
|
67
|
-
## 9 Voice
|
|
68
|
-
Banker calm: plain verbs, numbers stated without excitement, no exclamation. "Add
|
|
69
|
-
account" · "No transfers need review — next settlement Monday" · "This withdrawal
|
|
70
|
-
exceeds the daily limit; identity verification is required."
|
|
71
|
-
|
|
72
|
-
## 10 Do's & Don'ts
|
|
73
|
-
Do keep blue to one or two moments per surface — its scarcity is the brand. Do keep
|
|
74
|
-
geometry rounded: 8px controls, rounder cards, pill badges, full-circle glyphs. Do carry
|
|
75
|
-
every figure in mono `tabular-nums`. Don't use green or red as a button or surface fill —
|
|
76
|
-
direction is text only. Don't pill dense operator buttons — pill radius is for badges and
|
|
77
|
-
chips. Don't stack shadows to signal rank; one soft tier, overlays only.
|
|
78
|
-
|
|
79
|
-
## 11 Responsive
|
|
80
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; asset rows stack ticker over
|
|
81
|
-
price. 768: sidebar collapses to the icon rail; tables scroll their overflow. 1024:
|
|
82
|
-
two-pane queue+detail holds. 1440: forms cap; tables and dashboards use the full width.
|
|
83
|
-
|
|
84
|
-
## 12 Agent Prompt Guide
|
|
85
|
-
Anchor on the white canvas; spend Coinbase Blue on the one action that matters — if two
|
|
86
|
-
things want the blue, one is not primary. Keep corners rounded and the temperature cool.
|
|
87
|
-
Every price, ID, and timestamp is mono; direction is text color, never a fill. Stay flat:
|
|
88
|
-
layer cards over hairlines before any shadow. Dark is authored — consult the block, never
|
|
89
|
-
invert.
|
|
90
|
-
|
|
91
|
-
```yaml design-values
|
|
92
|
-
color:
|
|
93
|
-
light:
|
|
94
|
-
background: oklch(0.985 0.005 264)
|
|
95
|
-
foreground: oklch(0.16 0.006 264)
|
|
96
|
-
card: oklch(0.995 0.005 264)
|
|
97
|
-
card-foreground: oklch(0.16 0.006 264)
|
|
98
|
-
popover: oklch(0.995 0.005 264)
|
|
99
|
-
popover-foreground: oklch(0.16 0.006 264)
|
|
100
|
-
primary: oklch(0.53 0.26 263)
|
|
101
|
-
primary-foreground: oklch(0.985 0.006 264)
|
|
102
|
-
secondary: oklch(0.954 0.006 260)
|
|
103
|
-
secondary-foreground: oklch(0.2 0.01 264)
|
|
104
|
-
muted: oklch(0.97 0.005 260)
|
|
105
|
-
muted-foreground: oklch(0.49 0.022 266)
|
|
106
|
-
accent: oklch(0.948 0.024 266)
|
|
107
|
-
accent-foreground: oklch(0.35 0.15 263)
|
|
108
|
-
destructive: oklch(0.551 0.206 24)
|
|
109
|
-
destructive-foreground: oklch(0.98 0.008 24)
|
|
110
|
-
success: oklch(0.669 0.161 156)
|
|
111
|
-
warning: oklch(0.8 0.165 81)
|
|
112
|
-
border: oklch(0.909 0.008 261)
|
|
113
|
-
input: oklch(0.909 0.008 261)
|
|
114
|
-
ring: oklch(0.53 0.26 263)
|
|
115
|
-
surface-raised: oklch(0.99 0.005 264)
|
|
116
|
-
surface-overlay: oklch(0.995 0.005 264)
|
|
117
|
-
chart-1: oklch(0.53 0.26 263)
|
|
118
|
-
chart-2: oklch(0.65 0.12 240)
|
|
119
|
-
chart-3: oklch(0.669 0.161 156)
|
|
120
|
-
chart-4: oklch(0.8 0.165 81)
|
|
121
|
-
chart-5: oklch(0.551 0.206 24)
|
|
122
|
-
sidebar: oklch(0.975 0.006 262)
|
|
123
|
-
sidebar-foreground: oklch(0.2 0.01 264)
|
|
124
|
-
sidebar-primary: oklch(0.53 0.26 263)
|
|
125
|
-
sidebar-primary-foreground: oklch(0.985 0.006 264)
|
|
126
|
-
sidebar-accent: oklch(0.948 0.024 266)
|
|
127
|
-
sidebar-accent-foreground: oklch(0.35 0.15 263)
|
|
128
|
-
sidebar-border: oklch(0.909 0.008 261)
|
|
129
|
-
sidebar-ring: oklch(0.53 0.26 263)
|
|
130
|
-
dark:
|
|
131
|
-
background: oklch(0.17 0.01 264)
|
|
132
|
-
foreground: oklch(0.93 0.008 264)
|
|
133
|
-
card: oklch(0.2 0.012 264)
|
|
134
|
-
card-foreground: oklch(0.93 0.008 264)
|
|
135
|
-
popover: oklch(0.27 0.014 264)
|
|
136
|
-
popover-foreground: oklch(0.93 0.008 264)
|
|
137
|
-
primary: oklch(0.55 0.24 264)
|
|
138
|
-
primary-foreground: oklch(0.97 0.01 264)
|
|
139
|
-
secondary: oklch(0.25 0.014 264)
|
|
140
|
-
secondary-foreground: oklch(0.9 0.01 264)
|
|
141
|
-
muted: oklch(0.24 0.012 264)
|
|
142
|
-
muted-foreground: oklch(0.72 0.015 264)
|
|
143
|
-
accent: oklch(0.3 0.06 264)
|
|
144
|
-
accent-foreground: oklch(0.92 0.015 264)
|
|
145
|
-
destructive: oklch(0.62 0.19 25)
|
|
146
|
-
destructive-foreground: oklch(0.14 0.02 25)
|
|
147
|
-
success: oklch(0.7 0.15 156)
|
|
148
|
-
warning: oklch(0.8 0.15 81)
|
|
149
|
-
border: oklch(0.28 0.014 264)
|
|
150
|
-
input: oklch(0.28 0.014 264)
|
|
151
|
-
ring: oklch(0.62 0.21 264)
|
|
152
|
-
surface-raised: oklch(0.22 0.012 264)
|
|
153
|
-
surface-overlay: oklch(0.27 0.014 264)
|
|
154
|
-
chart-1: oklch(0.62 0.21 264)
|
|
155
|
-
chart-2: oklch(0.72 0.12 240)
|
|
156
|
-
chart-3: oklch(0.72 0.15 156)
|
|
157
|
-
chart-4: oklch(0.82 0.14 81)
|
|
158
|
-
chart-5: oklch(0.64 0.19 25)
|
|
159
|
-
sidebar: oklch(0.15 0.01 264)
|
|
160
|
-
sidebar-foreground: oklch(0.9 0.01 264)
|
|
161
|
-
sidebar-primary: oklch(0.55 0.24 264)
|
|
162
|
-
sidebar-primary-foreground: oklch(0.97 0.01 264)
|
|
163
|
-
sidebar-accent: oklch(0.24 0.03 264)
|
|
164
|
-
sidebar-accent-foreground: oklch(0.92 0.012 264)
|
|
165
|
-
sidebar-border: oklch(0.25 0.012 264)
|
|
166
|
-
sidebar-ring: oklch(0.62 0.21 264)
|
|
167
|
-
typography:
|
|
168
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
169
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
170
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400, 500] }
|
|
171
|
-
ramp:
|
|
172
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.015em }
|
|
173
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.01em }
|
|
174
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans }
|
|
175
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
176
|
-
small: { size: 13px, line: 19px, weight: 400, family: sans }
|
|
177
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, transform: uppercase }
|
|
178
|
-
data: { size: 14px, line: 20px, weight: 500, family: mono, features: [tnum] }
|
|
179
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, prices, ids, timestamps] }
|
|
180
|
-
elevation:
|
|
181
|
-
radius: { sm: 8px, md: 12px, lg: 16px }
|
|
182
|
-
hairline: border
|
|
183
|
-
shadow:
|
|
184
|
-
overlay: "0 8px 30px oklch(0.25 0.03 264 / 0.12)"
|
|
185
|
-
popover: "0 4px 16px oklch(0.25 0.03 264 / 0.08)"
|
|
186
|
-
dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.27, hue-held: 264 }
|
|
187
|
-
motion:
|
|
188
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
189
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
190
|
-
entrance-never: ease-in
|
|
191
|
-
identity-moments: [auth, first-run-empty]
|
|
192
|
-
iconography: { set: lucide, stroke: 2px, grid: [16px, 20px] }
|
|
193
|
-
charts:
|
|
194
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
195
|
-
sequential: { from: background, to: chart-1 }
|
|
196
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
197
|
-
layout: { base: 4px, sidebar: [256px, 64px], topbar: 64px, side-panel: [440px, 640px], content-max: 1440px }
|
|
198
|
-
```
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: composio
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, ai-infra, integrations]
|
|
6
|
-
keywords: [dark, near-black, electric-blue, technical, flat, brightness-ladder]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 composio entry (2026-07-04); 2026-07-12 re-audit of Composio public brand; Inter substitutes the licensed abcDiatype; JetBrains Mono for code surfaces"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# composio — a dark switchboard room with one live blue cable
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A telephone-exchange switchboard room at night: matte near-black panels racked in
|
|
16
|
-
brightness rungs, hairline seams between them, and a single live cable glowing Composio
|
|
17
|
-
Blue. Dark by default — this brand is categorically dark; the light theme is the opt-in
|
|
18
|
-
inversion, not the base. Hierarchy is a brightness-step surface ladder plus hairlines and
|
|
19
|
-
type weight — never drop shadow. Density is standard: technical composure, not
|
|
20
|
-
terminal-cramming.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
White `foreground` on the near-black `background`; `primary` Composio Blue is the only
|
|
24
|
-
chromatic hue that carries meaning — the one primary action, active nav, brand detail —
|
|
25
|
-
with the brighter `ring` blue as the focus outline, legible on near-black. `accent` is a
|
|
26
|
-
neutral brightness lift for hover and selection, never a second hue. Cyan and violet are
|
|
27
|
-
illustration hues demoted to `chart-*`; status hues speak only status. Pure black is
|
|
28
|
-
reserved for code, terminal, and log wells — never general chrome.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (UI, body, headings — the open substitute for the licensed abcDiatype, worn at 500
|
|
32
|
-
with tight tracking) over JetBrains Mono (code, CLI, IDs, log lines). Register scope:
|
|
33
|
-
the display register touches page titles, empty states, and auth only; body and chrome
|
|
34
|
-
are sans; every numeric column is mono-adjacent `tabular-nums`. Display weight never
|
|
35
|
-
drops below 500; emphasis bumps weight, never size.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-sm` (6px), `primary` blue fill, no pill; secondary on `secondary` with
|
|
39
|
-
hairline. Inputs on `card` with the stronger `input` hairline; focus is the 2px `ring`,
|
|
40
|
-
no glow. Cards step one brightness rung above `background` on a hairline — the step is
|
|
41
|
-
the depth. Table rows dense, `accent` on hover and selection, IDs in mono. Detail opens
|
|
42
|
-
in the side panel; badges are hairline chips, uppercase caption, status hues only.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
4px base; sidebar 248/56px, same-tone as the canvas, delineated by hairline; topbar 56px;
|
|
46
|
-
side panel 440/640px; content max 1360px. The marketing 96px band rhythm stays behind;
|
|
47
|
-
density is standard and steps denser per surface archetype.
|
|
48
|
-
|
|
49
|
-
## 6 Depth
|
|
50
|
-
Brightness-step depth is the brand's signature: `background` → `card` →
|
|
51
|
-
`surface-overlay`, each rung ≥ +0.04 L, hue held at 264 — shadows stay near-absent even
|
|
52
|
-
on overlays (one faint blue-tinted tier for true modals). Code and log wells recess
|
|
53
|
-
*below* the canvas to near-black. Focus is the 2px electric `ring` outline; three
|
|
54
|
-
z-levels: content, chrome, overlay.
|
|
55
|
-
|
|
56
|
-
## 7 Motion
|
|
57
|
-
Terse and mechanical. Named moments: `rung-lift` (hover/selection brightness step, 100ms),
|
|
58
|
-
`panel-slide` (side panel, 220ms, interruptible), `wire-pulse` (primary-action press,
|
|
59
|
-
120ms). Physicality is granted only to auth and first-run empty states; log streams
|
|
60
|
-
append without animation, and nothing moves on keyboard-initiated actions.
|
|
61
|
-
|
|
62
|
-
## 8 Iconography & Charts
|
|
63
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes on
|
|
64
|
-
the dark canvas, no gridline fills; the categorical ramp leads electric blue then spends
|
|
65
|
-
the demoted illustration hues — cyan, violet — as data (`chart-1..5`); tooltips on
|
|
66
|
-
`surface-overlay` with mono numerals.
|
|
67
|
-
|
|
68
|
-
## 9 Voice
|
|
69
|
-
Terse developer prose: imperative verbs, counts stated flat, no exclamation. "Create
|
|
70
|
-
connection" · "No failed runs — 240 executions in the last hour" · "Auth expired for
|
|
71
|
-
github-prod; reconnect to resume."
|
|
72
|
-
|
|
73
|
-
## 10 Do's & Don'ts
|
|
74
|
-
Do carry depth with the brightness ladder and hairlines — the brand adds no shadow tiers.
|
|
75
|
-
Do keep code, CLI, IDs, and timestamps in mono, recessed to the near-black well. Do keep
|
|
76
|
-
CTAs at the compact 6px radius. Don't promote cyan or violet into chrome — they are chart
|
|
77
|
-
data only. Don't use the pure-black well outside code/terminal/log surfaces. Don't pill
|
|
78
|
-
the CTA, and never drop display weight below 500.
|
|
79
|
-
|
|
80
|
-
## 11 Responsive
|
|
81
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
82
|
-
collapses to the icon rail; top nav → hamburger; tables scroll. 1024: two-pane
|
|
83
|
-
queue+detail holds. 1440: forms cap; tables and dashboards use the full width.
|
|
84
|
-
|
|
85
|
-
## 12 Agent Prompt Guide
|
|
86
|
-
Build dark — the light map is the opt-in, not the base. Lead every list surface with its
|
|
87
|
-
table. Spend Composio Blue on exactly one action per surface; if two want it, one is not
|
|
88
|
-
primary. Depth is a brightness step, never a shadow. Code recesses to the black well;
|
|
89
|
-
numbers align in mono. Dark is the authored default — consult the block, never derive.
|
|
90
|
-
|
|
91
|
-
```yaml design-values
|
|
92
|
-
color:
|
|
93
|
-
light:
|
|
94
|
-
background: oklch(0.98 0.005 264)
|
|
95
|
-
foreground: oklch(0.18 0.008 264)
|
|
96
|
-
card: oklch(0.995 0.005 264)
|
|
97
|
-
card-foreground: oklch(0.18 0.008 264)
|
|
98
|
-
popover: oklch(0.995 0.005 264)
|
|
99
|
-
popover-foreground: oklch(0.18 0.008 264)
|
|
100
|
-
primary: oklch(0.387 0.264 264)
|
|
101
|
-
primary-foreground: oklch(0.97 0.005 264)
|
|
102
|
-
secondary: oklch(0.94 0.006 264)
|
|
103
|
-
secondary-foreground: oklch(0.22 0.01 264)
|
|
104
|
-
muted: oklch(0.955 0.006 264)
|
|
105
|
-
muted-foreground: oklch(0.48 0.015 264)
|
|
106
|
-
accent: oklch(0.93 0.008 264)
|
|
107
|
-
accent-foreground: oklch(0.2 0.01 264)
|
|
108
|
-
destructive: oklch(0.55 0.21 25)
|
|
109
|
-
destructive-foreground: oklch(0.98 0.008 25)
|
|
110
|
-
success: oklch(0.627 0.17 152)
|
|
111
|
-
warning: oklch(0.666 0.157 65)
|
|
112
|
-
border: oklch(0.9 0.008 264)
|
|
113
|
-
input: oklch(0.87 0.009 264)
|
|
114
|
-
ring: oklch(0.476 0.297 266)
|
|
115
|
-
surface-raised: oklch(0.99 0.005 264)
|
|
116
|
-
surface-overlay: oklch(0.995 0.005 264)
|
|
117
|
-
chart-1: oklch(0.45 0.27 264)
|
|
118
|
-
chart-2: oklch(0.6 0.13 220)
|
|
119
|
-
chart-3: oklch(0.54 0.247 293)
|
|
120
|
-
chart-4: oklch(0.57 0.14 154)
|
|
121
|
-
chart-5: oklch(0.666 0.157 65)
|
|
122
|
-
sidebar: oklch(0.965 0.006 264)
|
|
123
|
-
sidebar-foreground: oklch(0.2 0.01 264)
|
|
124
|
-
sidebar-primary: oklch(0.387 0.264 264)
|
|
125
|
-
sidebar-primary-foreground: oklch(0.97 0.005 264)
|
|
126
|
-
sidebar-accent: oklch(0.93 0.008 264)
|
|
127
|
-
sidebar-accent-foreground: oklch(0.2 0.01 264)
|
|
128
|
-
sidebar-border: oklch(0.9 0.008 264)
|
|
129
|
-
sidebar-ring: oklch(0.476 0.297 266)
|
|
130
|
-
dark:
|
|
131
|
-
background: oklch(0.17 0.006 264)
|
|
132
|
-
foreground: oklch(0.97 0.005 264)
|
|
133
|
-
card: oklch(0.21 0.007 264)
|
|
134
|
-
card-foreground: oklch(0.97 0.005 264)
|
|
135
|
-
popover: oklch(0.29 0.008 264)
|
|
136
|
-
popover-foreground: oklch(0.95 0.006 264)
|
|
137
|
-
primary: oklch(0.387 0.264 264)
|
|
138
|
-
primary-foreground: oklch(0.97 0.005 264)
|
|
139
|
-
secondary: oklch(0.25 0.007 264)
|
|
140
|
-
secondary-foreground: oklch(0.93 0.006 264)
|
|
141
|
-
muted: oklch(0.25 0.007 264)
|
|
142
|
-
muted-foreground: oklch(0.73 0.008 264)
|
|
143
|
-
accent: oklch(0.29 0.008 264)
|
|
144
|
-
accent-foreground: oklch(0.95 0.006 264)
|
|
145
|
-
destructive: oklch(0.673 0.215 25)
|
|
146
|
-
destructive-foreground: oklch(0.15 0.02 25)
|
|
147
|
-
success: oklch(0.761 0.178 154)
|
|
148
|
-
warning: oklch(0.782 0.158 72)
|
|
149
|
-
border: oklch(0.25 0.007 264)
|
|
150
|
-
input: oklch(0.32 0.008 264)
|
|
151
|
-
ring: oklch(0.476 0.297 266)
|
|
152
|
-
surface-raised: oklch(0.22 0.007 264)
|
|
153
|
-
surface-overlay: oklch(0.29 0.008 264)
|
|
154
|
-
chart-1: oklch(0.55 0.27 266)
|
|
155
|
-
chart-2: oklch(0.804 0.146 220)
|
|
156
|
-
chart-3: oklch(0.65 0.2 293)
|
|
157
|
-
chart-4: oklch(0.761 0.178 154)
|
|
158
|
-
chart-5: oklch(0.782 0.158 72)
|
|
159
|
-
sidebar: oklch(0.15 0.006 264)
|
|
160
|
-
sidebar-foreground: oklch(0.9 0.006 264)
|
|
161
|
-
sidebar-primary: oklch(0.387 0.264 264)
|
|
162
|
-
sidebar-primary-foreground: oklch(0.97 0.005 264)
|
|
163
|
-
sidebar-accent: oklch(0.24 0.007 264)
|
|
164
|
-
sidebar-accent-foreground: oklch(0.93 0.006 264)
|
|
165
|
-
sidebar-border: oklch(0.25 0.007 264)
|
|
166
|
-
sidebar-ring: oklch(0.476 0.297 266)
|
|
167
|
-
typography:
|
|
168
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [500, 600] }
|
|
169
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
170
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
171
|
-
ramp:
|
|
172
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.015em }
|
|
173
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.015em }
|
|
174
|
-
h2: { size: 18px, line: 25px, weight: 600, family: sans, tracking: -0.01em }
|
|
175
|
-
body: { size: 15px, line: 22px, weight: 400, family: sans }
|
|
176
|
-
small: { size: 13px, line: 19px, weight: 400, family: sans }
|
|
177
|
-
caption: { size: 11px, line: 15px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
178
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
179
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, code, cli, ids, logs, timestamps] }
|
|
180
|
-
elevation:
|
|
181
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
182
|
-
hairline: border
|
|
183
|
-
shadow:
|
|
184
|
-
overlay: "0 8px 24px oklch(0.05 0.02 264 / 0.5)"
|
|
185
|
-
popover: "0 4px 12px oklch(0.05 0.02 264 / 0.35)"
|
|
186
|
-
dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.29, hue-held: 264 }
|
|
187
|
-
motion:
|
|
188
|
-
duration: { press: 120ms, fade: 140ms, panel: 220ms }
|
|
189
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
190
|
-
entrance-never: ease-in
|
|
191
|
-
identity-moments: [auth, first-run-empty]
|
|
192
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
193
|
-
charts:
|
|
194
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
195
|
-
sequential: { from: background, to: chart-2 }
|
|
196
|
-
diverging: { negative: destructive, mid: muted, positive: chart-4 }
|
|
197
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
198
|
-
```
|
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: cursor
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, ai, ide]
|
|
6
|
-
keywords: [warm, cream, editorial, orange, mono, magazine]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 cursor entry (2026-07-04); 2026-07-12 re-audit of Cursor public brand; Inter substitutes the licensed CursorGothic; JetBrains Mono for code surfaces; primary-action label runs warm ink (the marketing white-on-orange fails body contrast at operator scale)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# cursor — a writer's desk in a warm studio, half the page set in code
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A magazine editor's desk in a warm studio: cream paper stock, warm near-black ink, one
|
|
16
|
-
orange highlighter capped until it matters, and galley proofs where half the columns are
|
|
17
|
-
code. Light by default — the cream `background` is deliberate warmth, never pure white;
|
|
18
|
-
cards step up to white so a panel reads by a hair of brightness plus its hairline, never
|
|
19
|
-
shadow. The dark theme is the studio at night: warm charcoal, same hue, lamp-lit rungs.
|
|
20
|
-
|
|
21
|
-
## 2 Color Roles
|
|
22
|
-
Warm near-black `foreground` on the cream `background`; `primary` Cursor Orange is held
|
|
23
|
-
scarce — the one primary action, the focus `ring`, the active-nav indicator. The orange
|
|
24
|
-
fill carries warm-ink text (the marketing white label fails body contrast at operator
|
|
25
|
-
scale). `accent` is a warm neutral selection lift, never orange. The timeline pastels
|
|
26
|
-
live only in `chart-*` and agent-stage chips; status hues speak only status.
|
|
27
|
-
|
|
28
|
-
## 3 Typography
|
|
29
|
-
Inter (the open substitute for the licensed CursorGothic) over JetBrains Mono on every
|
|
30
|
-
code surface — roughly half of Cursor's own chrome. The defining trait is the editorial
|
|
31
|
-
voice: page titles wear weight 400 with negative tracking — a magazine feel, never bold —
|
|
32
|
-
while card heads step up to 600. Register scope: the 400-weight display register speaks
|
|
33
|
-
in page titles, section heads, empty states, and auth; mono owns code, logs, IDs, and
|
|
34
|
-
timestamps; numeric columns are `tabular-nums`.
|
|
35
|
-
|
|
36
|
-
## 4 Component Stylings
|
|
37
|
-
Buttons `radius-sm` (8px), orange `primary` fill with ink label, never a pill; secondary
|
|
38
|
-
is white `card` on hairline. Inputs on `background` with hairline; focus draws the orange
|
|
39
|
-
`ring` at 2px, no glow. Cards are the white bright step off the cream on a hairline.
|
|
40
|
-
Table rows with `border` grid lines, `muted` hover, selection warming to `accent`. Detail
|
|
41
|
-
opens in the side panel; badges are pills (badges only) with status fills.
|
|
42
|
-
|
|
43
|
-
## 5 Layout
|
|
44
|
-
4px base; sidebar 256/56px; topbar 64px (the brand's nav height); side panel 440/640px;
|
|
45
|
-
content max 1360px. Dimensions run a hair generous — editorial breathing carried through
|
|
46
|
-
the shell, not loose grids; the 80px marketing rhythm stays behind.
|
|
47
|
-
|
|
48
|
-
## 6 Depth
|
|
49
|
-
Light: the cream-to-white surface step and warm hairlines carry everything; the faintest
|
|
50
|
-
warm-tinted lift appears only under true overlays. Dark: the surface ladder does depth —
|
|
51
|
-
`background` 0.18 L, `surface-raised` +0.05, `surface-overlay` +0.10, warm hue held near
|
|
52
|
-
95. Focus is always the 2px orange `ring`, keyboard-first.
|
|
53
|
-
|
|
54
|
-
## 7 Motion
|
|
55
|
-
Editorial and unhurried, but brief. Named moments: `page-settle` (content fade, 150ms),
|
|
56
|
-
`panel-slide` (side panel, 220ms, interruptible), `ink-press` (primary-action press,
|
|
57
|
-
110ms). Physicality is granted only to auth and first-run empty states; agent-stage chips
|
|
58
|
-
change state by color swap, not animation; nothing moves on keyboard-initiated actions.
|
|
59
|
-
|
|
60
|
-
## 8 Iconography & Charts
|
|
61
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
62
|
-
no gridline fills; the categorical ramp is the sanctioned timeline-pastel set — peach,
|
|
63
|
-
mint, blue, lavender, gold (`chart-1..5`), deepened to read as data; tooltips on
|
|
64
|
-
`surface-overlay` with mono numerals.
|
|
65
|
-
|
|
66
|
-
## 9 Voice
|
|
67
|
-
A calm editor who ships: short declaratives, numbers plain, wit dry and rare. "New run" ·
|
|
68
|
-
"The queue is clear — 12 runs finished today" · "This agent hit its token budget; raise
|
|
69
|
-
the cap or split the task."
|
|
70
|
-
|
|
71
|
-
## 10 Do's & Don'ts
|
|
72
|
-
Do anchor every surface on the warm cream — pure white as the page floor reads as
|
|
73
|
-
any-other-tool. Do keep page titles at 400 with negative tracking; never bold the
|
|
74
|
-
display. Do render every code, log, and terminal surface in mono. Don't introduce a
|
|
75
|
-
second action color. Don't drop the timeline pastels onto semantic status or chrome.
|
|
76
|
-
Don't pill the CTA, and don't shadow what a hairline can separate.
|
|
77
|
-
|
|
78
|
-
## 11 Responsive
|
|
79
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
80
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane queue+detail
|
|
81
|
-
holds. 1440: forms cap; breathing widens under the content cap.
|
|
82
|
-
|
|
83
|
-
## 12 Agent Prompt Guide
|
|
84
|
-
Reach for the cream canvas first — the tint is Cursor. Spend orange once per surface:
|
|
85
|
-
primary action, focus ring, active nav; if two things want it, one is not primary. Page
|
|
86
|
-
titles wear 400 with negative tracking. Show real code chrome in mono, not a light mockup
|
|
87
|
-
of it. Depth is the cream-to-white step; dark is authored — consult the block, never
|
|
88
|
-
derive.
|
|
89
|
-
|
|
90
|
-
```yaml design-values
|
|
91
|
-
color:
|
|
92
|
-
light:
|
|
93
|
-
background: oklch(0.975 0.005 106)
|
|
94
|
-
foreground: oklch(0.26 0.012 100)
|
|
95
|
-
card: oklch(0.995 0.005 100)
|
|
96
|
-
card-foreground: oklch(0.26 0.012 100)
|
|
97
|
-
popover: oklch(0.995 0.005 100)
|
|
98
|
-
popover-foreground: oklch(0.26 0.012 100)
|
|
99
|
-
primary: oklch(0.652 0.214 38)
|
|
100
|
-
primary-foreground: oklch(0.13 0.01 45)
|
|
101
|
-
secondary: oklch(0.948 0.008 99)
|
|
102
|
-
secondary-foreground: oklch(0.26 0.012 100)
|
|
103
|
-
muted: oklch(0.948 0.008 99)
|
|
104
|
-
muted-foreground: oklch(0.5 0.016 95)
|
|
105
|
-
accent: oklch(0.93 0.011 95)
|
|
106
|
-
accent-foreground: oklch(0.26 0.012 100)
|
|
107
|
-
destructive: oklch(0.566 0.197 12)
|
|
108
|
-
destructive-foreground: oklch(0.98 0.008 12)
|
|
109
|
-
success: oklch(0.565 0.11 164)
|
|
110
|
-
warning: oklch(0.661 0.121 72)
|
|
111
|
-
border: oklch(0.921 0.007 97)
|
|
112
|
-
input: oklch(0.921 0.007 97)
|
|
113
|
-
ring: oklch(0.652 0.214 38)
|
|
114
|
-
surface-raised: oklch(0.985 0.005 100)
|
|
115
|
-
surface-overlay: oklch(0.995 0.005 100)
|
|
116
|
-
chart-1: oklch(0.68 0.15 45)
|
|
117
|
-
chart-2: oklch(0.72 0.11 160)
|
|
118
|
-
chart-3: oklch(0.65 0.11 245)
|
|
119
|
-
chart-4: oklch(0.65 0.11 295)
|
|
120
|
-
chart-5: oklch(0.75 0.12 85)
|
|
121
|
-
sidebar: oklch(0.965 0.006 103)
|
|
122
|
-
sidebar-foreground: oklch(0.26 0.012 100)
|
|
123
|
-
sidebar-primary: oklch(0.652 0.214 38)
|
|
124
|
-
sidebar-primary-foreground: oklch(0.13 0.01 45)
|
|
125
|
-
sidebar-accent: oklch(0.93 0.011 95)
|
|
126
|
-
sidebar-accent-foreground: oklch(0.26 0.012 100)
|
|
127
|
-
sidebar-border: oklch(0.921 0.007 97)
|
|
128
|
-
sidebar-ring: oklch(0.652 0.214 38)
|
|
129
|
-
dark:
|
|
130
|
-
background: oklch(0.18 0.008 95)
|
|
131
|
-
foreground: oklch(0.93 0.008 98)
|
|
132
|
-
card: oklch(0.21 0.009 95)
|
|
133
|
-
card-foreground: oklch(0.93 0.008 98)
|
|
134
|
-
popover: oklch(0.28 0.01 95)
|
|
135
|
-
popover-foreground: oklch(0.93 0.008 98)
|
|
136
|
-
primary: oklch(0.652 0.214 38)
|
|
137
|
-
primary-foreground: oklch(0.13 0.01 45)
|
|
138
|
-
secondary: oklch(0.26 0.01 95)
|
|
139
|
-
secondary-foreground: oklch(0.9 0.008 98)
|
|
140
|
-
muted: oklch(0.25 0.01 95)
|
|
141
|
-
muted-foreground: oklch(0.72 0.012 95)
|
|
142
|
-
accent: oklch(0.3 0.012 95)
|
|
143
|
-
accent-foreground: oklch(0.93 0.008 98)
|
|
144
|
-
destructive: oklch(0.64 0.19 15)
|
|
145
|
-
destructive-foreground: oklch(0.14 0.02 15)
|
|
146
|
-
success: oklch(0.68 0.12 164)
|
|
147
|
-
warning: oklch(0.75 0.13 75)
|
|
148
|
-
border: oklch(0.29 0.01 95)
|
|
149
|
-
input: oklch(0.29 0.01 95)
|
|
150
|
-
ring: oklch(0.652 0.214 38)
|
|
151
|
-
surface-raised: oklch(0.23 0.009 95)
|
|
152
|
-
surface-overlay: oklch(0.28 0.01 95)
|
|
153
|
-
chart-1: oklch(0.75 0.13 45)
|
|
154
|
-
chart-2: oklch(0.78 0.11 160)
|
|
155
|
-
chart-3: oklch(0.72 0.11 245)
|
|
156
|
-
chart-4: oklch(0.72 0.11 295)
|
|
157
|
-
chart-5: oklch(0.8 0.12 85)
|
|
158
|
-
sidebar: oklch(0.16 0.008 95)
|
|
159
|
-
sidebar-foreground: oklch(0.9 0.008 98)
|
|
160
|
-
sidebar-primary: oklch(0.652 0.214 38)
|
|
161
|
-
sidebar-primary-foreground: oklch(0.13 0.01 45)
|
|
162
|
-
sidebar-accent: oklch(0.24 0.01 95)
|
|
163
|
-
sidebar-accent-foreground: oklch(0.92 0.008 98)
|
|
164
|
-
sidebar-border: oklch(0.26 0.01 95)
|
|
165
|
-
sidebar-ring: oklch(0.652 0.214 38)
|
|
166
|
-
typography:
|
|
167
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400] }
|
|
168
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
169
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
170
|
-
ramp:
|
|
171
|
-
display: { size: 28px, line: 34px, weight: 400, family: display, tracking: -0.02em }
|
|
172
|
-
h1: { size: 24px, line: 29px, weight: 400, family: display, tracking: -0.015em }
|
|
173
|
-
h2: { size: 20px, line: 26px, weight: 400, family: display, tracking: -0.01em }
|
|
174
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
175
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
176
|
-
caption: { size: 12px, line: 17px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
177
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
178
|
-
register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, code, logs, ids, timestamps] }
|
|
179
|
-
elevation:
|
|
180
|
-
radius: { sm: 8px, md: 10px, lg: 14px }
|
|
181
|
-
hairline: border
|
|
182
|
-
shadow:
|
|
183
|
-
overlay: "0 8px 28px oklch(0.3 0.02 80 / 0.12)"
|
|
184
|
-
popover: "0 4px 14px oklch(0.3 0.02 80 / 0.08)"
|
|
185
|
-
dark-ladder: { background: 0.18, raised: 0.23, overlay: 0.28, hue-held: 95 }
|
|
186
|
-
motion:
|
|
187
|
-
duration: { press: 110ms, fade: 150ms, panel: 220ms }
|
|
188
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
189
|
-
entrance-never: ease-in
|
|
190
|
-
identity-moments: [auth, first-run-empty]
|
|
191
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
192
|
-
charts:
|
|
193
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
194
|
-
sequential: { from: background, to: chart-1 }
|
|
195
|
-
diverging: { negative: destructive, mid: muted, positive: chart-2 }
|
|
196
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 64px, side-panel: [440px, 640px], content-max: 1360px }
|
|
197
|
-
```
|