@nurix/etna 0.19.50 → 0.19.52
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,206 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: spacex
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [aerospace, mission-ops, telemetry]
|
|
6
|
-
keywords: [black, achromatic, uppercase, condensed, dense, dark-default]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 spacex entry (2026-07-04); 2026-07-12 re-audit of spacex.com public identity. Proprietary D-DIN substituted with Barlow Semi Condensed (closest open condensed-industrial face; v1 fallback was Arial Narrow); mono is Space Mono (v1-named derived addition)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# spacex — a launch-control room at night
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A launch-control room at night: matte-black consoles edge to edge, telemetry etched
|
|
16
|
-
in white condensed capitals, one guarded white GO button. Categorically dark — pure
|
|
17
|
-
black `background` is the load-bearing brand fact, the one entry where the
|
|
18
|
-
light-default floor legitimately yields; the light theme is the opt-in shop-surface
|
|
19
|
-
inversion. Flat and shadowless: cards lift off pure black by the surface step and a
|
|
20
|
-
cool hairline alone. There is no chromatic accent — the accent is achromatic white.
|
|
21
|
-
Density is dense: a mission console, not a brochure.
|
|
22
|
-
|
|
23
|
-
## 2 Color Roles
|
|
24
|
-
White `foreground` on pure black; `primary` is white — the single achromatic accent
|
|
25
|
-
carrying the one action, which inverts to white-on-black. Every neutral in the
|
|
26
|
-
ladder holds a faint cool tint; only the canvas itself is allowed to be absolute.
|
|
27
|
-
Selection lifts the near-black `accent`, it does not colour it. `ring` is white —
|
|
28
|
-
maximally visible, keyboard-first. The telemetry set — `destructive` abort-red,
|
|
29
|
-
`success` nominal-green, `warning` caution-amber — speaks only status and charts.
|
|
30
|
-
|
|
31
|
-
## 3 Typography
|
|
32
|
-
Barlow Semi Condensed (UI) / Space Mono (telemetry, IDs, timestamps). The brand
|
|
33
|
-
jumps 400 → 700 with no mid weight. Titles and eyebrows are UPPERCASE with the
|
|
34
|
-
signature *positive* tracking — the one operator brand that tracks out, not in; body
|
|
35
|
-
carries a faint positive tracking so the whole system reads engineered. Register
|
|
36
|
-
scope: display is the condensed face at 700 in caps only; mono owns every telemetry
|
|
37
|
-
figure. Numeric columns render `tabular-nums`; emphasis is weight, never size.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons tight `radius-sm`, white `primary` fill with black label, UPPERCASE tracked;
|
|
41
|
-
the 32px ghost pill — transparent, hairline, white caps — is reserved for a lone
|
|
42
|
-
hero confirm (launch, deploy), never two side by side. Inputs on `card` with
|
|
43
|
-
hairline `input` edge and the white `ring` at focus. Cards lift by the surface step
|
|
44
|
-
plus hairline, never shadow. Table rows hairline grid, `muted` hover, `accent`
|
|
45
|
-
selection, mono telemetry columns. Detail opens in the side panel. Badges hairline,
|
|
46
|
-
UPPERCASE caption, status fills only.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
4px base with the corpus's signature 18px step in button padding; sidebar 240/52px;
|
|
50
|
-
topbar 52px; side panel 420/640px; content max 1440px — telemetry uses the full
|
|
51
|
-
width. Density dense throughout; the museum negative space stays behind.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Zero-shadow flat. Elevation is the near-black surface ladder plus cool hairlines:
|
|
55
|
-
canvas at absolute black, `surface-raised` and `card` one step up, `surface-overlay`
|
|
56
|
-
a second step for floating chrome — even overlays prefer the hairline to a shadow.
|
|
57
|
-
The dark ladder is authored — 0.0 → 0.13 → 0.20 L, cool hue held at 285. Light
|
|
58
|
-
theme: same flat discipline on the white shop surface.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Near-instant, engineered — nothing eases languidly in a control room. Named moments:
|
|
62
|
-
`state-latch` (status change, 80ms), `console-fade` (page content, 120ms),
|
|
63
|
-
`panel-slide` (side panel, 200ms, interruptible). Physicality is granted only to the
|
|
64
|
-
lone hero confirm. Nothing animates in telemetry tables or keyboard-initiated
|
|
65
|
-
actions.
|
|
66
|
-
|
|
67
|
-
## 8 Iconography & Charts
|
|
68
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
69
|
-
axes, no fills, no glow; the categorical ramp leads achromatic white then the
|
|
70
|
-
telemetry set — nominal-green, caution-amber, abort-red, cool gray (`chart-1..5`);
|
|
71
|
-
tooltips on `surface-overlay` with mono numerals.
|
|
72
|
-
|
|
73
|
-
## 9 Voice
|
|
74
|
-
Mission-control terse: systems language, no first person, every figure exact.
|
|
75
|
-
"INITIATE TRANSFER" · "ALL SYSTEMS NOMINAL — NEXT WINDOW 04:32 UTC" · "ABORT
|
|
76
|
-
CRITERIA MET: PRESSURE OUT OF BOUNDS ON LOOP B."
|
|
77
|
-
|
|
78
|
-
## 10 Do's & Don'ts
|
|
79
|
-
Do keep the canvas pure black — cards lift by the surface step plus hairline, never
|
|
80
|
-
shadow. Do set titles and eyebrows UPPERCASE, condensed, positively tracked. Do
|
|
81
|
-
carry telemetry in mono with tabular figures. Don't introduce a chromatic brand
|
|
82
|
-
accent — black, white, and the telemetry hues are the entire palette. Don't render
|
|
83
|
-
titles in sentence case. Don't pill operator controls — the 32px pill is the lone
|
|
84
|
-
hero CTA only. Don't reach for a serif or humanist heading.
|
|
85
|
-
|
|
86
|
-
## 11 Responsive
|
|
87
|
-
375: sidebar → drawer, side panel → full sheet, h1 steps down first — the display
|
|
88
|
-
shrinks before the data does. 768: sidebar collapses to the icon rail; tables scroll
|
|
89
|
-
overflow. 1024/1440: console + detail holds side by side; telemetry takes the full
|
|
90
|
-
width.
|
|
91
|
-
|
|
92
|
-
## 12 Agent Prompt Guide
|
|
93
|
-
Start from pure black and earn every step up the ladder. One accent, and it is
|
|
94
|
-
white — if two things want it, one is not primary. UPPERCASE positive-tracked caps on
|
|
95
|
-
every title and eyebrow. Every telemetry column mono and tabular. The ghost pill
|
|
96
|
-
appears once or not at all. Light is the opt-in shop surface; dark is the identity —
|
|
97
|
-
consult the block, never derive.
|
|
98
|
-
|
|
99
|
-
```yaml design-values
|
|
100
|
-
color:
|
|
101
|
-
light:
|
|
102
|
-
background: oklch(0.99 0.005 285)
|
|
103
|
-
foreground: oklch(0.13 0.008 285)
|
|
104
|
-
card: oklch(0.995 0.005 285)
|
|
105
|
-
card-foreground: oklch(0.13 0.008 285)
|
|
106
|
-
popover: oklch(0.995 0.005 285)
|
|
107
|
-
popover-foreground: oklch(0.13 0.008 285)
|
|
108
|
-
primary: oklch(0.13 0.008 285)
|
|
109
|
-
primary-foreground: oklch(0.99 0.005 285)
|
|
110
|
-
secondary: oklch(0.96 0.006 285)
|
|
111
|
-
secondary-foreground: oklch(0.2 0.01 285)
|
|
112
|
-
muted: oklch(0.955 0.006 285)
|
|
113
|
-
muted-foreground: oklch(0.48 0.012 285)
|
|
114
|
-
accent: oklch(0.94 0.008 285)
|
|
115
|
-
accent-foreground: oklch(0.2 0.01 285)
|
|
116
|
-
destructive: oklch(0.55 0.2 28)
|
|
117
|
-
destructive-foreground: oklch(0.99 0.005 28)
|
|
118
|
-
success: oklch(0.55 0.15 148)
|
|
119
|
-
warning: oklch(0.6 0.14 67)
|
|
120
|
-
border: oklch(0.909 0.011 286)
|
|
121
|
-
input: oklch(0.909 0.011 286)
|
|
122
|
-
ring: oklch(0.13 0.008 285)
|
|
123
|
-
surface-raised: oklch(0.985 0.005 285)
|
|
124
|
-
surface-overlay: oklch(0.995 0.005 285)
|
|
125
|
-
chart-1: oklch(0.25 0.01 285)
|
|
126
|
-
chart-2: oklch(0.55 0.15 148)
|
|
127
|
-
chart-3: oklch(0.6 0.14 67)
|
|
128
|
-
chart-4: oklch(0.55 0.2 28)
|
|
129
|
-
chart-5: oklch(0.55 0.04 285)
|
|
130
|
-
sidebar: oklch(0.97 0.006 285)
|
|
131
|
-
sidebar-foreground: oklch(0.15 0.01 285)
|
|
132
|
-
sidebar-primary: oklch(0.13 0.008 285)
|
|
133
|
-
sidebar-primary-foreground: oklch(0.99 0.005 285)
|
|
134
|
-
sidebar-accent: oklch(0.93 0.008 285)
|
|
135
|
-
sidebar-accent-foreground: oklch(0.18 0.01 285)
|
|
136
|
-
sidebar-border: oklch(0.9 0.01 285)
|
|
137
|
-
sidebar-ring: oklch(0.13 0.008 285)
|
|
138
|
-
dark:
|
|
139
|
-
background: oklch(0 0 0)
|
|
140
|
-
foreground: oklch(1 0 0)
|
|
141
|
-
card: oklch(0.15 0.006 285)
|
|
142
|
-
card-foreground: oklch(1 0 0)
|
|
143
|
-
popover: oklch(0.22 0.008 285)
|
|
144
|
-
popover-foreground: oklch(1 0 0)
|
|
145
|
-
primary: oklch(1 0 0)
|
|
146
|
-
primary-foreground: oklch(0 0 0)
|
|
147
|
-
secondary: oklch(0.24 0.015 285)
|
|
148
|
-
secondary-foreground: oklch(0.9 0.01 285)
|
|
149
|
-
muted: oklch(0.19 0.006 285)
|
|
150
|
-
muted-foreground: oklch(0.64 0.012 285)
|
|
151
|
-
accent: oklch(0.239 0.015 285)
|
|
152
|
-
accent-foreground: oklch(0.93 0.01 285)
|
|
153
|
-
destructive: oklch(0.663 0.224 28)
|
|
154
|
-
destructive-foreground: oklch(0.13 0.02 28)
|
|
155
|
-
success: oklch(0.77 0.224 145)
|
|
156
|
-
warning: oklch(0.782 0.171 67)
|
|
157
|
-
border: oklch(0.35 0.009 285)
|
|
158
|
-
input: oklch(0.35 0.009 285)
|
|
159
|
-
ring: oklch(1 0 0)
|
|
160
|
-
surface-raised: oklch(0.13 0.006 285)
|
|
161
|
-
surface-overlay: oklch(0.2 0.008 285)
|
|
162
|
-
chart-1: oklch(0.92 0.005 285)
|
|
163
|
-
chart-2: oklch(0.77 0.224 145)
|
|
164
|
-
chart-3: oklch(0.782 0.171 67)
|
|
165
|
-
chart-4: oklch(0.663 0.224 28)
|
|
166
|
-
chart-5: oklch(0.6 0.012 285)
|
|
167
|
-
sidebar: oklch(0.13 0.006 285)
|
|
168
|
-
sidebar-foreground: oklch(0.9 0.008 285)
|
|
169
|
-
sidebar-primary: oklch(1 0 0)
|
|
170
|
-
sidebar-primary-foreground: oklch(0 0 0)
|
|
171
|
-
sidebar-accent: oklch(0.21 0.01 285)
|
|
172
|
-
sidebar-accent-foreground: oklch(0.93 0.008 285)
|
|
173
|
-
sidebar-border: oklch(0.28 0.008 285)
|
|
174
|
-
sidebar-ring: oklch(1 0 0)
|
|
175
|
-
typography:
|
|
176
|
-
display: { family: "Barlow Semi Condensed", fallback: "Arial Narrow, sans-serif", weights: [700] }
|
|
177
|
-
sans: { family: "Barlow Semi Condensed", fallback: "Arial Narrow, sans-serif", weights: [400, 700] }
|
|
178
|
-
mono: { family: "Space Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
179
|
-
ramp:
|
|
180
|
-
display: { size: 28px, line: 31px, weight: 700, family: sans, tracking: 0.06em, transform: uppercase }
|
|
181
|
-
h1: { size: 24px, line: 26px, weight: 700, family: sans, tracking: 0.06em, transform: uppercase }
|
|
182
|
-
h2: { size: 18px, line: 22px, weight: 700, family: sans, tracking: 0.06em, transform: uppercase }
|
|
183
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans, tracking: 0.01em }
|
|
184
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
185
|
-
caption: { size: 12px, line: 17px, weight: 400, family: sans, tracking: 0.08em, transform: uppercase }
|
|
186
|
-
data: { size: 13px, line: 18px, weight: 400, family: mono, features: [tnum] }
|
|
187
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps, telemetry] }
|
|
188
|
-
elevation:
|
|
189
|
-
radius: { sm: 2px, md: 4px, lg: 8px, pill: 32px }
|
|
190
|
-
hairline: border
|
|
191
|
-
shadow:
|
|
192
|
-
overlay: "0 4px 16px oklch(0.1 0.008 285 / 0.5)"
|
|
193
|
-
popover: "0 2px 8px oklch(0.1 0.008 285 / 0.4)"
|
|
194
|
-
dark-ladder: { background: 0.0, raised: 0.13, overlay: 0.2, hue-held: 285 }
|
|
195
|
-
motion:
|
|
196
|
-
duration: { press: 80ms, fade: 120ms, panel: 200ms }
|
|
197
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
198
|
-
entrance-never: ease-in
|
|
199
|
-
identity-moments: [hero-confirm]
|
|
200
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
201
|
-
charts:
|
|
202
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
203
|
-
sequential: { from: background, to: chart-1 }
|
|
204
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
205
|
-
layout: { base: 4px, sidebar: [240px, 52px], topbar: 52px, side-panel: [420px, 640px], content-max: 1440px }
|
|
206
|
-
```
|
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: spotify
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [media, entertainment, content-ops]
|
|
6
|
-
keywords: [near-black, green, dark-default, immersive, rounded]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 spotify entry (2026-07-04); 2026-07-12 re-audit of spotify.com public identity. Proprietary SpotifyMixUI/Circular substituted with DM Sans (closest open geometric face; v1 named Inter as corpus-adjacent); mono derived as Fira Mono (brand ships none)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# spotify — a listening booth after close
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A listening booth after close: matte near-black walls that swallow the light, felt
|
|
16
|
-
surfaces stepping subtly brighter toward the console, one green-lit play button
|
|
17
|
-
glowing in the dark. Dark by conviction — near-black, never pure black, is the
|
|
18
|
-
identity, and surfaces step up by lightness rather than by line. Depth is
|
|
19
|
-
shadow-carried, inverting the flat default, because on near-black a hairline all but
|
|
20
|
-
vanishes. The light theme is the opt-in artist-dashboard reading. Density dense:
|
|
21
|
-
dark compression, built for scanning.
|
|
22
|
-
|
|
23
|
-
## 2 Color Roles
|
|
24
|
-
White `foreground` on the near-black `background`; one accent — the signature green
|
|
25
|
-
`primary` — carries the one action, active nav, and play, with black
|
|
26
|
-
`primary-foreground` always (never white on green). Selection is a neutral surface
|
|
27
|
-
lift (`accent`), never a green wash. On the otherwise achromatic field the green and
|
|
28
|
-
the status hues are the only color — scarcity is doubly load-bearing. Announcement
|
|
29
|
-
blue is `chart-2`, an info hue, never a second brand accent; the deeper green
|
|
30
|
-
`success` is status, distinct from the bright accent.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
DM Sans (UI, headings — the geometric voice, bold/regular binary) / Fira Mono (IDs,
|
|
34
|
-
timestamps, amounts). Most text is 700 or 400; hierarchy comes from weight contrast,
|
|
35
|
-
not size, and type stays compact, tuned for scanning. The uppercase wide-tracked
|
|
36
|
-
label voice survives on eyebrows and section labels only — never on buttons.
|
|
37
|
-
Register scope: no display face; mono owns every numeric column with
|
|
38
|
-
`tabular-nums`.
|
|
39
|
-
|
|
40
|
-
## 4 Component Stylings
|
|
41
|
-
Buttons `radius-md`, green `primary` fill with black label, sentence case; icon-only
|
|
42
|
-
controls stay circular — the one piece of pill-and-circle geometry that carries;
|
|
43
|
-
badges and chips take the pill. Inputs sit on the `secondary` surface with an inset
|
|
44
|
-
edge, green `ring` at focus. Cards hover by lightening a surface step, not by
|
|
45
|
-
drawing a border. Table rows separate by surface-lightening or a subtle `border`,
|
|
46
|
-
`accent` selection, mono numerals. Detail opens in the side panel.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
8px base with a fine dense low end; sidebar 256/64px; topbar 64px — the generous
|
|
50
|
-
search chrome; side panel 420/640px; content max 1336px. An optional persistent
|
|
51
|
-
transport/status bar may run full-width at the bottom in a media tool. Density is
|
|
52
|
-
dark compression throughout.
|
|
53
|
-
|
|
54
|
-
## 6 Depth
|
|
55
|
-
Shadow-carried: surfaces step by lightness and elevated chrome rides heavy
|
|
56
|
-
green-tinted near-black shadows — the dramatic floating-in-darkness lift; inputs
|
|
57
|
-
read as inset edges, never exposed gray lines. The dark ladder is authored — 0.18 →
|
|
58
|
-
0.24 → 0.28 L, hue held at 155 with a whisper of green in every neutral. Light
|
|
59
|
-
theme: flat hairline discipline, the darkness stays behind.
|
|
60
|
-
|
|
61
|
-
## 7 Motion
|
|
62
|
-
Smooth and unhurried, like a crossfade. Named moments: `surface-lift` (card hover
|
|
63
|
-
lighten, 160ms), `panel-slide` (side panel, 240ms, interruptible), `play-press`
|
|
64
|
-
(primary action, 100ms). Physicality is granted only to first-run onboarding and the
|
|
65
|
-
empty-library state. Nothing animates in tables or keyboard-initiated actions.
|
|
66
|
-
|
|
67
|
-
## 8 Iconography & Charts
|
|
68
|
-
Lucide, 1.75px stroke, 16/20px grid, `muted-foreground` default; icon-only buttons
|
|
69
|
-
circular. Charts: no gridline fills, axes lightened surface steps; categorical ramp
|
|
70
|
-
green, blue, orange, pink-red, violet (`chart-1..5`); tooltips on `surface-overlay`
|
|
71
|
-
with mono numerals.
|
|
72
|
-
|
|
73
|
-
## 9 Voice
|
|
74
|
-
Direct and rhythmic, a set list not a memo: short verbs, no hype, numbers plain.
|
|
75
|
-
"Add to queue" · "Library empty — import your first catalog" · "That upload exceeds
|
|
76
|
-
the track limit; split the batch to continue."
|
|
77
|
-
|
|
78
|
-
## 10 Do's & Don'ts
|
|
79
|
-
Do anchor on near-black and carry depth through shade variation and heavy shadow.
|
|
80
|
-
Do keep black text on the green `primary` — never white. Do hold the bold/regular
|
|
81
|
-
binary and compact type. Don't add a second brand color — blue, orange, and pink-red
|
|
82
|
-
are status/chart roles. Don't use light surfaces as primary canvases in the dark
|
|
83
|
-
theme. Don't full-pill buttons or drop uppercase tracking onto every label. Don't
|
|
84
|
-
expose raw gray borders where a surface lift will do.
|
|
85
|
-
|
|
86
|
-
## 11 Responsive
|
|
87
|
-
375: sidebar → drawer (the nav-to-bottom-bar echo), side panel → full sheet, grids
|
|
88
|
-
stack. 768: sidebar collapses to the icon rail; grid 3→2; tables scroll overflow.
|
|
89
|
-
1024/1440: sidebar expands, grid opens 5→3, queue+detail holds side by side.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Start in near-black darkness; surfaces step by lightness, never by exposed borders.
|
|
93
|
-
One green, always: THE action, active nav, black on green. Depth is heavy shadow and
|
|
94
|
-
surface-lightening — the flat default is inverted here. Compact type, weight-binary
|
|
95
|
-
hierarchy, tabular mono numerals. Dark is the identity; light is the opt-in
|
|
96
|
-
artist-dashboard reading — consult the block, never derive.
|
|
97
|
-
|
|
98
|
-
```yaml design-values
|
|
99
|
-
color:
|
|
100
|
-
light:
|
|
101
|
-
background: oklch(0.985 0.005 155)
|
|
102
|
-
foreground: oklch(0.2 0.008 155)
|
|
103
|
-
card: oklch(0.995 0.005 155)
|
|
104
|
-
card-foreground: oklch(0.2 0.008 155)
|
|
105
|
-
popover: oklch(0.995 0.005 155)
|
|
106
|
-
popover-foreground: oklch(0.2 0.008 155)
|
|
107
|
-
primary: oklch(0.77 0.212 149)
|
|
108
|
-
primary-foreground: oklch(0.15 0.015 149)
|
|
109
|
-
secondary: oklch(0.955 0.006 155)
|
|
110
|
-
secondary-foreground: oklch(0.25 0.01 155)
|
|
111
|
-
muted: oklch(0.955 0.006 155)
|
|
112
|
-
muted-foreground: oklch(0.47 0.01 155)
|
|
113
|
-
accent: oklch(0.94 0.03 152)
|
|
114
|
-
accent-foreground: oklch(0.22 0.05 152)
|
|
115
|
-
destructive: oklch(0.55 0.19 18)
|
|
116
|
-
destructive-foreground: oklch(0.99 0.005 18)
|
|
117
|
-
success: oklch(0.55 0.14 152)
|
|
118
|
-
warning: oklch(0.62 0.14 67)
|
|
119
|
-
border: oklch(0.92 0.006 155)
|
|
120
|
-
input: oklch(0.9 0.007 155)
|
|
121
|
-
ring: oklch(0.55 0.15 152)
|
|
122
|
-
surface-raised: oklch(0.99 0.005 155)
|
|
123
|
-
surface-overlay: oklch(0.995 0.005 155)
|
|
124
|
-
chart-1: oklch(0.6 0.17 149)
|
|
125
|
-
chart-2: oklch(0.55 0.13 254)
|
|
126
|
-
chart-3: oklch(0.65 0.14 67)
|
|
127
|
-
chart-4: oklch(0.6 0.15 16)
|
|
128
|
-
chart-5: oklch(0.55 0.13 300)
|
|
129
|
-
sidebar: oklch(0.97 0.005 155)
|
|
130
|
-
sidebar-foreground: oklch(0.22 0.01 155)
|
|
131
|
-
sidebar-primary: oklch(0.7 0.19 149)
|
|
132
|
-
sidebar-primary-foreground: oklch(0.13 0.015 149)
|
|
133
|
-
sidebar-accent: oklch(0.93 0.02 152)
|
|
134
|
-
sidebar-accent-foreground: oklch(0.24 0.02 152)
|
|
135
|
-
sidebar-border: oklch(0.92 0.006 155)
|
|
136
|
-
sidebar-ring: oklch(0.55 0.15 152)
|
|
137
|
-
dark:
|
|
138
|
-
background: oklch(0.18 0.005 155)
|
|
139
|
-
foreground: oklch(0.97 0.005 155)
|
|
140
|
-
card: oklch(0.22 0.005 155)
|
|
141
|
-
card-foreground: oklch(0.97 0.005 155)
|
|
142
|
-
popover: oklch(0.28 0.006 155)
|
|
143
|
-
popover-foreground: oklch(0.97 0.005 155)
|
|
144
|
-
primary: oklch(0.77 0.212 149)
|
|
145
|
-
primary-foreground: oklch(0.15 0.015 149)
|
|
146
|
-
secondary: oklch(0.25 0.006 155)
|
|
147
|
-
secondary-foreground: oklch(0.93 0.005 155)
|
|
148
|
-
muted: oklch(0.24 0.005 155)
|
|
149
|
-
muted-foreground: oklch(0.77 0.008 155)
|
|
150
|
-
accent: oklch(0.28 0.006 155)
|
|
151
|
-
accent-foreground: oklch(0.95 0.005 155)
|
|
152
|
-
destructive: oklch(0.708 0.159 16)
|
|
153
|
-
destructive-foreground: oklch(0.13 0.02 16)
|
|
154
|
-
success: oklch(0.689 0.187 149)
|
|
155
|
-
warning: oklch(0.792 0.163 67)
|
|
156
|
-
border: oklch(0.285 0.005 155)
|
|
157
|
-
input: oklch(0.32 0.006 155)
|
|
158
|
-
ring: oklch(0.77 0.212 149)
|
|
159
|
-
surface-raised: oklch(0.24 0.005 155)
|
|
160
|
-
surface-overlay: oklch(0.28 0.006 155)
|
|
161
|
-
chart-1: oklch(0.77 0.212 149)
|
|
162
|
-
chart-2: oklch(0.688 0.15 254)
|
|
163
|
-
chart-3: oklch(0.792 0.163 67)
|
|
164
|
-
chart-4: oklch(0.708 0.159 16)
|
|
165
|
-
chart-5: oklch(0.65 0.15 300)
|
|
166
|
-
sidebar: oklch(0.18 0.005 155)
|
|
167
|
-
sidebar-foreground: oklch(0.77 0.008 155)
|
|
168
|
-
sidebar-primary: oklch(0.77 0.212 149)
|
|
169
|
-
sidebar-primary-foreground: oklch(0.15 0.015 149)
|
|
170
|
-
sidebar-accent: oklch(0.24 0.005 155)
|
|
171
|
-
sidebar-accent-foreground: oklch(0.97 0.005 155)
|
|
172
|
-
sidebar-border: oklch(0.26 0.005 155)
|
|
173
|
-
sidebar-ring: oklch(0.77 0.212 149)
|
|
174
|
-
typography:
|
|
175
|
-
display: { family: "DM Sans Variable", fallback: "system-ui, sans-serif", weights: [700] }
|
|
176
|
-
sans: { family: "DM Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 700] }
|
|
177
|
-
mono: { family: "Fira Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
178
|
-
ramp:
|
|
179
|
-
display: { size: 28px, line: 34px, weight: 700, family: sans }
|
|
180
|
-
h1: { size: 24px, line: 30px, weight: 700, family: sans }
|
|
181
|
-
h2: { size: 18px, line: 23px, weight: 700, family: sans }
|
|
182
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
183
|
-
small: { size: 12px, line: 18px, weight: 400, family: sans }
|
|
184
|
-
caption: { size: 12px, line: 16px, weight: 700, family: sans, tracking: 0.1em, transform: uppercase }
|
|
185
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
186
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps, amounts] }
|
|
187
|
-
elevation:
|
|
188
|
-
radius: { sm: 4px, md: 8px, lg: 12px, pill: 9999px }
|
|
189
|
-
hairline: border
|
|
190
|
-
shadow:
|
|
191
|
-
elevated: "0 8px 8px oklch(0.08 0.01 155 / 0.3)"
|
|
192
|
-
overlay: "0 8px 24px oklch(0.08 0.01 155 / 0.5)"
|
|
193
|
-
popover: "0 4px 12px oklch(0.08 0.01 155 / 0.35)"
|
|
194
|
-
dark-ladder: { background: 0.18, raised: 0.24, overlay: 0.28, hue-held: 155 }
|
|
195
|
-
motion:
|
|
196
|
-
duration: { press: 100ms, fade: 160ms, panel: 240ms }
|
|
197
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
198
|
-
entrance-never: ease-in
|
|
199
|
-
identity-moments: [first-run-onboarding, empty-library]
|
|
200
|
-
iconography: { set: lucide, stroke: 1.75px, grid: [16px, 20px] }
|
|
201
|
-
charts:
|
|
202
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
203
|
-
sequential: { from: background, to: chart-1 }
|
|
204
|
-
diverging: { negative: chart-4, mid: muted, positive: chart-1 }
|
|
205
|
-
layout: { base: 8px, sidebar: [256px, 64px], topbar: 64px, side-panel: [420px, 640px], content-max: 1336px }
|
|
206
|
-
```
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: stripe
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [fintech, payments, api]
|
|
6
|
-
keywords: [polished, indigo, navy, cool, gradient, developer, tabular]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 library entry (2026-07-04); 2026-07-12 brand re-audit; Söhne → Inter Variable substitution (v1-documented), IBM Plex Mono for the derived mono; gradient-mesh palette carried only into charts"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# stripe — a cool-lit payments desk, one indigo switch
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A payments operations desk under cool daylight: white paper on a faintly blue-tinted
|
|
16
|
-
field, money figures aligned in tabular columns, a single indigo switch lit for the
|
|
17
|
-
one action that commits. Light default; the dark theme is an authored navy ladder,
|
|
18
|
-
not inverted paper. The one departure from pure-flat carries — cards lift on a soft
|
|
19
|
-
blue-tinted shadow, never gray, so depth reads cool and engineered. The gradient
|
|
20
|
-
mesh stays at marketing scale, surviving only in charts.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Deep-navy `foreground` on white `background`, never pure black; the temperature runs
|
|
24
|
-
cool throughout, hairlines leaning blue and the `input` edge cooler still. `primary`
|
|
25
|
-
indigo is the single chromatic accent — the one primary action, active nav, inline
|
|
26
|
-
link emphasis — and the focus `ring` holds it. `accent` is a pale indigo wash for
|
|
27
|
-
selection. Status hues speak only status; the gradient stops live in charts. The
|
|
28
|
-
`sidebar` holds a cool off-white a half-step below the canvas.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (chrome and display, substituting Söhne) / IBM Plex Mono (data). Register
|
|
32
|
-
scope: the sans is thin and editorial, negative tracking on headings, weight 600 the
|
|
33
|
-
ceiling — a thin brand never goes heavy; the mono owns IDs, codes, timestamps, and
|
|
34
|
-
every money cell. Numerals are always `tabular-nums` — the quiet financial-data
|
|
35
|
-
signal that carries strongest; emphasis bumps weight, never size.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-md`, indigo `primary` fill, rounded never pilled; inputs on the cool
|
|
39
|
-
`input` hairline, the indigo `ring` at 2px without glow; cards on a hairline lifting
|
|
40
|
-
on the soft blue-tinted shadow — the one elevation cue; table rows `muted` hover,
|
|
41
|
-
`accent` selection, tabular money columns; detail opens in the side panel beside the
|
|
42
|
-
work; badges take the one controlled pill, status fills only, never `primary`.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
4px base; sidebar 256/56px; topbar 56px; side panel 440/640px; content max 1360px;
|
|
46
|
-
density standard — clean and moderate, the marketing bands left behind.
|
|
47
|
-
|
|
48
|
-
## 6 Depth
|
|
49
|
-
Subtly lifted and cool. Light: hairlines and the surface ladder carry structure; the
|
|
50
|
-
one signature is the soft blue-tinted card shadow (`shadow`), a deeper blue-tint for
|
|
51
|
-
overlays — rank is border, position, and that one soft lift, never a heavier shadow.
|
|
52
|
-
Dark: the authored ladder does the depth — `background` 0.19 L, `surface-raised`
|
|
53
|
-
+0.05, `surface-overlay` +0.10, hue held at 262.
|
|
54
|
-
|
|
55
|
-
## 7 Motion
|
|
56
|
-
Calm and precise. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
57
|
-
`fade-arrive` (page content, 160ms), `commit-press` (primary press, 120ms).
|
|
58
|
-
Physicality granted only to auth and first-run empty states; tables and money
|
|
59
|
-
columns never animate; keyboard actions are instant.
|
|
60
|
-
|
|
61
|
-
## 8 Iconography & Charts
|
|
62
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
63
|
-
axes, no gridline fills; the gradient palette returns only here — indigo, sherbet,
|
|
64
|
-
cream, ruby, lavender categorical (`chart-1..5`); monochrome sequential canvas→indigo;
|
|
65
|
-
tooltips on `surface-overlay` with mono numerals.
|
|
66
|
-
|
|
67
|
-
## 9 Voice
|
|
68
|
-
Precise and unhurried: exact figures, no exclamation, plain verbs. "Create payment" ·
|
|
69
|
-
"No disputes open — last payout cleared 2h ago" · "This refund exceeds the available
|
|
70
|
-
balance; top up before retrying."
|
|
71
|
-
|
|
72
|
-
## 10 Do's & Don'ts
|
|
73
|
-
Do reserve indigo for the single committing action and inline links — one filled
|
|
74
|
-
control per view. Do keep ink deep navy, the temperature cool, and money always
|
|
75
|
-
tabular. Do lift a card on the soft blue-tinted shadow, never a gray one. Don't pill
|
|
76
|
-
the CTA, promote a second chromatic accent, or bring the gradient mesh past charts.
|
|
77
|
-
|
|
78
|
-
## 11 Responsive
|
|
79
|
-
375: sidebar → off-canvas drawer, side panel → full sheet, list+detail stacks. 768:
|
|
80
|
-
sidebar → icon rail; tables scroll overflow. 1024/1440: two-pane queue+detail holds;
|
|
81
|
-
forms cap, dashboards use full width.
|
|
82
|
-
|
|
83
|
-
## 12 Agent Prompt Guide
|
|
84
|
-
Lead every list with its table; spend the indigo once — links and the one primary
|
|
85
|
-
action, nothing else. Keep ink deep navy, the field cool, every money column tabular
|
|
86
|
-
in IBM Plex Mono. Lift on the blue-tinted shadow. Dark is the authored navy ladder —
|
|
87
|
-
consult the block, never derive.
|
|
88
|
-
|
|
89
|
-
```yaml design-values
|
|
90
|
-
color:
|
|
91
|
-
light:
|
|
92
|
-
background: oklch(1 0 258)
|
|
93
|
-
foreground: oklch(0.259 0.054 250.7)
|
|
94
|
-
card: oklch(1 0 258)
|
|
95
|
-
card-foreground: oklch(0.259 0.054 250.7)
|
|
96
|
-
popover: oklch(1 0 258)
|
|
97
|
-
popover-foreground: oklch(0.259 0.054 250.7)
|
|
98
|
-
primary: oklch(0.521 0.268 277.4)
|
|
99
|
-
primary-foreground: oklch(1 0 277.4)
|
|
100
|
-
secondary: oklch(0.981 0.005 248)
|
|
101
|
-
secondary-foreground: oklch(0.3 0.05 258)
|
|
102
|
-
muted: oklch(0.981 0.005 248)
|
|
103
|
-
muted-foreground: oklch(0.53 0.046 259)
|
|
104
|
-
accent: oklch(0.949 0.024 288.5)
|
|
105
|
-
accent-foreground: oklch(0.462 0.23 276.9)
|
|
106
|
-
destructive: oklch(0.609 0.228 10.8)
|
|
107
|
-
destructive-foreground: oklch(0.985 0.01 10.8)
|
|
108
|
-
success: oklch(0.552 0.123 156.9)
|
|
109
|
-
warning: oklch(0.569 0.152 48.8)
|
|
110
|
-
border: oklch(0.929 0.01 252.8)
|
|
111
|
-
input: oklch(0.83 0.015 250)
|
|
112
|
-
ring: oklch(0.521 0.268 277.4)
|
|
113
|
-
surface-raised: oklch(1 0 258)
|
|
114
|
-
surface-overlay: oklch(1 0 258)
|
|
115
|
-
chart-1: oklch(0.55 0.25 277.4)
|
|
116
|
-
chart-2: oklch(0.7 0.15 350)
|
|
117
|
-
chart-3: oklch(0.75 0.12 60)
|
|
118
|
-
chart-4: oklch(0.65 0.18 10)
|
|
119
|
-
chart-5: oklch(0.6 0.14 300)
|
|
120
|
-
sidebar: oklch(0.981 0.005 248)
|
|
121
|
-
sidebar-foreground: oklch(0.3 0.05 258)
|
|
122
|
-
sidebar-primary: oklch(0.521 0.268 277.4)
|
|
123
|
-
sidebar-primary-foreground: oklch(1 0 277.4)
|
|
124
|
-
sidebar-accent: oklch(0.949 0.024 288.5)
|
|
125
|
-
sidebar-accent-foreground: oklch(0.462 0.23 276.9)
|
|
126
|
-
sidebar-border: oklch(0.92 0.01 252.8)
|
|
127
|
-
sidebar-ring: oklch(0.521 0.268 277.4)
|
|
128
|
-
dark:
|
|
129
|
-
background: oklch(0.19 0.014 262)
|
|
130
|
-
foreground: oklch(0.95 0.01 262)
|
|
131
|
-
card: oklch(0.22 0.014 262)
|
|
132
|
-
card-foreground: oklch(0.95 0.01 262)
|
|
133
|
-
popover: oklch(0.27 0.014 262)
|
|
134
|
-
popover-foreground: oklch(0.95 0.01 262)
|
|
135
|
-
primary: oklch(0.6 0.25 277.4)
|
|
136
|
-
primary-foreground: oklch(0.99 0.01 277.4)
|
|
137
|
-
secondary: oklch(0.24 0.014 262)
|
|
138
|
-
secondary-foreground: oklch(0.9 0.012 262)
|
|
139
|
-
muted: oklch(0.23 0.013 262)
|
|
140
|
-
muted-foreground: oklch(0.68 0.02 262)
|
|
141
|
-
accent: oklch(0.3 0.05 277.4)
|
|
142
|
-
accent-foreground: oklch(0.92 0.02 288.5)
|
|
143
|
-
destructive: oklch(0.64 0.22 10.8)
|
|
144
|
-
destructive-foreground: oklch(0.14 0.02 10.8)
|
|
145
|
-
success: oklch(0.66 0.13 156.9)
|
|
146
|
-
warning: oklch(0.74 0.15 60)
|
|
147
|
-
border: oklch(0.27 0.014 262)
|
|
148
|
-
input: oklch(0.27 0.014 262)
|
|
149
|
-
ring: oklch(0.6 0.25 277.4)
|
|
150
|
-
surface-raised: oklch(0.24 0.014 262)
|
|
151
|
-
surface-overlay: oklch(0.29 0.014 262)
|
|
152
|
-
chart-1: oklch(0.65 0.24 277.4)
|
|
153
|
-
chart-2: oklch(0.76 0.14 350)
|
|
154
|
-
chart-3: oklch(0.82 0.11 60)
|
|
155
|
-
chart-4: oklch(0.7 0.18 10)
|
|
156
|
-
chart-5: oklch(0.68 0.14 300)
|
|
157
|
-
sidebar: oklch(0.16 0.022 262)
|
|
158
|
-
sidebar-foreground: oklch(0.9 0.012 262)
|
|
159
|
-
sidebar-primary: oklch(0.6 0.25 277.4)
|
|
160
|
-
sidebar-primary-foreground: oklch(0.99 0.01 277.4)
|
|
161
|
-
sidebar-accent: oklch(0.24 0.03 277.4)
|
|
162
|
-
sidebar-accent-foreground: oklch(0.92 0.02 288.5)
|
|
163
|
-
sidebar-border: oklch(0.22 0.022 262)
|
|
164
|
-
sidebar-ring: oklch(0.6 0.25 277.4)
|
|
165
|
-
typography:
|
|
166
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
167
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
168
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
169
|
-
ramp:
|
|
170
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.02em }
|
|
171
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.02em }
|
|
172
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
173
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
174
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
175
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.02em, transform: uppercase }
|
|
176
|
-
data: { size: 14px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
177
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, amounts] }
|
|
178
|
-
elevation:
|
|
179
|
-
radius: { sm: 4px, md: 6px, lg: 10px }
|
|
180
|
-
hairline: border
|
|
181
|
-
shadow:
|
|
182
|
-
overlay: "0 8px 30px oklch(0.259 0.054 250 / 0.12)"
|
|
183
|
-
popover: "0 4px 16px oklch(0.259 0.054 250 / 0.1)"
|
|
184
|
-
dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 262 }
|
|
185
|
-
motion:
|
|
186
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
187
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
188
|
-
entrance-never: ease-in
|
|
189
|
-
identity-moments: [auth, first-run-empty]
|
|
190
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
191
|
-
charts:
|
|
192
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
193
|
-
sequential: { from: background, to: chart-1 }
|
|
194
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
195
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
196
|
-
```
|