@nurix/etna 0.19.50 → 0.19.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/apollo/harness.json +2 -2
- package/data/harnesses/apollo/skills/design/SKILL.md +55 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +8 -4
- package/data/harnesses/apollo/skills/design/references/content.md +5 -5
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/apollo/skills/design/references/intake.md +11 -7
- package/data/harnesses/apollo/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +26 -6
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/skills/design/SKILL.md +55 -29
- package/data/harnesses/code/skills/design/references/compose.md +8 -4
- package/data/harnesses/code/skills/design/references/content.md +5 -5
- package/data/harnesses/code/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/code/skills/design/references/intake.md +11 -7
- package/data/harnesses/code/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/code/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +26 -6
- package/package.json +2 -2
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/apollo/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/apollo/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/apollo/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/apollo/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/apollo/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/apollo/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/apollo/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/apollo/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/apollo/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/apollo/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/apollo/skills/design/design-md/variants/warm-approachable.md +0 -216
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/code/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/code/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/code/skills/design/data/iconography.md +0 -199
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/code/skills/design/data/tells.csv +0 -34
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/code/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/code/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/code/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +0 -216
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: stripe
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [fintech, payments, api]
|
|
6
|
-
keywords: [polished, indigo, navy, cool, gradient, developer, tabular]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 library entry (2026-07-04); 2026-07-12 brand re-audit; Söhne → Inter Variable substitution (v1-documented), IBM Plex Mono for the derived mono; gradient-mesh palette carried only into charts"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# stripe — a cool-lit payments desk, one indigo switch
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A payments operations desk under cool daylight: white paper on a faintly blue-tinted
|
|
16
|
-
field, money figures aligned in tabular columns, a single indigo switch lit for the
|
|
17
|
-
one action that commits. Light default; the dark theme is an authored navy ladder,
|
|
18
|
-
not inverted paper. The one departure from pure-flat carries — cards lift on a soft
|
|
19
|
-
blue-tinted shadow, never gray, so depth reads cool and engineered. The gradient
|
|
20
|
-
mesh stays at marketing scale, surviving only in charts.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Deep-navy `foreground` on white `background`, never pure black; the temperature runs
|
|
24
|
-
cool throughout, hairlines leaning blue and the `input` edge cooler still. `primary`
|
|
25
|
-
indigo is the single chromatic accent — the one primary action, active nav, inline
|
|
26
|
-
link emphasis — and the focus `ring` holds it. `accent` is a pale indigo wash for
|
|
27
|
-
selection. Status hues speak only status; the gradient stops live in charts. The
|
|
28
|
-
`sidebar` holds a cool off-white a half-step below the canvas.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (chrome and display, substituting Söhne) / IBM Plex Mono (data). Register
|
|
32
|
-
scope: the sans is thin and editorial, negative tracking on headings, weight 600 the
|
|
33
|
-
ceiling — a thin brand never goes heavy; the mono owns IDs, codes, timestamps, and
|
|
34
|
-
every money cell. Numerals are always `tabular-nums` — the quiet financial-data
|
|
35
|
-
signal that carries strongest; emphasis bumps weight, never size.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-md`, indigo `primary` fill, rounded never pilled; inputs on the cool
|
|
39
|
-
`input` hairline, the indigo `ring` at 2px without glow; cards on a hairline lifting
|
|
40
|
-
on the soft blue-tinted shadow — the one elevation cue; table rows `muted` hover,
|
|
41
|
-
`accent` selection, tabular money columns; detail opens in the side panel beside the
|
|
42
|
-
work; badges take the one controlled pill, status fills only, never `primary`.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
4px base; sidebar 256/56px; topbar 56px; side panel 440/640px; content max 1360px;
|
|
46
|
-
density standard — clean and moderate, the marketing bands left behind.
|
|
47
|
-
|
|
48
|
-
## 6 Depth
|
|
49
|
-
Subtly lifted and cool. Light: hairlines and the surface ladder carry structure; the
|
|
50
|
-
one signature is the soft blue-tinted card shadow (`shadow`), a deeper blue-tint for
|
|
51
|
-
overlays — rank is border, position, and that one soft lift, never a heavier shadow.
|
|
52
|
-
Dark: the authored ladder does the depth — `background` 0.19 L, `surface-raised`
|
|
53
|
-
+0.05, `surface-overlay` +0.10, hue held at 262.
|
|
54
|
-
|
|
55
|
-
## 7 Motion
|
|
56
|
-
Calm and precise. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
57
|
-
`fade-arrive` (page content, 160ms), `commit-press` (primary press, 120ms).
|
|
58
|
-
Physicality granted only to auth and first-run empty states; tables and money
|
|
59
|
-
columns never animate; keyboard actions are instant.
|
|
60
|
-
|
|
61
|
-
## 8 Iconography & Charts
|
|
62
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
63
|
-
axes, no gridline fills; the gradient palette returns only here — indigo, sherbet,
|
|
64
|
-
cream, ruby, lavender categorical (`chart-1..5`); monochrome sequential canvas→indigo;
|
|
65
|
-
tooltips on `surface-overlay` with mono numerals.
|
|
66
|
-
|
|
67
|
-
## 9 Voice
|
|
68
|
-
Precise and unhurried: exact figures, no exclamation, plain verbs. "Create payment" ·
|
|
69
|
-
"No disputes open — last payout cleared 2h ago" · "This refund exceeds the available
|
|
70
|
-
balance; top up before retrying."
|
|
71
|
-
|
|
72
|
-
## 10 Do's & Don'ts
|
|
73
|
-
Do reserve indigo for the single committing action and inline links — one filled
|
|
74
|
-
control per view. Do keep ink deep navy, the temperature cool, and money always
|
|
75
|
-
tabular. Do lift a card on the soft blue-tinted shadow, never a gray one. Don't pill
|
|
76
|
-
the CTA, promote a second chromatic accent, or bring the gradient mesh past charts.
|
|
77
|
-
|
|
78
|
-
## 11 Responsive
|
|
79
|
-
375: sidebar → off-canvas drawer, side panel → full sheet, list+detail stacks. 768:
|
|
80
|
-
sidebar → icon rail; tables scroll overflow. 1024/1440: two-pane queue+detail holds;
|
|
81
|
-
forms cap, dashboards use full width.
|
|
82
|
-
|
|
83
|
-
## 12 Agent Prompt Guide
|
|
84
|
-
Lead every list with its table; spend the indigo once — links and the one primary
|
|
85
|
-
action, nothing else. Keep ink deep navy, the field cool, every money column tabular
|
|
86
|
-
in IBM Plex Mono. Lift on the blue-tinted shadow. Dark is the authored navy ladder —
|
|
87
|
-
consult the block, never derive.
|
|
88
|
-
|
|
89
|
-
```yaml design-values
|
|
90
|
-
color:
|
|
91
|
-
light:
|
|
92
|
-
background: oklch(1 0 258)
|
|
93
|
-
foreground: oklch(0.259 0.054 250.7)
|
|
94
|
-
card: oklch(1 0 258)
|
|
95
|
-
card-foreground: oklch(0.259 0.054 250.7)
|
|
96
|
-
popover: oklch(1 0 258)
|
|
97
|
-
popover-foreground: oklch(0.259 0.054 250.7)
|
|
98
|
-
primary: oklch(0.521 0.268 277.4)
|
|
99
|
-
primary-foreground: oklch(1 0 277.4)
|
|
100
|
-
secondary: oklch(0.981 0.005 248)
|
|
101
|
-
secondary-foreground: oklch(0.3 0.05 258)
|
|
102
|
-
muted: oklch(0.981 0.005 248)
|
|
103
|
-
muted-foreground: oklch(0.53 0.046 259)
|
|
104
|
-
accent: oklch(0.949 0.024 288.5)
|
|
105
|
-
accent-foreground: oklch(0.462 0.23 276.9)
|
|
106
|
-
destructive: oklch(0.609 0.228 10.8)
|
|
107
|
-
destructive-foreground: oklch(0.985 0.01 10.8)
|
|
108
|
-
success: oklch(0.552 0.123 156.9)
|
|
109
|
-
warning: oklch(0.569 0.152 48.8)
|
|
110
|
-
border: oklch(0.929 0.01 252.8)
|
|
111
|
-
input: oklch(0.83 0.015 250)
|
|
112
|
-
ring: oklch(0.521 0.268 277.4)
|
|
113
|
-
surface-raised: oklch(1 0 258)
|
|
114
|
-
surface-overlay: oklch(1 0 258)
|
|
115
|
-
chart-1: oklch(0.55 0.25 277.4)
|
|
116
|
-
chart-2: oklch(0.7 0.15 350)
|
|
117
|
-
chart-3: oklch(0.75 0.12 60)
|
|
118
|
-
chart-4: oklch(0.65 0.18 10)
|
|
119
|
-
chart-5: oklch(0.6 0.14 300)
|
|
120
|
-
sidebar: oklch(0.981 0.005 248)
|
|
121
|
-
sidebar-foreground: oklch(0.3 0.05 258)
|
|
122
|
-
sidebar-primary: oklch(0.521 0.268 277.4)
|
|
123
|
-
sidebar-primary-foreground: oklch(1 0 277.4)
|
|
124
|
-
sidebar-accent: oklch(0.949 0.024 288.5)
|
|
125
|
-
sidebar-accent-foreground: oklch(0.462 0.23 276.9)
|
|
126
|
-
sidebar-border: oklch(0.92 0.01 252.8)
|
|
127
|
-
sidebar-ring: oklch(0.521 0.268 277.4)
|
|
128
|
-
dark:
|
|
129
|
-
background: oklch(0.19 0.014 262)
|
|
130
|
-
foreground: oklch(0.95 0.01 262)
|
|
131
|
-
card: oklch(0.22 0.014 262)
|
|
132
|
-
card-foreground: oklch(0.95 0.01 262)
|
|
133
|
-
popover: oklch(0.27 0.014 262)
|
|
134
|
-
popover-foreground: oklch(0.95 0.01 262)
|
|
135
|
-
primary: oklch(0.6 0.25 277.4)
|
|
136
|
-
primary-foreground: oklch(0.99 0.01 277.4)
|
|
137
|
-
secondary: oklch(0.24 0.014 262)
|
|
138
|
-
secondary-foreground: oklch(0.9 0.012 262)
|
|
139
|
-
muted: oklch(0.23 0.013 262)
|
|
140
|
-
muted-foreground: oklch(0.68 0.02 262)
|
|
141
|
-
accent: oklch(0.3 0.05 277.4)
|
|
142
|
-
accent-foreground: oklch(0.92 0.02 288.5)
|
|
143
|
-
destructive: oklch(0.64 0.22 10.8)
|
|
144
|
-
destructive-foreground: oklch(0.14 0.02 10.8)
|
|
145
|
-
success: oklch(0.66 0.13 156.9)
|
|
146
|
-
warning: oklch(0.74 0.15 60)
|
|
147
|
-
border: oklch(0.27 0.014 262)
|
|
148
|
-
input: oklch(0.27 0.014 262)
|
|
149
|
-
ring: oklch(0.6 0.25 277.4)
|
|
150
|
-
surface-raised: oklch(0.24 0.014 262)
|
|
151
|
-
surface-overlay: oklch(0.29 0.014 262)
|
|
152
|
-
chart-1: oklch(0.65 0.24 277.4)
|
|
153
|
-
chart-2: oklch(0.76 0.14 350)
|
|
154
|
-
chart-3: oklch(0.82 0.11 60)
|
|
155
|
-
chart-4: oklch(0.7 0.18 10)
|
|
156
|
-
chart-5: oklch(0.68 0.14 300)
|
|
157
|
-
sidebar: oklch(0.16 0.022 262)
|
|
158
|
-
sidebar-foreground: oklch(0.9 0.012 262)
|
|
159
|
-
sidebar-primary: oklch(0.6 0.25 277.4)
|
|
160
|
-
sidebar-primary-foreground: oklch(0.99 0.01 277.4)
|
|
161
|
-
sidebar-accent: oklch(0.24 0.03 277.4)
|
|
162
|
-
sidebar-accent-foreground: oklch(0.92 0.02 288.5)
|
|
163
|
-
sidebar-border: oklch(0.22 0.022 262)
|
|
164
|
-
sidebar-ring: oklch(0.6 0.25 277.4)
|
|
165
|
-
typography:
|
|
166
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
167
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
168
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
169
|
-
ramp:
|
|
170
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.02em }
|
|
171
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.02em }
|
|
172
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
173
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
174
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
175
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.02em, transform: uppercase }
|
|
176
|
-
data: { size: 14px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
177
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, amounts] }
|
|
178
|
-
elevation:
|
|
179
|
-
radius: { sm: 4px, md: 6px, lg: 10px }
|
|
180
|
-
hairline: border
|
|
181
|
-
shadow:
|
|
182
|
-
overlay: "0 8px 30px oklch(0.259 0.054 250 / 0.12)"
|
|
183
|
-
popover: "0 4px 16px oklch(0.259 0.054 250 / 0.1)"
|
|
184
|
-
dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 262 }
|
|
185
|
-
motion:
|
|
186
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
187
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
188
|
-
entrance-never: ease-in
|
|
189
|
-
identity-moments: [auth, first-run-empty]
|
|
190
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
191
|
-
charts:
|
|
192
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
193
|
-
sequential: { from: background, to: chart-1 }
|
|
194
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
195
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
196
|
-
```
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: supabase
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, database, backend]
|
|
6
|
-
keywords: [white, emerald, green, near-black, database, mono, minimal]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 library entry (2026-07-04); 2026-07-12 brand re-audit; Circular → DM Sans Variable substitution (closest open geometric-humanist stand-in), IBM Plex Mono for the v1 system-mono stack; the rich logo palette carried only into charts"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# supabase — a white-canvas database console, one emerald voltage
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A quietly-technical database console on committed white paper: near-black ink, tables
|
|
16
|
-
and log streams doing the decorative work, and one emerald voltage lit on the single
|
|
17
|
-
action that commits. Light default — the white-canvas commitment is the brand, no
|
|
18
|
-
atmospheric gradient; the dark theme is an authored near-black ladder. Flat: a fine
|
|
19
|
-
greyscale hairline ladder and type weight carry hierarchy, never heavy shadow. Code,
|
|
20
|
-
log, and SQL panels wear a near-black inlay even in the light theme — the developer DNA.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Near-black `foreground` on white `background`, never pure black; the neutral ramp is a
|
|
24
|
-
calibrated greyscale carrying an imperceptible emerald whisper. `primary` emerald is
|
|
25
|
-
the only chromatic event on a surface — the one action, the focus `ring`, the
|
|
26
|
-
active-nav indicator — worn with near-black `primary-foreground`, the idiosyncratic
|
|
27
|
-
"lit" green button, dark type on green, never white. `accent` is a neutral grey lift,
|
|
28
|
-
never coloured green. Status hues speak status; the logo palette lives only in charts.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
DM Sans (chrome and display, substituting Circular) / IBM Plex Mono (data). Register
|
|
32
|
-
scope: the sans runs every title, control, cell, and byline at the brand's calibrated
|
|
33
|
-
mid-weight — 500 the ceiling, it breaks at 600 — with tight negative tracking on
|
|
34
|
-
headings; the mono owns IDs, codes, timestamps, log lines, and SQL. Numerals are
|
|
35
|
-
always `tabular-nums`; hierarchy is size and tracking, never a heavier weight.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-sm` (6px, never pill), emerald `primary` fill with near-black type;
|
|
39
|
-
inputs on a hairline `border`, the emerald `ring` at 2px without glow; cards on a
|
|
40
|
-
hairline — depth is the hairline, shadow only to lift off the canvas; table rows
|
|
41
|
-
`muted` hover, neutral `accent` selection; code and SQL panels wear the near-black
|
|
42
|
-
inlay with mono; detail opens in the side panel; badges pill, status fills only.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
4px base; sidebar 256/56px; topbar 56px; side panel 440/640px; content max 1360px;
|
|
46
|
-
density standard, stepping denser for the console and log stream — never the whole app.
|
|
47
|
-
|
|
48
|
-
## 6 Depth
|
|
49
|
-
Flat and hairline-first. Light: the greyscale ladder and 1px hairlines carry rank;
|
|
50
|
-
shadow only when a card must genuinely lift off the canvas; code, log, and SQL wear
|
|
51
|
-
the near-black inlay. Dark: the authored ladder does the depth — `background` 0.18 L,
|
|
52
|
-
`surface-raised` +0.05, `surface-overlay` +0.10, hue held at 159; hairlines stay
|
|
53
|
-
visible at every step.
|
|
54
|
-
|
|
55
|
-
## 7 Motion
|
|
56
|
-
Reserved and technical. Named moments: `panel-slide` (side panel, 240ms,
|
|
57
|
-
interruptible), `fade-arrive` (page content, 160ms), `run-press` (primary press,
|
|
58
|
-
120ms). Physicality granted only to auth and first-run empty states; tables, log
|
|
59
|
-
streams, and keyboard actions are instant.
|
|
60
|
-
|
|
61
|
-
## 8 Iconography & Charts
|
|
62
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
63
|
-
no gridline fills; the logo palette returns only here — emerald, violet, pink, indigo,
|
|
64
|
-
tomato categorical (`chart-1..5`); monochrome sequential canvas→emerald; tooltips on
|
|
65
|
-
`surface-overlay` with mono numerals.
|
|
66
|
-
|
|
67
|
-
## 9 Voice
|
|
68
|
-
Engineered-plain: exact, lowercase-calm, no cheer. "New query" · "No jobs running —
|
|
69
|
-
last run finished 8m ago" · "This migration touches 3 tables and cannot be reverted;
|
|
70
|
-
confirm before running."
|
|
71
|
-
|
|
72
|
-
## 10 Do's & Don'ts
|
|
73
|
-
Do anchor every surface on the white canvas and spend emerald once — the action, the
|
|
74
|
-
ring, the active-nav dot. Do set near-black type on the green button, never white. Do
|
|
75
|
-
dress code and SQL in the near-black inlay. Don't promote a second chromatic accent,
|
|
76
|
-
bump weight above 500, pill a control, or heavy-shadow a card.
|
|
77
|
-
|
|
78
|
-
## 11 Responsive
|
|
79
|
-
375: sidebar → off-canvas drawer, side panel → full sheet, list+detail stacks. 768:
|
|
80
|
-
sidebar → icon rail; tables scroll, SQL and log inlays scroll horizontally never wrap.
|
|
81
|
-
1024/1440: two-pane queue+detail holds; forms cap, dashboards use full width.
|
|
82
|
-
|
|
83
|
-
## 12 Agent Prompt Guide
|
|
84
|
-
Wear the white canvas; the dark theme is the authored near-black ladder. Spend emerald
|
|
85
|
-
once — near-black type on the green button is the signature. Dress code, log, and SQL
|
|
86
|
-
in the near-black inlay with IBM Plex Mono; cap the sans at weight 500. Depth is
|
|
87
|
-
hairline and ladder — consult the block, never derive.
|
|
88
|
-
|
|
89
|
-
```yaml design-values
|
|
90
|
-
color:
|
|
91
|
-
light:
|
|
92
|
-
background: oklch(1 0 159)
|
|
93
|
-
foreground: oklch(0.2 0.004 159)
|
|
94
|
-
card: oklch(1 0 159)
|
|
95
|
-
card-foreground: oklch(0.2 0.004 159)
|
|
96
|
-
popover: oklch(1 0 159)
|
|
97
|
-
popover-foreground: oklch(0.2 0.004 159)
|
|
98
|
-
primary: oklch(0.762 0.154 159.4)
|
|
99
|
-
primary-foreground: oklch(0.205 0.005 159)
|
|
100
|
-
secondary: oklch(0.961 0.005 159)
|
|
101
|
-
secondary-foreground: oklch(0.24 0.005 159)
|
|
102
|
-
muted: oklch(0.985 0.005 159)
|
|
103
|
-
muted-foreground: oklch(0.545 0.006 159)
|
|
104
|
-
accent: oklch(0.946 0.005 159)
|
|
105
|
-
accent-foreground: oklch(0.24 0.005 159)
|
|
106
|
-
destructive: oklch(0.577 0.215 27.3)
|
|
107
|
-
destructive-foreground: oklch(0.985 0.01 27.3)
|
|
108
|
-
success: oklch(0.684 0.142 161.9)
|
|
109
|
-
warning: oklch(0.82 0.16 96.8)
|
|
110
|
-
border: oklch(0.904 0.005 159)
|
|
111
|
-
input: oklch(0.904 0.005 159)
|
|
112
|
-
ring: oklch(0.762 0.154 159.4)
|
|
113
|
-
surface-raised: oklch(1 0 159)
|
|
114
|
-
surface-overlay: oklch(1 0 159)
|
|
115
|
-
chart-1: oklch(0.7 0.15 159.4)
|
|
116
|
-
chart-2: oklch(0.55 0.2 285)
|
|
117
|
-
chart-3: oklch(0.6 0.2 350)
|
|
118
|
-
chart-4: oklch(0.55 0.2 265)
|
|
119
|
-
chart-5: oklch(0.62 0.2 30)
|
|
120
|
-
sidebar: oklch(0.985 0.005 159)
|
|
121
|
-
sidebar-foreground: oklch(0.24 0.005 159)
|
|
122
|
-
sidebar-primary: oklch(0.762 0.154 159.4)
|
|
123
|
-
sidebar-primary-foreground: oklch(0.205 0.005 159)
|
|
124
|
-
sidebar-accent: oklch(0.946 0.005 159)
|
|
125
|
-
sidebar-accent-foreground: oklch(0.24 0.005 159)
|
|
126
|
-
sidebar-border: oklch(0.9 0.005 159)
|
|
127
|
-
sidebar-ring: oklch(0.762 0.154 159.4)
|
|
128
|
-
dark:
|
|
129
|
-
background: oklch(0.18 0.006 159)
|
|
130
|
-
foreground: oklch(0.94 0.005 159)
|
|
131
|
-
card: oklch(0.21 0.006 159)
|
|
132
|
-
card-foreground: oklch(0.94 0.005 159)
|
|
133
|
-
popover: oklch(0.26 0.006 159)
|
|
134
|
-
popover-foreground: oklch(0.94 0.005 159)
|
|
135
|
-
primary: oklch(0.762 0.154 159.4)
|
|
136
|
-
primary-foreground: oklch(0.2 0.005 159)
|
|
137
|
-
secondary: oklch(0.24 0.006 159)
|
|
138
|
-
secondary-foreground: oklch(0.9 0.005 159)
|
|
139
|
-
muted: oklch(0.23 0.006 159)
|
|
140
|
-
muted-foreground: oklch(0.68 0.006 159)
|
|
141
|
-
accent: oklch(0.27 0.006 159)
|
|
142
|
-
accent-foreground: oklch(0.9 0.005 159)
|
|
143
|
-
destructive: oklch(0.64 0.2 27.3)
|
|
144
|
-
destructive-foreground: oklch(0.14 0.02 27.3)
|
|
145
|
-
success: oklch(0.7 0.14 161.9)
|
|
146
|
-
warning: oklch(0.85 0.17 96.8)
|
|
147
|
-
border: oklch(0.27 0.006 159)
|
|
148
|
-
input: oklch(0.27 0.006 159)
|
|
149
|
-
ring: oklch(0.762 0.154 159.4)
|
|
150
|
-
surface-raised: oklch(0.23 0.006 159)
|
|
151
|
-
surface-overlay: oklch(0.28 0.006 159)
|
|
152
|
-
chart-1: oklch(0.78 0.15 159.4)
|
|
153
|
-
chart-2: oklch(0.65 0.2 285)
|
|
154
|
-
chart-3: oklch(0.7 0.2 350)
|
|
155
|
-
chart-4: oklch(0.65 0.2 265)
|
|
156
|
-
chart-5: oklch(0.72 0.2 30)
|
|
157
|
-
sidebar: oklch(0.15 0.006 159)
|
|
158
|
-
sidebar-foreground: oklch(0.9 0.005 159)
|
|
159
|
-
sidebar-primary: oklch(0.762 0.154 159.4)
|
|
160
|
-
sidebar-primary-foreground: oklch(0.2 0.005 159)
|
|
161
|
-
sidebar-accent: oklch(0.24 0.006 159)
|
|
162
|
-
sidebar-accent-foreground: oklch(0.9 0.005 159)
|
|
163
|
-
sidebar-border: oklch(0.22 0.006 159)
|
|
164
|
-
sidebar-ring: oklch(0.762 0.154 159.4)
|
|
165
|
-
typography:
|
|
166
|
-
display: { family: "DM Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 500] }
|
|
167
|
-
sans: { family: "DM Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 500] }
|
|
168
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
169
|
-
ramp:
|
|
170
|
-
display: { size: 28px, line: 34px, weight: 500, family: display, tracking: -0.02em }
|
|
171
|
-
h1: { size: 24px, line: 30px, weight: 500, family: sans, tracking: -0.02em }
|
|
172
|
-
h2: { size: 20px, line: 26px, weight: 500, family: sans, tracking: -0.01em }
|
|
173
|
-
body: { size: 15px, line: 23px, weight: 400, family: sans }
|
|
174
|
-
small: { size: 13px, line: 19px, weight: 400, family: sans }
|
|
175
|
-
caption: { size: 12px, line: 16px, weight: 500, family: sans, tracking: 0.02em, transform: uppercase }
|
|
176
|
-
data: { size: 14px, line: 21px, weight: 400, family: mono, features: [tnum] }
|
|
177
|
-
register-scope: { display: [page-title, empty-state], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, sql] }
|
|
178
|
-
elevation:
|
|
179
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
180
|
-
hairline: border
|
|
181
|
-
shadow:
|
|
182
|
-
overlay: "0 8px 30px oklch(0.2 0.02 159 / 0.1)"
|
|
183
|
-
popover: "0 4px 16px oklch(0.2 0.02 159 / 0.08)"
|
|
184
|
-
dark-ladder: { background: 0.18, raised: 0.23, overlay: 0.28, hue-held: 159 }
|
|
185
|
-
motion:
|
|
186
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
187
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
188
|
-
entrance-never: ease-in
|
|
189
|
-
identity-moments: [auth, first-run-empty]
|
|
190
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
191
|
-
charts:
|
|
192
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
193
|
-
sequential: { from: background, to: chart-1 }
|
|
194
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
195
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
196
|
-
```
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: superhuman
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [productivity, email, business-tools]
|
|
6
|
-
keywords: [warm, editorial, indigo-navy, quiet, rounded, premium]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 library entry (2026-07-04); 2026-07-12 brand re-audit; Super Sans VF → Inter Variable substitution (v1-documented, run at the same sub-default weights), IBM Plex Mono for the derived mono"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# superhuman — a warm quiet desk, one deep indigo mark
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A warm quiet writing desk kept in editorial order: white paper on warm-grey rules,
|
|
16
|
-
off-black ink, generous margins, and one deep indigo-navy mark reserved for the action
|
|
17
|
-
that matters. Light default — the content body is white; the dark theme is an authored
|
|
18
|
-
warm ladder. Flat: warm hairlines, sub-default type weights, and whitespace carry
|
|
19
|
-
hierarchy, never shadow. The signature is the softness — 8px rounded rectangles, never
|
|
20
|
-
a pill on a working surface. The violet-sky hero and teal closing band stay marketing.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Warm off-black `foreground` on white `background`, never pure black; every neutral
|
|
24
|
-
leans warm-grey, none is cool. `primary` deep indigo-navy is the only chromatic hue
|
|
25
|
-
that carries meaning — the one action, active nav, the focus `ring` — near-black itself,
|
|
26
|
-
the brand's own CTA colour. `accent` is a pale indigo tint for selection. Status hues
|
|
27
|
-
speak only status; teal and violet-soft stay marketing-decorative. The `sidebar` holds
|
|
28
|
-
a warm off-white a half-step below the canvas.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (chrome and display, substituting Super Sans VF) / IBM Plex Mono (data). Register
|
|
32
|
-
scope: the sans runs every title, control, cell, and byline at the warmth signature —
|
|
33
|
-
the in-between weight, body 460 not 400, strong 600 — with proportioned negative
|
|
34
|
-
tracking; the mono owns IDs, codes, and timestamps. Numerals are always `tabular-nums`;
|
|
35
|
-
emphasis bumps weight, never size, and never leaves the sub-default range.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
Buttons `radius-md` (8px rounded rectangle, never pill), indigo `primary` fill; inputs
|
|
39
|
-
on a warm `border`, the indigo `ring` at 2px without glow; cards on a hairline, shadow
|
|
40
|
-
only when they must lift; table rows `muted` hover, pale-indigo `accent` selection;
|
|
41
|
-
detail opens in the side panel beside the work; badges take status fills, never
|
|
42
|
-
`primary`. The editorial roominess is the taller row and the larger radius, not padding.
|
|
43
|
-
|
|
44
|
-
## 5 Layout
|
|
45
|
-
8px base; sidebar 256/56px; topbar 56px; side panel 440/640px; content max 1320px;
|
|
46
|
-
density standard and editorial-roomy — carried by the base and radius, never inflated.
|
|
47
|
-
|
|
48
|
-
## 6 Depth
|
|
49
|
-
Flat and warm. Light: the surface ladder and warm hairlines carry rank; shadow only
|
|
50
|
-
when a card must lift off the canvas, warm-tinted and soft. Dark: the authored ladder
|
|
51
|
-
does the depth — `background` 0.19 L, `surface-raised` +0.05, `surface-overlay` +0.10,
|
|
52
|
-
warm hue held at 68; the indigo mark lifts to a visible mid-indigo.
|
|
53
|
-
|
|
54
|
-
## 7 Motion
|
|
55
|
-
Quick and unshowy — a fast-productivity brand. Named moments: `panel-slide` (side
|
|
56
|
-
panel, 240ms, interruptible), `fade-arrive` (page content, 160ms), `mark-press`
|
|
57
|
-
(primary press, 110ms). Physicality granted only to auth and first-run empty states;
|
|
58
|
-
tables and keyboard actions are instant.
|
|
59
|
-
|
|
60
|
-
## 8 Iconography & Charts
|
|
61
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
62
|
-
no gridline fills; indigo, teal, violet, amber, green categorical (`chart-1..5`);
|
|
63
|
-
monochrome sequential canvas→indigo; tooltips on `surface-overlay` with mono numerals.
|
|
64
|
-
|
|
65
|
-
## 9 Voice
|
|
66
|
-
Warm and economical: plain verbs, no exclamation, a light touch. "Compose" · "Inbox
|
|
67
|
-
clear — nothing needs a reply" · "This message has an unsent draft; discard it or keep
|
|
68
|
-
editing before you leave."
|
|
69
|
-
|
|
70
|
-
## 10 Do's & Don'ts
|
|
71
|
-
Do reserve the indigo mark for the single most important action; everything else is
|
|
72
|
-
neutral or status. Do carry hierarchy with warm hairlines, sub-default weight, and
|
|
73
|
-
whitespace. Do hold ink warm off-black, never pure black. Don't wear the marketing
|
|
74
|
-
theatre, promote a second chromatic accent, or pill the CTA — 8px is the shape.
|
|
75
|
-
|
|
76
|
-
## 11 Responsive
|
|
77
|
-
375: sidebar → off-canvas drawer, side panel → full sheet, list+detail stacks. 768:
|
|
78
|
-
sidebar → icon rail; tables scroll overflow. 1024/1440: two-pane queue+detail holds;
|
|
79
|
-
forms cap, dashboards use full width.
|
|
80
|
-
|
|
81
|
-
## 12 Agent Prompt Guide
|
|
82
|
-
Lead every entity with its primary read, not its chrome. Spend the indigo mark once —
|
|
83
|
-
if two things want it, one is not primary. Keep the type warm and sub-default (body
|
|
84
|
-
460, strong 600), corners at 8px, ink warm off-black. Dark is the authored warm ladder
|
|
85
|
-
— consult the block, never derive.
|
|
86
|
-
|
|
87
|
-
```yaml design-values
|
|
88
|
-
color:
|
|
89
|
-
light:
|
|
90
|
-
background: oklch(1 0 68)
|
|
91
|
-
foreground: oklch(0.278 0.006 68)
|
|
92
|
-
card: oklch(1 0 68)
|
|
93
|
-
card-foreground: oklch(0.278 0.006 68)
|
|
94
|
-
popover: oklch(1 0 68)
|
|
95
|
-
popover-foreground: oklch(0.278 0.006 68)
|
|
96
|
-
primary: oklch(0.234 0.058 283.9)
|
|
97
|
-
primary-foreground: oklch(1 0 283.9)
|
|
98
|
-
secondary: oklch(0.961 0.007 88.6)
|
|
99
|
-
secondary-foreground: oklch(0.3 0.006 68)
|
|
100
|
-
muted: oklch(0.961 0.007 88.6)
|
|
101
|
-
muted-foreground: oklch(0.51 0.008 68)
|
|
102
|
-
accent: oklch(0.946 0.008 293.9)
|
|
103
|
-
accent-foreground: oklch(0.28 0.06 283.9)
|
|
104
|
-
destructive: oklch(0.54 0.177 28.9)
|
|
105
|
-
destructive-foreground: oklch(0.985 0.01 28.9)
|
|
106
|
-
success: oklch(0.515 0.109 160.6)
|
|
107
|
-
warning: oklch(0.624 0.123 71.4)
|
|
108
|
-
border: oklch(0.92 0.01 81.8)
|
|
109
|
-
input: oklch(0.92 0.01 81.8)
|
|
110
|
-
ring: oklch(0.234 0.058 283.9)
|
|
111
|
-
surface-raised: oklch(1 0 68)
|
|
112
|
-
surface-overlay: oklch(1 0 68)
|
|
113
|
-
chart-1: oklch(0.4 0.15 283.9)
|
|
114
|
-
chart-2: oklch(0.6 0.1 200)
|
|
115
|
-
chart-3: oklch(0.6 0.18 300)
|
|
116
|
-
chart-4: oklch(0.7 0.13 71.4)
|
|
117
|
-
chart-5: oklch(0.6 0.12 160.6)
|
|
118
|
-
sidebar: oklch(0.97 0.008 81.8)
|
|
119
|
-
sidebar-foreground: oklch(0.3 0.006 68)
|
|
120
|
-
sidebar-primary: oklch(0.234 0.058 283.9)
|
|
121
|
-
sidebar-primary-foreground: oklch(1 0 283.9)
|
|
122
|
-
sidebar-accent: oklch(0.946 0.008 293.9)
|
|
123
|
-
sidebar-accent-foreground: oklch(0.28 0.06 283.9)
|
|
124
|
-
sidebar-border: oklch(0.92 0.01 81.8)
|
|
125
|
-
sidebar-ring: oklch(0.234 0.058 283.9)
|
|
126
|
-
dark:
|
|
127
|
-
background: oklch(0.19 0.008 68)
|
|
128
|
-
foreground: oklch(0.94 0.006 68)
|
|
129
|
-
card: oklch(0.22 0.008 68)
|
|
130
|
-
card-foreground: oklch(0.94 0.006 68)
|
|
131
|
-
popover: oklch(0.27 0.008 68)
|
|
132
|
-
popover-foreground: oklch(0.94 0.006 68)
|
|
133
|
-
primary: oklch(0.5 0.16 283.9)
|
|
134
|
-
primary-foreground: oklch(0.98 0.01 283.9)
|
|
135
|
-
secondary: oklch(0.24 0.008 68)
|
|
136
|
-
secondary-foreground: oklch(0.9 0.006 68)
|
|
137
|
-
muted: oklch(0.23 0.008 68)
|
|
138
|
-
muted-foreground: oklch(0.68 0.008 68)
|
|
139
|
-
accent: oklch(0.3 0.04 283.9)
|
|
140
|
-
accent-foreground: oklch(0.9 0.02 293.9)
|
|
141
|
-
destructive: oklch(0.62 0.18 28.9)
|
|
142
|
-
destructive-foreground: oklch(0.14 0.02 28.9)
|
|
143
|
-
success: oklch(0.64 0.11 160.6)
|
|
144
|
-
warning: oklch(0.72 0.12 71.4)
|
|
145
|
-
border: oklch(0.27 0.008 68)
|
|
146
|
-
input: oklch(0.27 0.008 68)
|
|
147
|
-
ring: oklch(0.6 0.15 283.9)
|
|
148
|
-
surface-raised: oklch(0.24 0.008 68)
|
|
149
|
-
surface-overlay: oklch(0.29 0.008 68)
|
|
150
|
-
chart-1: oklch(0.6 0.15 283.9)
|
|
151
|
-
chart-2: oklch(0.68 0.1 200)
|
|
152
|
-
chart-3: oklch(0.68 0.18 300)
|
|
153
|
-
chart-4: oklch(0.76 0.13 71.4)
|
|
154
|
-
chart-5: oklch(0.68 0.12 160.6)
|
|
155
|
-
sidebar: oklch(0.16 0.008 68)
|
|
156
|
-
sidebar-foreground: oklch(0.9 0.006 68)
|
|
157
|
-
sidebar-primary: oklch(0.6 0.15 283.9)
|
|
158
|
-
sidebar-primary-foreground: oklch(0.98 0.01 283.9)
|
|
159
|
-
sidebar-accent: oklch(0.24 0.04 283.9)
|
|
160
|
-
sidebar-accent-foreground: oklch(0.9 0.02 293.9)
|
|
161
|
-
sidebar-border: oklch(0.22 0.008 68)
|
|
162
|
-
sidebar-ring: oklch(0.6 0.15 283.9)
|
|
163
|
-
typography:
|
|
164
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [460, 600] }
|
|
165
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [460, 600] }
|
|
166
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
167
|
-
ramp:
|
|
168
|
-
display: { size: 26px, line: 31px, weight: 600, family: display, tracking: -0.02em }
|
|
169
|
-
h1: { size: 22px, line: 27px, weight: 600, family: sans, tracking: -0.02em }
|
|
170
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
171
|
-
body: { size: 14px, line: 21px, weight: 460, family: sans }
|
|
172
|
-
small: { size: 13px, line: 18px, weight: 460, family: sans }
|
|
173
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.02em, transform: uppercase }
|
|
174
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
175
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps] }
|
|
176
|
-
elevation:
|
|
177
|
-
radius: { sm: 8px, md: 10px, lg: 14px }
|
|
178
|
-
hairline: border
|
|
179
|
-
shadow:
|
|
180
|
-
overlay: "0 8px 24px oklch(0.278 0.02 68 / 0.12)"
|
|
181
|
-
popover: "0 4px 16px oklch(0.278 0.02 68 / 0.1)"
|
|
182
|
-
dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 68 }
|
|
183
|
-
motion:
|
|
184
|
-
duration: { press: 110ms, fade: 160ms, panel: 240ms }
|
|
185
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
186
|
-
entrance-never: ease-in
|
|
187
|
-
identity-moments: [auth, first-run-empty]
|
|
188
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
189
|
-
charts:
|
|
190
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
191
|
-
sequential: { from: background, to: chart-1 }
|
|
192
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
193
|
-
layout: { base: 8px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1320px }
|
|
194
|
-
```
|