@nurix/etna 0.19.49 → 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/hooks/hooks.json +3 -1
- 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/hooks/hooks.json +3 -1
- 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,205 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: cohere
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [enterprise-ai, ml-platform, dev-tools]
|
|
6
|
-
keywords: [editorial, monochrome, white, action-blue, spacious, carved]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 cohere entry (2026-07-04) + 2026-07-12 re-audit of the enterprise-AI editorial system; Inter Variable substitutes Unica77 Cohere Web, JetBrains Mono substitutes CohereMono; the hero display faces (96/72/60px), pill CTAs, coral taxonomy, and green/navy media bands stay behind; deep-green and navy survive only as chart hues; dark theme authored (public web is light only)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# cohere — a museum reading room with one blue thread
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A museum reading room: a stark white wall, black wayfinding type, one warm stone bench,
|
|
16
|
-
and a single blue thread marking the path through. Light by default; the shell is
|
|
17
|
-
austere black-and-white — a white canvas, near-black ink, and one chromatic accent,
|
|
18
|
-
action-blue, reserved for links, selection, and the one detail that must read as
|
|
19
|
-
clickable. The primary action wears near-black `primary`, not a color — color arrives
|
|
20
|
-
through data, never chrome. A warm soft-stone `secondary` keeps the system editorial.
|
|
21
|
-
Emphatically flat, and spacious: whitespace is the trust signal, so rows run tall.
|
|
22
|
-
|
|
23
|
-
## 2 Color Roles
|
|
24
|
-
Near-black `foreground` on white `background`; `primary` is near-black — the neutral
|
|
25
|
-
that carries the one primary action and active nav. `accent-foreground` action-blue is
|
|
26
|
-
the only chromatic hue with interactive meaning — links, selection, the single
|
|
27
|
-
clickable detail — over a pale-blue `accent` wash. `secondary` soft-stone is the warm
|
|
28
|
-
mineral surface. Status hues speak status only; deep-green and navy survive only as
|
|
29
|
-
chart hues. Sidebar sits a faint step off the white in both themes.
|
|
30
|
-
|
|
31
|
-
## 3 Typography
|
|
32
|
-
Inter (single voice — the open substitute for Unica77 Cohere Web) / JetBrains Mono (IDs,
|
|
33
|
-
timestamps, and the uppercase system/taxonomy labels — substitute for CohereMono).
|
|
34
|
-
Register scope: no hero display face — Inter carries headings, kept tight and carved by
|
|
35
|
-
size and tracking, not heavy weight. Uppercase mono labels mark categories and systems;
|
|
36
|
-
every numeric column renders `tabular-nums`. Emphasis bumps weight one step, never size.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-md` (8px, never pill — the 32px pill is marketing-only), near-black
|
|
40
|
-
`primary` fill; secondary takes soft-stone `secondary` with a hairline; ghost goes
|
|
41
|
-
`accent` on hover. Inputs on `background` with a hairline `input` edge and a 2px
|
|
42
|
-
focus-blue `ring`, no glow. Cards flat on `card` with a hairline, `radius-lg` for large
|
|
43
|
-
panels; shadow only for a true overlay. Table rows tall and editorial, `muted` hover,
|
|
44
|
-
`accent` selection, mono numerals. Detail opens in the side panel. Badges: hairline,
|
|
45
|
-
`muted`/status fill, uppercase mono label, never `primary` or `accent-foreground`.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
8px base; ramp 2 · 6 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80 (the 80 preserves the
|
|
49
|
-
dramatic section breathing). Sidebar 264/60px; topbar 60px; side panel 440/680px; content
|
|
50
|
-
max 1320px; tables full-width. Spacious globally — whitespace is the trust signal —
|
|
51
|
-
stepped per archetype, never absolute overrides.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Emphatically flat — surface alternation, hairlines, and warm `secondary` blocks carry
|
|
55
|
-
rank, never drop shadows. Light: overlays earn the one soft cool-tinted tier. Dark: the
|
|
56
|
-
authored ladder — `background` 0.20 L, `surface-raised` +0.04, `surface-overlay` +0.08,
|
|
57
|
-
hue held at 285. Focus is a 2px focus-blue `ring`, always visible; three z-levels:
|
|
58
|
-
content, sticky chrome, overlay.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Reserved and editorial. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
62
|
-
`page-fade` (content arrive, 160ms), `press` (primary action, 120ms). Physicality is
|
|
63
|
-
granted only to auth and first-run empty states; nothing animates in tables or any
|
|
64
|
-
keyboard-initiated action.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
68
|
-
no gridline fills; the categorical ramp spends action-blue then the surviving marketing
|
|
69
|
-
hues — blue, deep-green, navy, burnt-coral, slate (`chart-1..5`); tooltips on
|
|
70
|
-
`surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
Precise and quiet — enterprise calm, no exclamation. "Run evaluation" · "Nothing to
|
|
74
|
-
review — the last batch cleared this morning" · "This model version is deprecated; pin a
|
|
75
|
-
supported one before deploying."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do reserve near-black `primary` for the single most important action and keep the shell
|
|
79
|
-
monochrome. Do let action-blue `accent-foreground` be the one chromatic hue — links,
|
|
80
|
-
selection, focus. Do carry the grid with hairlines and surface alternation. Don't pill
|
|
81
|
-
the CTA — the 32px pill stays in marketing. Don't turn coral, deep-green, or navy into
|
|
82
|
-
decorative surface fills — they are media-band and taxonomy colors, not chrome. Don't add
|
|
83
|
-
heavy drop shadows or promote a second chromatic accent.
|
|
84
|
-
|
|
85
|
-
## 11 Responsive
|
|
86
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
87
|
-
metadata drops below the title. 768: sidebar → icon rail; card grids 3→2; tables scroll
|
|
88
|
-
overflow. 1024: two-pane queue+detail holds; 3-column grids return. 1440: forms cap;
|
|
89
|
-
tables and dashboards take the full width with generous section intervals.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Reach first for the monochrome shell: white canvas, near-black `primary`, hairline
|
|
93
|
-
borders. One chromatic accent — action-blue for links, selection, focus; a second hue as
|
|
94
|
-
chrome is wrong. Honor the editorial calm: spacious density, tall rows, generous section
|
|
95
|
-
gaps. Uppercase mono labels mark categories; every numeric column is mono `tabular-nums`.
|
|
96
|
-
Dark is authored — consult the block, never derive.
|
|
97
|
-
|
|
98
|
-
```yaml design-values
|
|
99
|
-
color:
|
|
100
|
-
light:
|
|
101
|
-
background: oklch(0.99 0.005 270)
|
|
102
|
-
foreground: oklch(0.24 0.008 285)
|
|
103
|
-
card: oklch(0.995 0.004 270)
|
|
104
|
-
card-foreground: oklch(0.24 0.008 285)
|
|
105
|
-
popover: oklch(0.995 0.004 270)
|
|
106
|
-
popover-foreground: oklch(0.24 0.008 285)
|
|
107
|
-
primary: oklch(0.22 0.012 285)
|
|
108
|
-
primary-foreground: oklch(0.98 0.004 270)
|
|
109
|
-
secondary: oklch(0.94 0.008 88)
|
|
110
|
-
secondary-foreground: oklch(0.28 0.010 285)
|
|
111
|
-
muted: oklch(0.965 0.005 270)
|
|
112
|
-
muted-foreground: oklch(0.49 0.010 285)
|
|
113
|
-
accent: oklch(0.96 0.014 265)
|
|
114
|
-
accent-foreground: oklch(0.50 0.18 260)
|
|
115
|
-
destructive: oklch(0.50 0.19 29)
|
|
116
|
-
destructive-foreground: oklch(0.98 0.01 29)
|
|
117
|
-
success: oklch(0.58 0.13 150)
|
|
118
|
-
warning: oklch(0.62 0.14 45)
|
|
119
|
-
border: oklch(0.89 0.006 285)
|
|
120
|
-
input: oklch(0.89 0.006 285)
|
|
121
|
-
ring: oklch(0.58 0.18 268)
|
|
122
|
-
surface-raised: oklch(0.985 0.005 270)
|
|
123
|
-
surface-overlay: oklch(0.995 0.004 270)
|
|
124
|
-
chart-1: oklch(0.50 0.18 260)
|
|
125
|
-
chart-2: oklch(0.45 0.10 155)
|
|
126
|
-
chart-3: oklch(0.38 0.12 265)
|
|
127
|
-
chart-4: oklch(0.62 0.15 45)
|
|
128
|
-
chart-5: oklch(0.55 0.06 285)
|
|
129
|
-
sidebar: oklch(0.965 0.006 270)
|
|
130
|
-
sidebar-foreground: oklch(0.24 0.008 285)
|
|
131
|
-
sidebar-primary: oklch(0.22 0.012 285)
|
|
132
|
-
sidebar-primary-foreground: oklch(0.98 0.004 270)
|
|
133
|
-
sidebar-accent: oklch(0.95 0.014 265)
|
|
134
|
-
sidebar-accent-foreground: oklch(0.44 0.16 260)
|
|
135
|
-
sidebar-border: oklch(0.89 0.006 285)
|
|
136
|
-
sidebar-ring: oklch(0.58 0.18 268)
|
|
137
|
-
dark:
|
|
138
|
-
background: oklch(0.20 0.008 285)
|
|
139
|
-
foreground: oklch(0.95 0.005 270)
|
|
140
|
-
card: oklch(0.24 0.009 285)
|
|
141
|
-
card-foreground: oklch(0.95 0.005 270)
|
|
142
|
-
popover: oklch(0.27 0.009 285)
|
|
143
|
-
popover-foreground: oklch(0.95 0.005 270)
|
|
144
|
-
primary: oklch(0.95 0.005 270)
|
|
145
|
-
primary-foreground: oklch(0.20 0.008 285)
|
|
146
|
-
secondary: oklch(0.26 0.010 88)
|
|
147
|
-
secondary-foreground: oklch(0.90 0.006 270)
|
|
148
|
-
muted: oklch(0.24 0.009 285)
|
|
149
|
-
muted-foreground: oklch(0.68 0.012 285)
|
|
150
|
-
accent: oklch(0.30 0.04 265)
|
|
151
|
-
accent-foreground: oklch(0.80 0.10 262)
|
|
152
|
-
destructive: oklch(0.60 0.19 29)
|
|
153
|
-
destructive-foreground: oklch(0.15 0.02 29)
|
|
154
|
-
success: oklch(0.68 0.13 150)
|
|
155
|
-
warning: oklch(0.70 0.14 45)
|
|
156
|
-
border: oklch(0.30 0.010 285)
|
|
157
|
-
input: oklch(0.30 0.010 285)
|
|
158
|
-
ring: oklch(0.62 0.16 268)
|
|
159
|
-
surface-raised: oklch(0.24 0.009 285)
|
|
160
|
-
surface-overlay: oklch(0.28 0.010 285)
|
|
161
|
-
chart-1: oklch(0.62 0.16 260)
|
|
162
|
-
chart-2: oklch(0.62 0.12 155)
|
|
163
|
-
chart-3: oklch(0.58 0.14 265)
|
|
164
|
-
chart-4: oklch(0.70 0.15 45)
|
|
165
|
-
chart-5: oklch(0.68 0.06 285)
|
|
166
|
-
sidebar: oklch(0.18 0.008 285)
|
|
167
|
-
sidebar-foreground: oklch(0.90 0.006 270)
|
|
168
|
-
sidebar-primary: oklch(0.95 0.005 270)
|
|
169
|
-
sidebar-primary-foreground: oklch(0.20 0.008 285)
|
|
170
|
-
sidebar-accent: oklch(0.28 0.035 265)
|
|
171
|
-
sidebar-accent-foreground: oklch(0.82 0.09 262)
|
|
172
|
-
sidebar-border: oklch(0.26 0.010 285)
|
|
173
|
-
sidebar-ring: oklch(0.62 0.16 268)
|
|
174
|
-
typography:
|
|
175
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [500] }
|
|
176
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
177
|
-
mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
178
|
-
ramp:
|
|
179
|
-
display: { size: 28px, line: 34px, weight: 500, family: display, tracking: -0.02em }
|
|
180
|
-
h1: { size: 24px, line: 31px, weight: 500, family: sans, tracking: -0.015em }
|
|
181
|
-
h2: { size: 20px, line: 26px, weight: 600, family: sans, tracking: -0.01em }
|
|
182
|
-
body: { size: 15px, line: 23px, weight: 400, family: sans }
|
|
183
|
-
small: { size: 13px, line: 19px, weight: 400, family: sans }
|
|
184
|
-
caption: { size: 13px, line: 18px, weight: 500, family: mono, tracking: 0.02em, transform: uppercase }
|
|
185
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
186
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, labels] }
|
|
187
|
-
elevation:
|
|
188
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
189
|
-
hairline: border
|
|
190
|
-
shadow:
|
|
191
|
-
overlay: "0 8px 30px oklch(0.22 0.02 285 / 0.10)"
|
|
192
|
-
popover: "0 4px 16px oklch(0.22 0.02 285 / 0.08)"
|
|
193
|
-
dark-ladder: { background: 0.20, raised: 0.24, overlay: 0.28, hue-held: 285 }
|
|
194
|
-
motion:
|
|
195
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
196
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
197
|
-
entrance-never: ease-in
|
|
198
|
-
identity-moments: [auth, first-run-empty]
|
|
199
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
200
|
-
charts:
|
|
201
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
202
|
-
sequential: { from: background, to: chart-1 }
|
|
203
|
-
diverging: { negative: chart-4, mid: muted, positive: chart-2 }
|
|
204
|
-
layout: { base: 8px, sidebar: [264px, 60px], topbar: 60px, side-panel: [440px, 680px], content-max: 1320px }
|
|
205
|
-
```
|
|
@@ -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
|
-
```
|