@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,202 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: slack
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [collaboration, messaging]
|
|
6
|
-
keywords: [vibrant, rounded, aubergine, friendly, conversational]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 slack entry (2026-07-04); 2026-07-12 re-audit of slack.com public identity. Proprietary Slack display/UI faces substituted with Lato (v1-documented humanist stand-in); mono is JetBrains Mono (v1-named)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# slack — an office common room with a plum feature wall
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An office common room mid-morning: white walls, warm chatter, rounded furniture, and
|
|
16
|
-
one deep-aubergine feature wall where the noticeboard lives. Light by default; the
|
|
17
|
-
content canvas is white with hairline hierarchy, flat, with a friendlier radius than
|
|
18
|
-
a terminal. The one deliberate exception to the light polarity is the brand's most
|
|
19
|
-
enduring asset — the aubergine `sidebar`, a categorically dark rail carrying light
|
|
20
|
-
text in both themes. Density standard, nudged a hair toward comfort.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Near-black `foreground` on white; a single accent — aubergine `primary` — reserved
|
|
24
|
-
for the one action that matters, plus the rail. Lavender `accent` tints selected and
|
|
25
|
-
hovered rows; blue is a functional inline-link color, never a chrome or CTA hue.
|
|
26
|
-
Status hues (`destructive` rust, `success` green, `warning` amber) speak only status.
|
|
27
|
-
The Slack logo quad (blue, green, yellow, red) lives exclusively in `chart-2..5`.
|
|
28
|
-
Aubergine is a surface and CTA color, never a type color.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Lato (UI, body, headings) / JetBrains Mono (IDs, codes, timestamps). The humanist
|
|
32
|
-
face carries Slack's warmth at UI sizes; heading weight, not a second family, carries
|
|
33
|
-
emphasis. Body rides a relaxed 1.5 leading — legible without going airy. Register
|
|
34
|
-
scope: no display face — hero-scale display stays on marketing; mono owns data.
|
|
35
|
-
Numeric columns render `tabular-nums`; bump weight one step for emphasis, never size.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
The primary CTA is the one pill — filled aubergine `primary`, bold label; every other
|
|
39
|
-
control sits on the `radius-md` workhorse. Secondary buttons take the lavender
|
|
40
|
-
`secondary` fill; ghost hovers tint `accent`. Inputs hairline `border` with the
|
|
41
|
-
aubergine `ring` at focus. Cards hairline on `card`, soft shadow only when lifting.
|
|
42
|
-
Table rows hairline grid, `muted` hover, lavender `accent` selection. The sidebar is
|
|
43
|
-
the aubergine rail: active item a `sidebar-primary` band, hover the subtler
|
|
44
|
-
`sidebar-accent`. Detail opens in the side panel. Badges hairline, uppercase caption,
|
|
45
|
-
status fills only.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base with 8px as the dominant step — Slack's relaxed rhythm; sidebar 256/56px;
|
|
49
|
-
topbar 56px; side panel 420/640px; content max 1280px; forms cap comfortably; tables
|
|
50
|
-
full-width.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
Flat on the light canvas; the aubergine rail is a fixed dark plane, not an elevation —
|
|
54
|
-
its prominence is the surface-polarity split, never shadow. Hairlines carry
|
|
55
|
-
structure; overlays earn a soft aubergine-tinted shadow. Dark: the authored ladder —
|
|
56
|
-
`background` 0.19 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held at
|
|
57
|
-
327 — while the rail stays one step deeper than the canvas.
|
|
58
|
-
|
|
59
|
-
## 7 Motion
|
|
60
|
-
Friendly but businesslike — soft fades, no bounce. Named moments: `thread-open` (side
|
|
61
|
-
panel, 260ms, interruptible), `row-arrive` (list content, 180ms fade), `pill-press`
|
|
62
|
-
(primary action, 120ms). Physicality is granted only to onboarding and first-run
|
|
63
|
-
empty states. Nothing animates in tables, message lists, or keyboard-initiated
|
|
64
|
-
actions.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
68
|
-
axes, no gridline fills; the categorical ramp is aubergine then the logo quad —
|
|
69
|
-
blue, green, yellow, red (`chart-1..5`), the one place the quad appears; tooltips on
|
|
70
|
-
`surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
A friendly colleague, not a mascot: contractions welcome, celebration restrained to
|
|
74
|
-
moments the user earned. "Send to channel" · "You're all caught up — nothing new
|
|
75
|
-
since 9:14" · "That channel name is taken; try adding your team's name."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do keep the aubergine `sidebar` in both themes — light-on-aubergine is by design. Do
|
|
79
|
-
give only the primary CTA the pill; everything else stays on the workhorse radius.
|
|
80
|
-
Do scope blue to inline links. Don't promote a third accent — aubergine plus
|
|
81
|
-
link-blue is exhaustive. Don't set aubergine body text. Don't bring pastel-mesh
|
|
82
|
-
gradients or hero display onto an operator surface; don't pill anything but the CTA.
|
|
83
|
-
|
|
84
|
-
## 11 Responsive
|
|
85
|
-
375: the aubergine rail → off-canvas drawer, side panel → full sheet, list+detail
|
|
86
|
-
stacks. 768: rail collapses to the icon rail; tables scroll overflow. 1024/1440:
|
|
87
|
-
rail expands, two-pane queue+detail holds; forms cap, dashboards full width.
|
|
88
|
-
|
|
89
|
-
## 12 Agent Prompt Guide
|
|
90
|
-
Keep the rail aubergine and everything else light. Accent only the primary action;
|
|
91
|
-
if two things want aubergine, one is not primary. Blue is for links, not buttons.
|
|
92
|
-
The pill belongs to the CTA alone. Every numeric column tabular, every ID mono.
|
|
93
|
-
Dark is authored — consult the block, never derive.
|
|
94
|
-
|
|
95
|
-
```yaml design-values
|
|
96
|
-
color:
|
|
97
|
-
light:
|
|
98
|
-
background: oklch(0.99 0.005 308)
|
|
99
|
-
foreground: oklch(0.23 0.006 308)
|
|
100
|
-
card: oklch(0.995 0.005 308)
|
|
101
|
-
card-foreground: oklch(0.23 0.006 308)
|
|
102
|
-
popover: oklch(0.995 0.005 308)
|
|
103
|
-
popover-foreground: oklch(0.23 0.006 308)
|
|
104
|
-
primary: oklch(0.306 0.108 327)
|
|
105
|
-
primary-foreground: oklch(0.98 0.008 327)
|
|
106
|
-
secondary: oklch(0.966 0.022 312)
|
|
107
|
-
secondary-foreground: oklch(0.3 0.1 327)
|
|
108
|
-
muted: oklch(0.965 0.006 308)
|
|
109
|
-
muted-foreground: oklch(0.5 0.012 308)
|
|
110
|
-
accent: oklch(0.966 0.022 312)
|
|
111
|
-
accent-foreground: oklch(0.3 0.1 327)
|
|
112
|
-
destructive: oklch(0.571 0.182 36)
|
|
113
|
-
destructive-foreground: oklch(0.99 0.006 36)
|
|
114
|
-
success: oklch(0.514 0.106 167)
|
|
115
|
-
warning: oklch(0.666 0.157 58)
|
|
116
|
-
border: oklch(0.925 0.005 308)
|
|
117
|
-
input: oklch(0.925 0.005 308)
|
|
118
|
-
ring: oklch(0.374 0.136 323)
|
|
119
|
-
surface-raised: oklch(0.99 0.005 308)
|
|
120
|
-
surface-overlay: oklch(0.995 0.005 308)
|
|
121
|
-
chart-1: oklch(0.306 0.108 327)
|
|
122
|
-
chart-2: oklch(0.768 0.13 223)
|
|
123
|
-
chart-3: oklch(0.691 0.142 160)
|
|
124
|
-
chart-4: oklch(0.797 0.152 83)
|
|
125
|
-
chart-5: oklch(0.588 0.222 11.5)
|
|
126
|
-
sidebar: oklch(0.306 0.108 327)
|
|
127
|
-
sidebar-foreground: oklch(0.94 0.02 327)
|
|
128
|
-
sidebar-primary: oklch(0.374 0.136 323)
|
|
129
|
-
sidebar-primary-foreground: oklch(0.97 0.015 323)
|
|
130
|
-
sidebar-accent: oklch(0.36 0.1 327)
|
|
131
|
-
sidebar-accent-foreground: oklch(0.95 0.015 327)
|
|
132
|
-
sidebar-border: oklch(0.4 0.09 327)
|
|
133
|
-
sidebar-ring: oklch(0.85 0.05 323)
|
|
134
|
-
dark:
|
|
135
|
-
background: oklch(0.19 0.012 327)
|
|
136
|
-
foreground: oklch(0.93 0.008 327)
|
|
137
|
-
card: oklch(0.23 0.012 327)
|
|
138
|
-
card-foreground: oklch(0.93 0.008 327)
|
|
139
|
-
popover: oklch(0.29 0.014 327)
|
|
140
|
-
popover-foreground: oklch(0.93 0.008 327)
|
|
141
|
-
primary: oklch(0.42 0.12 327)
|
|
142
|
-
primary-foreground: oklch(0.97 0.01 327)
|
|
143
|
-
secondary: oklch(0.27 0.014 327)
|
|
144
|
-
secondary-foreground: oklch(0.9 0.01 327)
|
|
145
|
-
muted: oklch(0.26 0.014 327)
|
|
146
|
-
muted-foreground: oklch(0.7 0.015 327)
|
|
147
|
-
accent: oklch(0.3 0.05 327)
|
|
148
|
-
accent-foreground: oklch(0.93 0.01 327)
|
|
149
|
-
destructive: oklch(0.64 0.19 33)
|
|
150
|
-
destructive-foreground: oklch(0.14 0.02 33)
|
|
151
|
-
success: oklch(0.65 0.12 167)
|
|
152
|
-
warning: oklch(0.75 0.14 60)
|
|
153
|
-
border: oklch(0.31 0.014 327)
|
|
154
|
-
input: oklch(0.31 0.014 327)
|
|
155
|
-
ring: oklch(0.75 0.1 323)
|
|
156
|
-
surface-raised: oklch(0.24 0.012 327)
|
|
157
|
-
surface-overlay: oklch(0.29 0.014 327)
|
|
158
|
-
chart-1: oklch(0.62 0.13 327)
|
|
159
|
-
chart-2: oklch(0.768 0.13 223)
|
|
160
|
-
chart-3: oklch(0.691 0.142 160)
|
|
161
|
-
chart-4: oklch(0.797 0.152 83)
|
|
162
|
-
chart-5: oklch(0.62 0.2 12)
|
|
163
|
-
sidebar: oklch(0.25 0.09 327)
|
|
164
|
-
sidebar-foreground: oklch(0.93 0.015 327)
|
|
165
|
-
sidebar-primary: oklch(0.4 0.13 323)
|
|
166
|
-
sidebar-primary-foreground: oklch(0.97 0.012 323)
|
|
167
|
-
sidebar-accent: oklch(0.32 0.1 327)
|
|
168
|
-
sidebar-accent-foreground: oklch(0.95 0.012 327)
|
|
169
|
-
sidebar-border: oklch(0.36 0.09 327)
|
|
170
|
-
sidebar-ring: oklch(0.85 0.05 323)
|
|
171
|
-
typography:
|
|
172
|
-
display: { family: "Lato", fallback: "system-ui, sans-serif", weights: [700] }
|
|
173
|
-
sans: { family: "Lato", fallback: "system-ui, sans-serif", weights: [400, 700] }
|
|
174
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, Menlo, monospace", weights: [400] }
|
|
175
|
-
ramp:
|
|
176
|
-
display: { size: 28px, line: 36px, weight: 700, family: sans }
|
|
177
|
-
h1: { size: 24px, line: 31px, weight: 700, family: sans }
|
|
178
|
-
h2: { size: 18px, line: 25px, weight: 700, family: sans }
|
|
179
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
180
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
181
|
-
caption: { size: 12px, line: 14px, weight: 700, family: sans, tracking: 0.08em, transform: uppercase }
|
|
182
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
183
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps] }
|
|
184
|
-
elevation:
|
|
185
|
-
radius: { sm: 4px, md: 8px, lg: 12px, pill: 9999px }
|
|
186
|
-
hairline: border
|
|
187
|
-
shadow:
|
|
188
|
-
overlay: "0 8px 28px oklch(0.3 0.09 327 / 0.16)"
|
|
189
|
-
popover: "0 4px 14px oklch(0.3 0.09 327 / 0.12)"
|
|
190
|
-
dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 327 }
|
|
191
|
-
motion:
|
|
192
|
-
duration: { press: 120ms, fade: 180ms, panel: 260ms }
|
|
193
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
194
|
-
entrance-never: ease-in
|
|
195
|
-
identity-moments: [onboarding, first-run-empty]
|
|
196
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
197
|
-
charts:
|
|
198
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
199
|
-
sequential: { from: background, to: chart-1 }
|
|
200
|
-
diverging: { negative: chart-5, mid: muted, positive: chart-3 }
|
|
201
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
|
|
202
|
-
```
|
|
@@ -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
|
-
```
|