@nurix/etna 0.19.11 → 0.19.12
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/code/harness.json +1 -1
- package/data/harnesses/code/rules/frontend.md +5 -5
- package/data/harnesses/code/skills/design/SKILL.md +70 -50
- package/data/harnesses/code/skills/design/components/charts.md +76 -0
- package/data/harnesses/code/skills/design/components/collections.md +132 -0
- package/data/harnesses/code/skills/design/components/feedback.md +47 -0
- package/data/harnesses/code/skills/design/components/hooks.md +35 -0
- package/data/harnesses/code/skills/design/components/index.md +143 -0
- package/data/harnesses/code/skills/design/components/inputs.md +327 -0
- package/data/harnesses/code/skills/design/components/layout.md +52 -0
- package/data/harnesses/code/skills/design/components/media.md +66 -0
- package/data/harnesses/code/skills/design/components/motion.md +82 -0
- package/data/harnesses/code/skills/design/components/navigation.md +29 -0
- package/data/harnesses/code/skills/design/components/overlays.md +72 -0
- package/data/harnesses/code/skills/design/components/setup.md +40 -0
- package/data/harnesses/code/skills/design/components/typography.md +46 -0
- package/data/harnesses/code/skills/design/components/utils.md +37 -0
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +38 -0
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +33 -0
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +19 -0
- package/data/harnesses/code/skills/design/data/charts/census.csv +58 -0
- package/data/harnesses/code/skills/design/data/checklists/browse.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +20 -0
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/grid.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/queue.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/settings.md +21 -0
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +68 -0
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +63 -0
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +60 -0
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +78 -0
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +62 -0
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +65 -0
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +90 -0
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +91 -0
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +90 -0
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +90 -0
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +90 -0
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +90 -0
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +90 -0
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +90 -0
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +90 -0
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +90 -0
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +90 -0
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +90 -0
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +89 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +87 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +83 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +89 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +20 -0
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +20 -0
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +17 -0
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +21 -0
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +17 -0
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +21 -0
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +20 -0
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +16 -0
- package/data/harnesses/code/skills/design/data/iconography.md +199 -0
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +18 -0
- package/data/harnesses/code/skills/design/data/tells.csv +34 -0
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +17 -0
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +29 -0
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +179 -0
- package/data/harnesses/code/skills/design/design-md/index.csv +67 -0
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +207 -0
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/apple.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/binance.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/cal.md +209 -0
- package/data/harnesses/code/skills/design/design-md/library/clay.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/composio.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/expo.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/figma.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/framer.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/meta.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/miro.md +209 -0
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/notion.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +215 -0
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +213 -0
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +216 -0
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +218 -0
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +214 -0
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/resend.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/slack.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +194 -0
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +193 -0
- package/data/harnesses/code/skills/design/design-md/library/uber.md +195 -0
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +195 -0
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/warp.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/wired.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/wise.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +198 -0
- package/data/harnesses/code/skills/design/design-md/nurix.md +214 -0
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +184 -0
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +216 -0
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +211 -0
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +212 -0
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +216 -0
- package/data/harnesses/code/skills/design/references/compose.md +23 -0
- package/data/harnesses/code/skills/design/references/content.md +28 -0
- package/data/harnesses/code/skills/design/references/emission.md +21 -0
- package/data/harnesses/code/skills/design/references/existing-apps.md +27 -0
- package/data/harnesses/code/skills/design/references/intake.md +36 -0
- package/data/harnesses/code/skills/design/references/object-pass.md +24 -0
- package/data/harnesses/code/skills/design/references/ship-gate.md +29 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/Readme.md +195 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/ai-layer.md +49 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/attributes-lifecycle.md +43 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/container-choice.md +44 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/creation-paths.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/dashboards.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/modes.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/object-model.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/page-archetype.md +48 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/promotion-demotion.md +37 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/settings.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/standard-pages.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/state-matrix.md +41 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/table-mechanics.md +48 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/verbs.md +45 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/viewer-context.md +40 -0
- package/data/harnesses/code/skills/design/scripts/README-validator.md +27 -0
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +596 -0
- package/data/harnesses/code/skills/design/scripts/validate-design-md.mjs +1198 -0
- package/package.json +1 -1
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +0 -137
- package/data/harnesses/code/skills/design/data/combinations/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/combinations/accent-presets.md +0 -113
- package/data/harnesses/code/skills/design/data/combinations/charts.csv +0 -33
- package/data/harnesses/code/skills/design/data/combinations/fonts-known.json +0 -448
- package/data/harnesses/code/skills/design/data/combinations/icons.csv +0 -157
- package/data/harnesses/code/skills/design/data/combinations/landing.csv +0 -38
- package/data/harnesses/code/skills/design/data/combinations/lucide-names.json +0 -2001
- package/data/harnesses/code/skills/design/data/combinations/manifest.json +0 -330
- package/data/harnesses/code/skills/design/data/combinations/motion.csv +0 -10
- package/data/harnesses/code/skills/design/data/combinations/palettes.csv +0 -92
- package/data/harnesses/code/skills/design/data/combinations/product-router.csv +0 -80
- package/data/harnesses/code/skills/design/data/combinations/styles.csv +0 -67
- package/data/harnesses/code/skills/design/data/combinations/typography.csv +0 -64
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +0 -106
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +0 -154
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +0 -151
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +0 -147
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +0 -148
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +0 -141
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +0 -122
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +0 -155
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +0 -141
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +0 -142
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +0 -152
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +0 -170
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +0 -168
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +0 -163
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +0 -147
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +0 -171
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +0 -166
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +0 -160
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +0 -173
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +0 -167
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +0 -130
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +0 -138
- package/data/harnesses/code/skills/design/data/design-tokens/SCHEMA.md +0 -695
- package/data/harnesses/code/skills/design/data/design-tokens/airbnb/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/airbnb/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/airtable/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/airtable/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/anthropic-claude/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/anthropic-claude/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/apple/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/apple/design.tokens.json +0 -1262
- package/data/harnesses/code/skills/design/data/design-tokens/binance/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/binance/design.tokens.json +0 -1257
- package/data/harnesses/code/skills/design/data/design-tokens/bmw/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/bmw/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/cal/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cal/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/clay/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/clay/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/clickhouse/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/clickhouse/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/cohere/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cohere/design.tokens.json +0 -1281
- package/data/harnesses/code/skills/design/data/design-tokens/coinbase/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/coinbase/design.tokens.json +0 -1262
- package/data/harnesses/code/skills/design/data/design-tokens/composio/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/composio/design.tokens.json +0 -1271
- package/data/harnesses/code/skills/design/data/design-tokens/cursor/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cursor/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/elevenlabs/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/elevenlabs/design.tokens.json +0 -1293
- package/data/harnesses/code/skills/design/data/design-tokens/expo/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/expo/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/figma/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/figma/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/framer/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/framer/design.tokens.json +0 -1267
- package/data/harnesses/code/skills/design/data/design-tokens/goldens.json +0 -251
- package/data/harnesses/code/skills/design/data/design-tokens/hashicorp/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/hashicorp/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/ibm/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/ibm/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/design-tokens/intercom/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/intercom/design.tokens.json +0 -1290
- package/data/harnesses/code/skills/design/data/design-tokens/kraken/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/kraken/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.tokens.dark.json +0 -599
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/lovable/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/lovable/design.tokens.json +0 -1267
- package/data/harnesses/code/skills/design/data/design-tokens/meta/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/meta/design.tokens.json +0 -1289
- package/data/harnesses/code/skills/design/data/design-tokens/minimax/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/minimax/design.tokens.json +0 -1258
- package/data/harnesses/code/skills/design/data/design-tokens/mintlify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mintlify/design.tokens.json +0 -1284
- package/data/harnesses/code/skills/design/data/design-tokens/miro/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/miro/design.tokens.json +0 -1291
- package/data/harnesses/code/skills/design/data/design-tokens/mistral-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mistral-ai/design.tokens.json +0 -1263
- package/data/harnesses/code/skills/design/data/design-tokens/mongodb/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mongodb/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/notion/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/notion/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/nurix/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/nurix/design.tokens.json +0 -1209
- package/data/harnesses/code/skills/design/data/design-tokens/nvidia/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/nvidia/design.tokens.json +0 -1265
- package/data/harnesses/code/skills/design/data/design-tokens/ollama/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/ollama/design.tokens.json +0 -1253
- package/data/harnesses/code/skills/design/data/design-tokens/opencode-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/opencode-ai/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/posthog/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/posthog/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/raycast/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/raycast/design.tokens.json +0 -1263
- package/data/harnesses/code/skills/design/data/design-tokens/replicate/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/replicate/design.tokens.json +0 -1266
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.tokens.dark.json +0 -623
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/revolut/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/revolut/design.tokens.json +0 -1264
- package/data/harnesses/code/skills/design/data/design-tokens/runwayml/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/runwayml/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/sanity/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/sanity/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/sentry/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/sentry/design.tokens.json +0 -1288
- package/data/harnesses/code/skills/design/data/design-tokens/shopify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/shopify/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/slack/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/slack/design.tokens.json +0 -1265
- package/data/harnesses/code/skills/design/data/design-tokens/spacex/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/spacex/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/spotify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/spotify/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/design-tokens/stripe/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/stripe/design.tokens.json +0 -1285
- package/data/harnesses/code/skills/design/data/design-tokens/supabase/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/supabase/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/superhuman/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/superhuman/design.tokens.json +0 -1278
- package/data/harnesses/code/skills/design/data/design-tokens/tesla/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/tesla/design.tokens.json +0 -1269
- package/data/harnesses/code/skills/design/data/design-tokens/theverge/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/theverge/design.tokens.json +0 -1285
- package/data/harnesses/code/skills/design/data/design-tokens/together-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/together-ai/design.tokens.json +0 -1303
- package/data/harnesses/code/skills/design/data/design-tokens/uber/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/uber/design.tokens.json +0 -1274
- package/data/harnesses/code/skills/design/data/design-tokens/vercel/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/vercel/design.tokens.json +0 -1296
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.tokens.dark.json +0 -612
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.tokens.json +0 -1282
- package/data/harnesses/code/skills/design/data/design-tokens/warp/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/warp/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/webflow/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/webflow/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/wired/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/wired/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/wise/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/wise/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/x-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/x-ai/design.tokens.json +0 -1296
- package/data/harnesses/code/skills/design/data/design-tokens/zapier/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/zapier/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +0 -225
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +0 -224
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +0 -88
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +0 -132
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +0 -76
- package/data/harnesses/code/skills/design/references/create.md +0 -173
- package/data/harnesses/code/skills/design/references/diagnosis.md +0 -108
- package/data/harnesses/code/skills/design/references/hard-rules.md +0 -177
- package/data/harnesses/code/skills/design/references/improve.md +0 -116
- package/data/harnesses/code/skills/design/references/interaction.md +0 -77
- package/data/harnesses/code/skills/design/references/introspect.md +0 -100
- package/data/harnesses/code/skills/design/references/lifecycle.md +0 -73
- package/data/harnesses/code/skills/design/references/personality.md +0 -575
- package/data/harnesses/code/skills/design/references/structure.md +0 -159
- package/data/harnesses/code/skills/design/scripts/convert-design-md.mjs +0 -1312
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +0 -1498
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +0 -551
- package/data/harnesses/code/skills/design/scripts/lib/checks.mjs +0 -1092
- package/data/harnesses/code/skills/design/scripts/lib/golden.mjs +0 -26
- package/data/harnesses/code/skills/design/scripts/lib/vocabulary.mjs +0 -65
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +0 -538
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +0 -312
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +0 -890
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +0 -769
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +0 -675
- package/data/harnesses/code/skills/design/scripts/snapshot-goldens.mjs +0 -164
- package/data/harnesses/code/skills/design/scripts/validate-combinations.mjs +0 -439
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Stripe
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Stripe — operator reading
|
|
9
|
-
|
|
10
|
-
The operator translation of Stripe's financial-infrastructure brand — a marketing system built on a
|
|
11
|
-
gradient-mesh hero, thin Sohne display type at negative tracking, single-indigo pill CTAs, and
|
|
12
|
-
tabular money figures. This entry keeps the operator-durable core — the indigo accent, the deep-navy
|
|
13
|
-
ink, the cool temperature, the soft blue-tinted lift, the thin editorial type voice, the
|
|
14
|
-
tabular-figure money signal — and leaves the marketing scaffolding behind; §9 lists exactly what
|
|
15
|
-
carries and what stays.
|
|
16
|
-
|
|
17
|
-
## 1 Visual Theme
|
|
18
|
-
|
|
19
|
-
Light by default; dark is opt-in. The working canvas is white `background`, banded with a cool-tinted
|
|
20
|
-
off-white `canvas-soft` for grouped panels. Stripe's one departure from pure-flat carries: cards lift on
|
|
21
|
-
a **soft blue-tinted shadow** (`shadow-blue`, `rgba(0,55,112,0.08)`), not gray — depth reads cool and
|
|
22
|
-
engineered, never heavy. A single accent, indigo `primary` (`#533afd`), is reserved for the one action
|
|
23
|
-
that matters; ink is deep navy `foreground` (`#0d253d`), never pure black. The temperature runs cool
|
|
24
|
-
throughout — hairlines lean blue, inputs cooler still. The type voice is thin and editorial (Sohne, Inter
|
|
25
|
-
substitute) with negative heading tracking and the `ss01` stylistic set. Density is `standard` — the
|
|
26
|
-
dashboard reads clean and moderate, neither terminal-dense nor consumer-spacious.
|
|
27
|
-
|
|
28
|
-
## 2 Color Roles
|
|
29
|
-
|
|
30
|
-
Light values. One chromatic accent — indigo is the only brand hue that carries meaning; status hues
|
|
31
|
-
speak only status; the gradient palette lives in charts, never chrome.
|
|
32
|
-
|
|
33
|
-
| Role | Value | Allowed where |
|
|
34
|
-
| --- | --- | --- |
|
|
35
|
-
| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface |
|
|
36
|
-
| `foreground` | deep navy `#0d253d` (ink) | all primary ink; never pure black |
|
|
37
|
-
| `muted` / `secondary` | cool off-white `#f6f9fc` (canvas-soft) | hover rows, subtle fills, grouped panel bands |
|
|
38
|
-
| `muted-foreground` | mid slate `#64748d` (ink-mute) | labels, captions, table meta |
|
|
39
|
-
| `border` | hairline `#e3e8ee` | every separator, grid line, and card edge |
|
|
40
|
-
| `input` | cooler hairline `#a8c3de` (hairline-input) | form-field edges only — the brand's cool input border |
|
|
41
|
-
| `primary` | indigo `#533afd` | the one primary action; active nav; inline link emphasis |
|
|
42
|
-
| `accent` | pale indigo `#edecfe` | selected/hovered rows and nav on the light canvas |
|
|
43
|
-
| `accent-foreground` | indigo deep `#4434d4` (primary-deep) | ink on the accent tint |
|
|
44
|
-
| `ring` | `primary` `#533afd` | the focus outline — always visible, keyboard-first |
|
|
45
|
-
| `destructive` | ruby `#ea2261` | destructive actions and error state only |
|
|
46
|
-
| `success` / `warning` | green `#1a8754` / amber `#bb5504` | status signalling only, never chrome |
|
|
47
|
-
|
|
48
|
-
The gradient stops (cream, sherbet, lavender, magenta, ruby) carry no UI role — they appear only as
|
|
49
|
-
chart series (see §7). Deep-navy `brand-dark-900` (`#1c1e54`) is not a page surface here.
|
|
50
|
-
|
|
51
|
-
## 3 Typography
|
|
52
|
-
|
|
53
|
-
One voice, thin and precise. `font-sans` is **Inter** — the documented open substitute for Stripe's
|
|
54
|
-
proprietary Sohne — carrying the brand rhythm with `ss01` enabled and negative tracking on headings;
|
|
55
|
-
it serves body, UI, table, and label. The 56px display tier and its weight-300 air stay behind, but the
|
|
56
|
-
thin editorial voice and tight tracking carry at operator heading scale. `font-mono` renders IDs, codes,
|
|
57
|
-
timestamps, and log lines; numeric columns and every money cell render `tabular-nums` — the brand's quiet
|
|
58
|
-
financial-data signal, which carries strongly.
|
|
59
|
-
|
|
60
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
61
|
-
| --- | --- | --- | --- |
|
|
62
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
63
|
-
| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
64
|
-
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` · -0.01em |
|
|
65
|
-
| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
|
|
66
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
67
|
-
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, +0.02em, uppercase |
|
|
68
|
-
| tabular | money / counts | 14px / 1.4 | `font-weight-normal`, `tabular-nums` |
|
|
69
|
-
|
|
70
|
-
Bump weight one step for emphasis — a thin brand, so emphasis lifts to medium 500, never a heavy 600.
|
|
71
|
-
Apply `ss01` on the body element so the stylistic-set substitution rides every text role.
|
|
72
|
-
|
|
73
|
-
## 4 Component Stylings
|
|
74
|
-
|
|
75
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
76
|
-
|
|
77
|
-
- **Button** — `primary`: filled indigo `primary` on `primary-foreground`, `radius` (rounded, not pilled
|
|
78
|
-
— the marketing pill stays behind). Secondary: `secondary` fill, 1px `border`, `primary` text. Ghost:
|
|
79
|
-
transparent, `accent` on hover.
|
|
80
|
-
- **Input** — `background` fill, 1px `input` border (`border-weight`) — the cool input hairline; `radius`;
|
|
81
|
-
focus swaps the border to the `ring` at full 2px, no glow.
|
|
82
|
-
- **Card** — `card` surface, 1px `border`, `radius`; lifts on the soft blue-tinted `md` shadow
|
|
83
|
-
(`shadow-intensity`) — the brand's one elevation cue; inset by `density-inset`.
|
|
84
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
85
|
-
numeric columns; row selection tints `accent`.
|
|
86
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
|
|
87
|
-
for content-heavy), beside the work, not over it.
|
|
88
|
-
- **Badge** — status pill (`radius-scale` max, the one controlled brand pill nod), hairline `border` or
|
|
89
|
-
status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
90
|
-
|
|
91
|
-
## 5 Layout
|
|
92
|
-
|
|
93
|
-
Base spacing rhythm 8px on a 4px grid; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`
|
|
94
|
-
(48 added on the 8px grid; the corpus jumps 32→64 for marketing bands, which stay behind). Shell
|
|
95
|
-
dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
|
|
96
|
-
`sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` / `side-panel-width-rich`,
|
|
97
|
-
modal `modal-width-max`, forms `form-max-width`, tables full-width. The marketing section padding
|
|
98
|
-
(64–96px) and the 1200px centered container stay behind. Density is governed globally by `density-tier`
|
|
99
|
-
and stepped per archetype by the surface catalog — never by absolute overrides.
|
|
100
|
-
|
|
101
|
-
## 6 Depth
|
|
102
|
-
|
|
103
|
-
Subtly lifted, cool. Unlike a pure-flat operator brand, Stripe carries one soft elevation cue — a
|
|
104
|
-
blue-tinted shadow — and otherwise leans on hairlines and the surface ladder:
|
|
105
|
-
|
|
106
|
-
- **0 — canvas** `background` white, no border.
|
|
107
|
-
- **1 — panel / card** `card` on a 1px `border`; lifts on a soft blue-tinted shadow
|
|
108
|
-
(`rgba(0,55,112,0.08) 0 1px 3px`) — the brand's signature cool lift, kept restrained.
|
|
109
|
-
- **2 — overlay** `popover` / side panel / modal — a deeper blue-tinted `md`
|
|
110
|
-
(`rgba(0,55,112,0.08) 0 8px 24px`) for floating chrome. No level stacks a heavier shadow to signal
|
|
111
|
-
rank; rank is border, position, and the one soft lift.
|
|
112
|
-
|
|
113
|
-
The gradient-mesh backdrop — the corpus's primary marketing depth medium — stays behind entirely. Focus
|
|
114
|
-
is a 2px indigo `ring` outline (never a glow), visible on every interactive element. Three z-levels:
|
|
115
|
-
content, sticky chrome, overlay.
|
|
116
|
-
|
|
117
|
-
## 7 Do's & Don'ts
|
|
118
|
-
|
|
119
|
-
- **Do** reserve indigo `primary` for the single most important action and inline link emphasis — one
|
|
120
|
-
filled control per view. If two things want it, one is not primary.
|
|
121
|
-
- **Do** keep ink deep navy `#0d253d`, never pure black; keep the temperature cool, hairlines blue-leaning.
|
|
122
|
-
- **Do** lift cards on the soft blue-tinted shadow (`shadow-blue`), never a neutral gray drop shadow.
|
|
123
|
-
- **Do** apply `tabular-nums` to every money and numeric column and `font-mono` to IDs, codes, timestamps;
|
|
124
|
-
keep `ss01` on the body.
|
|
125
|
-
- **Don't** promote a second chromatic accent — the gradient stops (cream, sherbet, lavender, magenta,
|
|
126
|
-
ruby) are chart series only, never chrome, and indigo is never a body-text color.
|
|
127
|
-
- **Don't** pill the primary CTA — the marketing pill stays behind; buttons take `radius`, only status
|
|
128
|
-
badges pill.
|
|
129
|
-
- **Don't** carry the gradient mesh, the cream feature band, or the dark-navy featured-tier inversion into
|
|
130
|
-
an operator surface.
|
|
131
|
-
- **Don't** open detail or edit in a modal when the side panel fits — modals are confirmations only.
|
|
132
|
-
|
|
133
|
-
## 8 Responsive
|
|
134
|
-
|
|
135
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
136
|
-
|
|
137
|
-
| Breakpoint | What changes |
|
|
138
|
-
| --- | --- |
|
|
139
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
140
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
141
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
142
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
143
|
-
|
|
144
|
-
## 9 Agent Prompt Guide
|
|
145
|
-
|
|
146
|
-
**Carries over:** indigo `primary` (`#533afd`) as the single reserved accent · deep-navy ink `#0d253d`
|
|
147
|
-
(never pure black) · the cool temperature with a cooler input hairline · the soft blue-tinted card
|
|
148
|
-
shadow (`rgba(0,55,112,0.08)`) · the thin Sohne/Inter type voice with negative heading tracking and
|
|
149
|
-
`ss01` · `tabular-nums` money as the financial-data signal.
|
|
150
|
-
|
|
151
|
-
**Stays behind:** the gradient-mesh backdrop · hero-scale display (56px, weight 300) · the pill CTA
|
|
152
|
-
(`8px 16px` pill) · the cream feature band · the dark-navy featured-tier inversion · the composited
|
|
153
|
-
product-UI mockups · the dark-app dashboard shell as the working surface.
|
|
154
|
-
|
|
155
|
-
- Lead every list surface with its table; accent only the primary action in indigo.
|
|
156
|
-
- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
|
|
157
|
-
- Every money and numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`, and every
|
|
158
|
-
workflow completes from the keyboard with the indigo `ring` outline always visible.
|
|
159
|
-
- Lift a card on the soft blue-tinted shadow, not a gray one; reach past a hairline only for a real
|
|
160
|
-
overlay. Leave the gradient mesh, the hero display, and the cream bands behind.
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Supabase
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Supabase — an operator reading of the white-canvas, emerald-green system
|
|
9
|
-
|
|
10
|
-
Supabase's web system is the quietly-technical brand in the database category: a committed white
|
|
11
|
-
canvas, near-black ink that is never pure black, one emerald-green voltage held for the CTA, and real
|
|
12
|
-
product UI (dashboard tables, SQL editors, log streams) doing the decorative work. This entry is the
|
|
13
|
-
*operator* reading — an internal tool (query console, project dashboard, job queue, log stream) in
|
|
14
|
-
Supabase's language. What carries: the white canvas, the single emerald accent held scarce, the
|
|
15
|
-
near-black ink, the idiosyncratic near-black-on-green button, flat hairline-first depth, the 6px
|
|
16
|
-
not-pill radius, the near-black `#1c1c1c` inlay for code and logs (the developer DNA), and Circular's
|
|
17
|
-
mid-weight-500 humanist voice with tight negative tracking. What stays behind: the 64/48px hero
|
|
18
|
-
display, the composited product-mockup float shadows, the dark inverted featured pricing tier, and the
|
|
19
|
-
64–96px marketing section rhythm.
|
|
20
|
-
|
|
21
|
-
## 1 Visual Theme
|
|
22
|
-
|
|
23
|
-
Light by default; dark is opt-in — the white `background` (`#ffffff`) is the committed floor, and the
|
|
24
|
-
white-canvas commitment is the brand (no atmospheric gradient, no dark marketing track). Flat:
|
|
25
|
-
hierarchy comes from a fine greyscale hairline ladder, type weight, and near-black-on-white contrast —
|
|
26
|
-
never heavy shadow. A single accent, emerald `primary` (`#3ecf8e`), is the only chromatic event on a
|
|
27
|
-
surface: it wears the one primary action, the focus `ring`, and the active-nav indicator, nothing else.
|
|
28
|
-
Ink is near-black `foreground` (`#171717`) — never pure `#000000`. The neutral ramp is a calibrated
|
|
29
|
-
achromatic grey (white through `#fafafa`, `#ededed`, `#dfdfdf` down to `#171717`). Density is
|
|
30
|
-
`standard` and steps denser per archetype — the product's tables and log streams read technical.
|
|
31
|
-
|
|
32
|
-
## 2 Color Roles
|
|
33
|
-
|
|
34
|
-
Light values first. One accent — emerald `primary` is the only chromatic hue that carries meaning;
|
|
35
|
-
status hues speak only status.
|
|
36
|
-
|
|
37
|
-
| Role | Value | Allowed where |
|
|
38
|
-
| --- | --- | --- |
|
|
39
|
-
| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
|
|
40
|
-
| `foreground` | near-black `#171717` (ink) | all primary ink and headlines — never pure black |
|
|
41
|
-
| `muted` | barely-tinted `#fafafa` (canvas-soft) | hover rows, subtle fills, quiet band tints |
|
|
42
|
-
| `secondary` | light grey `#f2f2f2` | secondary-button and segmented fills, one step below canvas |
|
|
43
|
-
| `muted-foreground` | mid grey `#707070` (ink-mute) | labels, captions, secondary text |
|
|
44
|
-
| `border` / `input` | hairline `#dfdfdf` | every separator, grid line, and field edge |
|
|
45
|
-
| `primary` | emerald `#3ecf8e` | the one primary action; active-nav indicator; the signature CTA and dot |
|
|
46
|
-
| `primary-foreground` | near-black `#171717` (on-primary) | text on the green action — the button reads "lit" with dark type, not a colored chip |
|
|
47
|
-
| `accent` | grey lift `#ededed` (hairline-cool) | selected/hovered rows and nav — a neutral lift, never coloured green |
|
|
48
|
-
| `ring` | emerald `#3ecf8e` | the focus outline — unmistakable, because keyboard-first |
|
|
49
|
-
| `destructive` | clean red `#dc2626` | destructive actions and error state only |
|
|
50
|
-
| `success` / `warning` | deep-emerald `#24b47e` / status-yellow `#ffdb13` | status signalling only, never chrome |
|
|
51
|
-
|
|
52
|
-
The emerald's power is its scarcity at element level; the rich accent set (purple, violet, pink,
|
|
53
|
-
indigo, tomato, crimson) is chart-and-logo voltage and carries no operator role beyond charts (see §7).
|
|
54
|
-
|
|
55
|
-
## 3 Typography
|
|
56
|
-
|
|
57
|
-
One sans, one mono. `font-mono` is the brand's **system mono** stack (`ui-monospace`, Menlo / Monaco
|
|
58
|
-
/ Consolas — the corpus ships no proprietary mono webfont) for IDs, codes, timestamps, log lines,
|
|
59
|
-
and SQL; numeric columns render `tabular-nums`. The marketing display scale (64/48px) stays behind —
|
|
60
|
-
an operator surface tops out at a 28px page title.
|
|
61
|
-
|
|
62
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
63
|
-
| --- | --- | --- | --- |
|
|
64
|
-
| h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
-
| h2 | section head | 22px / 1.2 | `font-weight-strong` · -0.01em |
|
|
66
|
-
| h3 | card / group head | 18px / 1.4 | `font-weight-strong` |
|
|
67
|
-
| body | UI + prose | 16px / 1.5 | `font-weight-normal` |
|
|
68
|
-
| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
|
|
69
|
-
| caption | uppercase eyebrow | 12px / 1.45 | `font-weight-strong`, +0.02em, uppercase |
|
|
70
|
-
| code | IDs, logs, SQL | 14px / 1.5 | `font-weight-normal` |
|
|
71
|
-
|
|
72
|
-
Display weight caps at 500 — the brand's calibrated mid-weight reads engineered, and breaks at 600+.
|
|
73
|
-
Negative tracking on headings is the signature; build hierarchy on size and tight tracking, never a
|
|
74
|
-
second family or a heavier-than-500 weight.
|
|
75
|
-
|
|
76
|
-
## 4 Component Stylings
|
|
77
|
-
|
|
78
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
79
|
-
|
|
80
|
-
- **Button** — primary: filled emerald `primary` with near-black `primary-foreground`, `radius` (6px),
|
|
81
|
-
never a pill; pressed lifts to deep-emerald. Secondary: `secondary` fill, 1px `border`, `foreground`.
|
|
82
|
-
Ghost: transparent, `accent` on hover.
|
|
83
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the emerald
|
|
84
|
-
`ring` at full 2px, no glow.
|
|
85
|
-
- **Card** — `card` surface on a 1px `border`, `radius`; depth is the hairline, not shadow — shadow
|
|
86
|
-
only when it must lift off the canvas; inset by `density-inset`.
|
|
87
|
-
- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `muted` on hover;
|
|
88
|
-
`tabular-nums` on numeric columns; selection tints `accent` (neutral, never green).
|
|
89
|
-
- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for
|
|
90
|
-
content-heavy), beside the work, not over it.
|
|
91
|
-
- **Badge** — pill radius, `muted`/status fill, uppercase caption; status badges take `success` /
|
|
92
|
-
`warning` / `destructive`, never `primary`. Pill radius is badges-only.
|
|
93
|
-
|
|
94
|
-
## 5 Layout
|
|
95
|
-
|
|
96
|
-
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
|
|
97
|
-
64–96px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
98
|
-
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
|
|
99
|
-
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
|
|
100
|
-
tables full-width. Density is governed globally by `density-tier` (standard, rewriting the spacing scale
|
|
101
|
-
through `density-gap`) and stepped per archetype by the surface catalog — the data-heavy console and
|
|
102
|
-
log stream step denser, never the whole app.
|
|
103
|
-
|
|
104
|
-
## 6 Depth
|
|
105
|
-
|
|
106
|
-
Flat, hairline-first. Hierarchy comes from the greyscale ladder and 1px hairlines, not drop shadows:
|
|
107
|
-
|
|
108
|
-
- **0 — canvas** `background` (`#ffffff`), no border.
|
|
109
|
-
- **1 — panel / card** `card` on a 1px `border`; the hairline carries rank — shadow only when a card
|
|
110
|
-
must genuinely lift off the canvas (the faintest `sm`).
|
|
111
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
112
|
-
shadow, enough to separate an overlay from the canvas above a scrim. Rank is border and position,
|
|
113
|
-
never a heavier shadow.
|
|
114
|
-
- **inlay — code / log / SQL** near-black `#1c1c1c` (canvas-night, `#202020` for nested chrome) with
|
|
115
|
-
white text and `font-mono` — the developer DNA carried even in a light UI (the SQL editor and log
|
|
116
|
-
stream wear it).
|
|
117
|
-
|
|
118
|
-
Focus is a 2px emerald `ring` outline (never a glow), visible on every interactive element. Three
|
|
119
|
-
z-levels: content, sticky chrome, overlay.
|
|
120
|
-
|
|
121
|
-
## 7 Do's & Don'ts
|
|
122
|
-
|
|
123
|
-
- **Do** anchor every surface on the white canvas; the white-canvas commitment is the brand — no
|
|
124
|
-
atmospheric gradient, no dark marketing track.
|
|
125
|
-
- **Do** reserve emerald `primary` for the primary action, the focus `ring`, and the active-nav
|
|
126
|
-
indicator — nothing else. Its scarcity is what reads as the one chromatic event.
|
|
127
|
-
- **Do** set near-black `primary-foreground` on the green button — the brand's idiosyncratic "lit"
|
|
128
|
-
read, dark type on green, never white.
|
|
129
|
-
- **Do** carry hierarchy with the greyscale ladder, hairlines, weight, and tight tracking — the brand
|
|
130
|
-
is flat.
|
|
131
|
-
- **Do** dress code, log, and SQL panels in the near-black inlay (`#1c1c1c`, `font-mono`) — show the
|
|
132
|
-
real query, not an illustration of one.
|
|
133
|
-
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
|
|
134
|
-
- **Don't** promote a second chromatic accent — purple, yellow, pink, and indigo belong in charts and
|
|
135
|
-
logos only, never as system or UI colours.
|
|
136
|
-
- **Don't** bump display weight above 500, or set white text on the green button — both break the brand.
|
|
137
|
-
- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 6px.
|
|
138
|
-
- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the panel fits.
|
|
139
|
-
|
|
140
|
-
## 8 Responsive
|
|
141
|
-
|
|
142
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
143
|
-
|
|
144
|
-
| Breakpoint | What changes |
|
|
145
|
-
| --- | --- |
|
|
146
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
147
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
148
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
149
|
-
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
150
|
-
|
|
151
|
-
Code, log, and SQL inlays keep mono legibility at every breakpoint by scrolling horizontally, not
|
|
152
|
-
wrapping.
|
|
153
|
-
|
|
154
|
-
## 9 Agent Prompt Guide
|
|
155
|
-
|
|
156
|
-
Directives the emitting agent follows verbatim:
|
|
157
|
-
|
|
158
|
-
- Wear the white canvas by default; the white-canvas commitment is Supabase — no gradient, no dark
|
|
159
|
-
marketing band. Panels read by their hairline, not by brightness.
|
|
160
|
-
- Spend emerald once per surface: the primary action, the focus ring, the active-nav indicator. If two
|
|
161
|
-
things want the green, one is not primary. Colour otherwise belongs to charts and status.
|
|
162
|
-
- Set near-black type on the green button (`primary-foreground` `#171717`), never white — the "lit"
|
|
163
|
-
green with dark type is the brand's signature.
|
|
164
|
-
- Headings ride Inter at weight 500 with tight negative tracking; the display scale (64/48px) stays
|
|
165
|
-
behind — operator headings top out at 28px, hierarchy is size and tracking. Never exceed weight 500.
|
|
166
|
-
- Dress code, log, and SQL panels in the near-black `#1c1c1c` inlay with `font-mono`; show the real
|
|
167
|
-
query, not a mockup of one.
|
|
168
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is
|
|
169
|
-
`font-mono` (system mono, no webfont).
|
|
170
|
-
- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
|
|
171
|
-
- Keyboard-first: the emerald `ring` focus outline is always visible.
|
|
172
|
-
- Leave behind: the 64/48px hero display, the composited product-mockup float shadows, the dark
|
|
173
|
-
featured pricing tier, and the 64–96px section rhythm — marketing chrome, not operator chrome.
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Superhuman
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Superhuman — the warm-editorial operator reading
|
|
9
|
-
|
|
10
|
-
An operator translation of Superhuman's fast-productivity brand: a warm, quiet, editorial system
|
|
11
|
-
whose content body is white with off-black warm-grey ink, anchored by a single deep indigo-navy
|
|
12
|
-
accent. The marketing surfaces are theatrical — a violet-sky atmospheric hero, hero-scale display
|
|
13
|
-
type, a deep-teal closing band that resolves every page. None of that theatre belongs on a queue or
|
|
14
|
-
a case detail; what carries is the warmth (warm neutrals, sub-default type weights, off-black ink),
|
|
15
|
-
the 8px rounded-rectangle radius character, and the one-accent indigo discipline.
|
|
16
|
-
|
|
17
|
-
## 1 Visual Theme
|
|
18
|
-
|
|
19
|
-
Light by default — the brand's content body *is* white; dark is opt-in. Warm and quiet: the neutral
|
|
20
|
-
ramp leans warm-grey, ink is `foreground` warm off-black `#292827` (never pure black), the canvas is
|
|
21
|
-
white, and hairlines are a warm grey `#e8e4dd`. Flat — hierarchy comes from hairline, type weight, and
|
|
22
|
-
whitespace, not shadow. A single accent, `primary` deep indigo-navy `#1b1938` (near-black), is reserved
|
|
23
|
-
for the one action that matters and for active nav; it is the brand's own CTA color. The radius
|
|
24
|
-
character is the signature: 8px rounded rectangles, never a pill on a working surface. Density is
|
|
25
|
-
`standard` and editorial-roomy — it steps denser per archetype, never cramped. The violet-sky hero
|
|
26
|
-
gradient, hero-scale display type, and the teal closing band stay behind as marketing (see §7).
|
|
27
|
-
|
|
28
|
-
## 2 Color Roles
|
|
29
|
-
|
|
30
|
-
Light values first. One accent — `primary` is the only chromatic hue that carries meaning; status hues
|
|
31
|
-
speak only status. Violet-soft and teal are marketing surfaces and carry no operator role.
|
|
32
|
-
|
|
33
|
-
| Role | Value | Allowed where |
|
|
34
|
-
| --- | --- | --- |
|
|
35
|
-
| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
36
|
-
| `foreground` | warm off-black `#292827` | all primary ink — never pure black |
|
|
37
|
-
| `muted` / `secondary` | warm off-white `#f4f2ed` | hover rows, subtle fills, secondary buttons |
|
|
38
|
-
| `muted-foreground` | warm grey `#73706d` | labels, captions, secondary text |
|
|
39
|
-
| `border` / `input` | warm hairline `#e8e4dd` | every separator, grid line, and field edge |
|
|
40
|
-
| `primary` | indigo-navy `#1b1938` | the one primary action; active nav; key interactive detail |
|
|
41
|
-
| `accent` | pale indigo tint `#edecf2` | selected / hovered rows and nav, on-accent surfaces only |
|
|
42
|
-
| `ring` | `primary` indigo | the focus outline — unmistakable, because keyboard-first |
|
|
43
|
-
| `destructive` | warm red `#c0362b` | destructive actions and error state only |
|
|
44
|
-
| `success` / `warning` | green `#157a52` / amber `#b5791f` | status signalling only, never chrome |
|
|
45
|
-
|
|
46
|
-
## 3 Typography
|
|
47
|
-
|
|
48
|
-
One sans, one mono. `font-sans` is Super Sans VF — the proprietary variable display sans; Inter
|
|
49
|
-
Variable is the documented open substitute, run at the same sub-default weights. The brand's warmth
|
|
50
|
-
signature is the *in-between* weight: body sits at `font-weight-normal` 460 (not 400), headings at
|
|
51
|
-
`font-weight-strong` 600. Display tracking is negative and tight; operator headings inherit a
|
|
52
|
-
proportioned `heading-tracking` of `-0.02em`. `font-mono` is derived (the marketing brand ships none)
|
|
53
|
-
for IDs, codes, timestamps, and log lines. Numeric columns render `tabular-nums` so figures align.
|
|
54
|
-
|
|
55
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
56
|
-
| --- | --- | --- | --- |
|
|
57
|
-
| h1 | page title | 24px / 1.2 | `font-weight-strong` · `heading-tracking` |
|
|
58
|
-
| h2 | section head | 19px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
-
| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` (460) |
|
|
61
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
62
|
-
| caption | uppercase eyebrow | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
|
|
63
|
-
|
|
64
|
-
Keep the sub-default weight — the quiet warmth is the type voice. Bump weight for emphasis, never size.
|
|
65
|
-
|
|
66
|
-
## 4 Component Stylings
|
|
67
|
-
|
|
68
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
69
|
-
|
|
70
|
-
- **Button** — `primary`: filled `primary` indigo on `primary-foreground` white, `radius` 8px, never a
|
|
71
|
-
pill. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
72
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
|
|
73
|
-
full 2px, no glow.
|
|
74
|
-
- **Card** — `card` surface, 1px `border`, `radius`; shadow only when it must lift (`shadow-intensity`);
|
|
75
|
-
inset by `density-inset`.
|
|
76
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
77
|
-
numeric columns; row selection tints `accent`.
|
|
78
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
|
|
79
|
-
for content-heavy) beside the work, not over it.
|
|
80
|
-
- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
|
|
81
|
-
`success` / `warning` / `destructive`, never `primary`.
|
|
82
|
-
|
|
83
|
-
## 5 Layout
|
|
84
|
-
|
|
85
|
-
Base spacing unit 8px (the brand's base, with 2 / 4 / 12 sub-tokens for fine work); the on-scale ramp
|
|
86
|
-
is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives:
|
|
87
|
-
sidebar `sidebar-width-expanded` 256 / `sidebar-width-collapsed` 56, topbar `topbar-height` 56, side
|
|
88
|
-
panel `side-panel-width` 440 / `side-panel-width-rich` 640, modal cap `modal-width-max` 560, forms
|
|
89
|
-
`form-max-width` 640, tables full-width. Density is governed globally by `density-tier` and stepped per
|
|
90
|
-
archetype by the surface catalog — never by absolute overrides. The editorial roominess is carried by
|
|
91
|
-
the 8px base, the taller `table-row-height`, and the larger radius, not by inflating the global tier.
|
|
92
|
-
|
|
93
|
-
## 6 Depth
|
|
94
|
-
|
|
95
|
-
Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
|
|
96
|
-
|
|
97
|
-
- **0 — canvas** `background`, no border.
|
|
98
|
-
- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas —
|
|
99
|
-
`0 1px 3px rgba(0,0,0,0.08)` (riding `shadow-intensity`).
|
|
100
|
-
- **2 — overlay** `popover` / side panel / modal — the one place shadow earns its keep,
|
|
101
|
-
`0 8px 24px rgba(0,0,0,0.12)`.
|
|
102
|
-
|
|
103
|
-
The hero's violet-sky atmospheric backdrop (the marketing depth medium) stays behind. Focus is a 2px
|
|
104
|
-
`ring` outline in indigo, never a glow, visible on every interactive element. Three z-levels: content,
|
|
105
|
-
sticky chrome, overlay.
|
|
106
|
-
|
|
107
|
-
## 7 Do's & Don'ts
|
|
108
|
-
|
|
109
|
-
- **Do** reserve `primary` indigo for the single most important action on a surface; everything else is
|
|
110
|
-
neutral or status.
|
|
111
|
-
- **Do** carry hierarchy with warm hairlines, sub-default weight steps, and whitespace — the brand is flat.
|
|
112
|
-
- **Do** hold ink at warm off-black `foreground` `#292827`; pure black breaks the brand's quiet warmth.
|
|
113
|
-
- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
|
|
114
|
-
- **Don't** wear the marketing theatre: no violet-sky hero gradient, no deep-teal closing band, no
|
|
115
|
-
hero-scale display type on a working surface — those are brochure devices, not operator chrome.
|
|
116
|
-
- **Don't** promote a second chromatic accent. Teal and violet-soft stay marketing-decorative; status
|
|
117
|
-
uses `success` / `warning` / `destructive`.
|
|
118
|
-
- **Don't** pill the primary CTA — 8px rounded rectangle is the button shape; the pill is hero-only.
|
|
119
|
-
- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the side panel fits.
|
|
120
|
-
|
|
121
|
-
## 8 Responsive
|
|
122
|
-
|
|
123
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
124
|
-
|
|
125
|
-
| Breakpoint | What changes |
|
|
126
|
-
| --- | --- |
|
|
127
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
128
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
129
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
130
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
131
|
-
|
|
132
|
-
## 9 Agent Prompt Guide
|
|
133
|
-
|
|
134
|
-
Directives the emitting agent follows verbatim:
|
|
135
|
-
|
|
136
|
-
- What carries from Superhuman: the warm neutral palette and warm off-black ink, the single indigo
|
|
137
|
-
accent, the 8px rounded-rectangle radius, and the sub-default type weights (460 body / 600 strong).
|
|
138
|
-
- What stays behind: the violet-sky hero gradient, the deep-teal closing band, hero-scale display type,
|
|
139
|
-
and the pill CTA — every one is a marketing device with no operator role.
|
|
140
|
-
- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
|
|
141
|
-
- Accent only the primary action with indigo. If two things want the accent, one is not primary.
|
|
142
|
-
- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
|
|
143
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
|
|
144
|
-
- Every workflow completes from the keyboard; the indigo `ring` focus outline is always visible.
|
|
145
|
-
- Stay flat and warm — hairline and weight before shadow; never pure black, never a pill on a CTA.
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Tesla
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Tesla — radical-subtraction minimalism, translated for operators
|
|
9
|
-
|
|
10
|
-
Tesla's web design is radical subtraction: a white canvas, a single Electric Blue accent, a rich
|
|
11
|
-
grayscale ink ramp, near-zero decoration, and a categorical geometry — **barely-rounded 4px
|
|
12
|
-
corners**. This operator reading keeps the white-dominant palette, the one blue accent, the 4px
|
|
13
|
-
radius character, the flat/shadowless depth, the two-weight (400 / 500) type discipline, the
|
|
14
|
-
signature **zero letter-spacing**, and the color-only interaction feel. Left behind: full-viewport
|
|
15
|
-
hero photography, 40px display type, whitespace-as-luxury rhythm, the frosted-glass nav, the
|
|
16
|
-
carousel, the chatbot bar.
|
|
17
|
-
|
|
18
|
-
## 1 Visual Theme
|
|
19
|
-
|
|
20
|
-
Light by default; dark is opt-in. White-dominant and categorically shadowless: hierarchy rides a
|
|
21
|
-
grayscale surface ladder (`background` white → `muted` Light Ash → hairline `border`) and type weight,
|
|
22
|
-
never shadow. The single accent — Electric Blue `primary` (`#3e6ae1`) — is the only chromatic hue,
|
|
23
|
-
reserved for the one action that matters. Ink is Carbon Dark `foreground` (`#171a20`), a warm
|
|
24
|
-
blue-undertoned near-black, stepping down a documented ramp (Carbon → Graphite → Pewter → Silver Fog).
|
|
25
|
-
The geometry is the identity: `radius` 4, barely rounded. The anchor surface is a white canvas beside a
|
|
26
|
-
Light Ash `sidebar`; density is `standard` — engineered-uniform, the marketing whitespace left behind.
|
|
27
|
-
|
|
28
|
-
## 2 Color Roles
|
|
29
|
-
|
|
30
|
-
Light values (hex — the corpus's native format). One accent — `primary` Electric Blue is the only
|
|
31
|
-
chromatic hue that carries meaning; status hues speak only status. The rich grayscale ramp is Tesla's
|
|
32
|
-
signature alongside the single blue.
|
|
33
|
-
|
|
34
|
-
| Role | Value | Allowed where |
|
|
35
|
-
| --- | --- | --- |
|
|
36
|
-
| `background` / `card` / `popover` | Pure White `#ffffff` | page, cards, and overlays — the dominant canvas that lets content breathe |
|
|
37
|
-
| `foreground` | Carbon Dark `#171a20` | primary ink, headings, nav — the darkest text, a warm blue-undertoned near-black |
|
|
38
|
-
| `muted` / `secondary` | Light Ash `#f4f4f4` | hover rows, subtle fills, secondary-button surfaces, section differentiation |
|
|
39
|
-
| `muted-foreground` | Pewter `#5c5e62` | labels, captions, tertiary links, placeholders' firmer sibling |
|
|
40
|
-
| `border` | Cloud Gray `#eeeeee` | separators and divider lines — the light hairline |
|
|
41
|
-
| `input` | Pale Silver `#d0d1d2` | field edges — the firmer border tone Tesla uses for delineation |
|
|
42
|
-
| `primary` | Electric Blue `#3e6ae1` | the one primary action; active nav; promotional emphasis text |
|
|
43
|
-
| `accent` | faint blue wash `#edf1fc` | selected / hovered rows and nav, on-accent surfaces only |
|
|
44
|
-
| `ring` | `primary` | the focus outline — an unmistakable blue border, because keyboard-first |
|
|
45
|
-
| `destructive` | red `#dc2626` | destructive actions and error state only |
|
|
46
|
-
| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
|
|
47
|
-
|
|
48
|
-
Graphite `#393c41` is the `secondary-foreground` (body / secondary-CTA text); Silver Fog `#8e8e8e` is the
|
|
49
|
-
placeholder / disabled tone. Tesla avoids semantic status color (browser defaults); the derived
|
|
50
|
-
`destructive` / `success` / `warning` give the operator tool a status vocabulary, kept off the chrome (§7).
|
|
51
|
-
|
|
52
|
-
## 3 Typography
|
|
53
|
-
|
|
54
|
-
One sans, one mono. `font-sans` leads with Universal Sans Text — Tesla's custom geometric family with
|
|
55
|
-
humanist terminals, unifying web, app, and in-car software — falling back to Inter, the open-source
|
|
56
|
-
stand-in. The hero-scale Universal Sans Display (40px / 500) stays behind; the operator ramp keeps the
|
|
57
|
-
voice at working sizes. `font-mono` is derived (Tesla ships none) — JetBrains Mono for IDs, codes,
|
|
58
|
-
timestamps; numeric columns render `tabular-nums`.
|
|
59
|
-
|
|
60
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
61
|
-
| --- | --- | --- | --- |
|
|
62
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` (500) · `heading-tracking` (0) |
|
|
63
|
-
| h2 | section head | 18px / 1.3 | `font-weight-strong` · 0 |
|
|
64
|
-
| h3 | card / group head | 16px / 1.35 | `font-weight-strong` · 0 |
|
|
65
|
-
| body | UI + prose | 14px / 1.45 | `font-weight-normal` (400) |
|
|
66
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
67
|
-
| caption | eyebrow / meta | 12px / 1.3 | `font-weight-strong` · 0 · sentence case |
|
|
68
|
-
|
|
69
|
-
Two weights only — 500 for heads and UI, 400 for body; **no bold, no light**. **Zero letter-spacing at
|
|
70
|
-
every level** is the Tesla signature (unlike most tech brands it takes no negative tracking); **no
|
|
71
|
-
uppercase transforms** — captions and labels stay sentence-case. Emphasize by weight, never size.
|
|
72
|
-
|
|
73
|
-
## 4 Component Stylings
|
|
74
|
-
|
|
75
|
-
Every recurring operator component composes from the primitives — no literal values, `radius` 4 on
|
|
76
|
-
controls throughout.
|
|
77
|
-
|
|
78
|
-
- **Button** — `primary`: filled Electric Blue on `primary-foreground`, `radius` (4px), no pill; the
|
|
79
|
-
border reserves space for the focus animation. Hover is color-only — a subtle darkening, never a
|
|
80
|
-
transform. Secondary: `secondary` Light Ash fill, 1px `border`, `secondary-foreground` Graphite.
|
|
81
|
-
- **Input** — `background` fill, 1px `input` (Pale Silver) edge, `radius`; placeholder in Silver Fog
|
|
82
|
-
(`muted-foreground`); focus draws the blue `ring` at 2px, no glow.
|
|
83
|
-
- **Card** — white `card`, optional 1px `border`, `radius` (4px controls; the scale offers 12px for a
|
|
84
|
-
large image-forward tile); no shadow at rest, inset by `density-inset`.
|
|
85
|
-
- **Table row** — `table-row-height`; Cloud Gray `border` grid lines; Light Ash `muted` on hover;
|
|
86
|
-
`tabular-nums` on numeric columns; row selection tints `accent`.
|
|
87
|
-
- **Side panel** — detail and edit open beside the work (`side-panel-width` / `side-panel-width-rich`),
|
|
88
|
-
never over it.
|
|
89
|
-
- **Badge / chip** — `radius`, hairline `border`, `muted` / status fill, sentence-case caption (no
|
|
90
|
-
uppercase); status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
91
|
-
|
|
92
|
-
## 5 Layout
|
|
93
|
-
|
|
94
|
-
Base spacing unit 8px (Tesla's grid); the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the
|
|
95
|
-
4px step is the button padding). Shell dimensions map one-to-one to the layout primitives — sidebar
|
|
96
|
-
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
|
|
97
|
-
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables
|
|
98
|
-
full-width capped at ~1383px (Tesla's container). Density is governed globally by `density-tier` and
|
|
99
|
-
stepped per archetype; the viewport-height rhythm and whitespace-as-luxury stay behind.
|
|
100
|
-
|
|
101
|
-
## 6 Depth
|
|
102
|
-
|
|
103
|
-
Flat, and essentially shadowless — Tesla's elevation approach is "none." Hierarchy comes from the surface
|
|
104
|
-
ladder, hairlines, and z-position, never a drop shadow:
|
|
105
|
-
|
|
106
|
-
- **0 — flat** `background` white, no shadow, no border — the default at rest for cards, panels, controls.
|
|
107
|
-
- **1 — frost** sticky chrome floats over content by a frosted-glass backdrop (`rgba(255,255,255,0.75)`)
|
|
108
|
-
and z-position, not shadow.
|
|
109
|
-
- **2 — overlay** `popover` / side panel / modal — a region-scrim (`rgba(128,128,128,0.65)`) dims the
|
|
110
|
-
canvas beneath; `shadow-intensity` earns only a whisper `sm` shadow, a hairline still carrying the edge.
|
|
111
|
-
|
|
112
|
-
Focus is a 2px `ring` outline in Electric Blue (never a glow), visible everywhere. Three z-levels:
|
|
113
|
-
content, sticky chrome, overlay.
|
|
114
|
-
|
|
115
|
-
## 7 Do's & Don'ts
|
|
116
|
-
|
|
117
|
-
- **Do** reserve Electric Blue (`primary`) for the single most important action — never decoration;
|
|
118
|
-
carry hierarchy with the grayscale surface ladder, hairlines, and weight.
|
|
119
|
-
- **Do** keep every corner barely rounded — `radius` 4 on buttons, inputs, and chips is the signature.
|
|
120
|
-
- **Do** hold typography at 400 / 500 only, zero letter-spacing, and sentence case — no bold, no light,
|
|
121
|
-
no negative tracking, no uppercase; apply `tabular-nums` to numbers, `font-mono` to IDs / codes / times.
|
|
122
|
-
- **Don't** promote a second chromatic accent — the palette is monochrome-plus-one; status uses
|
|
123
|
-
`success` / `warning` / `destructive`, never the blue.
|
|
124
|
-
- **Don't** pill or over-round a control (radius stays inside `radius-scale`), or signal elevation with a
|
|
125
|
-
drop shadow — the aesthetic is flat.
|
|
126
|
-
- **Don't** animate with scale or translate — Tesla's interactions are color-only (background and border
|
|
127
|
-
transitions).
|
|
128
|
-
|
|
129
|
-
## 8 Responsive
|
|
130
|
-
|
|
131
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
132
|
-
|
|
133
|
-
| Breakpoint | What changes |
|
|
134
|
-
| --- | --- |
|
|
135
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
136
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
137
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
138
|
-
| 1440 | content caps at ~1383px; forms hold `form-max-width`; tables and dashboards use the full width |
|
|
139
|
-
|
|
140
|
-
## 9 Agent Prompt Guide
|
|
141
|
-
|
|
142
|
-
Directives the emitting agent follows verbatim:
|
|
143
|
-
|
|
144
|
-
- Carries over: the white-dominant palette (Carbon → Graphite → Pewter → Silver Fog ink ramp, Electric
|
|
145
|
-
Blue `#3e6ae1`), the single-accent discipline, the 4px technical radius, the flat/shadowless depth, the
|
|
146
|
-
two-weight 500 / 400 type voice with zero tracking and no uppercase.
|
|
147
|
-
- Stays behind: full-viewport hero photography, 40px display type, whitespace-as-luxury rhythm, the
|
|
148
|
-
frosted-glass nav, the carousel, the chatbot bar — none belong in operator chrome.
|
|
149
|
-
- Accent only the primary action in Electric Blue — if two things want it, one is not primary.
|
|
150
|
-
- Keep motion color-only — background and border transitions, never a scale or translate; the hot path
|
|
151
|
-
tempers Tesla's languid 0.33s to a still-smooth normal, parking 330ms for large surface changes.
|
|
152
|
-
- Numeric columns `tabular-nums`, IDs / codes / timestamps `font-mono`; every workflow keyboard-complete
|
|
153
|
-
with the blue `ring` focus outline always visible; stay flat, a whisper `sm` shadow only for a true overlay.
|