@nurix/etna 0.19.10 → 0.19.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +1 -1
- package/data/harnesses/code/rules/frontend.md +5 -5
- package/data/harnesses/code/skills/design/SKILL.md +70 -50
- package/data/harnesses/code/skills/design/components/charts.md +76 -0
- package/data/harnesses/code/skills/design/components/collections.md +132 -0
- package/data/harnesses/code/skills/design/components/feedback.md +47 -0
- package/data/harnesses/code/skills/design/components/hooks.md +35 -0
- package/data/harnesses/code/skills/design/components/index.md +143 -0
- package/data/harnesses/code/skills/design/components/inputs.md +327 -0
- package/data/harnesses/code/skills/design/components/layout.md +52 -0
- package/data/harnesses/code/skills/design/components/media.md +66 -0
- package/data/harnesses/code/skills/design/components/motion.md +82 -0
- package/data/harnesses/code/skills/design/components/navigation.md +29 -0
- package/data/harnesses/code/skills/design/components/overlays.md +72 -0
- package/data/harnesses/code/skills/design/components/setup.md +40 -0
- package/data/harnesses/code/skills/design/components/typography.md +46 -0
- package/data/harnesses/code/skills/design/components/utils.md +37 -0
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +38 -0
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +38 -0
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +33 -0
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +19 -0
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +19 -0
- package/data/harnesses/code/skills/design/data/charts/census.csv +58 -0
- package/data/harnesses/code/skills/design/data/checklists/browse.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +20 -0
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/grid.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/queue.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +21 -0
- package/data/harnesses/code/skills/design/data/checklists/settings.md +21 -0
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +68 -0
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +63 -0
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +60 -0
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +78 -0
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +62 -0
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +65 -0
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +90 -0
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +91 -0
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +90 -0
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +90 -0
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +90 -0
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +90 -0
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +90 -0
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +90 -0
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +90 -0
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +90 -0
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +90 -0
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +90 -0
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +90 -0
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +89 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +87 -0
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +83 -0
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +15 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +89 -0
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +25 -0
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +20 -0
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +20 -0
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +17 -0
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +21 -0
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +17 -0
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +21 -0
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +18 -0
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +19 -0
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +20 -0
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +18 -0
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +16 -0
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +16 -0
- package/data/harnesses/code/skills/design/data/iconography.md +199 -0
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +18 -0
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +18 -0
- package/data/harnesses/code/skills/design/data/tells.csv +34 -0
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +17 -0
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +17 -0
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +29 -0
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +29 -0
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +179 -0
- package/data/harnesses/code/skills/design/design-md/index.csv +67 -0
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +207 -0
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/apple.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/binance.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/cal.md +209 -0
- package/data/harnesses/code/skills/design/design-md/library/clay.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/composio.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/expo.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/figma.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/framer.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +205 -0
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/meta.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +210 -0
- package/data/harnesses/code/skills/design/design-md/library/miro.md +209 -0
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/notion.md +204 -0
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +215 -0
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +213 -0
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +216 -0
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +218 -0
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +214 -0
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/resend.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +203 -0
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +200 -0
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +201 -0
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/slack.md +202 -0
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +206 -0
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +194 -0
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +193 -0
- package/data/harnesses/code/skills/design/design-md/library/uber.md +195 -0
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +195 -0
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/warp.md +196 -0
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/wired.md +197 -0
- package/data/harnesses/code/skills/design/design-md/library/wise.md +198 -0
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +199 -0
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +198 -0
- package/data/harnesses/code/skills/design/design-md/nurix.md +214 -0
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +184 -0
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +216 -0
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +211 -0
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +212 -0
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +216 -0
- package/data/harnesses/code/skills/design/references/compose.md +23 -0
- package/data/harnesses/code/skills/design/references/content.md +28 -0
- package/data/harnesses/code/skills/design/references/emission.md +21 -0
- package/data/harnesses/code/skills/design/references/existing-apps.md +27 -0
- package/data/harnesses/code/skills/design/references/intake.md +36 -0
- package/data/harnesses/code/skills/design/references/object-pass.md +24 -0
- package/data/harnesses/code/skills/design/references/ship-gate.md +29 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/Readme.md +195 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/ai-layer.md +49 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/attributes-lifecycle.md +43 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/container-choice.md +44 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/creation-paths.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/dashboards.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/modes.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/object-model.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/page-archetype.md +48 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/promotion-demotion.md +37 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/settings.md +42 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/standard-pages.md +46 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/state-matrix.md +41 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/table-mechanics.md +48 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/verbs.md +45 -0
- package/data/harnesses/code/skills/design/references/ux-patterns/viewer-context.md +40 -0
- package/data/harnesses/code/skills/design/scripts/README-validator.md +27 -0
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +596 -0
- package/data/harnesses/code/skills/design/scripts/validate-design-md.mjs +1198 -0
- package/data/harnesses/discussion/CLAUDE.md +1 -1
- package/data/harnesses/discussion/agents/discussion-baseline.md +27 -2
- package/data/harnesses/discussion/harness.json +2 -2
- package/data/harnesses/discussion/rules/artifacts.md +2 -0
- package/data/harnesses/discussion/rules/method.md +5 -1
- package/package.json +1 -1
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +0 -137
- package/data/harnesses/code/skills/design/data/combinations/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/combinations/accent-presets.md +0 -113
- package/data/harnesses/code/skills/design/data/combinations/charts.csv +0 -33
- package/data/harnesses/code/skills/design/data/combinations/fonts-known.json +0 -448
- package/data/harnesses/code/skills/design/data/combinations/icons.csv +0 -157
- package/data/harnesses/code/skills/design/data/combinations/landing.csv +0 -38
- package/data/harnesses/code/skills/design/data/combinations/lucide-names.json +0 -2001
- package/data/harnesses/code/skills/design/data/combinations/manifest.json +0 -330
- package/data/harnesses/code/skills/design/data/combinations/motion.csv +0 -10
- package/data/harnesses/code/skills/design/data/combinations/palettes.csv +0 -92
- package/data/harnesses/code/skills/design/data/combinations/product-router.csv +0 -80
- package/data/harnesses/code/skills/design/data/combinations/styles.csv +0 -67
- package/data/harnesses/code/skills/design/data/combinations/typography.csv +0 -64
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +0 -106
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +0 -154
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +0 -151
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +0 -147
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +0 -148
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +0 -141
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +0 -156
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +0 -122
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +0 -155
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +0 -141
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +0 -142
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +0 -152
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +0 -170
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +0 -168
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +0 -163
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +0 -147
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +0 -171
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +0 -166
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +0 -160
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +0 -173
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +0 -145
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +0 -153
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +0 -167
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +0 -130
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +0 -140
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +0 -139
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +0 -137
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +0 -138
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +0 -158
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +0 -138
- package/data/harnesses/code/skills/design/data/design-tokens/SCHEMA.md +0 -695
- package/data/harnesses/code/skills/design/data/design-tokens/airbnb/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/airbnb/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/airtable/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/airtable/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/anthropic-claude/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/anthropic-claude/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/apple/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/apple/design.tokens.json +0 -1262
- package/data/harnesses/code/skills/design/data/design-tokens/binance/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/binance/design.tokens.json +0 -1257
- package/data/harnesses/code/skills/design/data/design-tokens/bmw/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/bmw/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/cal/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cal/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/clay/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/clay/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/clickhouse/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/clickhouse/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/cohere/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cohere/design.tokens.json +0 -1281
- package/data/harnesses/code/skills/design/data/design-tokens/coinbase/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/coinbase/design.tokens.json +0 -1262
- package/data/harnesses/code/skills/design/data/design-tokens/composio/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/composio/design.tokens.json +0 -1271
- package/data/harnesses/code/skills/design/data/design-tokens/cursor/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/cursor/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/elevenlabs/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/elevenlabs/design.tokens.json +0 -1293
- package/data/harnesses/code/skills/design/data/design-tokens/expo/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/expo/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/figma/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/figma/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/framer/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/framer/design.tokens.json +0 -1267
- package/data/harnesses/code/skills/design/data/design-tokens/goldens.json +0 -251
- package/data/harnesses/code/skills/design/data/design-tokens/hashicorp/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/hashicorp/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/ibm/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/ibm/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/design-tokens/intercom/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/intercom/design.tokens.json +0 -1290
- package/data/harnesses/code/skills/design/data/design-tokens/kraken/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/kraken/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.tokens.dark.json +0 -599
- package/data/harnesses/code/skills/design/data/design-tokens/linear-app/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/lovable/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/lovable/design.tokens.json +0 -1267
- package/data/harnesses/code/skills/design/data/design-tokens/meta/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/meta/design.tokens.json +0 -1289
- package/data/harnesses/code/skills/design/data/design-tokens/minimax/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/minimax/design.tokens.json +0 -1258
- package/data/harnesses/code/skills/design/data/design-tokens/mintlify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mintlify/design.tokens.json +0 -1284
- package/data/harnesses/code/skills/design/data/design-tokens/miro/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/miro/design.tokens.json +0 -1291
- package/data/harnesses/code/skills/design/data/design-tokens/mistral-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mistral-ai/design.tokens.json +0 -1263
- package/data/harnesses/code/skills/design/data/design-tokens/mongodb/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/mongodb/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/notion/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/notion/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/nurix/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/nurix/design.tokens.json +0 -1209
- package/data/harnesses/code/skills/design/data/design-tokens/nvidia/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/nvidia/design.tokens.json +0 -1265
- package/data/harnesses/code/skills/design/data/design-tokens/ollama/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/ollama/design.tokens.json +0 -1253
- package/data/harnesses/code/skills/design/data/design-tokens/opencode-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/opencode-ai/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/posthog/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/posthog/design.tokens.json +0 -1261
- package/data/harnesses/code/skills/design/data/design-tokens/raycast/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/raycast/design.tokens.json +0 -1263
- package/data/harnesses/code/skills/design/data/design-tokens/replicate/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/replicate/design.tokens.json +0 -1266
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.tokens.dark.json +0 -623
- package/data/harnesses/code/skills/design/data/design-tokens/resend/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/revolut/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/revolut/design.tokens.json +0 -1264
- package/data/harnesses/code/skills/design/data/design-tokens/runwayml/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/runwayml/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/sanity/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/sanity/design.tokens.json +0 -1270
- package/data/harnesses/code/skills/design/data/design-tokens/sentry/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/sentry/design.tokens.json +0 -1288
- package/data/harnesses/code/skills/design/data/design-tokens/shopify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/shopify/design.tokens.json +0 -1272
- package/data/harnesses/code/skills/design/data/design-tokens/slack/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/slack/design.tokens.json +0 -1265
- package/data/harnesses/code/skills/design/data/design-tokens/spacex/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/spacex/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/spotify/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/spotify/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/design-tokens/stripe/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/stripe/design.tokens.json +0 -1285
- package/data/harnesses/code/skills/design/data/design-tokens/supabase/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/supabase/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/superhuman/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/superhuman/design.tokens.json +0 -1278
- package/data/harnesses/code/skills/design/data/design-tokens/tesla/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/tesla/design.tokens.json +0 -1269
- package/data/harnesses/code/skills/design/data/design-tokens/theverge/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/theverge/design.tokens.json +0 -1285
- package/data/harnesses/code/skills/design/data/design-tokens/together-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/together-ai/design.tokens.json +0 -1303
- package/data/harnesses/code/skills/design/data/design-tokens/uber/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/uber/design.tokens.json +0 -1274
- package/data/harnesses/code/skills/design/data/design-tokens/vercel/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/vercel/design.tokens.json +0 -1296
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.resolver.json +0 -23
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.tokens.dark.json +0 -612
- package/data/harnesses/code/skills/design/data/design-tokens/voltagent/design.tokens.json +0 -1282
- package/data/harnesses/code/skills/design/data/design-tokens/warp/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/warp/design.tokens.json +0 -1287
- package/data/harnesses/code/skills/design/data/design-tokens/webflow/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/webflow/design.tokens.json +0 -1268
- package/data/harnesses/code/skills/design/data/design-tokens/wired/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/wired/design.tokens.json +0 -1276
- package/data/harnesses/code/skills/design/data/design-tokens/wise/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/wise/design.tokens.json +0 -1273
- package/data/harnesses/code/skills/design/data/design-tokens/x-ai/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/x-ai/design.tokens.json +0 -1296
- package/data/harnesses/code/skills/design/data/design-tokens/zapier/design.resolver.json +0 -20
- package/data/harnesses/code/skills/design/data/design-tokens/zapier/design.tokens.json +0 -1286
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +0 -225
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +0 -224
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +0 -249
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +0 -88
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +0 -132
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +0 -76
- package/data/harnesses/code/skills/design/references/create.md +0 -173
- package/data/harnesses/code/skills/design/references/diagnosis.md +0 -108
- package/data/harnesses/code/skills/design/references/hard-rules.md +0 -177
- package/data/harnesses/code/skills/design/references/improve.md +0 -116
- package/data/harnesses/code/skills/design/references/interaction.md +0 -77
- package/data/harnesses/code/skills/design/references/introspect.md +0 -100
- package/data/harnesses/code/skills/design/references/lifecycle.md +0 -73
- package/data/harnesses/code/skills/design/references/personality.md +0 -575
- package/data/harnesses/code/skills/design/references/structure.md +0 -159
- package/data/harnesses/code/skills/design/scripts/convert-design-md.mjs +0 -1312
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +0 -1498
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +0 -551
- package/data/harnesses/code/skills/design/scripts/lib/checks.mjs +0 -1092
- package/data/harnesses/code/skills/design/scripts/lib/golden.mjs +0 -26
- package/data/harnesses/code/skills/design/scripts/lib/vocabulary.mjs +0 -65
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +0 -538
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +0 -312
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +0 -890
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +0 -769
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +0 -675
- package/data/harnesses/code/skills/design/scripts/snapshot-goldens.mjs +0 -164
- package/data/harnesses/code/skills/design/scripts/validate-combinations.mjs +0 -439
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: BMW
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# BMW — measured corporate-automotive, translated for operators
|
|
9
|
-
|
|
10
|
-
The BMW corporate design (distinct from BMW M's motorsport-bombastic variant): measured, settled,
|
|
11
|
-
engineered. A light near-white canvas, a single corporate blue for every primary action, and one
|
|
12
|
-
categorical signature — **everything is rectangular, 0px corners** — with depth from a greyscale
|
|
13
|
-
surface ladder and hairlines, never shadow. This operator reading keeps the palette, the blue
|
|
14
|
-
accent, the 0px geometry, the flatness, and the heavy-display type voice; the marketing graces
|
|
15
|
-
(dark-navy hero bands, 64px display type, full-bleed photography, the M tricolor stripe, 80px
|
|
16
|
-
section rhythm) stay behind.
|
|
17
|
-
|
|
18
|
-
## 1 Visual Theme
|
|
19
|
-
|
|
20
|
-
Light by default; dark is opt-in. Flat and categorically shadowless: hierarchy rides a greyscale surface ladder
|
|
21
|
-
(`background` white → `card` soft-grey plate → hairline `border`) and type weight, never drop shadow. A single accent, BMW
|
|
22
|
-
corporate blue (`primary`, brand `#1c69d4`), is reserved for the one action that matters. The geometry is the identity:
|
|
23
|
-
`radius` 0 — buttons, inputs, cards, and chips all rectangular. The anchor surface is a white canvas beside a soft-grey
|
|
24
|
-
`sidebar`; density is `standard`, stepping denser per archetype — dealership-functional, not cramped.
|
|
25
|
-
|
|
26
|
-
## 2 Color Roles
|
|
27
|
-
|
|
28
|
-
Light values first. One accent — `primary` blue is the only chromatic hue that carries meaning; status
|
|
29
|
-
hues speak only status. BMW reserves blue for action, so selection and hover use a faint blue wash.
|
|
30
|
-
|
|
31
|
-
| Role | Value | Allowed where |
|
|
32
|
-
| --- | --- | --- |
|
|
33
|
-
| `background` / `popover` | white `#ffffff` (canvas) | the dominant page and overlay surface |
|
|
34
|
-
| `card` | soft grey `#fafafa` (surface-card) | card and panel plates — lift by color-block contrast, no shadow |
|
|
35
|
-
| `foreground` / `card-foreground` | ink `#262626` (not pure black) | all primary text |
|
|
36
|
-
| `muted` / `secondary` | `#f7f7f7` (surface-soft) | hover rows, subtle fills, secondary buttons, footer bands |
|
|
37
|
-
| `muted-foreground` | `#6b6b6b` | labels, captions, breadcrumbs, secondary text |
|
|
38
|
-
| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, and field edge |
|
|
39
|
-
| `primary` | BMW blue `#1c69d4` | the one primary action; active nav; selected-tile border |
|
|
40
|
-
| `accent` | faint blue wash `#e9f1fc` | selected / hovered rows and nav, on-accent surfaces only |
|
|
41
|
-
| `ring` | `primary` | the focus outline — unmistakable, because keyboard-first |
|
|
42
|
-
| `destructive` | red `#dc2626` | destructive actions and validation errors only |
|
|
43
|
-
| `success` / `warning` | green `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
|
|
44
|
-
|
|
45
|
-
The dark navy hero (`#1a2129`) and the M tricolor (`#0066b1` / `#1c69d4` / `#e22718`) are brand graces, not operator
|
|
46
|
-
tokens — no chrome role here (see §7); the M hues resurface only as chart categoricals, the brand's only spare palette.
|
|
47
|
-
|
|
48
|
-
## 3 Typography
|
|
49
|
-
|
|
50
|
-
One sans, one mono. `font-sans` is Inter — the documented open-source stand-in for the licensed BMW Type
|
|
51
|
-
Next Latin, which runs a wide body and takes no negative tracking. `font-mono` is Roboto Mono (Roboto
|
|
52
|
-
sits in BMW's fallback stack) for IDs, codes, timestamps, and logs. The editorial signature is a
|
|
53
|
-
heavy/normal contrast: `font-weight-strong` 700 heads against `font-weight-normal` 400 body; numeric
|
|
54
|
-
columns render `tabular-nums`.
|
|
55
|
-
|
|
56
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
57
|
-
| --- | --- | --- | --- |
|
|
58
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` (0) |
|
|
59
|
-
| h2 | section head | 20px / 1.3 | `font-weight-strong` · 0 |
|
|
60
|
-
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
|
|
61
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
62
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
63
|
-
| caption | uppercase eyebrow / inline link | 13px / 1.3 | `font-weight-strong`, `+1.5px`, uppercase |
|
|
64
|
-
|
|
65
|
-
The uppercase letter-spaced label (`+1.5px`, the "LEARN MORE" machined-precision voice) is BMW's distinctive small-type
|
|
66
|
-
carry-over. The system uses 700 / 400 only — never 500; emphasize by weight, not size.
|
|
67
|
-
|
|
68
|
-
## 4 Component Stylings
|
|
69
|
-
|
|
70
|
-
Every recurring operator component composes from the primitives — no literal values, `radius` 0 everywhere.
|
|
71
|
-
|
|
72
|
-
- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (rectangular), no pill.
|
|
73
|
-
Secondary: `background` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
74
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
|
|
75
|
-
full 2px, no glow (BMW thickens the field edge to ink — the `ring` carries that emphasis).
|
|
76
|
-
- **Card** — `card` soft-grey plate distinguished by color-block contrast, optional 1px `border`,
|
|
77
|
-
`radius`; no shadow at rest, inset by `density-inset`.
|
|
78
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
79
|
-
numeric columns; row selection tints `accent`.
|
|
80
|
-
- **Side panel** — detail and edit open beside the work in the side panel (`side-panel-width` / `side-panel-width-rich`), never over it.
|
|
81
|
-
- **Badge / filter chip** — rectangular, hairline `border`, `muted`/status fill, uppercase caption; an
|
|
82
|
-
active chip fills `foreground` ink with `primary-foreground` text (BMW's chip idiom); status badges
|
|
83
|
-
take `success` / `warning` / `destructive`, never `primary`.
|
|
84
|
-
|
|
85
|
-
## 5 Layout
|
|
86
|
-
|
|
87
|
-
Base spacing unit 4px through Tailwind, but BMW's native 8px rhythm shows in the on-scale ramp `4 · 8 · 12 · 16 · 24 · 32 ·
|
|
88
|
-
48 · 64` (the marketing 80px section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives:
|
|
89
|
-
sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (BMW's 64px nav), side panel
|
|
90
|
-
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width capped
|
|
91
|
-
at ~1440px. Density is governed globally by `density-tier` and stepped per archetype by the surface catalog.
|
|
92
|
-
|
|
93
|
-
## 6 Depth
|
|
94
|
-
|
|
95
|
-
Flat, and more so than most — BMW never draws a drop shadow. Hierarchy comes from the surface ladder and hairlines:
|
|
96
|
-
|
|
97
|
-
- **0 — canvas** `background` white, no border.
|
|
98
|
-
- **1 — panel / card** `card` soft-grey plate on an optional 1px `border`; separation is color-block
|
|
99
|
-
contrast, not shadow.
|
|
100
|
-
- **2 — overlay** `popover` / side panel / modal — the only place `shadow-intensity` earns a whisper
|
|
101
|
-
`sm` shadow, kept minimal because the brand is shadowless; a hairline still carries the edge.
|
|
102
|
-
|
|
103
|
-
Focus is a 2px `ring` outline (never a glow), visible everywhere. Three z-levels: content, chrome, overlay.
|
|
104
|
-
|
|
105
|
-
## 7 Do's & Don'ts
|
|
106
|
-
|
|
107
|
-
- **Do** reserve `primary` blue for the single most important action on a surface; everything else is
|
|
108
|
-
neutral or status.
|
|
109
|
-
- **Do** keep every corner rectangular — `radius` 0 on buttons, inputs, cards, and chips is the BMW
|
|
110
|
-
signature; carry hierarchy with the greyscale surface ladder, hairlines, and weight.
|
|
111
|
-
- **Do** set heads in `font-weight-strong` (700) against `font-weight-normal` (400) body; apply
|
|
112
|
-
`tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps.
|
|
113
|
-
- **Don't** promote a second chromatic accent — the M tricolor and dark-navy hero stay marketing-only;
|
|
114
|
-
status uses `success` / `warning` / `destructive`.
|
|
115
|
-
- **Don't** pill or round a control (radius stays inside `radius-scale`), signal elevation with a drop
|
|
116
|
-
shadow, or thin dense body to the marketing Light 300 weight.
|
|
117
|
-
|
|
118
|
-
## 8 Responsive
|
|
119
|
-
|
|
120
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
121
|
-
|
|
122
|
-
| Breakpoint | What changes |
|
|
123
|
-
| --- | --- |
|
|
124
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
125
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
126
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
127
|
-
| 1440 | content caps at ~1440px; forms hold `form-max-width`; tables and dashboards use the full width |
|
|
128
|
-
|
|
129
|
-
## 9 Agent Prompt Guide
|
|
130
|
-
|
|
131
|
-
Directives the emitting agent follows verbatim:
|
|
132
|
-
|
|
133
|
-
- Carries over: the palette (white canvas, ink text, `#1c69d4` blue), the single-accent discipline, the
|
|
134
|
-
0px rectangular geometry, the greyscale-ladder flatness, the heavy 700 / normal 400 type voice.
|
|
135
|
-
- Stays behind: dark-navy hero bands, 64px display type, full-bleed photography, the M tricolor stripe,
|
|
136
|
-
the 80px section rhythm — none belong in operator chrome.
|
|
137
|
-
- Everything is rectangular (round only a circular icon button); accent only the primary action with
|
|
138
|
-
blue — if two things want the accent, one is not primary; stay shadowless, reaching for the `card`
|
|
139
|
-
grey plate and hairlines before any elevation, a whisper `sm` shadow only for a true overlay.
|
|
140
|
-
- Numeric columns are `tabular-nums`, IDs / codes / timestamps `font-mono`, every workflow keyboard-complete with the `ring` focus outline always visible.
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Cal.com
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Cal.com — operator reading
|
|
9
|
-
|
|
10
|
-
The operator reading of Cal.com's design language, distilled from Cal's marketing surface. It keeps
|
|
11
|
-
what an internal tool can wear — the monochrome near-black action layer, the light-gray surface
|
|
12
|
-
ladder, soft-rounded 8px/12px geometry, the Cal Sans / Inter type voice — and leaves the marketing
|
|
13
|
-
scaffolding behind (§9).
|
|
14
|
-
|
|
15
|
-
## 1 Visual Theme
|
|
16
|
-
|
|
17
|
-
Light by default; dark is opt-in. Near-monochrome: the one action that matters wears a near-black
|
|
18
|
-
`primary` (#111111), not a chromatic accent — the system reads confidently engineered without spending
|
|
19
|
-
color on chrome. Flat but soft: hierarchy is carried by hairline `border`, type weight, and a light-gray
|
|
20
|
-
surface ladder, with soft drop shadows lifting only elevated cards. Geometry is soft-rounded (8px
|
|
21
|
-
controls, 12px cards) — the friendly-modern-SaaS read. The anchor surface is a white content canvas over
|
|
22
|
-
a faint cool-gray `sidebar`; one scarce near-black surface (#101010) frames or closes a view — the
|
|
23
|
-
operator descendant of Cal's dark footer. Density is `spacious`: generous whitespace is the brand's
|
|
24
|
-
signature; surfaces step denser per archetype without cramming.
|
|
25
|
-
|
|
26
|
-
## 2 Color Roles
|
|
27
|
-
|
|
28
|
-
Light values (hex — the corpus's native format). The action layer is monochrome: `primary` is a
|
|
29
|
-
near-black, the only chromatic brand color (`brand-accent` blue) is confined to inline links.
|
|
30
|
-
|
|
31
|
-
| Role | Value | Allowed where |
|
|
32
|
-
| --- | --- | --- |
|
|
33
|
-
| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
34
|
-
| `foreground` | near-black `#111111` | all primary ink and headlines |
|
|
35
|
-
| `muted` / `secondary` | light gray `#f5f5f5` | subtle fills, hover rows, secondary buttons |
|
|
36
|
-
| `muted-foreground` | `#6b7280` | labels, captions, secondary text |
|
|
37
|
-
| `accent` | soft gray `#f3f4f6` | selected/active rows and nav — achromatic, no hue |
|
|
38
|
-
| `border` / `input` | hairline `#e5e7eb` | every separator, grid line, and field edge |
|
|
39
|
-
| `primary` | near-black `#111111` (press `#242424`) | the one primary action — monochrome, never a hue |
|
|
40
|
-
| `ring` | ink `#111111` | the focus outline — border shifts to ink on focus |
|
|
41
|
-
| `destructive` | red `#ef4444` | destructive actions and error state only |
|
|
42
|
-
| `success` / `warning` | green `#10b981` / amber `#f59e0b` | status signalling only, never chrome |
|
|
43
|
-
|
|
44
|
-
The `brand-accent` blue (`#3b82f6`) rides inline links only, never a CTA (§7). The badge pastels —
|
|
45
|
-
orange, pink, violet, emerald — are the chart palette (the one place this monochrome brand spends color).
|
|
46
|
-
|
|
47
|
-
## 3 Typography
|
|
48
|
-
|
|
49
|
-
One UI sans, one mono. `font-sans` is Inter — body, tables, buttons, nav, and captions all ride it. The
|
|
50
|
-
brand's display voice is **Cal Sans** (a custom geometric face, weight 600, negative tracking), but it is
|
|
51
|
-
licensed and unavailable publicly, so headings reproduce the voice through Inter at `font-weight-strong`
|
|
52
|
-
with a tight negative `heading-tracking`. Hero display (48–64px) stays behind; operator headings scale to
|
|
53
|
-
18–24px. `font-mono` is JetBrains Mono for IDs, codes, and timestamps; numeric columns render
|
|
54
|
-
`tabular-nums` (Inter carries `tnum`) so figures align down a column.
|
|
55
|
-
|
|
56
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
57
|
-
| --- | --- | --- | --- |
|
|
58
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
-
| h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
-
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` |
|
|
61
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
62
|
-
| small | labels, meta, dense rows | 13px / 1.4 | `font-weight-normal` |
|
|
63
|
-
| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
|
|
64
|
-
|
|
65
|
-
## 4 Component Stylings
|
|
66
|
-
|
|
67
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
68
|
-
|
|
69
|
-
- **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius` (8px), no pill,
|
|
70
|
-
press darkens to `#242424`. Secondary: `background` fill, 1px `border`, `foreground`. Ghost: `muted` hover.
|
|
71
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus shifts the edge to the
|
|
72
|
-
ink `ring` at 2px, no glow.
|
|
73
|
-
- **Card** — `card` surface, 1px `border`, `radius` steps up to 12px for content cards; soft shadow only
|
|
74
|
-
when it lifts off the canvas (`shadow-intensity`); inset by `density-inset`.
|
|
75
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` hover; `tabular-nums` on
|
|
76
|
-
numeric columns; selection tints `accent`.
|
|
77
|
-
- **Side panel** — detail/edit open beside the work, not over it (`side-panel-width` / `side-panel-width-rich`).
|
|
78
|
-
- **Badge** — pill radius, `muted` or status fill, uppercase caption; status badges take `success` /
|
|
79
|
-
`warning` / `destructive`, never `primary`.
|
|
80
|
-
|
|
81
|
-
## 5 Layout
|
|
82
|
-
|
|
83
|
-
Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px
|
|
84
|
-
section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
85
|
-
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px — Cal's airier nav
|
|
86
|
-
band), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
87
|
-
`form-max-width`, tables full-width. Density is governed globally by `density-tier` (`spacious`, Cal's
|
|
88
|
-
generous whitespace) and stepped per archetype by the surface catalog.
|
|
89
|
-
|
|
90
|
-
## 6 Depth
|
|
91
|
-
|
|
92
|
-
Soft and modern. Hierarchy comes from the surface ladder and hairlines, with soft shadow reserved for
|
|
93
|
-
true lift — no heavy drops, no neumorphism, no glassmorphism:
|
|
94
|
-
|
|
95
|
-
- **0 — canvas** `background`, no border.
|
|
96
|
-
- **1 — card / panel** `card` on a 1px `border`; a light-gray `muted` fill distinguishes feature
|
|
97
|
-
surfaces; soft `sm` shadow (`0 1px 2px rgba(0,0,0,0.05)`) only when it must lift off the canvas.
|
|
98
|
-
- **2 — overlay** `popover` / side panel / modal — soft `md` shadow (`0 4px 12px rgba(0,0,0,0.08)`); the
|
|
99
|
-
scarce near-black `#101010` surface elevates by color contrast, not a heavier shadow.
|
|
100
|
-
|
|
101
|
-
Focus is an ink `ring` outline (never a glow), visible on every interactive element. Three z-levels:
|
|
102
|
-
content, sticky chrome, overlay.
|
|
103
|
-
|
|
104
|
-
## 7 Do's & Don'ts
|
|
105
|
-
|
|
106
|
-
- **Do** reserve near-black `primary` for the single most important action; keep the action layer
|
|
107
|
-
monochrome, and carry hierarchy with hairlines, weight, whitespace, and the surface ladder before shadow.
|
|
108
|
-
- **Do** hold display weight at 600 with the tight negative `heading-tracking` — Cal's voice reads
|
|
109
|
-
off-brand without it; apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps.
|
|
110
|
-
- **Don't** promote a chromatic accent to the action layer — `brand-accent` blue is inline-link-only,
|
|
111
|
-
the badge pastels are chart-only.
|
|
112
|
-
- **Don't** pill the primary CTA or use a card radius beyond 16px — larger reads as consumer-toy, not
|
|
113
|
-
professional software.
|
|
114
|
-
- **Don't** scatter the near-black surface (at most one per view, framing or closing it — a scarce
|
|
115
|
-
signal, not a panel), or signal elevation with heavy drop shadows.
|
|
116
|
-
|
|
117
|
-
## 8 Responsive
|
|
118
|
-
|
|
119
|
-
The operator sweep across breakpoints:
|
|
120
|
-
|
|
121
|
-
| Breakpoint (px) | What changes |
|
|
122
|
-
| --- | --- |
|
|
123
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
124
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
125
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
126
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
127
|
-
|
|
128
|
-
## 9 Agent Prompt Guide
|
|
129
|
-
|
|
130
|
-
What carries from Cal into an operator surface, and what stays on the marketing page.
|
|
131
|
-
|
|
132
|
-
- Reach first for the white canvas, hairline `border`, and light-gray surface ladder — a monochrome
|
|
133
|
-
grayscale system. Accent only the primary action, in near-black; if two things want it, one is not primary.
|
|
134
|
-
- Keep geometry soft: 8px on controls, 12px on cards; never pill a CTA, never exceed 16px on a card.
|
|
135
|
-
- Headings are Inter 600 with tight negative tracking (the Cal Sans voice reproduced) — never ship Cal
|
|
136
|
-
Sans itself, never scale a heading to hero 48–64px. Numeric columns are `tabular-nums`; IDs, codes, and
|
|
137
|
-
timestamps are JetBrains Mono.
|
|
138
|
-
- The near-black `#101010` surface is scarce — one framing element per view, never a panel. Leave behind
|
|
139
|
-
the hero display, the 96px band rhythm, the nav-pill switcher, product-fragment-in-card, and any
|
|
140
|
-
gradient; charts are the only place color spends.
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Clay
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Clay — the warm-cream operator reading
|
|
9
|
-
|
|
10
|
-
Clay's marketing surface is the most playful brand in the GTM-data category: a cream-tinted white
|
|
11
|
-
canvas holding 3D claymation illustrations and saturated single-color feature cards in six hues.
|
|
12
|
-
This is the *operator* reading — the warmth, the near-black actions, the generous radius, and the
|
|
13
|
-
Inter body voice carried into a CRM/queue/dashboard; the hero-scale Plain Black display, the 3D
|
|
14
|
-
illustrations, and the saturated feature-card fills stay behind in marketing. What makes a tool read
|
|
15
|
-
as Clay is the cream substrate and the disciplined near-black action, not a colored card.
|
|
16
|
-
|
|
17
|
-
## 1 Visual Theme
|
|
18
|
-
|
|
19
|
-
Light by default; warm, not cool. The canvas is a cream-tinted white (`background` — `#fffaf0`), never
|
|
20
|
-
a gray — that faint warmth is Clay's non-negotiable differentiator from the cool-gray data-platform
|
|
21
|
-
field. Flat: hierarchy comes from hairline `border`, warm surface steps, and type weight, never heavy
|
|
22
|
-
shadow. A single reserved action color — near-black `primary` (`#0a0a0a`), Clay's authentic CTA —
|
|
23
|
-
carries emphasis in the chrome. The anchor surface is the cream content canvas beside a faintly deeper
|
|
24
|
-
cream `sidebar`. Radius is generous (`radius` 12px) to keep Clay's rounded, friendly character. Density
|
|
25
|
-
is `spacious` — this brand breathes, and its operator tools breathe with it.
|
|
26
|
-
|
|
27
|
-
## 2 Color Roles
|
|
28
|
-
|
|
29
|
-
Light values first; hex is Clay's native format. One reserved accent — near-black `primary` is the only
|
|
30
|
-
tone the chrome uses for emphasis; the six saturated brand hues live in charts only, never in chrome.
|
|
31
|
-
|
|
32
|
-
| Role | Value | Allowed where |
|
|
33
|
-
| --- | --- | --- |
|
|
34
|
-
| `background` / `card` / `popover` | cream white `#fffaf0` | page, cards, and overlays — the dominant warm surface |
|
|
35
|
-
| `foreground` | ink `#0a0a0a` | all primary text, headings |
|
|
36
|
-
| `muted` | soft cream `#faf5e8` | hover rows, subtle fills |
|
|
37
|
-
| `muted-foreground` | mid gray `#6a6a6a` | labels, captions, secondary text |
|
|
38
|
-
| `secondary` | cream card `#f5f0e0` | secondary buttons, quiet chips |
|
|
39
|
-
| `border` / `input` | hairline `#e5e5e5` | every separator, grid line, and field edge |
|
|
40
|
-
| `primary` | near-black `#0a0a0a` (hover `#1f1f1f`, disabled `#e5e5e5`) | the one primary action; active nav |
|
|
41
|
-
| `accent` | warm cream `#ebe6d6` | selected/hovered rows and active nav, on-accent surfaces only |
|
|
42
|
-
| `ring` | near-black `#0a0a0a` | the focus outline — unmistakable on cream, because keyboard-first |
|
|
43
|
-
| `destructive` | red `#ef4444` | destructive actions and error state only |
|
|
44
|
-
| `success` / `warning` | green `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
|
|
45
|
-
|
|
46
|
-
The saturated palette — teal, pink, lavender, ochre, coral — is Clay's brand voltage; here it carries
|
|
47
|
-
**data series** (`chart-1..5`), not chrome. The marketing feature cards stay behind (see §7).
|
|
48
|
-
|
|
49
|
-
## 3 Typography
|
|
50
|
-
|
|
51
|
-
One sans, one mono. `font-sans` is Inter — body, UI, and headings all ride it; heading weight and a
|
|
52
|
-
faint negative tracking, not a second family, carry the voice. Clay's display face, Plain Black, is a
|
|
53
|
-
hero-scale marketing type (72px, -2.5px tracking) and stays behind. `font-mono` carries IDs, codes,
|
|
54
|
-
timestamps, and log lines. Numeric columns render `tabular-nums` so figures align down a column.
|
|
55
|
-
|
|
56
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
57
|
-
| --- | --- | --- | --- |
|
|
58
|
-
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
-
| h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
-
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `0` |
|
|
61
|
-
| body | UI + prose | 16px / 1.55 | `font-weight-normal` |
|
|
62
|
-
| small | labels, meta, dense table | 14px / 1.5 | `font-weight-normal` |
|
|
63
|
-
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.1em`, uppercase |
|
|
64
|
-
|
|
65
|
-
Bump weight one step for emphasis; never change size to emphasize.
|
|
66
|
-
|
|
67
|
-
## 4 Component Stylings
|
|
68
|
-
|
|
69
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
70
|
-
|
|
71
|
-
- **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius` (generous),
|
|
72
|
-
no pill; hover deepens to `#1f1f1f`. Secondary: `secondary` cream fill, 1px `border`. Ghost:
|
|
73
|
-
transparent, `accent` on hover.
|
|
74
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the near-black
|
|
75
|
-
`ring` at 2px, no glow.
|
|
76
|
-
- **Card** — `card` surface, 1px `border`, `radius`; shadow only when it must lift off the canvas
|
|
77
|
-
(`shadow-intensity`); inset by `density-inset`.
|
|
78
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
79
|
-
numeric columns; row selection tints `accent`.
|
|
80
|
-
- **Side panel** — detail and edit open beside the work in `side-panel-width` (`-rich` when heavy).
|
|
81
|
-
- **Badge** — pill (`radius-scale` 9999, Clay's brand-authentic chip shape), `muted`/status fill,
|
|
82
|
-
uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
83
|
-
|
|
84
|
-
## 5 Layout
|
|
85
|
-
|
|
86
|
-
Base spacing unit 4px (Clay's documented base); the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 ·
|
|
87
|
-
64` (marketing's 96px section rhythm stays behind). Shell dimensions map one-to-one to the layout
|
|
88
|
-
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
|
|
89
|
-
panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
|
|
90
|
-
tables full-width. Density is governed globally by `density-tier` (`spacious`, rewriting the spacing
|
|
91
|
-
scale through `density-gap`) and stepped per archetype by the surface catalog.
|
|
92
|
-
|
|
93
|
-
## 6 Depth
|
|
94
|
-
|
|
95
|
-
Flat. Hierarchy comes from warm surface steps and hairlines, not shadow:
|
|
96
|
-
|
|
97
|
-
- **0 — canvas** `background` cream, no border.
|
|
98
|
-
- **1 — panel / card** `card` on a 1px `border`; a step to `muted` / `secondary` cream separates
|
|
99
|
-
nested surfaces before any shadow does.
|
|
100
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
101
|
-
shadow. No level stacks a heavier shadow to signal rank; rank is border, warm surface, and position.
|
|
102
|
-
|
|
103
|
-
Focus is a 2px near-black `ring` outline, never a glow; three z-levels: content, chrome, overlay.
|
|
104
|
-
|
|
105
|
-
## 7 Do's & Don'ts
|
|
106
|
-
|
|
107
|
-
- **Do** anchor every surface on the cream `background` (`#fffaf0`). The warm tint is the identity.
|
|
108
|
-
- **Do** reserve near-black `primary` for the single most important action; everything else is neutral.
|
|
109
|
-
- **Do** let the saturated palette carry data (`chart-1..5`) — that is where Clay's color belongs.
|
|
110
|
-
- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
|
|
111
|
-
- **Don't** cool the neutrals to gray. A gray canvas is a different brand.
|
|
112
|
-
- **Don't** bring the saturated feature-card fills into chrome — no hot-pink button, no teal panel.
|
|
113
|
-
- **Don't** pill the primary CTA (pill is for badges/chips) or reach past `radius-scale`.
|
|
114
|
-
- **Don't** import Plain Black or 3D claymation into the tool — they are hero-scale marketing assets.
|
|
115
|
-
- **Don't** signal elevation with heavy drop shadows.
|
|
116
|
-
|
|
117
|
-
## 8 Responsive
|
|
118
|
-
|
|
119
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
120
|
-
|
|
121
|
-
| Breakpoint | What changes |
|
|
122
|
-
| --- | --- |
|
|
123
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
124
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
125
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
126
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width, generous cream gutters |
|
|
127
|
-
|
|
128
|
-
## 9 Agent Prompt Guide
|
|
129
|
-
|
|
130
|
-
Directives the emitting agent follows verbatim:
|
|
131
|
-
|
|
132
|
-
- Reach for the cream canvas first; the warm `background` is what makes the tool read as Clay.
|
|
133
|
-
- Accent only the primary action, and the accent is near-black. If two want it, one is not primary.
|
|
134
|
-
- Charts carry Clay's saturated palette (`chart-1..5`); chrome stays warm-neutral. Never invert this.
|
|
135
|
-
- Keep radius generous — the rounded character is the brand; do not tighten controls to a hard edge.
|
|
136
|
-
- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
|
|
137
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
|
|
138
|
-
- Every workflow completes from the keyboard; the near-black `ring` focus outline is always visible.
|
|
139
|
-
- Plain Black hero type and 3D illustrations are marketing. They never enter the operator surface.
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: ClickHouse
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# ClickHouse — an operator reading of the black-canvas, electric-yellow system
|
|
9
|
-
|
|
10
|
-
ClickHouse's web system is the highest-contrast brand in the data-platform category: near-black canvas,
|
|
11
|
-
one electric-yellow voltage, white confident-bold sans, real SQL in dark cards. This entry is the
|
|
12
|
-
*operator* reading — an internal tool (query console, cluster dashboard, job queue, log stream) in
|
|
13
|
-
ClickHouse's language. What carries: the near-black canvas, the one yellow accent held scarce, white
|
|
14
|
-
ink on dark surfaces, flat shadowless depth from surface contrast and hairlines, the 8px-not-pill
|
|
15
|
-
radius, and Inter's tight bold-700 voice. What stays behind: the 72/56/40px hero display, full-bleed
|
|
16
|
-
yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm.
|
|
17
|
-
|
|
18
|
-
**This brand is categorically dark.** ClickHouse ships no light-mode surface — the black canvas *is*
|
|
19
|
-
the identity. White-canvas is off-brand.
|
|
20
|
-
|
|
21
|
-
## 1 Visual Theme
|
|
22
|
-
|
|
23
|
-
Dark by default — the near-black `background` (`#0a0a0a`) is the floor of every surface, with no light
|
|
24
|
-
counterpart. Emphatically flat: hierarchy comes from the surface ladder (canvas → card → elevated),
|
|
25
|
-
hairline `border`, type weight, and white-on-black contrast — never shadow. A single accent,
|
|
26
|
-
electric-yellow `primary` (`#faff69`), is held scarce: it wears the one primary action, the focus
|
|
27
|
-
`ring`, and the active-nav indicator, nothing else. The neutral ramp is pure achromatic grey (white
|
|
28
|
-
ink down through `#cccccc` to `#888888`), so the UI reads engineered and monochrome, yellow its only
|
|
29
|
-
voltage. Density is `dense` — the brand's engineering-grade rhythm.
|
|
30
|
-
|
|
31
|
-
## 2 Color Roles
|
|
32
|
-
|
|
33
|
-
Dark values. One accent — yellow `primary` is the only chromatic hue that carries meaning; status
|
|
34
|
-
hues speak only status.
|
|
35
|
-
|
|
36
|
-
| Role | Value | Allowed where |
|
|
37
|
-
| --- | --- | --- |
|
|
38
|
-
| `background` | near-black canvas `#0a0a0a` | page floor and content area — the dominant surface |
|
|
39
|
-
| `foreground` | white ink `#ffffff` | headlines and primary text |
|
|
40
|
-
| `card` / `popover` / `secondary` | dim panel `#1a1a1a` | cards, overlays, secondary-button fills — lifted off the canvas |
|
|
41
|
-
| `muted` | recessive fill `#121212` | inset wells, disabled tracks, faint band tints |
|
|
42
|
-
| `muted-foreground` | mid grey `#888888` | labels, captions, secondary text |
|
|
43
|
-
| `accent` | elevated grey `#242424` | hover and selected rows and nav — a neutral lift |
|
|
44
|
-
| `border` / `input` | hairline `#2a2a2a` | every separator, grid line, and field edge |
|
|
45
|
-
| `primary` | electric yellow `#faff69` | the one primary action; active-nav indicator; key interactive detail |
|
|
46
|
-
| `primary-foreground` | black `#0a0a0a` | text on the yellow action — the high-contrast brand signal |
|
|
47
|
-
| `ring` | yellow `#faff69` | the focus outline — unmistakable, because keyboard-first |
|
|
48
|
-
| `destructive` | red `#ef4444` | destructive actions and error state only |
|
|
49
|
-
| `success` / `warning` | emerald `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
|
|
50
|
-
|
|
51
|
-
The yellow's power is its scarcity at element level; full-bleed yellow bands and stat numbers are
|
|
52
|
-
marketing voltage and carry no operator role (see §7).
|
|
53
|
-
|
|
54
|
-
## 3 Typography
|
|
55
|
-
|
|
56
|
-
One sans, one mono. `font-sans` is Inter — body, UI, and headings all ride it; weight and tight
|
|
57
|
-
tracking, not a second family, carry the display voice. `font-mono` is JetBrains Mono for IDs, codes,
|
|
58
|
-
timestamps, log lines, and SQL; numeric columns render `tabular-nums`. The marketing display scale
|
|
59
|
-
(72/56/40px) stays behind — an operator surface tops out at a 24px page title.
|
|
60
|
-
|
|
61
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
62
|
-
| --- | --- | --- | --- |
|
|
63
|
-
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
64
|
-
| h2 | section head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
-
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` |
|
|
66
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
67
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
68
|
-
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.1em`, uppercase |
|
|
69
|
-
|
|
70
|
-
Headings run Inter at the strong weight (700) with tight negative tracking — the brand's defining
|
|
71
|
-
trait, preserved at operator sizes even as the display *scale* stays behind. Build hierarchy on size
|
|
72
|
-
and weight, never a second family; bump weight for emphasis, never size.
|
|
73
|
-
|
|
74
|
-
## 4 Component Stylings
|
|
75
|
-
|
|
76
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
77
|
-
|
|
78
|
-
- **Button** — primary: filled yellow `primary` on black `primary-foreground`, `radius`, never a pill. Secondary: `secondary` dim-panel fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
79
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the yellow `ring` at full 2px, no glow.
|
|
80
|
-
- **Card** — `card` dim-panel surface, 1px `border`, `radius`; depth is the surface lift off the canvas, not shadow; inset by `density-inset`.
|
|
81
|
-
- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `accent` on hover; `tabular-nums` on numeric columns; selection tints `accent` with a yellow `primary` left-indicator.
|
|
82
|
-
- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
|
|
83
|
-
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Pill radius is badges-only.
|
|
84
|
-
|
|
85
|
-
## 5 Layout
|
|
86
|
-
|
|
87
|
-
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
|
|
88
|
-
96px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
89
|
-
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px, the brand's nav
|
|
90
|
-
height), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
91
|
-
`form-max-width`, tables full-width. Density is governed globally by `density-tier` (dense, rewriting
|
|
92
|
-
the spacing scale through `density-gap`) and stepped per archetype by the surface catalog.
|
|
93
|
-
|
|
94
|
-
## 6 Depth
|
|
95
|
-
|
|
96
|
-
Flat and shadowless. Depth comes from the surface ladder and hairlines, not drop shadows:
|
|
97
|
-
|
|
98
|
-
- **0 — canvas** `background` (`#0a0a0a`), no border.
|
|
99
|
-
- **1 — panel / card** `card` (`#1a1a1a`) on a 1px `border`; the dim-panel lift off the near-black canvas carries rank. Hover/selected lift one step to `accent` (`#242424`).
|
|
100
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest lift, enough to separate an overlay from the black canvas above a scrim. Rank is surface, border, and position — never a heavier shadow.
|
|
101
|
-
|
|
102
|
-
Focus is a 2px yellow `ring` outline (never a glow), visible on every interactive element. Three
|
|
103
|
-
z-levels: content, sticky chrome, overlay.
|
|
104
|
-
|
|
105
|
-
## 7 Do's & Don'ts
|
|
106
|
-
|
|
107
|
-
- **Do** anchor every surface on the near-black canvas; the yellow-on-black pairing is the brand.
|
|
108
|
-
- **Do** reserve yellow `primary` for the primary action, the focus `ring`, and the active-nav indicator — nothing else. Its scarcity at element scale is what reads as voltage.
|
|
109
|
-
- **Do** carry hierarchy with the surface ladder, hairlines, weight, and size — the brand is flat.
|
|
110
|
-
- **Do** run headings Inter 700 with tight negative tracking; build hierarchy on size and weight.
|
|
111
|
-
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
|
|
112
|
-
- **Don't** introduce a second brand color — ClickHouse is monochrome plus one yellow.
|
|
113
|
-
- **Don't** fill large surfaces with yellow or set body text in yellow; the full-bleed yellow band is marketing-only.
|
|
114
|
-
- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 8px.
|
|
115
|
-
- **Don't** signal elevation with drop shadows, or adapt the shell to a light canvas — this brand has no light surface.
|
|
116
|
-
|
|
117
|
-
## 8 Responsive
|
|
118
|
-
|
|
119
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
120
|
-
|
|
121
|
-
| Breakpoint | What changes |
|
|
122
|
-
| --- | --- |
|
|
123
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
124
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
125
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
126
|
-
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
127
|
-
|
|
128
|
-
## 9 Agent Prompt Guide
|
|
129
|
-
|
|
130
|
-
Directives the emitting agent follows verbatim:
|
|
131
|
-
|
|
132
|
-
- Wear the near-black canvas by default; this brand is categorically dark — no light surface to fall back to. Cards and panels are the dim-panel lift off it, not white.
|
|
133
|
-
- Spend yellow once per surface: the primary action, the focus ring, the active-nav indicator. If two things want the yellow, one is not primary. Color otherwise belongs to data and status.
|
|
134
|
-
- Depth is surface contrast and hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover over the canvas.
|
|
135
|
-
- Headings ride Inter 700 with tight tracking; the display scale (72/56/40px) stays behind — operator headings top out at 24px, hierarchy is size and weight.
|
|
136
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is `font-mono` (JetBrains Mono). Show the real query, not an illustration of one.
|
|
137
|
-
- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
|
|
138
|
-
- Keyboard-first: the yellow `ring` focus outline is always visible.
|
|
139
|
-
- Leave behind: full-bleed yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm — marketing voltage, not operator chrome.
|