@nurix/etna 0.19.49 → 0.19.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/apollo/harness.json +2 -2
- package/data/harnesses/apollo/hooks/hooks.json +3 -1
- package/data/harnesses/apollo/skills/design/SKILL.md +55 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +8 -4
- package/data/harnesses/apollo/skills/design/references/content.md +5 -5
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/apollo/skills/design/references/intake.md +11 -7
- package/data/harnesses/apollo/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +26 -6
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/hooks/hooks.json +3 -1
- package/data/harnesses/code/skills/design/SKILL.md +55 -29
- package/data/harnesses/code/skills/design/references/compose.md +8 -4
- package/data/harnesses/code/skills/design/references/content.md +5 -5
- package/data/harnesses/code/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/code/skills/design/references/intake.md +11 -7
- package/data/harnesses/code/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/code/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +26 -6
- package/package.json +2 -2
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/apollo/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/apollo/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/apollo/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/apollo/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/apollo/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/apollo/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/apollo/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/apollo/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/apollo/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/apollo/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/apollo/skills/design/design-md/variants/warm-approachable.md +0 -216
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/code/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/code/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/code/skills/design/data/iconography.md +0 -199
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/code/skills/design/data/tells.csv +0 -34
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/code/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/code/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/code/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +0 -216
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: elevenlabs
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [ai, voice, media]
|
|
6
|
-
keywords: [editorial, serif, warm-stone, achromatic, spacious, pill]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 elevenlabs entry (2026-07-04); 2026-07-12 re-audit of ElevenLabs public brand; EB Garamond substitutes the licensed Waldenburg (its 400 runs light, standing in for Waldenburg's 300); Inter for text; JetBrains Mono for data"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# elevenlabs — a print magazine's reading room inside a recording studio
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
The reading room of a recording studio: foam-quieted walls in warm stone, an off-white
|
|
16
|
-
proof of the next issue on the table, headlines set in a light serif, and not one drop of
|
|
17
|
-
chromatic ink anywhere — the only "accent" is the ink itself, worn as a pill. Light by
|
|
18
|
-
default, spacious by conviction; hierarchy is warm hairlines, type weight, and the stone
|
|
19
|
-
surface ladder, never heavy shadow. The dark theme is the booth after hours — warm
|
|
20
|
-
charcoal, hue held, the pill inverted to bone.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Warm near-black `foreground` on the off-white `background`; `primary` is achromatic ink
|
|
24
|
-
worn as a pill on the one action that matters — there is no chromatic accent at all, and
|
|
25
|
-
that discipline carries. `accent` warms the stone for selection; it does not colour it.
|
|
26
|
-
The five pastels (mint, sky, lavender, peach, rose) live only in `chart-*` — never a
|
|
27
|
-
fill, text color, or surface. Status hues speak only status.
|
|
28
|
-
|
|
29
|
-
## 3 Typography
|
|
30
|
-
EB Garamond (display serif — the open stand-in for Waldenburg Light; its 400 cut runs
|
|
31
|
-
light) over Inter (body, UI, tables, labels) over JetBrains Mono (IDs, codes,
|
|
32
|
-
timestamps). The brand never bolds: the serif holds its light cut, sans emphasis caps at
|
|
33
|
-
500, 600 only on the uppercase eyebrow. Register scope: the serif touches page titles,
|
|
34
|
-
section heads, empty states, and auth only — never cells, buttons, labels, or form
|
|
35
|
-
chrome; numeric columns are `tabular-nums`.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
The primary button is a **pill** of ink — the brand's signature geometry, kept
|
|
39
|
-
deliberately. Secondary on `secondary` stone with hairline at base radius. Inputs on
|
|
40
|
-
`card` with hairline; focus thickens to the 2px ink `ring`, no glow. Cards white on
|
|
41
|
-
hairline, 12px for feature cards. Table rows with `muted` hover, selection warming to
|
|
42
|
-
`accent`. Detail opens in the side panel; badges are pills with status fills and
|
|
43
|
-
uppercase captions.
|
|
44
|
-
|
|
45
|
-
## 5 Layout
|
|
46
|
-
4px base; sidebar 256/56px on the warm stone panel; topbar 64px; side panel 440/640px;
|
|
47
|
-
content max 1280px — airier than a dense console, because the tier is spacious. The
|
|
48
|
-
96px marketing rhythm and the gradient orbs stay behind.
|
|
49
|
-
|
|
50
|
-
## 6 Depth
|
|
51
|
-
Light: hairline-first — the stone ladder and warm hairlines carry rank; one soft
|
|
52
|
-
warm-tinted tier under true overlays only. Dark: the surface ladder does depth —
|
|
53
|
-
`background` 0.17 L, `surface-raised` +0.05, `surface-overlay` +0.10, warm hue held near
|
|
54
|
-
78. Focus is the 2px ink `ring` on every element.
|
|
55
|
-
|
|
56
|
-
## 7 Motion
|
|
57
|
-
Studio-quiet. Named moments: `page-breath` (content fade, 180ms — the one unhurried
|
|
58
|
-
entrance), `panel-slide` (side panel, 240ms, interruptible), `pill-press`
|
|
59
|
-
(primary-action press, 120ms). Physicality is granted only to auth and first-run empty
|
|
60
|
-
states; waveforms render statically in lists; nothing animates on keyboard-initiated
|
|
61
|
-
actions.
|
|
62
|
-
|
|
63
|
-
## 8 Iconography & Charts
|
|
64
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
65
|
-
no gridline fills; the categorical ramp is the five pastels deepened to data strength —
|
|
66
|
-
mint, sky, lavender, peach, rose (`chart-1..5`); tooltips on `surface-overlay` with mono
|
|
67
|
-
numerals.
|
|
68
|
-
|
|
69
|
-
## 9 Voice
|
|
70
|
-
Quiet editorial: full sentences, unhurried, no exclamation, numbers plain. "Create
|
|
71
|
-
voice" · "Nothing to review — 3 renders completed overnight" · "This clone needs 30 more
|
|
72
|
-
seconds of clean audio before it can be published."
|
|
73
|
-
|
|
74
|
-
## 10 Do's & Don'ts
|
|
75
|
-
Do keep the accent achromatic — the ink pill is the only action color, one per surface.
|
|
76
|
-
Do wear the light serif on page titles and keep body Inter at 400/500 for legibility.
|
|
77
|
-
Do pill the primary CTA and badges; every other component stays at base radius. Don't
|
|
78
|
-
introduce a saturated action color or a second accent. Don't bold — anywhere. Don't
|
|
79
|
-
let the pastels leave the charts.
|
|
80
|
-
|
|
81
|
-
## 11 Responsive
|
|
82
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
83
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane queue+detail
|
|
84
|
-
holds. 1440: forms cap; the spacious breathing widens under the 1280px cap.
|
|
85
|
-
|
|
86
|
-
## 12 Agent Prompt Guide
|
|
87
|
-
Anchor on the warm off-white with white cards; keep every accent achromatic — if a hue
|
|
88
|
-
appears outside a chart, it is drift. Page titles wear the light serif at reduced scale;
|
|
89
|
-
never bold. Pill the one primary action. Keep density spacious and workflows
|
|
90
|
-
keyboard-complete. Dark is authored — consult the block, never derive.
|
|
91
|
-
|
|
92
|
-
```yaml design-values
|
|
93
|
-
color:
|
|
94
|
-
light:
|
|
95
|
-
background: oklch(0.972 0.005 84)
|
|
96
|
-
foreground: oklch(0.15 0.005 50)
|
|
97
|
-
card: oklch(0.995 0.005 84)
|
|
98
|
-
card-foreground: oklch(0.15 0.005 50)
|
|
99
|
-
popover: oklch(0.995 0.005 84)
|
|
100
|
-
popover-foreground: oklch(0.15 0.005 50)
|
|
101
|
-
primary: oklch(0.27 0.006 34)
|
|
102
|
-
primary-foreground: oklch(0.97 0.005 84)
|
|
103
|
-
secondary: oklch(0.952 0.005 85)
|
|
104
|
-
secondary-foreground: oklch(0.2 0.006 50)
|
|
105
|
-
muted: oklch(0.952 0.005 85)
|
|
106
|
-
muted-foreground: oklch(0.5 0.014 75)
|
|
107
|
-
accent: oklch(0.929 0.006 75)
|
|
108
|
-
accent-foreground: oklch(0.2 0.006 50)
|
|
109
|
-
destructive: oklch(0.577 0.215 27)
|
|
110
|
-
destructive-foreground: oklch(0.98 0.008 27)
|
|
111
|
-
success: oklch(0.627 0.17 149)
|
|
112
|
-
warning: oklch(0.666 0.157 58)
|
|
113
|
-
border: oklch(0.923 0.005 55)
|
|
114
|
-
input: oklch(0.869 0.006 56)
|
|
115
|
-
ring: oklch(0.15 0.005 50)
|
|
116
|
-
surface-raised: oklch(0.985 0.005 84)
|
|
117
|
-
surface-overlay: oklch(0.995 0.005 84)
|
|
118
|
-
chart-1: oklch(0.7 0.1 165)
|
|
119
|
-
chart-2: oklch(0.68 0.1 235)
|
|
120
|
-
chart-3: oklch(0.68 0.1 295)
|
|
121
|
-
chart-4: oklch(0.74 0.11 55)
|
|
122
|
-
chart-5: oklch(0.7 0.11 10)
|
|
123
|
-
sidebar: oklch(0.952 0.006 85)
|
|
124
|
-
sidebar-foreground: oklch(0.2 0.006 50)
|
|
125
|
-
sidebar-primary: oklch(0.27 0.006 34)
|
|
126
|
-
sidebar-primary-foreground: oklch(0.97 0.005 84)
|
|
127
|
-
sidebar-accent: oklch(0.909 0.009 78)
|
|
128
|
-
sidebar-accent-foreground: oklch(0.2 0.006 50)
|
|
129
|
-
sidebar-border: oklch(0.9 0.006 60)
|
|
130
|
-
sidebar-ring: oklch(0.15 0.005 50)
|
|
131
|
-
dark:
|
|
132
|
-
background: oklch(0.17 0.007 75)
|
|
133
|
-
foreground: oklch(0.93 0.007 84)
|
|
134
|
-
card: oklch(0.2 0.008 75)
|
|
135
|
-
card-foreground: oklch(0.93 0.007 84)
|
|
136
|
-
popover: oklch(0.27 0.01 75)
|
|
137
|
-
popover-foreground: oklch(0.93 0.007 84)
|
|
138
|
-
primary: oklch(0.93 0.007 84)
|
|
139
|
-
primary-foreground: oklch(0.18 0.008 75)
|
|
140
|
-
secondary: oklch(0.25 0.009 78)
|
|
141
|
-
secondary-foreground: oklch(0.9 0.007 84)
|
|
142
|
-
muted: oklch(0.24 0.008 78)
|
|
143
|
-
muted-foreground: oklch(0.71 0.01 80)
|
|
144
|
-
accent: oklch(0.29 0.01 78)
|
|
145
|
-
accent-foreground: oklch(0.93 0.007 84)
|
|
146
|
-
destructive: oklch(0.62 0.18 27)
|
|
147
|
-
destructive-foreground: oklch(0.14 0.02 27)
|
|
148
|
-
success: oklch(0.68 0.13 152)
|
|
149
|
-
warning: oklch(0.74 0.13 70)
|
|
150
|
-
border: oklch(0.27 0.009 78)
|
|
151
|
-
input: oklch(0.29 0.01 78)
|
|
152
|
-
ring: oklch(0.93 0.007 84)
|
|
153
|
-
surface-raised: oklch(0.22 0.008 75)
|
|
154
|
-
surface-overlay: oklch(0.27 0.01 75)
|
|
155
|
-
chart-1: oklch(0.76 0.1 165)
|
|
156
|
-
chart-2: oklch(0.74 0.1 235)
|
|
157
|
-
chart-3: oklch(0.74 0.1 295)
|
|
158
|
-
chart-4: oklch(0.78 0.11 55)
|
|
159
|
-
chart-5: oklch(0.75 0.11 10)
|
|
160
|
-
sidebar: oklch(0.15 0.007 75)
|
|
161
|
-
sidebar-foreground: oklch(0.89 0.007 84)
|
|
162
|
-
sidebar-primary: oklch(0.93 0.007 84)
|
|
163
|
-
sidebar-primary-foreground: oklch(0.18 0.008 75)
|
|
164
|
-
sidebar-accent: oklch(0.22 0.009 78)
|
|
165
|
-
sidebar-accent-foreground: oklch(0.91 0.007 84)
|
|
166
|
-
sidebar-border: oklch(0.23 0.009 78)
|
|
167
|
-
sidebar-ring: oklch(0.93 0.007 84)
|
|
168
|
-
typography:
|
|
169
|
-
display: { family: "EB Garamond Variable", fallback: "Georgia, serif", weights: [400] }
|
|
170
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
171
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
172
|
-
ramp:
|
|
173
|
-
display: { size: 32px, line: 38px, weight: 400, family: display, tracking: -0.01em }
|
|
174
|
-
h1: { size: 28px, line: 32px, weight: 400, family: display, tracking: -0.01em }
|
|
175
|
-
h2: { size: 22px, line: 26px, weight: 400, family: display, tracking: -0.01em }
|
|
176
|
-
body: { size: 15px, line: 22px, weight: 400, family: sans, tracking: 0.01em }
|
|
177
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
178
|
-
caption: { size: 12px, line: 17px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
179
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
180
|
-
register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, codes, timestamps] }
|
|
181
|
-
elevation:
|
|
182
|
-
radius: { sm: 8px, md: 12px, lg: 16px }
|
|
183
|
-
hairline: border
|
|
184
|
-
shadow:
|
|
185
|
-
overlay: "0 8px 28px oklch(0.3 0.015 60 / 0.1)"
|
|
186
|
-
popover: "0 4px 16px oklch(0.3 0.015 60 / 0.06)"
|
|
187
|
-
dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.27, hue-held: 78 }
|
|
188
|
-
motion:
|
|
189
|
-
duration: { press: 120ms, fade: 180ms, panel: 240ms }
|
|
190
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
191
|
-
entrance-never: ease-in
|
|
192
|
-
identity-moments: [auth, first-run-empty]
|
|
193
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
194
|
-
charts:
|
|
195
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
196
|
-
sequential: { from: background, to: chart-2 }
|
|
197
|
-
diverging: { negative: destructive, mid: muted, positive: chart-1 }
|
|
198
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 64px, side-panel: [440px, 640px], content-max: 1280px }
|
|
199
|
-
```
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: expo
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, mobile, build-infra]
|
|
6
|
-
keywords: [engineered, white, black, restrained, cool, mono]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 expo entry (2026-07-04); 2026-07-12 re-audit of Expo public brand; Inter and JetBrains Mono are the brand's own operator voice"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# expo — a white lab bench with one matte-black multimeter
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A hardware lab's white workbench: engineered, cool-neutral, everything labelled, and one
|
|
16
|
-
matte-black instrument that is obviously the tool that matters. Light by default; flat
|
|
17
|
-
and editorial — hierarchy is hairline `border`, type weight, and near-black ink, never
|
|
18
|
-
heavy shadow (one very soft drop is the ceiling). The single brand voltage is `primary`
|
|
19
|
-
**black** — the only CTA fill the brand permits, a deliberate override of the usual
|
|
20
|
-
chromatic accent. The dark theme is the same bench under night lights: cool charcoal
|
|
21
|
-
rungs, the instrument flipped to white.
|
|
22
|
-
|
|
23
|
-
## 2 Color Roles
|
|
24
|
-
Near-black ink `foreground` on the white `background`; `primary` black carries the one
|
|
25
|
-
primary action and active nav. The text-link blue is a scoped grace — inline body and
|
|
26
|
-
reference links only, never a CTA and never a chart-of-record accent; it survives here
|
|
27
|
-
as `chart-2` and link text. `accent` is a neutral tint (black has no light-theme wash);
|
|
28
|
-
status hues speak only status. The `sidebar` is a faint off-white step off the canvas.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (UI, body, headings — heading weight holds at 600, never 700) over JetBrains Mono
|
|
32
|
-
(IDs, codes, timestamps, log lines). The editorial voice is weight plus negative
|
|
33
|
-
tracking, never a second family; the 64px hero display stays behind — the operator ramp
|
|
34
|
-
tops out at the page title. Register scope: display register for page titles, empty
|
|
35
|
-
states, and auth; mono for every ID, code, and log line; numeric columns `tabular-nums`.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-sm` (8px), black `primary` fill, press lightens one step, no pill;
|
|
39
|
-
secondary on `secondary` with hairline; tertiary is the inline link-blue label, inline
|
|
40
|
-
only. Inputs on `background` with hairline, generous field height; focus thickens to the
|
|
41
|
-
2px ink `ring`, no glow. Cards 12px radius on hairline, the single soft drop only when
|
|
42
|
-
one must lift. Table rows with `muted` hover, `accent` selection tint; badges are pills
|
|
43
|
-
with uppercase captions on `muted`, status hues only.
|
|
44
|
-
|
|
45
|
-
## 5 Layout
|
|
46
|
-
4px base (Expo keeps a 20px step for compact workflow rows); sidebar 248/56px; topbar
|
|
47
|
-
56px; side panel 420/640px; content max 1360px. Density is standard and steps denser per
|
|
48
|
-
archetype; the 96px marketing rhythm stays behind.
|
|
49
|
-
|
|
50
|
-
## 6 Depth
|
|
51
|
-
Light: flat and editorial — hairlines and the surface ladder carry rank; the single soft
|
|
52
|
-
cool-tinted drop appears only when a card must lift, and overlays earn the one md tier.
|
|
53
|
-
Dark: the surface ladder does depth — `background` 0.17 L, `surface-raised` +0.05,
|
|
54
|
-
`surface-overlay` +0.10, cool hue held at 255. Focus is the 2px ink `ring`, always
|
|
55
|
-
visible.
|
|
56
|
-
|
|
57
|
-
## 7 Motion
|
|
58
|
-
Engineered restraint. Named moments: `bench-fade` (page content, 150ms), `panel-slide`
|
|
59
|
-
(side panel, 220ms, interruptible), `switch-press` (primary-action press, 100ms).
|
|
60
|
-
Physicality is granted only to auth and first-run empty states; build logs stream without
|
|
61
|
-
animation; nothing moves on keyboard-initiated actions.
|
|
62
|
-
|
|
63
|
-
## 8 Iconography & Charts
|
|
64
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
65
|
-
no gridline fills; the categorical ramp leads with ink-navy and spends the scoped
|
|
66
|
-
link-blue as a data hue (`chart-1..5`) — restrained, cool, engineered; tooltips on
|
|
67
|
-
`surface-overlay` with mono numerals.
|
|
68
|
-
|
|
69
|
-
## 9 Voice
|
|
70
|
-
Engineer's logbook: short, factual, present tense, no exclamation. "Start build" · "No
|
|
71
|
-
builds queued — last release shipped 2 hours ago" · "This build failed at the signing
|
|
72
|
-
step; credentials expired."
|
|
73
|
-
|
|
74
|
-
## 10 Do's & Don'ts
|
|
75
|
-
Do reserve black `primary` for the single most important action — everything else is
|
|
76
|
-
neutral or status. Do set controls at 8px and cards at 12px — the developer dialect. Do
|
|
77
|
-
carry every ID, code, and timestamp in mono. Don't introduce a saturated brand action
|
|
78
|
-
color. Don't put the link-blue on a CTA or button. Don't pill the CTA — pill is badges
|
|
79
|
-
only. Don't reach past the single soft drop except for a real overlay.
|
|
80
|
-
|
|
81
|
-
## 11 Responsive
|
|
82
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
83
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane list+detail
|
|
84
|
-
holds. 1440: forms cap; tables and dashboards use the full width.
|
|
85
|
-
|
|
86
|
-
## 12 Agent Prompt Guide
|
|
87
|
-
Reach first for black as the single action fill; keep every other control neutral on a
|
|
88
|
-
hairline. The link-blue is a reference color only — inline links, breadcrumbs,
|
|
89
|
-
cross-links. Stay flat: hairline and weight before shadow. Every workflow completes from
|
|
90
|
-
the keyboard with the ink ring visible. Dark is authored — consult the block, never
|
|
91
|
-
invert the lab bench.
|
|
92
|
-
|
|
93
|
-
```yaml design-values
|
|
94
|
-
color:
|
|
95
|
-
light:
|
|
96
|
-
background: oklch(0.99 0.005 255)
|
|
97
|
-
foreground: oklch(0.21 0.006 255)
|
|
98
|
-
card: oklch(0.995 0.005 255)
|
|
99
|
-
card-foreground: oklch(0.21 0.006 255)
|
|
100
|
-
popover: oklch(0.995 0.005 255)
|
|
101
|
-
popover-foreground: oklch(0.21 0.006 255)
|
|
102
|
-
primary: oklch(0.15 0.005 255)
|
|
103
|
-
primary-foreground: oklch(0.99 0.005 255)
|
|
104
|
-
secondary: oklch(0.956 0.006 265)
|
|
105
|
-
secondary-foreground: oklch(0.25 0.008 255)
|
|
106
|
-
muted: oklch(0.956 0.006 265)
|
|
107
|
-
muted-foreground: oklch(0.5 0.014 264)
|
|
108
|
-
accent: oklch(0.94 0.006 260)
|
|
109
|
-
accent-foreground: oklch(0.21 0.006 255)
|
|
110
|
-
destructive: oklch(0.577 0.215 27)
|
|
111
|
-
destructive-foreground: oklch(0.98 0.008 27)
|
|
112
|
-
success: oklch(0.627 0.17 149)
|
|
113
|
-
warning: oklch(0.571 0.129 64)
|
|
114
|
-
border: oklch(0.9 0.005 250)
|
|
115
|
-
input: oklch(0.9 0.005 250)
|
|
116
|
-
ring: oklch(0.21 0.006 255)
|
|
117
|
-
surface-raised: oklch(0.985 0.005 255)
|
|
118
|
-
surface-overlay: oklch(0.995 0.005 255)
|
|
119
|
-
chart-1: oklch(0.35 0.03 260)
|
|
120
|
-
chart-2: oklch(0.556 0.162 252)
|
|
121
|
-
chart-3: oklch(0.6 0.1 200)
|
|
122
|
-
chart-4: oklch(0.65 0.13 70)
|
|
123
|
-
chart-5: oklch(0.55 0.12 290)
|
|
124
|
-
sidebar: oklch(0.975 0.005 255)
|
|
125
|
-
sidebar-foreground: oklch(0.25 0.008 255)
|
|
126
|
-
sidebar-primary: oklch(0.15 0.005 255)
|
|
127
|
-
sidebar-primary-foreground: oklch(0.99 0.005 255)
|
|
128
|
-
sidebar-accent: oklch(0.94 0.006 260)
|
|
129
|
-
sidebar-accent-foreground: oklch(0.21 0.006 255)
|
|
130
|
-
sidebar-border: oklch(0.9 0.005 250)
|
|
131
|
-
sidebar-ring: oklch(0.21 0.006 255)
|
|
132
|
-
dark:
|
|
133
|
-
background: oklch(0.17 0.006 255)
|
|
134
|
-
foreground: oklch(0.94 0.005 255)
|
|
135
|
-
card: oklch(0.2 0.007 255)
|
|
136
|
-
card-foreground: oklch(0.94 0.005 255)
|
|
137
|
-
popover: oklch(0.27 0.008 255)
|
|
138
|
-
popover-foreground: oklch(0.94 0.005 255)
|
|
139
|
-
primary: oklch(0.94 0.005 255)
|
|
140
|
-
primary-foreground: oklch(0.17 0.006 255)
|
|
141
|
-
secondary: oklch(0.25 0.008 258)
|
|
142
|
-
secondary-foreground: oklch(0.91 0.005 255)
|
|
143
|
-
muted: oklch(0.24 0.008 258)
|
|
144
|
-
muted-foreground: oklch(0.72 0.01 258)
|
|
145
|
-
accent: oklch(0.28 0.009 258)
|
|
146
|
-
accent-foreground: oklch(0.93 0.005 255)
|
|
147
|
-
destructive: oklch(0.63 0.19 27)
|
|
148
|
-
destructive-foreground: oklch(0.14 0.02 27)
|
|
149
|
-
success: oklch(0.69 0.14 152)
|
|
150
|
-
warning: oklch(0.72 0.13 70)
|
|
151
|
-
border: oklch(0.28 0.008 258)
|
|
152
|
-
input: oklch(0.28 0.008 258)
|
|
153
|
-
ring: oklch(0.94 0.005 255)
|
|
154
|
-
surface-raised: oklch(0.22 0.007 255)
|
|
155
|
-
surface-overlay: oklch(0.27 0.008 255)
|
|
156
|
-
chart-1: oklch(0.8 0.02 255)
|
|
157
|
-
chart-2: oklch(0.65 0.14 252)
|
|
158
|
-
chart-3: oklch(0.7 0.1 200)
|
|
159
|
-
chart-4: oklch(0.75 0.12 70)
|
|
160
|
-
chart-5: oklch(0.65 0.11 290)
|
|
161
|
-
sidebar: oklch(0.15 0.006 255)
|
|
162
|
-
sidebar-foreground: oklch(0.9 0.005 255)
|
|
163
|
-
sidebar-primary: oklch(0.94 0.005 255)
|
|
164
|
-
sidebar-primary-foreground: oklch(0.17 0.006 255)
|
|
165
|
-
sidebar-accent: oklch(0.23 0.008 258)
|
|
166
|
-
sidebar-accent-foreground: oklch(0.92 0.005 255)
|
|
167
|
-
sidebar-border: oklch(0.24 0.008 258)
|
|
168
|
-
sidebar-ring: oklch(0.94 0.005 255)
|
|
169
|
-
typography:
|
|
170
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
171
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
172
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
173
|
-
ramp:
|
|
174
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.015em }
|
|
175
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.01em }
|
|
176
|
-
h2: { size: 18px, line: 25px, weight: 600, family: sans, tracking: -0.01em }
|
|
177
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
178
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
179
|
-
caption: { size: 11px, line: 15px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
180
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
181
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, code, ids, logs, timestamps] }
|
|
182
|
-
elevation:
|
|
183
|
-
radius: { sm: 8px, md: 12px, lg: 16px }
|
|
184
|
-
hairline: border
|
|
185
|
-
shadow:
|
|
186
|
-
overlay: "0 8px 24px oklch(0.25 0.015 255 / 0.1)"
|
|
187
|
-
popover: "0 4px 12px oklch(0.25 0.015 255 / 0.06)"
|
|
188
|
-
dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.27, hue-held: 255 }
|
|
189
|
-
motion:
|
|
190
|
-
duration: { press: 100ms, fade: 150ms, panel: 220ms }
|
|
191
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
192
|
-
entrance-never: ease-in
|
|
193
|
-
identity-moments: [auth, first-run-empty]
|
|
194
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
195
|
-
charts:
|
|
196
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
197
|
-
sequential: { from: background, to: chart-2 }
|
|
198
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
199
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1360px }
|
|
200
|
-
```
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: figma
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [design-tools, collaboration, creative]
|
|
6
|
-
keywords: [monochrome, black-white, magenta, flat, warm-paper, mono-labels]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 figma entry (2026-07-04); 2026-07-12 re-audit of Figma public brand; Inter substitutes the proprietary Figma Sans (matching its fine variable-weight axis); Space Mono substitutes Figma Mono; light destructive deepened one step for body contrast"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# figma — an architect's white drafting table with one magenta sticky tab
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An architect's drafting table: white sheet, pure black fineliner, warm off-white trace
|
|
16
|
-
paper for the panels, and a single magenta sticky tab marking the live drawing. Light by
|
|
17
|
-
default; emphatically flat — hierarchy is hairline `border`, type weight, and the
|
|
18
|
-
black/white contrast itself, never heavy shadow. Monochrome spine, joyful edges: the
|
|
19
|
-
pastels are demoted to chart encodings. The dark theme is the studio's night board —
|
|
20
|
-
warm-neutral charcoal rungs, the fineliner flipped to white, the magenta tab unmoved.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Black ink `foreground` on the white `background`, warm off-white for `muted` and the
|
|
24
|
-
`sidebar` ground. `primary` fills black — the brand's own primary is achromatic — so
|
|
25
|
-
magenta stays a single-shot pop: the focus `ring`, active indicators, and the pale
|
|
26
|
-
`accent` selection tint. The pastel color blocks are marketing surfaces, reappearing only
|
|
27
|
-
as `chart-*`. Status hues speak only status; the light `destructive` is the brand red
|
|
28
|
-
deepened one step for body contrast.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (the open substitute for Figma Sans, matching its fine variable-weight axis) over
|
|
32
|
-
Space Mono (the open substitute for Figma Mono — IDs, codes, timestamps, and the
|
|
33
|
-
uppercase eyebrow labels, never body). One voice that flexes by weight, not a
|
|
34
|
-
multi-family stack; the poster-scale display and its aggressive tracking stay behind.
|
|
35
|
-
Register scope: display register for page titles, empty states, and auth; mono for data
|
|
36
|
-
and eyebrow labels; numeric columns `tabular-nums`.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-sm` (6px), black `primary` fill, no pill — but icon-only buttons stay
|
|
40
|
-
circular, the one marketing shape that carries. Inputs on `background` with hairline;
|
|
41
|
-
focus draws the magenta `ring` at 2px, no fill change. Cards on hairline, large feature
|
|
42
|
-
cards may take `radius-lg`. Table rows with `muted` hover, selection tinting `accent`
|
|
43
|
-
with a magenta ring indicator. Detail opens in the side panel; badges take hairline,
|
|
44
|
-
`muted` or status fills, uppercase mono captions — never `primary`, never magenta.
|
|
45
|
-
|
|
46
|
-
## 5 Layout
|
|
47
|
-
8px base (Figma's grid); sidebar 240/48px on the warm off-white ground; topbar 56px (the
|
|
48
|
-
brand's own nav height); side panel 440/640px; content max 1360px. Density standard,
|
|
49
|
-
stepping denser per archetype; the 96px section rhythm stays behind.
|
|
50
|
-
|
|
51
|
-
## 6 Depth
|
|
52
|
-
Light: the surface ladder, hairlines, and black/white contrast carry rank; overlays earn
|
|
53
|
-
the one soft warm-tinted tier. Dark: the surface ladder does depth — `background` 0.18 L,
|
|
54
|
-
`surface-raised` +0.05, `surface-overlay` +0.10, warm-neutral hue held near 100. The 2px
|
|
55
|
-
magenta `ring` is the one chromatic depth signal, constantly visible to keyboard users.
|
|
56
|
-
|
|
57
|
-
## 7 Motion
|
|
58
|
-
Precise, tool-like. Named moments: `tab-flick` (selection indicator slide, 120ms),
|
|
59
|
-
`panel-slide` (side panel, 220ms, interruptible), `board-fade` (page content, 140ms).
|
|
60
|
-
Physicality is granted only to auth and first-run empty states; canvas-like surfaces
|
|
61
|
-
never bounce; nothing animates on keyboard-initiated actions.
|
|
62
|
-
|
|
63
|
-
## 8 Iconography & Charts
|
|
64
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default; icon-only buttons
|
|
65
|
-
circular. Charts: hairline axes, no gridline fills; the categorical ramp spends the
|
|
66
|
-
demoted marketing pastels as encodings — lilac, mint, coral, navy, pink (`chart-1..5`);
|
|
67
|
-
tooltips on `surface-overlay` with mono numerals.
|
|
68
|
-
|
|
69
|
-
## 9 Voice
|
|
70
|
-
Friendly precision — a tool that likes its users but respects their time. "New project" ·
|
|
71
|
-
"All caught up — 4 files updated today" · "You can't move this file; ask an editor for
|
|
72
|
-
access."
|
|
73
|
-
|
|
74
|
-
## 10 Do's & Don'ts
|
|
75
|
-
Do wear the spine: black on white, warm off-white panels, hairline depth. Do keep magenta
|
|
76
|
-
single-shot — the focus ring and small active indicators, never a fill or body text. Do
|
|
77
|
-
keep icon-only buttons circular. Don't reach for the pastel blocks as chrome — charts
|
|
78
|
-
only. Don't pill the CTA — pills stay on the marketing site. Don't introduce a second
|
|
79
|
-
chromatic accent or signal elevation with heavy shadows.
|
|
80
|
-
|
|
81
|
-
## 11 Responsive
|
|
82
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
83
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane list+detail
|
|
84
|
-
holds. 1440: forms cap; tables and dashboards use the full width.
|
|
85
|
-
|
|
86
|
-
## 12 Agent Prompt Guide
|
|
87
|
-
Primary action fills black; if two things want the black fill, one is not primary.
|
|
88
|
-
Magenta is single-shot: ring and active indicators only. Weight, not scale, carries
|
|
89
|
-
hierarchy — bump one step, never resize. Eyebrows are uppercase mono. The pastels live
|
|
90
|
-
only in charts. Dark is authored — consult the block, never invert the drafting sheet.
|
|
91
|
-
|
|
92
|
-
```yaml design-values
|
|
93
|
-
color:
|
|
94
|
-
light:
|
|
95
|
-
background: oklch(0.99 0.005 100)
|
|
96
|
-
foreground: oklch(0.15 0.005 100)
|
|
97
|
-
card: oklch(0.995 0.005 100)
|
|
98
|
-
card-foreground: oklch(0.15 0.005 100)
|
|
99
|
-
popover: oklch(0.995 0.005 100)
|
|
100
|
-
popover-foreground: oklch(0.15 0.005 100)
|
|
101
|
-
primary: oklch(0.15 0.005 100)
|
|
102
|
-
primary-foreground: oklch(0.99 0.005 100)
|
|
103
|
-
secondary: oklch(0.965 0.005 106)
|
|
104
|
-
secondary-foreground: oklch(0.15 0.005 100)
|
|
105
|
-
muted: oklch(0.965 0.005 106)
|
|
106
|
-
muted-foreground: oklch(0.5 0.006 100)
|
|
107
|
-
accent: oklch(0.944 0.033 351)
|
|
108
|
-
accent-foreground: oklch(0.38 0.16 2)
|
|
109
|
-
destructive: oklch(0.577 0.205 25)
|
|
110
|
-
destructive-foreground: oklch(0.98 0.008 25)
|
|
111
|
-
success: oklch(0.636 0.172 149)
|
|
112
|
-
warning: oklch(0.76 0.142 60)
|
|
113
|
-
border: oklch(0.925 0.005 100)
|
|
114
|
-
input: oklch(0.925 0.005 100)
|
|
115
|
-
ring: oklch(0.673 0.233 2)
|
|
116
|
-
surface-raised: oklch(0.985 0.005 100)
|
|
117
|
-
surface-overlay: oklch(0.995 0.005 100)
|
|
118
|
-
chart-1: oklch(0.62 0.13 300)
|
|
119
|
-
chart-2: oklch(0.7 0.11 165)
|
|
120
|
-
chart-3: oklch(0.68 0.14 35)
|
|
121
|
-
chart-4: oklch(0.45 0.1 265)
|
|
122
|
-
chart-5: oklch(0.7 0.18 2)
|
|
123
|
-
sidebar: oklch(0.976 0.005 106)
|
|
124
|
-
sidebar-foreground: oklch(0.15 0.005 100)
|
|
125
|
-
sidebar-primary: oklch(0.15 0.005 100)
|
|
126
|
-
sidebar-primary-foreground: oklch(0.99 0.005 100)
|
|
127
|
-
sidebar-accent: oklch(0.944 0.033 351)
|
|
128
|
-
sidebar-accent-foreground: oklch(0.3 0.1 2)
|
|
129
|
-
sidebar-border: oklch(0.925 0.005 100)
|
|
130
|
-
sidebar-ring: oklch(0.673 0.233 2)
|
|
131
|
-
dark:
|
|
132
|
-
background: oklch(0.18 0.005 100)
|
|
133
|
-
foreground: oklch(0.95 0.005 100)
|
|
134
|
-
card: oklch(0.22 0.006 100)
|
|
135
|
-
card-foreground: oklch(0.95 0.005 100)
|
|
136
|
-
popover: oklch(0.28 0.006 100)
|
|
137
|
-
popover-foreground: oklch(0.95 0.005 100)
|
|
138
|
-
primary: oklch(0.95 0.005 100)
|
|
139
|
-
primary-foreground: oklch(0.18 0.005 100)
|
|
140
|
-
secondary: oklch(0.26 0.006 100)
|
|
141
|
-
secondary-foreground: oklch(0.92 0.005 100)
|
|
142
|
-
muted: oklch(0.25 0.006 100)
|
|
143
|
-
muted-foreground: oklch(0.72 0.008 100)
|
|
144
|
-
accent: oklch(0.32 0.05 355)
|
|
145
|
-
accent-foreground: oklch(0.95 0.01 355)
|
|
146
|
-
destructive: oklch(0.64 0.19 25)
|
|
147
|
-
destructive-foreground: oklch(0.14 0.02 25)
|
|
148
|
-
success: oklch(0.7 0.15 152)
|
|
149
|
-
warning: oklch(0.78 0.13 65)
|
|
150
|
-
border: oklch(0.29 0.006 100)
|
|
151
|
-
input: oklch(0.29 0.006 100)
|
|
152
|
-
ring: oklch(0.71 0.21 2)
|
|
153
|
-
surface-raised: oklch(0.23 0.006 100)
|
|
154
|
-
surface-overlay: oklch(0.28 0.006 100)
|
|
155
|
-
chart-1: oklch(0.7 0.13 300)
|
|
156
|
-
chart-2: oklch(0.76 0.11 165)
|
|
157
|
-
chart-3: oklch(0.74 0.13 35)
|
|
158
|
-
chart-4: oklch(0.62 0.1 265)
|
|
159
|
-
chart-5: oklch(0.75 0.19 2)
|
|
160
|
-
sidebar: oklch(0.16 0.005 100)
|
|
161
|
-
sidebar-foreground: oklch(0.92 0.005 100)
|
|
162
|
-
sidebar-primary: oklch(0.95 0.005 100)
|
|
163
|
-
sidebar-primary-foreground: oklch(0.18 0.005 100)
|
|
164
|
-
sidebar-accent: oklch(0.3 0.045 355)
|
|
165
|
-
sidebar-accent-foreground: oklch(0.94 0.01 355)
|
|
166
|
-
sidebar-border: oklch(0.25 0.006 100)
|
|
167
|
-
sidebar-ring: oklch(0.71 0.21 2)
|
|
168
|
-
typography:
|
|
169
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
170
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
171
|
-
mono: { family: "Space Mono", fallback: "ui-monospace, monospace", weights: [400, 700] }
|
|
172
|
-
ramp:
|
|
173
|
-
display: { size: 28px, line: 36px, weight: 600, family: display, tracking: -0.015em }
|
|
174
|
-
h1: { size: 24px, line: 31px, weight: 600, family: sans, tracking: -0.01em }
|
|
175
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
176
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
177
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
178
|
-
caption: { size: 12px, line: 16px, weight: 400, family: mono, tracking: 0.05em, transform: uppercase }
|
|
179
|
-
data: { size: 13px, line: 19px, weight: 400, family: mono, features: [tnum] }
|
|
180
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, timestamps, eyebrow-labels] }
|
|
181
|
-
elevation:
|
|
182
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
183
|
-
hairline: border
|
|
184
|
-
shadow:
|
|
185
|
-
overlay: "0 8px 28px oklch(0.25 0.01 100 / 0.1)"
|
|
186
|
-
popover: "0 4px 16px oklch(0.25 0.01 100 / 0.06)"
|
|
187
|
-
dark-ladder: { background: 0.18, raised: 0.23, overlay: 0.28, hue-held: 100 }
|
|
188
|
-
motion:
|
|
189
|
-
duration: { press: 120ms, fade: 140ms, panel: 220ms }
|
|
190
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
191
|
-
entrance-never: ease-in
|
|
192
|
-
identity-moments: [auth, first-run-empty]
|
|
193
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
194
|
-
charts:
|
|
195
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
196
|
-
sequential: { from: background, to: chart-4 }
|
|
197
|
-
diverging: { negative: destructive, mid: muted, positive: chart-2 }
|
|
198
|
-
layout: { base: 8px, sidebar: [240px, 48px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
199
|
-
```
|