@nurix/etna 0.19.49 → 0.19.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/apollo/harness.json +2 -2
- package/data/harnesses/apollo/hooks/hooks.json +3 -1
- package/data/harnesses/apollo/skills/design/SKILL.md +55 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +8 -4
- package/data/harnesses/apollo/skills/design/references/content.md +5 -5
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/apollo/skills/design/references/intake.md +11 -7
- package/data/harnesses/apollo/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +26 -6
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/hooks/hooks.json +3 -1
- package/data/harnesses/code/skills/design/SKILL.md +55 -29
- package/data/harnesses/code/skills/design/references/compose.md +8 -4
- package/data/harnesses/code/skills/design/references/content.md +5 -5
- package/data/harnesses/code/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/code/skills/design/references/intake.md +11 -7
- package/data/harnesses/code/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/code/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +26 -6
- package/package.json +2 -2
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/apollo/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/apollo/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/apollo/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/apollo/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/apollo/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/apollo/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/apollo/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/apollo/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/apollo/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/apollo/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/apollo/skills/design/design-md/variants/warm-approachable.md +0 -216
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/code/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/code/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/code/skills/design/data/iconography.md +0 -199
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/code/skills/design/data/tells.csv +0 -34
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/code/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/code/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/code/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +0 -216
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: mintlify
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [docs, dev-tools, developer-platform]
|
|
6
|
-
keywords: [white, mint, cool-gray, code-inlay, standard, developer]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 mintlify entry (2026-07-04) + 2026-07-12 re-audit of the documentation-platform system; Inter Variable + Geist Mono per v1; the sky/teal gradient heroes, 72px hero display, full-pill buttons, testimonial-orange card, and 96/120px section rhythm stay behind; tag-blue, warn-amber, and testimonial-orange survive only as chart/status hues; dark theme authored (light holds cleanly, dark is opt-in)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# mintlify — a developer's clean desk with one mint marker and a slate of code
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A developer's clean-lit desk: a white sheet ruled in cool gray, one mint marker, and a
|
|
16
|
-
slab of dark slate where the code goes. Light by default; the UI floats on a white
|
|
17
|
-
`background` and cards read by their hairline `border`, not by brightness. Emphatically
|
|
18
|
-
flat — the light-gray hairline, cool-neutral surface tints, and type weight carry rank,
|
|
19
|
-
never a drop shadow. A single chromatic accent, Mintlify mint `primary`, is held scarce:
|
|
20
|
-
the one primary action (ink on mint), the focus `ring`, and the active-nav indicator.
|
|
21
|
-
The one dark surface is the code inlay — real product chrome, carried even in a light UI.
|
|
22
|
-
The dark theme is authored from that same slate.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
Near-black `foreground` on white `background`; `primary` mint carries the one primary
|
|
26
|
-
action with ink `primary-foreground` — the brand's green-button pairing — plus the focus
|
|
27
|
-
`ring` and active-nav indicator. `accent` is a neutral lift for selection; mint stays the
|
|
28
|
-
indicator, never the fill. Status hues (`destructive`, `success`, `warning`) speak status
|
|
29
|
-
only; tag-blue, warn-amber, and testimonial-orange survive only in charts. Sidebar sits a
|
|
30
|
-
faint cool step off the white in both themes.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
Inter (single voice — UI, labels, prose) / Geist Mono (IDs, timestamps, and every code
|
|
34
|
-
surface) — the pairing is the brand's developer-respect signal; never a third face.
|
|
35
|
-
Register scope: no hero display face — Inter carries headings, and the marketing display
|
|
36
|
-
scale stays behind. Emphasis is weight (500/600) or color, never italics — the brand
|
|
37
|
-
ships none. Every numeric column renders `tabular-nums`; long-form docs prose holds
|
|
38
|
-
16px, never compressed.
|
|
39
|
-
|
|
40
|
-
## 4 Component Stylings
|
|
41
|
-
Buttons `radius-md` (8px, never pill — the marketing full-pill stays behind), mint
|
|
42
|
-
`primary` fill on ink; secondary takes cool `secondary` with a hairline; ghost goes
|
|
43
|
-
`accent` on hover. Inputs on `background` with a hairline `input` edge and a 2px mint
|
|
44
|
-
`ring`, no glow — the brand focuses fields in mint. Cards white on a hairline — panels
|
|
45
|
-
read by their edge, not a brighter fill — stepping to `radius-lg` for larger panels.
|
|
46
|
-
Table rows `muted` hover, `accent` selection with a mint left-indicator, mono numerals.
|
|
47
|
-
Detail opens in the side panel. Code, log, and terminal panels take the dark slate inlay
|
|
48
|
-
(`surface-overlay`-deep) with mono text. Badges pill, `muted`/status fill, uppercase
|
|
49
|
-
caption, never `primary`.
|
|
50
|
-
|
|
51
|
-
## 5 Layout
|
|
52
|
-
4px base; ramp 2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 240/56px (the docs
|
|
53
|
-
sidebar); topbar 56px; side panel 420/640px; content max 1280px; tables full-width.
|
|
54
|
-
Standard density — layout-dense, readable prose — stepped per archetype, never absolute
|
|
55
|
-
overrides.
|
|
56
|
-
|
|
57
|
-
## 6 Depth
|
|
58
|
-
Flat and hairline-first — the hairline and cool-neutral surface tints carry rank; panels
|
|
59
|
-
read by their edge, never a brighter fill. Light: overlays earn the one soft cool-tinted
|
|
60
|
-
tier. Dark: the authored ladder — `background` 0.20 L, `surface-raised` +0.04,
|
|
61
|
-
`surface-overlay` +0.08, hue held at 200. The code inlay is a dark slab carried in both
|
|
62
|
-
themes, real product chrome. Focus is a 2px mint `ring`, always visible; three z-levels:
|
|
63
|
-
content, sticky chrome, overlay.
|
|
64
|
-
|
|
65
|
-
## 7 Motion
|
|
66
|
-
Precise and quiet. Named moments: `press` (primary action, 110ms), `page-fade` (content
|
|
67
|
-
arrive, 150ms), `panel-slide` (side panel, 220ms, interruptible). Physicality is granted
|
|
68
|
-
only to auth and first-run empty states; code blocks appear whole, never typed-on; nothing
|
|
69
|
-
animates on keyboard-initiated actions.
|
|
70
|
-
|
|
71
|
-
## 8 Iconography & Charts
|
|
72
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes, no
|
|
73
|
-
gridline fills; the categorical ramp leads with mint then the surviving marketing hues —
|
|
74
|
-
mint, tag-blue, amber, violet, coral (`chart-1..5`); tooltips on `surface-overlay` with
|
|
75
|
-
mono numerals.
|
|
76
|
-
|
|
77
|
-
## 9 Voice
|
|
78
|
-
Developer-plain — precise, no marketing lift. "New deployment" · "No pages need review —
|
|
79
|
-
the last build passed" · "This reference is out of sync; regenerate the schema before
|
|
80
|
-
publishing."
|
|
81
|
-
|
|
82
|
-
## 10 Do's & Don'ts
|
|
83
|
-
Do anchor every surface on the white canvas with cool-gray neutrals and near-black ink.
|
|
84
|
-
Do reserve mint `primary` for the primary action, the focus `ring`, and the active-nav
|
|
85
|
-
indicator — its scarcity is the voltage. Do pair Inter with Geist Mono — never a third
|
|
86
|
-
face — and dress code, log, and terminal panels in the dark slate inlay. Don't set mint on
|
|
87
|
-
body text or large fills — it loses signal. Don't promote a second chromatic accent, pill
|
|
88
|
-
the controls, or signal elevation with heavy shadows.
|
|
89
|
-
|
|
90
|
-
## 11 Responsive
|
|
91
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
92
|
-
density holds. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane
|
|
93
|
-
queue+detail holds side by side. 1440: forms cap; tables and dashboards take the full width.
|
|
94
|
-
|
|
95
|
-
## 12 Agent Prompt Guide
|
|
96
|
-
Reach for the white canvas with cool-gray neutrals and near-black ink — the quiet docs
|
|
97
|
-
surface, not the marketing hero. Spend mint once per surface: primary action, focus ring,
|
|
98
|
-
active-nav indicator; if two things want it, one is not primary. Pair Inter with Geist
|
|
99
|
-
Mono; render code, log, and terminal panels in the dark slate inlay, real chrome. Keep
|
|
100
|
-
long-form prose at 16px; every numeric column is mono `tabular-nums`. Dark is authored —
|
|
101
|
-
consult the block, never derive.
|
|
102
|
-
|
|
103
|
-
```yaml design-values
|
|
104
|
-
color:
|
|
105
|
-
light:
|
|
106
|
-
background: oklch(0.99 0.004 195)
|
|
107
|
-
foreground: oklch(0.16 0.005 200)
|
|
108
|
-
card: oklch(0.995 0.003 195)
|
|
109
|
-
card-foreground: oklch(0.16 0.005 200)
|
|
110
|
-
popover: oklch(0.995 0.003 195)
|
|
111
|
-
popover-foreground: oklch(0.16 0.005 200)
|
|
112
|
-
primary: oklch(0.77 0.155 169)
|
|
113
|
-
primary-foreground: oklch(0.16 0.005 200)
|
|
114
|
-
secondary: oklch(0.965 0.006 200)
|
|
115
|
-
secondary-foreground: oklch(0.22 0.006 200)
|
|
116
|
-
muted: oklch(0.965 0.006 200)
|
|
117
|
-
muted-foreground: oklch(0.47 0.008 200)
|
|
118
|
-
accent: oklch(0.945 0.007 200)
|
|
119
|
-
accent-foreground: oklch(0.22 0.006 200)
|
|
120
|
-
destructive: oklch(0.55 0.19 25)
|
|
121
|
-
destructive-foreground: oklch(0.99 0.008 25)
|
|
122
|
-
success: oklch(0.60 0.13 162)
|
|
123
|
-
warning: oklch(0.65 0.14 70)
|
|
124
|
-
border: oklch(0.92 0.006 200)
|
|
125
|
-
input: oklch(0.92 0.006 200)
|
|
126
|
-
ring: oklch(0.77 0.155 169)
|
|
127
|
-
surface-raised: oklch(0.985 0.005 195)
|
|
128
|
-
surface-overlay: oklch(0.995 0.003 195)
|
|
129
|
-
chart-1: oklch(0.68 0.14 169)
|
|
130
|
-
chart-2: oklch(0.58 0.16 250)
|
|
131
|
-
chart-3: oklch(0.65 0.15 60)
|
|
132
|
-
chart-4: oklch(0.55 0.15 320)
|
|
133
|
-
chart-5: oklch(0.62 0.15 25)
|
|
134
|
-
sidebar: oklch(0.975 0.005 200)
|
|
135
|
-
sidebar-foreground: oklch(0.16 0.005 200)
|
|
136
|
-
sidebar-primary: oklch(0.77 0.155 169)
|
|
137
|
-
sidebar-primary-foreground: oklch(0.16 0.005 200)
|
|
138
|
-
sidebar-accent: oklch(0.945 0.007 200)
|
|
139
|
-
sidebar-accent-foreground: oklch(0.22 0.006 200)
|
|
140
|
-
sidebar-border: oklch(0.92 0.006 200)
|
|
141
|
-
sidebar-ring: oklch(0.77 0.155 169)
|
|
142
|
-
dark:
|
|
143
|
-
background: oklch(0.20 0.006 200)
|
|
144
|
-
foreground: oklch(0.96 0.004 200)
|
|
145
|
-
card: oklch(0.24 0.007 200)
|
|
146
|
-
card-foreground: oklch(0.96 0.004 200)
|
|
147
|
-
popover: oklch(0.27 0.008 200)
|
|
148
|
-
popover-foreground: oklch(0.96 0.004 200)
|
|
149
|
-
primary: oklch(0.78 0.155 169)
|
|
150
|
-
primary-foreground: oklch(0.18 0.02 169)
|
|
151
|
-
secondary: oklch(0.26 0.008 200)
|
|
152
|
-
secondary-foreground: oklch(0.92 0.005 200)
|
|
153
|
-
muted: oklch(0.24 0.007 200)
|
|
154
|
-
muted-foreground: oklch(0.70 0.010 200)
|
|
155
|
-
accent: oklch(0.28 0.009 200)
|
|
156
|
-
accent-foreground: oklch(0.92 0.005 200)
|
|
157
|
-
destructive: oklch(0.64 0.17 25)
|
|
158
|
-
destructive-foreground: oklch(0.15 0.02 25)
|
|
159
|
-
success: oklch(0.68 0.14 162)
|
|
160
|
-
warning: oklch(0.74 0.14 70)
|
|
161
|
-
border: oklch(0.30 0.009 200)
|
|
162
|
-
input: oklch(0.30 0.009 200)
|
|
163
|
-
ring: oklch(0.78 0.155 169)
|
|
164
|
-
surface-raised: oklch(0.24 0.007 200)
|
|
165
|
-
surface-overlay: oklch(0.28 0.008 200)
|
|
166
|
-
chart-1: oklch(0.74 0.14 169)
|
|
167
|
-
chart-2: oklch(0.66 0.16 250)
|
|
168
|
-
chart-3: oklch(0.72 0.15 60)
|
|
169
|
-
chart-4: oklch(0.64 0.15 320)
|
|
170
|
-
chart-5: oklch(0.70 0.16 25)
|
|
171
|
-
sidebar: oklch(0.18 0.006 200)
|
|
172
|
-
sidebar-foreground: oklch(0.92 0.005 200)
|
|
173
|
-
sidebar-primary: oklch(0.78 0.155 169)
|
|
174
|
-
sidebar-primary-foreground: oklch(0.18 0.02 169)
|
|
175
|
-
sidebar-accent: oklch(0.26 0.008 200)
|
|
176
|
-
sidebar-accent-foreground: oklch(0.92 0.005 200)
|
|
177
|
-
sidebar-border: oklch(0.26 0.008 200)
|
|
178
|
-
sidebar-ring: oklch(0.78 0.155 169)
|
|
179
|
-
typography:
|
|
180
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
181
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
182
|
-
mono: { family: "Geist Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
183
|
-
ramp:
|
|
184
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.015em }
|
|
185
|
-
h1: { size: 24px, line: 31px, weight: 600, family: sans, tracking: -0.01em }
|
|
186
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans }
|
|
187
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
188
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
189
|
-
caption: { size: 11px, line: 16px, weight: 600, family: sans, tracking: 0.05em, transform: uppercase }
|
|
190
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
191
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, code] }
|
|
192
|
-
elevation:
|
|
193
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
194
|
-
hairline: border
|
|
195
|
-
shadow:
|
|
196
|
-
overlay: "0 8px 28px oklch(0.20 0.02 200 / 0.10)"
|
|
197
|
-
popover: "0 4px 14px oklch(0.20 0.02 200 / 0.08)"
|
|
198
|
-
dark-ladder: { background: 0.20, raised: 0.24, overlay: 0.28, hue-held: 200 }
|
|
199
|
-
motion:
|
|
200
|
-
duration: { press: 110ms, fade: 150ms, panel: 220ms }
|
|
201
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
202
|
-
entrance-never: ease-in
|
|
203
|
-
identity-moments: [auth, first-run-empty]
|
|
204
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
205
|
-
charts:
|
|
206
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
207
|
-
sequential: { from: background, to: chart-1 }
|
|
208
|
-
diverging: { negative: destructive, mid: muted, positive: chart-1 }
|
|
209
|
-
layout: { base: 4px, sidebar: [240px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
|
|
210
|
-
```
|
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: miro
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [collaboration, whiteboard, creative]
|
|
6
|
-
keywords: [white, black-ink, brand-blue, geometric, rounded, friendly]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 miro entry (2026-07-04) + 2026-07-12 re-audit of the collaboration-canvas brand; Roobert PRO (licensed) substituted with the open Plus Jakarta Sans Variable (geometric, friendly, medium-weight — the closest open match); JetBrains Mono for data; the 80px Roobert display, canary-yellow wordmark grace, pastel feature cards, and 120px hero rhythm stay behind; sticky-note pastels survive only as chart series; dark theme authored (not documented in-brand)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# miro — a bright studio whiteboard with one blue sticky on the live thread
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A bright studio wall of whiteboard: black marker for the real work, one blue sticky
|
|
16
|
-
marking the live thread, and the colored notes stacked in the tray for later. Light by
|
|
17
|
-
default; flat — hierarchy is hairline `border`, type weight, and the black/white contrast,
|
|
18
|
-
never heavy shadow, and where a true overlay lifts, the shadow is soft and navy-tinted,
|
|
19
|
-
never hard black. The primary action fills black — Miro's own primary is the black pill —
|
|
20
|
-
so `primary` is achromatic and the one chromatic accent, brand blue, stays a scarce
|
|
21
|
-
single-shot. Canary yellow is a wordmark grace, no operator role. Roomy but operator-dense.
|
|
22
|
-
The dark theme is authored — a cool charcoal ladder.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
Miro ink `foreground` on white `background`; `primary` fills black — the one primary
|
|
26
|
-
action, active-nav fill, selected tab. `accent-foreground` brand blue is the single
|
|
27
|
-
chromatic pop — inline links, the focus `ring`, active indicators — over a pale-lavender
|
|
28
|
-
`accent` selection wash. Inputs take a stronger `input` edge than dividers (Miro's
|
|
29
|
-
deliberate choice). Status hues speak status only; the sticky-note pastels survive only as
|
|
30
|
-
`chart-*`; canary yellow is the wordmark grace, never a UI color. Sidebar sits a faint
|
|
31
|
-
cool step off the white in both themes.
|
|
32
|
-
|
|
33
|
-
## 3 Typography
|
|
34
|
-
Plus Jakarta Sans (single voice — the open substitute for Roobert PRO, matching its
|
|
35
|
-
geometric, slightly-rounded, medium-weight character) / JetBrains Mono (IDs, timestamps,
|
|
36
|
-
log lines). Register scope: no hero display face — the elegant medium weight is the
|
|
37
|
-
irreducible trait, so headings run 500, never 700 (the brand has no 700). The 600 weight
|
|
38
|
-
is reserved for uppercase eyebrows and badge chips. Every numeric column renders
|
|
39
|
-
`tabular-nums`; emphasis bumps 400 → 500, never size.
|
|
40
|
-
|
|
41
|
-
## 4 Component Stylings
|
|
42
|
-
Buttons `radius-md` (8px), black `primary` fill on white — the marketing full-pill relaxes
|
|
43
|
-
to the functional radius in dense chrome; the pill stays on icon-only buttons, filter
|
|
44
|
-
chips, and badges. Inputs on `background` with the stronger `input` edge and a 2px
|
|
45
|
-
brand-blue `ring`, no fill change, no glow. Cards on a hairline, `radius-lg` for larger
|
|
46
|
-
panels; shadow only when it must lift. Table rows `muted` hover, pale-lavender `accent`
|
|
47
|
-
selection with a brand-blue indicator, mono numerals. Detail opens in the side panel.
|
|
48
|
-
Badges pill, `muted`/status fill, uppercase caption, never `primary` or brand blue.
|
|
49
|
-
|
|
50
|
-
## 5 Layout
|
|
51
|
-
4px base (8px the primary increment); ramp 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64
|
|
52
|
-
(the distinctive 20px step is kept). Sidebar 240/56px; topbar 64px (Miro's own nav height);
|
|
53
|
-
side panel 440/640px; content max 1360px; tables full-width. Standard density leaning
|
|
54
|
-
roomy, stepped per archetype, never absolute overrides.
|
|
55
|
-
|
|
56
|
-
## 6 Depth
|
|
57
|
-
Flat, with strategic soft depth on true overlays only — the surface ladder and hairlines
|
|
58
|
-
carry rank. Light: overlays earn a soft navy-tinted shadow (hue near 290), never a hard
|
|
59
|
-
black drop. Dark: the authored ladder — `background` 0.20 L, `surface-raised` +0.04,
|
|
60
|
-
`surface-overlay` +0.08, hue held at 286. Focus is a 2px brand-blue `ring`, always visible;
|
|
61
|
-
three z-levels: content, chrome, overlay.
|
|
62
|
-
|
|
63
|
-
## 7 Motion
|
|
64
|
-
Friendly but restrained. Named moments: `press` (primary action, 120ms), `board-fade`
|
|
65
|
-
(content arrive, 150ms), `panel-slide` (side panel, 220ms, interruptible). Physicality is
|
|
66
|
-
granted only to auth and first-run empty states; canvas-like surfaces never bounce;
|
|
67
|
-
nothing animates on keyboard-initiated actions.
|
|
68
|
-
|
|
69
|
-
## 8 Iconography & Charts
|
|
70
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes, no
|
|
71
|
-
gridline fills; the categorical ramp spends the demoted sticky-note palette as encodings —
|
|
72
|
-
brand blue, coral, teal, rose, orange (`chart-1..5`); tooltips on `surface-overlay` with
|
|
73
|
-
mono numerals.
|
|
74
|
-
|
|
75
|
-
## 9 Voice
|
|
76
|
-
Friendly and plain — a tool that likes its users but respects their time. "New board" ·
|
|
77
|
-
"Nothing shared with you yet — create a board to start" · "You can't edit this board; ask
|
|
78
|
-
the owner for access."
|
|
79
|
-
|
|
80
|
-
## 10 Do's & Don'ts
|
|
81
|
-
Do fill black `primary` for the single most important action. Do keep brand blue scarce —
|
|
82
|
-
inline links, the focus `ring`, active indicators only; a single-shot accent, never a fill
|
|
83
|
-
or body-text color. Do carry hierarchy with size and the geometric face, never heavy
|
|
84
|
-
weight — there is no 700. Don't reach for the sticky-note pastels as chrome — charts only.
|
|
85
|
-
Don't spend canary yellow on a CTA, status hue, or background — it is the wordmark grace.
|
|
86
|
-
Don't introduce a second chromatic accent or signal elevation with hard-black shadows —
|
|
87
|
-
Miro's shadows are soft and navy-tinted.
|
|
88
|
-
|
|
89
|
-
## 11 Responsive
|
|
90
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
91
|
-
density holds. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane list+detail
|
|
92
|
-
holds side by side. 1440: content caps for forms; tables and dashboards take the full width.
|
|
93
|
-
|
|
94
|
-
## 12 Agent Prompt Guide
|
|
95
|
-
Wear the spine, not the marketing: black ink on white, the friendly rounded radius, hairline
|
|
96
|
-
depth. The primary action fills black; if two things want the black fill, one is not primary.
|
|
97
|
-
Brand blue is single-shot — links, focus ring, active indicators — never a fill or body
|
|
98
|
-
text; canary yellow is the wordmark grace. Hierarchy is size and the geometric face, never
|
|
99
|
-
heavy weight — emphasise 400 → 500. Every numeric column is mono `tabular-nums`. Dark is
|
|
100
|
-
authored — consult the block, never invert the whiteboard.
|
|
101
|
-
|
|
102
|
-
```yaml design-values
|
|
103
|
-
color:
|
|
104
|
-
light:
|
|
105
|
-
background: oklch(0.99 0.004 271)
|
|
106
|
-
foreground: oklch(0.23 0.006 286)
|
|
107
|
-
card: oklch(0.995 0.003 271)
|
|
108
|
-
card-foreground: oklch(0.23 0.006 286)
|
|
109
|
-
popover: oklch(0.995 0.003 271)
|
|
110
|
-
popover-foreground: oklch(0.23 0.006 286)
|
|
111
|
-
primary: oklch(0.23 0.006 286)
|
|
112
|
-
primary-foreground: oklch(0.99 0.004 271)
|
|
113
|
-
secondary: oklch(0.975 0.005 265)
|
|
114
|
-
secondary-foreground: oklch(0.28 0.008 286)
|
|
115
|
-
muted: oklch(0.975 0.005 265)
|
|
116
|
-
muted-foreground: oklch(0.47 0.025 272)
|
|
117
|
-
accent: oklch(0.965 0.014 294)
|
|
118
|
-
accent-foreground: oklch(0.50 0.20 269)
|
|
119
|
-
destructive: oklch(0.56 0.20 25)
|
|
120
|
-
destructive-foreground: oklch(0.99 0.008 25)
|
|
121
|
-
success: oklch(0.62 0.14 158)
|
|
122
|
-
warning: oklch(0.72 0.15 82)
|
|
123
|
-
border: oklch(0.913 0.008 271)
|
|
124
|
-
input: oklch(0.84 0.014 274)
|
|
125
|
-
ring: oklch(0.57 0.235 269)
|
|
126
|
-
surface-raised: oklch(0.985 0.005 271)
|
|
127
|
-
surface-overlay: oklch(0.995 0.003 271)
|
|
128
|
-
chart-1: oklch(0.57 0.235 269)
|
|
129
|
-
chart-2: oklch(0.68 0.15 20)
|
|
130
|
-
chart-3: oklch(0.62 0.13 187)
|
|
131
|
-
chart-4: oklch(0.65 0.16 320)
|
|
132
|
-
chart-5: oklch(0.72 0.14 60)
|
|
133
|
-
sidebar: oklch(0.975 0.006 265)
|
|
134
|
-
sidebar-foreground: oklch(0.23 0.006 286)
|
|
135
|
-
sidebar-primary: oklch(0.23 0.006 286)
|
|
136
|
-
sidebar-primary-foreground: oklch(0.99 0.004 271)
|
|
137
|
-
sidebar-accent: oklch(0.955 0.014 294)
|
|
138
|
-
sidebar-accent-foreground: oklch(0.44 0.18 269)
|
|
139
|
-
sidebar-border: oklch(0.913 0.008 271)
|
|
140
|
-
sidebar-ring: oklch(0.57 0.235 269)
|
|
141
|
-
dark:
|
|
142
|
-
background: oklch(0.20 0.008 286)
|
|
143
|
-
foreground: oklch(0.96 0.004 271)
|
|
144
|
-
card: oklch(0.24 0.009 286)
|
|
145
|
-
card-foreground: oklch(0.96 0.004 271)
|
|
146
|
-
popover: oklch(0.27 0.010 286)
|
|
147
|
-
popover-foreground: oklch(0.96 0.004 271)
|
|
148
|
-
primary: oklch(0.96 0.004 271)
|
|
149
|
-
primary-foreground: oklch(0.20 0.008 286)
|
|
150
|
-
secondary: oklch(0.26 0.009 286)
|
|
151
|
-
secondary-foreground: oklch(0.92 0.005 271)
|
|
152
|
-
muted: oklch(0.24 0.009 286)
|
|
153
|
-
muted-foreground: oklch(0.70 0.020 272)
|
|
154
|
-
accent: oklch(0.30 0.05 290)
|
|
155
|
-
accent-foreground: oklch(0.82 0.10 275)
|
|
156
|
-
destructive: oklch(0.64 0.19 25)
|
|
157
|
-
destructive-foreground: oklch(0.15 0.02 25)
|
|
158
|
-
success: oklch(0.68 0.14 158)
|
|
159
|
-
warning: oklch(0.78 0.15 82)
|
|
160
|
-
border: oklch(0.30 0.010 286)
|
|
161
|
-
input: oklch(0.34 0.012 286)
|
|
162
|
-
ring: oklch(0.65 0.21 269)
|
|
163
|
-
surface-raised: oklch(0.24 0.009 286)
|
|
164
|
-
surface-overlay: oklch(0.28 0.010 286)
|
|
165
|
-
chart-1: oklch(0.65 0.21 269)
|
|
166
|
-
chart-2: oklch(0.72 0.14 20)
|
|
167
|
-
chart-3: oklch(0.70 0.12 187)
|
|
168
|
-
chart-4: oklch(0.70 0.15 320)
|
|
169
|
-
chart-5: oklch(0.78 0.14 60)
|
|
170
|
-
sidebar: oklch(0.18 0.008 286)
|
|
171
|
-
sidebar-foreground: oklch(0.92 0.005 271)
|
|
172
|
-
sidebar-primary: oklch(0.96 0.004 271)
|
|
173
|
-
sidebar-primary-foreground: oklch(0.20 0.008 286)
|
|
174
|
-
sidebar-accent: oklch(0.28 0.045 290)
|
|
175
|
-
sidebar-accent-foreground: oklch(0.82 0.10 275)
|
|
176
|
-
sidebar-border: oklch(0.26 0.010 286)
|
|
177
|
-
sidebar-ring: oklch(0.65 0.21 269)
|
|
178
|
-
typography:
|
|
179
|
-
display: { family: "Plus Jakarta Sans Variable", fallback: "system-ui, sans-serif", weights: [500] }
|
|
180
|
-
sans: { family: "Plus Jakarta Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
181
|
-
mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
182
|
-
ramp:
|
|
183
|
-
display: { size: 28px, line: 34px, weight: 500, family: display, tracking: -0.02em }
|
|
184
|
-
h1: { size: 24px, line: 30px, weight: 500, family: sans, tracking: -0.01em }
|
|
185
|
-
h2: { size: 18px, line: 25px, weight: 500, family: sans }
|
|
186
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
187
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
188
|
-
caption: { size: 11px, line: 16px, weight: 600, family: sans, tracking: 0.05em, transform: uppercase }
|
|
189
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
190
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps] }
|
|
191
|
-
elevation:
|
|
192
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
193
|
-
hairline: border
|
|
194
|
-
shadow:
|
|
195
|
-
overlay: "0 8px 28px oklch(0.18 0.04 290 / 0.12)"
|
|
196
|
-
popover: "0 4px 14px oklch(0.18 0.04 290 / 0.10)"
|
|
197
|
-
dark-ladder: { background: 0.20, raised: 0.24, overlay: 0.28, hue-held: 286 }
|
|
198
|
-
motion:
|
|
199
|
-
duration: { press: 120ms, fade: 150ms, panel: 220ms }
|
|
200
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
201
|
-
entrance-never: ease-in
|
|
202
|
-
identity-moments: [auth, first-run-empty]
|
|
203
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
204
|
-
charts:
|
|
205
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
206
|
-
sequential: { from: background, to: chart-1 }
|
|
207
|
-
diverging: { negative: destructive, mid: muted, positive: chart-3 }
|
|
208
|
-
layout: { base: 4px, sidebar: [240px, 56px], topbar: 64px, side-panel: [440px, 640px], content-max: 1360px }
|
|
209
|
-
```
|
|
@@ -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
|
-
```
|