@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,201 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: mistral-ai
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [ai, dev-tools, business-tools]
|
|
6
|
-
keywords: [warm, cream, editorial, orange, sunset, sober]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 mistral-ai entry (2026-07-04); 2026-07-12 re-audit of Mistral public brand; Inter substitutes the hero PP Editorial Old display; JetBrains Mono for code surfaces; the orange primary carries a warm-ink label (the marketing white-on-orange reads 3.3:1 at operator scale)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# mistral-ai — a warm editorial desk, one orange stamp on cream
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A sunlit editorial studio: a white working sheet laid on a cream desk, warm ink, and
|
|
16
|
-
one saturated orange used like a wax stamp on the single action that matters. Light by
|
|
17
|
-
default — the canvas stays near-white while the sidebar and grouped panels carry the
|
|
18
|
-
cream warmth, so the temperature lives in the chrome, never a gradient. The dark theme
|
|
19
|
-
is the same studio after dusk: warm charcoal held at the cream hue, lamp-lit rungs, the
|
|
20
|
-
orange kept bright. The marketing sunset gradients and hero serif stay behind.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Warm ink `foreground` on a faintly-warm `background`; `primary` Mistral Orange is the
|
|
24
|
-
one chromatic accent — the primary action, the focus `ring`, the active-nav marker —
|
|
25
|
-
and its label runs warm ink, never white, for a crisp read. `accent` is a deeper cream
|
|
26
|
-
selection lift; the cream body lives in `secondary`, `muted`, and the `sidebar`. The
|
|
27
|
-
sunset yellows survive only in `chart-*`; status hues (`destructive`, `success`,
|
|
28
|
-
`warning`) speak only status.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (the open substitute for the licensed PP Editorial Old) over JetBrains Mono for
|
|
32
|
-
code and IDs. The defining trait is editorial emphasis: page and section heads carry
|
|
33
|
-
weight 500 with negative tracking — a marketing-desk lightness, never 600 bold — while
|
|
34
|
-
the uppercase eyebrow takes 600. Register scope: the display register speaks in page
|
|
35
|
-
titles, section heads, empty states, and auth; mono owns data, codes, IDs, and
|
|
36
|
-
timestamps; numerals are always `tabular-nums`. Emphasis bumps weight, never size.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-sm` (8px), orange `primary` fill with warm-ink label, never a pill;
|
|
40
|
-
secondary is cream `secondary` on a hairline. Inputs sit on `background` with a firmer
|
|
41
|
-
`input` edge; focus draws the orange `ring` at 2px, no glow. Cards are `card` white on
|
|
42
|
-
the cream canvas at `radius-lg` (12px), hairline-edged, shadowed only when lifted.
|
|
43
|
-
Table rows carry `border` grid lines, `muted` hover, `accent` selection. Detail opens
|
|
44
|
-
in the side panel; badges alone pill, with status fills.
|
|
45
|
-
|
|
46
|
-
## 5 Layout
|
|
47
|
-
4px base; sidebar 256/56px; topbar 56px; side panel 440/640px; content max 1320px.
|
|
48
|
-
Spacing leans comfortable — 44px controls, generous gutters — the editorial air the
|
|
49
|
-
brand keeps; the hero-scale 96/120 rhythm stays behind.
|
|
50
|
-
|
|
51
|
-
## 6 Depth
|
|
52
|
-
Light: the cream-to-white surface step and warm hairlines carry all structure; a
|
|
53
|
-
faint warm-tinted lift appears only under true overlays (popover, dialog). Dark: the
|
|
54
|
-
surface ladder does depth — `background` 0.20 L, `surface-raised` +0.05,
|
|
55
|
-
`surface-overlay` +0.10, hue held at 70. Focus is always the 2px orange `ring`,
|
|
56
|
-
keyboard-first.
|
|
57
|
-
|
|
58
|
-
## 7 Motion
|
|
59
|
-
Reserved and brief. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
60
|
-
`fade-arrive` (page content, 160ms), `stamp-press` (primary-action press, 120ms).
|
|
61
|
-
Physicality is granted only to auth and first-run empty states; nothing animates in
|
|
62
|
-
tables, palettes, or keyboard-initiated actions.
|
|
63
|
-
|
|
64
|
-
## 8 Iconography & Charts
|
|
65
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
66
|
-
no gridline fills; the categorical ramp is the sanctioned sunset set — orange, amber,
|
|
67
|
-
yellow, red, one cool counterpoint (`chart-1..5`); tooltips on `surface-overlay` with
|
|
68
|
-
mono numerals.
|
|
69
|
-
|
|
70
|
-
## 9 Voice
|
|
71
|
-
Warm and plainspoken, an editor's register: verbs without exclamation, numbers stated
|
|
72
|
-
flat. "Add key" · "Nothing queued — the last run finished 8 minutes ago" · "This
|
|
73
|
-
request exceeds the rate limit; retry in 30 seconds or raise the tier."
|
|
74
|
-
|
|
75
|
-
## 10 Do's & Don'ts
|
|
76
|
-
Do carry the warmth in the cream chrome — sidebar and grouped panels — against a
|
|
77
|
-
near-white canvas. Do keep heads at weight 500 with negative tracking; never bold the
|
|
78
|
-
display to 600. Do reserve orange for exactly one element per viewport. Don't pill the
|
|
79
|
-
CTA. Don't promote a sunset yellow or gradient into chrome — they are chart-only. Don't
|
|
80
|
-
cool the neutrals to slate; the temperature is the identity.
|
|
81
|
-
|
|
82
|
-
## 11 Responsive
|
|
83
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; tables → card rows with
|
|
84
|
-
mono figures. 768: sidebar collapses to the icon rail; tables scroll their overflow.
|
|
85
|
-
1024: two-pane queue+detail holds. 1440: forms cap; tables and dashboards use the full
|
|
86
|
-
width under the content cap.
|
|
87
|
-
|
|
88
|
-
## 12 Agent Prompt Guide
|
|
89
|
-
Reach for the cream chrome first — the tint is Mistral. Spend orange once per surface:
|
|
90
|
-
primary action, focus ring, active nav; if two things want it, one is not primary.
|
|
91
|
-
Heads wear 500 with negative tracking. Every numeric column is `tabular-nums`; every
|
|
92
|
-
ID, code, and timestamp is mono. Dark is authored — consult the block, never derive.
|
|
93
|
-
|
|
94
|
-
```yaml design-values
|
|
95
|
-
color:
|
|
96
|
-
light:
|
|
97
|
-
background: oklch(0.99 0.005 90)
|
|
98
|
-
foreground: oklch(0.24 0.01 80)
|
|
99
|
-
card: oklch(0.997 0.003 85)
|
|
100
|
-
card-foreground: oklch(0.24 0.01 80)
|
|
101
|
-
popover: oklch(0.997 0.003 85)
|
|
102
|
-
popover-foreground: oklch(0.24 0.01 80)
|
|
103
|
-
primary: oklch(0.665 0.214 38)
|
|
104
|
-
primary-foreground: oklch(0.17 0.025 40)
|
|
105
|
-
secondary: oklch(0.965 0.014 92)
|
|
106
|
-
secondary-foreground: oklch(0.3 0.02 70)
|
|
107
|
-
muted: oklch(0.975 0.012 92)
|
|
108
|
-
muted-foreground: oklch(0.52 0.012 80)
|
|
109
|
-
accent: oklch(0.94 0.04 92)
|
|
110
|
-
accent-foreground: oklch(0.3 0.02 70)
|
|
111
|
-
destructive: oklch(0.576 0.209 29.5)
|
|
112
|
-
destructive-foreground: oklch(0.98 0.01 29)
|
|
113
|
-
success: oklch(0.627 0.13 149)
|
|
114
|
-
warning: oklch(0.68 0.13 70)
|
|
115
|
-
border: oklch(0.9 0.008 90)
|
|
116
|
-
input: oklch(0.86 0.01 88)
|
|
117
|
-
ring: oklch(0.665 0.214 38)
|
|
118
|
-
surface-raised: oklch(0.98 0.008 90)
|
|
119
|
-
surface-overlay: oklch(0.997 0.003 85)
|
|
120
|
-
chart-1: oklch(0.665 0.19 38)
|
|
121
|
-
chart-2: oklch(0.72 0.14 70)
|
|
122
|
-
chart-3: oklch(0.8 0.13 92)
|
|
123
|
-
chart-4: oklch(0.6 0.18 28)
|
|
124
|
-
chart-5: oklch(0.6 0.09 240)
|
|
125
|
-
sidebar: oklch(0.965 0.03 90)
|
|
126
|
-
sidebar-foreground: oklch(0.28 0.015 70)
|
|
127
|
-
sidebar-primary: oklch(0.665 0.214 38)
|
|
128
|
-
sidebar-primary-foreground: oklch(0.17 0.025 40)
|
|
129
|
-
sidebar-accent: oklch(0.92 0.04 90)
|
|
130
|
-
sidebar-accent-foreground: oklch(0.28 0.015 70)
|
|
131
|
-
sidebar-border: oklch(0.9 0.02 90)
|
|
132
|
-
sidebar-ring: oklch(0.665 0.214 38)
|
|
133
|
-
dark:
|
|
134
|
-
background: oklch(0.2 0.008 70)
|
|
135
|
-
foreground: oklch(0.94 0.008 85)
|
|
136
|
-
card: oklch(0.24 0.009 70)
|
|
137
|
-
card-foreground: oklch(0.94 0.008 85)
|
|
138
|
-
popover: oklch(0.28 0.01 70)
|
|
139
|
-
popover-foreground: oklch(0.94 0.008 85)
|
|
140
|
-
primary: oklch(0.7 0.2 40)
|
|
141
|
-
primary-foreground: oklch(0.17 0.025 40)
|
|
142
|
-
secondary: oklch(0.26 0.01 70)
|
|
143
|
-
secondary-foreground: oklch(0.9 0.008 85)
|
|
144
|
-
muted: oklch(0.25 0.01 70)
|
|
145
|
-
muted-foreground: oklch(0.72 0.012 78)
|
|
146
|
-
accent: oklch(0.3 0.02 75)
|
|
147
|
-
accent-foreground: oklch(0.92 0.008 85)
|
|
148
|
-
destructive: oklch(0.64 0.19 29)
|
|
149
|
-
destructive-foreground: oklch(0.15 0.02 29)
|
|
150
|
-
success: oklch(0.68 0.13 149)
|
|
151
|
-
warning: oklch(0.75 0.13 70)
|
|
152
|
-
border: oklch(0.29 0.01 70)
|
|
153
|
-
input: oklch(0.29 0.01 70)
|
|
154
|
-
ring: oklch(0.7 0.2 40)
|
|
155
|
-
surface-raised: oklch(0.25 0.009 70)
|
|
156
|
-
surface-overlay: oklch(0.3 0.01 70)
|
|
157
|
-
chart-1: oklch(0.72 0.19 40)
|
|
158
|
-
chart-2: oklch(0.8 0.14 70)
|
|
159
|
-
chart-3: oklch(0.87 0.13 92)
|
|
160
|
-
chart-4: oklch(0.68 0.17 28)
|
|
161
|
-
chart-5: oklch(0.7 0.09 240)
|
|
162
|
-
sidebar: oklch(0.18 0.008 70)
|
|
163
|
-
sidebar-foreground: oklch(0.9 0.008 85)
|
|
164
|
-
sidebar-primary: oklch(0.7 0.2 40)
|
|
165
|
-
sidebar-primary-foreground: oklch(0.17 0.025 40)
|
|
166
|
-
sidebar-accent: oklch(0.26 0.012 72)
|
|
167
|
-
sidebar-accent-foreground: oklch(0.92 0.008 85)
|
|
168
|
-
sidebar-border: oklch(0.24 0.01 70)
|
|
169
|
-
sidebar-ring: oklch(0.7 0.2 40)
|
|
170
|
-
typography:
|
|
171
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [500] }
|
|
172
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
173
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
174
|
-
ramp:
|
|
175
|
-
display: { size: 30px, line: 36px, weight: 500, family: display, tracking: -0.02em }
|
|
176
|
-
h1: { size: 24px, line: 30px, weight: 500, family: display, tracking: -0.015em }
|
|
177
|
-
h2: { size: 18px, line: 24px, weight: 500, family: display, tracking: -0.01em }
|
|
178
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
179
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
180
|
-
caption: { size: 11px, line: 16px, weight: 600, family: sans, tracking: 0.09em, transform: uppercase }
|
|
181
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
182
|
-
register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, codes, ids, timestamps] }
|
|
183
|
-
elevation:
|
|
184
|
-
radius: { sm: 8px, md: 10px, lg: 12px }
|
|
185
|
-
hairline: border
|
|
186
|
-
shadow:
|
|
187
|
-
overlay: "0 8px 30px oklch(0.24 0.02 70 / 0.14)"
|
|
188
|
-
popover: "0 4px 16px oklch(0.24 0.02 70 / 0.1)"
|
|
189
|
-
dark-ladder: { background: 0.2, raised: 0.25, overlay: 0.3, hue-held: 70 }
|
|
190
|
-
motion:
|
|
191
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
192
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
193
|
-
entrance-never: ease-in
|
|
194
|
-
identity-moments: [auth, first-run-empty]
|
|
195
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
196
|
-
charts:
|
|
197
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
198
|
-
sequential: { from: background, to: chart-1 }
|
|
199
|
-
diverging: { negative: destructive, mid: muted, positive: chart-5 }
|
|
200
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1320px }
|
|
201
|
-
```
|
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: mongodb
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, database, infra]
|
|
6
|
-
keywords: [engineered, navy-teal, green, cool, rounded, database]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 mongodb entry (2026-07-04); 2026-07-12 re-audit of MongoDB public brand; Manrope substitutes the licensed Euclid Circular A (closest open geometric grotesque); Source Code Pro for code surfaces; the bright green primary keeps its deep-navy label per brand"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# mongodb — an engineered console, deep navy-teal with one bright-green switch
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An engineered, database-native console: a white working canvas over a cool navy-teal
|
|
16
|
-
slate, one bright MongoDB green reserved for the single action that matters — and that
|
|
17
|
-
green always carries a deep-navy label, never white, because it is bright enough to
|
|
18
|
-
demand a dark one. Light by default; the surfaces run faintly cool-green so the UI
|
|
19
|
-
reads database-adjacent, not clinical. The dark theme is the brand's navy-teal hero
|
|
20
|
-
made habitable: a deep cool ladder with the green held bright. The 72px display and
|
|
21
|
-
hero bands stay behind.
|
|
22
|
-
|
|
23
|
-
## 2 Color Roles
|
|
24
|
-
Deep navy-teal `foreground` on a near-white `background`; `primary` green is the one
|
|
25
|
-
chromatic accent — the primary action, active nav, key detail — labelled in deep navy
|
|
26
|
-
(`primary-foreground`). `accent` is a pale-mint selection lift with a deep-green label.
|
|
27
|
-
The category palette (purple, orange, pink, blue) survives only in `chart-*`; status
|
|
28
|
-
hues speak only status. The `sidebar` holds a faint cool tint below the canvas.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Manrope (the open geometric substitute for the licensed Euclid Circular A) over Source
|
|
32
|
-
Code Pro for IDs, codes, and log lines. UI, body, and heads all ride the geometric
|
|
33
|
-
sans; weight, not a second family, carries the display voice — heads at 600, the
|
|
34
|
-
uppercase eyebrow at 600. Register scope: the display register speaks in page titles,
|
|
35
|
-
section heads, empty states, and auth; mono owns data, codes, IDs, and timestamps.
|
|
36
|
-
Numerals are always `tabular-nums`; emphasis bumps weight, never size.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
The primary button alone is pilled — MongoDB's one signature carry — green `primary`
|
|
40
|
-
fill with a deep-navy label; everything else takes the rounded scale. Secondary is
|
|
41
|
-
transparent on an `input` hairline; inputs sit on `background` with a firmer `input`
|
|
42
|
-
edge, focus draws the green `ring` at 2px, no glow. Cards are `card` white at
|
|
43
|
-
`radius-lg` (12px), hairline-edged, shadowed only when lifted. Table rows carry
|
|
44
|
-
`border` grid lines, `muted` hover, pale-mint `accent` selection. Detail opens in the
|
|
45
|
-
side panel; badges take status fills, never `primary`.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base; sidebar 256/56px; topbar 56px (the brand's breathier chrome); side panel
|
|
49
|
-
440/640px; content max 1360px. Controls sit at a comfortable 44px; MongoDB's 20 and 40
|
|
50
|
-
spacing steps survive the marketing trim.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
Light: hairlines and the cool surface ladder carry structure; a soft navy-tinted lift
|
|
54
|
-
appears only under true overlays. Dark: the surface ladder does depth — `background`
|
|
55
|
-
0.20 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held at 230. Focus is
|
|
56
|
-
always the 2px green `ring`, keyboard-first.
|
|
57
|
-
|
|
58
|
-
## 7 Motion
|
|
59
|
-
Reserved and precise. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
60
|
-
`fade-arrive` (page content, 160ms), `press` (primary-action press, 120ms). Physicality
|
|
61
|
-
is granted only to auth and first-run empty states; nothing animates in tables, query
|
|
62
|
-
results, or keyboard-initiated actions.
|
|
63
|
-
|
|
64
|
-
## 8 Iconography & Charts
|
|
65
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
66
|
-
no gridline fills; the categorical ramp is MongoDB's category palette — green, purple,
|
|
67
|
-
orange, pink, blue (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
|
|
68
|
-
|
|
69
|
-
## 9 Voice
|
|
70
|
-
Engineered and exact: short declaratives, numbers plain, no cheer. "Add cluster" ·
|
|
71
|
-
"No queries running — the last one returned 41ms ago" · "This index build blocks
|
|
72
|
-
writes; run it in the background or during a maintenance window."
|
|
73
|
-
|
|
74
|
-
## 10 Do's & Don'ts
|
|
75
|
-
Do reserve green for the single primary action and keep its deep-navy label — bright
|
|
76
|
-
green never carries white text. Do pill only that one action; everything else takes the
|
|
77
|
-
rounded scale. Do carry hierarchy with hairlines and the cool ladder. Don't promote a
|
|
78
|
-
category color (purple, orange, pink, blue) into chrome — they are chart-only. Don't
|
|
79
|
-
reach for a navy-teal hero band or 72px display. Don't cool a status chip into a
|
|
80
|
-
category hue.
|
|
81
|
-
|
|
82
|
-
## 11 Responsive
|
|
83
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; tables → card rows with
|
|
84
|
-
mono figures. 768: sidebar collapses to the icon rail; tables scroll their overflow.
|
|
85
|
-
1024: two-pane queue+detail holds. 1440: forms cap; tables and dashboards use the full
|
|
86
|
-
width under the content cap.
|
|
87
|
-
|
|
88
|
-
## 12 Agent Prompt Guide
|
|
89
|
-
Lead every list with its table on the near-white canvas over the cool slate. Spend
|
|
90
|
-
green once per surface, always with the deep-navy label, and pill only that button.
|
|
91
|
-
Every numeric column is `tabular-nums`; every ID, code, and timestamp is mono. The
|
|
92
|
-
category palette is chart-only. Dark is authored — consult the block, never derive.
|
|
93
|
-
|
|
94
|
-
```yaml design-values
|
|
95
|
-
color:
|
|
96
|
-
light:
|
|
97
|
-
background: oklch(0.99 0.004 200)
|
|
98
|
-
foreground: oklch(0.24 0.038 230)
|
|
99
|
-
card: oklch(0.997 0.003 200)
|
|
100
|
-
card-foreground: oklch(0.24 0.038 230)
|
|
101
|
-
popover: oklch(0.997 0.003 200)
|
|
102
|
-
popover-foreground: oklch(0.24 0.038 230)
|
|
103
|
-
primary: oklch(0.82 0.21 148)
|
|
104
|
-
primary-foreground: oklch(0.24 0.04 230)
|
|
105
|
-
secondary: oklch(0.97 0.008 175)
|
|
106
|
-
secondary-foreground: oklch(0.3 0.03 230)
|
|
107
|
-
muted: oklch(0.97 0.008 175)
|
|
108
|
-
muted-foreground: oklch(0.52 0.03 245)
|
|
109
|
-
accent: oklch(0.95 0.03 163)
|
|
110
|
-
accent-foreground: oklch(0.458 0.096 165)
|
|
111
|
-
destructive: oklch(0.576 0.209 29.5)
|
|
112
|
-
destructive-foreground: oklch(0.98 0.01 29)
|
|
113
|
-
success: oklch(0.628 0.156 154)
|
|
114
|
-
warning: oklch(0.62 0.11 72)
|
|
115
|
-
border: oklch(0.92 0.006 240)
|
|
116
|
-
input: oklch(0.84 0.014 245)
|
|
117
|
-
ring: oklch(0.458 0.1 165)
|
|
118
|
-
surface-raised: oklch(0.985 0.005 190)
|
|
119
|
-
surface-overlay: oklch(0.997 0.003 200)
|
|
120
|
-
chart-1: oklch(0.7 0.18 148)
|
|
121
|
-
chart-2: oklch(0.55 0.22 291)
|
|
122
|
-
chart-3: oklch(0.7 0.18 40)
|
|
123
|
-
chart-4: oklch(0.71 0.18 347)
|
|
124
|
-
chart-5: oklch(0.5 0.13 271)
|
|
125
|
-
sidebar: oklch(0.975 0.006 190)
|
|
126
|
-
sidebar-foreground: oklch(0.28 0.035 230)
|
|
127
|
-
sidebar-primary: oklch(0.82 0.21 148)
|
|
128
|
-
sidebar-primary-foreground: oklch(0.24 0.04 230)
|
|
129
|
-
sidebar-accent: oklch(0.93 0.03 163)
|
|
130
|
-
sidebar-accent-foreground: oklch(0.458 0.096 165)
|
|
131
|
-
sidebar-border: oklch(0.91 0.008 200)
|
|
132
|
-
sidebar-ring: oklch(0.458 0.1 165)
|
|
133
|
-
dark:
|
|
134
|
-
background: oklch(0.2 0.015 230)
|
|
135
|
-
foreground: oklch(0.94 0.01 200)
|
|
136
|
-
card: oklch(0.24 0.015 230)
|
|
137
|
-
card-foreground: oklch(0.94 0.01 200)
|
|
138
|
-
popover: oklch(0.28 0.015 230)
|
|
139
|
-
popover-foreground: oklch(0.94 0.01 200)
|
|
140
|
-
primary: oklch(0.82 0.2 148)
|
|
141
|
-
primary-foreground: oklch(0.2 0.04 230)
|
|
142
|
-
secondary: oklch(0.26 0.015 230)
|
|
143
|
-
secondary-foreground: oklch(0.9 0.01 200)
|
|
144
|
-
muted: oklch(0.25 0.015 230)
|
|
145
|
-
muted-foreground: oklch(0.72 0.014 220)
|
|
146
|
-
accent: oklch(0.3 0.04 165)
|
|
147
|
-
accent-foreground: oklch(0.92 0.03 163)
|
|
148
|
-
destructive: oklch(0.64 0.19 29)
|
|
149
|
-
destructive-foreground: oklch(0.15 0.02 29)
|
|
150
|
-
success: oklch(0.7 0.15 154)
|
|
151
|
-
warning: oklch(0.75 0.12 72)
|
|
152
|
-
border: oklch(0.29 0.015 230)
|
|
153
|
-
input: oklch(0.29 0.015 230)
|
|
154
|
-
ring: oklch(0.72 0.16 155)
|
|
155
|
-
surface-raised: oklch(0.25 0.015 230)
|
|
156
|
-
surface-overlay: oklch(0.3 0.015 230)
|
|
157
|
-
chart-1: oklch(0.82 0.18 148)
|
|
158
|
-
chart-2: oklch(0.65 0.2 291)
|
|
159
|
-
chart-3: oklch(0.72 0.17 40)
|
|
160
|
-
chart-4: oklch(0.74 0.16 347)
|
|
161
|
-
chart-5: oklch(0.62 0.14 265)
|
|
162
|
-
sidebar: oklch(0.17 0.015 230)
|
|
163
|
-
sidebar-foreground: oklch(0.9 0.01 200)
|
|
164
|
-
sidebar-primary: oklch(0.82 0.2 148)
|
|
165
|
-
sidebar-primary-foreground: oklch(0.2 0.04 230)
|
|
166
|
-
sidebar-accent: oklch(0.26 0.015 230)
|
|
167
|
-
sidebar-accent-foreground: oklch(0.92 0.01 200)
|
|
168
|
-
sidebar-border: oklch(0.24 0.015 230)
|
|
169
|
-
sidebar-ring: oklch(0.72 0.16 155)
|
|
170
|
-
typography:
|
|
171
|
-
display: { family: "Manrope Variable", fallback: "system-ui, sans-serif", weights: [600, 700] }
|
|
172
|
-
sans: { family: "Manrope Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
173
|
-
mono: { family: "Source Code Pro", fallback: "ui-monospace, monospace", weights: [400] }
|
|
174
|
-
ramp:
|
|
175
|
-
display: { size: 30px, line: 36px, weight: 600, family: display, tracking: -0.02em }
|
|
176
|
-
h1: { size: 24px, line: 30px, weight: 600, family: display, tracking: -0.015em }
|
|
177
|
-
h2: { size: 18px, line: 24px, weight: 600, family: display, tracking: -0.01em }
|
|
178
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
179
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
180
|
-
caption: { size: 11px, line: 16px, weight: 600, family: sans, tracking: 0.06em, transform: uppercase }
|
|
181
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
182
|
-
register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, codes, ids, timestamps] }
|
|
183
|
-
elevation:
|
|
184
|
-
radius: { sm: 8px, md: 10px, lg: 12px }
|
|
185
|
-
hairline: border
|
|
186
|
-
shadow:
|
|
187
|
-
overlay: "0 8px 30px oklch(0.22 0.04 230 / 0.16)"
|
|
188
|
-
popover: "0 4px 16px oklch(0.22 0.04 230 / 0.1)"
|
|
189
|
-
dark-ladder: { background: 0.2, raised: 0.25, overlay: 0.3, hue-held: 230 }
|
|
190
|
-
motion:
|
|
191
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
192
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
193
|
-
entrance-never: ease-in
|
|
194
|
-
identity-moments: [auth, first-run-empty]
|
|
195
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
196
|
-
charts:
|
|
197
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
198
|
-
sequential: { from: background, to: chart-1 }
|
|
199
|
-
diverging: { negative: destructive, mid: muted, positive: chart-1 }
|
|
200
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
201
|
-
```
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: notion
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [docs, knowledge, workspace]
|
|
6
|
-
keywords: [warm, paper, editorial, purple, calm, flexible]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 notion entry (2026-07-04); 2026-07-12 re-audit of Notion public brand; Inter substitutes the Inter-based proprietary Notion Sans; JetBrains Mono for code and IDs; inline links stay link-blue, distinct from the purple CTA per brand rule"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# notion — a warm paper workspace, one purple where it counts
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A calm paper workspace: warm-charcoal ink on faintly-warm paper, beige hairlines
|
|
16
|
-
carrying every edge, and one Notion purple reserved for the single dominant action.
|
|
17
|
-
Light by default; the neutrals lean warm, not cool-slate, so the UI reads editorial
|
|
18
|
-
and unhurried rather than clinical. The dark theme is the same warmth after dark — a
|
|
19
|
-
warm-charcoal ladder holding the paper hue, never inverted paper. The navy hero band
|
|
20
|
-
and the pastel feature-rainbow stay behind.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Warm-charcoal `foreground` on warm-paper `background`; `primary` purple is the one
|
|
24
|
-
chromatic action — primary action, active nav, key detail. Inline links stay a
|
|
25
|
-
distinct link-blue: links and CTAs never share a hue (a Notion rule, carried in the
|
|
26
|
-
chart-blue role and prose). `accent` is a soft lavender selection lift with a
|
|
27
|
-
deep-purple label; status hues speak only status; the pastel rainbow never enters
|
|
28
|
-
chrome.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (the open substitute for the Inter-based proprietary Notion Sans) over JetBrains
|
|
32
|
-
Mono for IDs, codes, and timestamps. UI, body, and heads all ride the sans; weight and
|
|
33
|
-
tracking, not a second family, carry the display voice — heads at 600 with tight
|
|
34
|
-
negative tracking, body at generous 1.5 leading. Register scope: the display register
|
|
35
|
-
speaks in page titles, section heads, empty states, and auth; mono owns data, codes,
|
|
36
|
-
IDs, and timestamps. Numerals are always `tabular-nums`; emphasis bumps weight, never
|
|
37
|
-
size.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons `radius-sm` (8px rectangle), purple `primary` fill, never a pill; secondary is
|
|
41
|
-
`background` on an `input` hairline. Inputs sit on `background` with a firmer `input`
|
|
42
|
-
edge; focus draws the purple `ring` at 2px, no glow. Cards are `card` at `radius-lg`
|
|
43
|
-
(12px), warm-hairline-edged, a soft low-alpha lift only when raised. Table rows carry
|
|
44
|
-
`border` grid lines, `muted` hover, lavender `accent` selection. Detail opens in the
|
|
45
|
-
side panel; status badges alone pill; a feature-tag chip is a soft rectangle in
|
|
46
|
-
`accent`.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
4px base; sidebar 256/56px; topbar 52px; side panel 440/640px; content max 1320px.
|
|
50
|
-
Spacing is comfortable and dense-capable in tables, never cramped; whitespace carries
|
|
51
|
-
as much hierarchy as the hairlines.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Light: warm hairlines and the paper ladder carry structure; Notion's shadows are near-
|
|
55
|
-
black at very low alpha, diffuse, on overlays only — brand-tinted, never harsh. Dark:
|
|
56
|
-
the surface ladder does depth — `background` 0.20 L, `surface-raised` +0.05,
|
|
57
|
-
`surface-overlay` +0.10, hue held at 70. Focus is always the 2px purple `ring`,
|
|
58
|
-
keyboard-first.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Calm and quiet. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
62
|
-
`fade-arrive` (page content, 160ms), `press` (primary-action press, 120ms). Physicality
|
|
63
|
-
is granted only to auth and first-run empty states; nothing animates in tables, the
|
|
64
|
-
block list, or keyboard-initiated actions.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
68
|
-
no gridline fills; the categorical ramp runs purple, link-blue, green, orange, pink
|
|
69
|
-
(`chart-1..5`) — the blue doubling as the inline-link hue; tooltips on `surface-overlay`
|
|
70
|
-
with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
Warm and plain, an editor's calm: short sentences, numbers stated flat, no exclamation.
|
|
74
|
-
"New page" · "Nothing here yet — start with a heading or a table" · "This page is
|
|
75
|
-
shared with 3 people; change access from the share menu."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do keep the neutrals warm — charcoal ink, paper fills, beige hairlines; cool slate
|
|
79
|
-
reads as a different product. Do reserve purple for the single primary action. Do carry
|
|
80
|
-
hierarchy with hairlines, weight, and whitespace. Don't pill the CTA — buttons are 8px
|
|
81
|
-
rectangles; pills are status badges only. Don't color inline links purple — links are
|
|
82
|
-
link-blue, distinct from the CTA. Don't promote the pastel rainbow into chrome.
|
|
83
|
-
|
|
84
|
-
## 11 Responsive
|
|
85
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; tables → card rows with
|
|
86
|
-
mono figures. 768: sidebar collapses to the icon rail; tables scroll their overflow.
|
|
87
|
-
1024: two-pane list+detail holds. 1440: content caps for forms; tables and dashboards
|
|
88
|
-
use the full width.
|
|
89
|
-
|
|
90
|
-
## 12 Agent Prompt Guide
|
|
91
|
-
Keep the neutral ramp warm — charcoal on paper, beige hairlines; never cool it to
|
|
92
|
-
slate. Accent only the primary action with purple; inline links are link-blue and the
|
|
93
|
-
two hues never merge. Sober rectangles: 8px buttons, 12px cards, pills for status
|
|
94
|
-
badges only. Every numeric column is `tabular-nums`; every ID, code, and timestamp is
|
|
95
|
-
mono. Dark is authored — consult the block, never derive.
|
|
96
|
-
|
|
97
|
-
```yaml design-values
|
|
98
|
-
color:
|
|
99
|
-
light:
|
|
100
|
-
background: oklch(0.99 0.005 85)
|
|
101
|
-
foreground: oklch(0.33 0.011 92)
|
|
102
|
-
card: oklch(0.997 0.003 85)
|
|
103
|
-
card-foreground: oklch(0.33 0.011 92)
|
|
104
|
-
popover: oklch(0.997 0.003 85)
|
|
105
|
-
popover-foreground: oklch(0.33 0.011 92)
|
|
106
|
-
primary: oklch(0.499 0.209 281)
|
|
107
|
-
primary-foreground: oklch(0.98 0.01 281)
|
|
108
|
-
secondary: oklch(0.97 0.006 80)
|
|
109
|
-
secondary-foreground: oklch(0.36 0.012 90)
|
|
110
|
-
muted: oklch(0.97 0.006 80)
|
|
111
|
-
muted-foreground: oklch(0.48 0.012 90)
|
|
112
|
-
accent: oklch(0.92 0.03 299)
|
|
113
|
-
accent-foreground: oklch(0.3 0.103 303)
|
|
114
|
-
destructive: oklch(0.55 0.21 27)
|
|
115
|
-
destructive-foreground: oklch(0.98 0.01 26)
|
|
116
|
-
success: oklch(0.62 0.17 145)
|
|
117
|
-
warning: oklch(0.629 0.16 45)
|
|
118
|
-
border: oklch(0.915 0.006 85)
|
|
119
|
-
input: oklch(0.82 0.009 78)
|
|
120
|
-
ring: oklch(0.499 0.209 281)
|
|
121
|
-
surface-raised: oklch(0.985 0.005 85)
|
|
122
|
-
surface-overlay: oklch(0.997 0.003 85)
|
|
123
|
-
chart-1: oklch(0.55 0.18 281)
|
|
124
|
-
chart-2: oklch(0.57 0.15 254)
|
|
125
|
-
chart-3: oklch(0.62 0.14 150)
|
|
126
|
-
chart-4: oklch(0.65 0.15 55)
|
|
127
|
-
chart-5: oklch(0.65 0.16 350)
|
|
128
|
-
sidebar: oklch(0.975 0.006 82)
|
|
129
|
-
sidebar-foreground: oklch(0.36 0.011 90)
|
|
130
|
-
sidebar-primary: oklch(0.499 0.209 281)
|
|
131
|
-
sidebar-primary-foreground: oklch(0.98 0.01 281)
|
|
132
|
-
sidebar-accent: oklch(0.9 0.03 299)
|
|
133
|
-
sidebar-accent-foreground: oklch(0.3 0.103 303)
|
|
134
|
-
sidebar-border: oklch(0.9 0.008 85)
|
|
135
|
-
sidebar-ring: oklch(0.499 0.209 281)
|
|
136
|
-
dark:
|
|
137
|
-
background: oklch(0.2 0.008 70)
|
|
138
|
-
foreground: oklch(0.92 0.008 85)
|
|
139
|
-
card: oklch(0.24 0.009 70)
|
|
140
|
-
card-foreground: oklch(0.92 0.008 85)
|
|
141
|
-
popover: oklch(0.28 0.01 70)
|
|
142
|
-
popover-foreground: oklch(0.92 0.008 85)
|
|
143
|
-
primary: oklch(0.52 0.2 283)
|
|
144
|
-
primary-foreground: oklch(0.98 0.01 283)
|
|
145
|
-
secondary: oklch(0.26 0.01 70)
|
|
146
|
-
secondary-foreground: oklch(0.9 0.008 85)
|
|
147
|
-
muted: oklch(0.25 0.01 70)
|
|
148
|
-
muted-foreground: oklch(0.72 0.011 82)
|
|
149
|
-
accent: oklch(0.32 0.04 295)
|
|
150
|
-
accent-foreground: oklch(0.92 0.02 299)
|
|
151
|
-
destructive: oklch(0.64 0.2 26)
|
|
152
|
-
destructive-foreground: oklch(0.15 0.02 26)
|
|
153
|
-
success: oklch(0.68 0.15 145)
|
|
154
|
-
warning: oklch(0.72 0.15 55)
|
|
155
|
-
border: oklch(0.29 0.01 70)
|
|
156
|
-
input: oklch(0.29 0.01 70)
|
|
157
|
-
ring: oklch(0.62 0.2 285)
|
|
158
|
-
surface-raised: oklch(0.25 0.009 70)
|
|
159
|
-
surface-overlay: oklch(0.3 0.01 70)
|
|
160
|
-
chart-1: oklch(0.62 0.2 285)
|
|
161
|
-
chart-2: oklch(0.65 0.15 254)
|
|
162
|
-
chart-3: oklch(0.7 0.14 150)
|
|
163
|
-
chart-4: oklch(0.72 0.15 55)
|
|
164
|
-
chart-5: oklch(0.7 0.16 350)
|
|
165
|
-
sidebar: oklch(0.18 0.008 70)
|
|
166
|
-
sidebar-foreground: oklch(0.9 0.008 85)
|
|
167
|
-
sidebar-primary: oklch(0.52 0.2 283)
|
|
168
|
-
sidebar-primary-foreground: oklch(0.98 0.01 283)
|
|
169
|
-
sidebar-accent: oklch(0.26 0.012 72)
|
|
170
|
-
sidebar-accent-foreground: oklch(0.92 0.008 85)
|
|
171
|
-
sidebar-border: oklch(0.24 0.01 70)
|
|
172
|
-
sidebar-ring: oklch(0.62 0.2 285)
|
|
173
|
-
typography:
|
|
174
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
175
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
176
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
177
|
-
ramp:
|
|
178
|
-
display: { size: 30px, line: 36px, weight: 600, family: display, tracking: -0.02em }
|
|
179
|
-
h1: { size: 24px, line: 30px, weight: 600, family: display, tracking: -0.015em }
|
|
180
|
-
h2: { size: 18px, line: 24px, weight: 600, family: display, tracking: -0.01em }
|
|
181
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
182
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
183
|
-
caption: { size: 11px, line: 16px, weight: 600, family: sans, tracking: 0.09em, transform: uppercase }
|
|
184
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
185
|
-
register-scope: { display: [page-title, section-head, empty-state, auth], sans: [chrome, controls, body], mono: [data, codes, ids, timestamps] }
|
|
186
|
-
elevation:
|
|
187
|
-
radius: { sm: 8px, md: 10px, lg: 12px }
|
|
188
|
-
hairline: border
|
|
189
|
-
shadow:
|
|
190
|
-
overlay: "0 8px 30px oklch(0.33 0.011 92 / 0.12)"
|
|
191
|
-
popover: "0 4px 16px oklch(0.33 0.011 92 / 0.08)"
|
|
192
|
-
dark-ladder: { background: 0.2, raised: 0.25, overlay: 0.3, hue-held: 70 }
|
|
193
|
-
motion:
|
|
194
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
195
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
196
|
-
entrance-never: ease-in
|
|
197
|
-
identity-moments: [auth, first-run-empty]
|
|
198
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
199
|
-
charts:
|
|
200
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
201
|
-
sequential: { from: background, to: chart-1 }
|
|
202
|
-
diverging: { negative: destructive, mid: muted, positive: chart-3 }
|
|
203
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 52px, side-panel: [440px, 640px], content-max: 1320px }
|
|
204
|
-
```
|