@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: HashiCorp
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# HashiCorp — an operator reading of the pure-black, multi-product infrastructure system
|
|
9
|
-
|
|
10
|
-
HashiCorp's web system is a confident, technical enterprise canvas: a pure-black ground, white engineered sans,
|
|
11
|
-
charcoal cards on felt-thin hairlines, and per-product accent colors marking which tool a section is about. This
|
|
12
|
-
entry is the *operator* reading — an internal tool (dashboard, run queue, policy console, log stream) in HashiCorp's
|
|
13
|
-
language. Carried over: the pure-black canvas, charcoal surface ladder, white-on-dark ink, flat shadowless depth, the
|
|
14
|
-
8px-not-pill radius, hashicorpSans's engineered voice (Inter the substitute). Left behind: the 80/56/40px hero
|
|
15
|
-
display, the per-product chromatic identity cards, full-bleed CTA banners, and the 96px section rhythm.
|
|
16
|
-
|
|
17
|
-
**Categorically dark, literally pure black, one accent not seven.** Two floors yield: the light-default floor (the
|
|
18
|
-
categorically-dark exception — the default theme is dark and fills the required `light` slot) and the doctrine's ban
|
|
19
|
-
on pure `#000000` surfaces (the brand's canvas *is* `#000000`, so the brand token wins); both are recorded plainly.
|
|
20
|
-
The signature per-product palette is a *multi-product* marketing device — an internal tool is one product, so the
|
|
21
|
-
operator reading spends the one product-neutral hue the brand uses on every page: accent-blue `#2b89ff`, repurposed
|
|
22
|
-
as the chart categorical ramp, the one place multiple hues are legitimate (see §2, §7).
|
|
23
|
-
|
|
24
|
-
## 1 Visual Theme
|
|
25
|
-
|
|
26
|
-
Dark by default — pure black `background` (`#000000`) is the floor of every surface, no light counterpart.
|
|
27
|
-
Emphatically flat: hierarchy comes from the charcoal surface ladder (canvas → surface-1 → surface-2), 1px hairline
|
|
28
|
-
`border`, type weight, and white-on-black contrast — never shadow. A single accent, blue `primary` (`#2b89ff`), is
|
|
29
|
-
held scarce: the one primary action, the focus `ring`, and the active-nav indicator, nothing else. The neutral ramp
|
|
30
|
-
is a cool near-achromatic charcoal (white ink through `#b2b6bd` to `#656a76`), so the UI reads engineered and
|
|
31
|
-
monochrome. Density is `standard` — the brand breathes more than a terminal, but the operator reading earns density.
|
|
32
|
-
|
|
33
|
-
## 2 Color Roles
|
|
34
|
-
|
|
35
|
-
Dark values. One accent — blue `primary` is the only chromatic hue that carries UI meaning; status
|
|
36
|
-
hues speak only status; the product palette lives only in charts.
|
|
37
|
-
|
|
38
|
-
| Role | Value | Allowed where |
|
|
39
|
-
| --- | --- | --- |
|
|
40
|
-
| `background` | pure-black canvas `#000000` | page floor and content area — the dominant surface |
|
|
41
|
-
| `foreground` | white ink `#ffffff` | headlines and primary text |
|
|
42
|
-
| `card` / `popover` | charcoal `#15181e` (surface-1) | cards, tiles, overlays — the first lift off black |
|
|
43
|
-
| `secondary` / `accent` | charcoal-2 `#1f232b` (surface-2) | secondary-button fills; hover and selected rows and nav |
|
|
44
|
-
| `muted` | faint well `#0c0e12` | inset tracks, disabled fills, quiet band tints |
|
|
45
|
-
| `muted-foreground` | cool gray `#b2b6bd` | labels, captions, secondary text |
|
|
46
|
-
| `border` / `input` | hairline `#3b3d45` (surface-3) | every separator, grid line, and field edge |
|
|
47
|
-
| `primary` | accent-blue `#2b89ff` | the one primary action; active-nav indicator; the text-link |
|
|
48
|
-
| `primary-foreground` | white `#ffffff` | text on the blue action |
|
|
49
|
-
| `ring` | blue `#2b89ff` | the focus outline — unmistakable, because keyboard-first |
|
|
50
|
-
| `destructive` | Consul red `#e62b1e` | destructive actions and error state only |
|
|
51
|
-
| `success` / `warning` | Nomad green `#00ca8e` / Vault yellow `#ffcf25` | status signalling only, never chrome |
|
|
52
|
-
|
|
53
|
-
The per-product palette — Terraform `#7b42bc`, Vault `#ffcf25`, Waypoint `#14c6cb`, Nomad `#00ca8e`,
|
|
54
|
-
Boundary `#f24c53` — carries no UI role; it draws the chart categorical ramp (see §7).
|
|
55
|
-
|
|
56
|
-
## 3 Typography
|
|
57
|
-
|
|
58
|
-
One sans, one mono. `font-sans` is hashicorpSans, the brand's geometric-humanist face — body, UI, and headings all
|
|
59
|
-
ride it; weight and tight tracking, not a second family, carry the display voice (Inter is the corpus's own open
|
|
60
|
-
substitute). `font-mono` is the operator's reclaim — the marketing brand reserves mono for in-product, but the
|
|
61
|
-
operator surface needs it for IDs, codes, timestamps, and log lines (JetBrains Mono). Numeric columns render
|
|
62
|
-
`tabular-nums`. The display scale (80/56/40px) stays behind — an operator surface tops out at a 24px page title.
|
|
63
|
-
|
|
64
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
65
|
-
| --- | --- | --- | --- |
|
|
66
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
67
|
-
| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
68
|
-
| h3 | card / group head | 15px / 1.35 | `font-weight-strong` |
|
|
69
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
70
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
71
|
-
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.05em`, uppercase |
|
|
72
|
-
|
|
73
|
-
The brand's weight hierarchy is deliberately small — 500 body / 600 emphasis / 700 display, no extremes, so the
|
|
74
|
-
system reads engineered. Operator headings run the strong weight (600, the brand's headline weight) with tight
|
|
75
|
-
negative tracking; the 700 display weights stay behind. Build hierarchy on size and weight, never a second family;
|
|
76
|
-
keep the uppercase eyebrow above sections.
|
|
77
|
-
|
|
78
|
-
## 4 Component Stylings
|
|
79
|
-
|
|
80
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
81
|
-
|
|
82
|
-
- **Button** — primary: filled blue `primary` on white `primary-foreground`, `radius` (8px), never a pill. Secondary: `secondary` charcoal-2 fill, `border`, `foreground`. Ghost: transparent, `accent` on hover. The brand's white-on-black CTA is a legitimate monochrome variant for a lone hero action, but the operator default spends the accent-blue so primary, focus, and active-nav read as one system.
|
|
83
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the blue `ring` at 2px, no glow (the brand's focus is a 1px accent-blue outline, firmed to 2px for keyboard-first work).
|
|
84
|
-
- **Card** — `card` charcoal surface, 1px `border`, `radius` (cards step to 12px via the scale); depth is the surface lift off black, not shadow; inset by `density-inset`.
|
|
85
|
-
- **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 blue `primary` left-indicator.
|
|
86
|
-
- **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.
|
|
87
|
-
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Pill radius is badges-only (the brand's product pills).
|
|
88
|
-
|
|
89
|
-
## 5 Layout
|
|
90
|
-
|
|
91
|
-
Base spacing unit 8px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing 96px section
|
|
92
|
-
rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
|
|
93
|
-
`sidebar-width-collapsed`, topbar `topbar-height` (64px, the brand's nav height), side panel `side-panel-width` /
|
|
94
|
-
`side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Density is governed
|
|
95
|
-
globally by `density-tier` (standard) and stepped denser per archetype by the surface catalog.
|
|
96
|
-
|
|
97
|
-
## 6 Depth
|
|
98
|
-
|
|
99
|
-
Flat and shadowless. Depth comes from the charcoal surface ladder and hairlines, not drop shadows:
|
|
100
|
-
|
|
101
|
-
- **0 — canvas** `background` (`#000000`), no border.
|
|
102
|
-
- **1 — panel / card** `card` (`#15181e`, surface-1) on a 1px `border`; the charcoal lift off pure black carries rank. Hover and selected rows step one further to `accent` (`#1f232b`, surface-2); chips and sub-nav ride the `border` charcoal-3 (`#3b3d45`).
|
|
103
|
-
- **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.
|
|
104
|
-
|
|
105
|
-
The per-product chromatic card is a marketing *identity* device at a feature card's z-plane, not a depth level — it
|
|
106
|
-
stays behind. Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. Three
|
|
107
|
-
z-levels: content, chrome, overlay.
|
|
108
|
-
|
|
109
|
-
## 7 Do's & Don'ts
|
|
110
|
-
|
|
111
|
-
- **Do** anchor every surface on the pure-black canvas and carry hierarchy with the black-plus-charcoal ladder, hairlines, weight, and size; the black `#000000` is deliberate — not a near-black to be softened.
|
|
112
|
-
- **Do** reserve blue `primary` for the primary action, the focus `ring`, and the active-nav indicator — nothing else. It is the one product-neutral chromatic hue the brand spends on every page.
|
|
113
|
-
- **Do** run headings the brand sans (hashicorpSans; Inter the substitute) at 600 with tight negative tracking, one family across the whole hierarchy.
|
|
114
|
-
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and log lines — the operator surface reclaims the mono the marketing brand withholds.
|
|
115
|
-
- **Do** draw chart series from the product palette (Terraform purple, Vault yellow, Nomad green, Boundary coral) — the one place multiple hues are legitimate.
|
|
116
|
-
- **Don't** rebuild the per-product accent system as UI chrome, fill large surfaces with a product hue, or set body text in one — that palette is a multi-product marketing device; an internal tool is one product with one accent.
|
|
117
|
-
- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 8px.
|
|
118
|
-
- **Don't** signal elevation with drop shadows, or adapt the shell to a light canvas — this brand has no light surface.
|
|
119
|
-
- **Don't** pair a display-only sans with a different body family — HashiCorp is one family across the full hierarchy.
|
|
120
|
-
|
|
121
|
-
## 8 Responsive
|
|
122
|
-
|
|
123
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
124
|
-
|
|
125
|
-
| Breakpoint | What changes |
|
|
126
|
-
| --- | --- |
|
|
127
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
128
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
129
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
130
|
-
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
131
|
-
|
|
132
|
-
## 9 Agent Prompt Guide
|
|
133
|
-
|
|
134
|
-
Directives the emitting agent follows verbatim:
|
|
135
|
-
|
|
136
|
-
- Wear the pure-black `#000000` canvas by default; this brand is categorically dark — no light surface to fall back to. Cards and panels are the charcoal surface-1 lift, not white; depth is that ladder plus hairlines, never shadow.
|
|
137
|
-
- Spend blue once per surface: the primary action, the focus `ring`, the active-nav indicator. If two things want the blue, one is not primary. The per-product palette (Terraform purple, Vault yellow, Waypoint cyan, …) stays behind as a marketing identity device — reuse it only as the chart categorical ramp, never as UI accents.
|
|
138
|
-
- Headings ride the brand sans (hashicorpSans; Inter the open substitute) at 600 with tight negative tracking; the 80/56/40px display scale stays behind — operator headings top out at 24px. Keep the uppercase eyebrow above meaningful sections.
|
|
139
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line is `font-mono` (JetBrains Mono) — the operator surface reclaims the mono the marketing brand reserves for in-product. Detail and edit go in the side panel beside the work; the blue `ring` focus outline is always visible for keyboard work.
|
|
140
|
-
- Leave behind: the 80px hero display, the per-product chromatic identity cards, full-bleed CTA banners, and the 96px section rhythm — marketing scale, not operator chrome.
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: IBM
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# IBM — Carbon operator design
|
|
9
|
-
|
|
10
|
-
The operator reading of IBM's Carbon Design System. Carbon was built for enterprise product
|
|
11
|
-
surfaces, so it dresses an internal tool almost natively — but the source corpus is IBM's
|
|
12
|
-
*marketing* canvas, and marketing graces are stripped here. What carries: the flat 0px square
|
|
13
|
-
geometry, IBM Blue as the single accent, IBM Plex Sans, the 4px grid, and depth carried by hairlines
|
|
14
|
-
and surface change. What stays behind: the 76/60/42px weight-300 hero display type, the full-bleed
|
|
15
|
-
blue CTA banner, the dark inverted footer, and the soft-blue hero gradient.
|
|
16
|
-
|
|
17
|
-
## 1 Visual Theme
|
|
18
|
-
|
|
19
|
-
Light by default; dark is opt-in — in the brand only the footer and global header invert, and that
|
|
20
|
-
inversion is a marketing move that stays behind. Flat and square: every button, card, input, and
|
|
21
|
-
container sits at 0px corners, and hierarchy is carried by a 1px hairline `border` and surface change,
|
|
22
|
-
never by shadow. A single accent — IBM Blue `primary` #0f62fe — is reserved for the one action that
|
|
23
|
-
matters, for links, and for the focus rule. The neutral ramp is a true charcoal-on-white: ink #161616
|
|
24
|
-
on a white canvas, with #f4f4f4 and #e0e0e0 grays doing the structural work. Dense by design — Carbon
|
|
25
|
-
expects a lot on the page, not a lot of air. The anchor surface is a white content canvas beside a
|
|
26
|
-
faint gray side nav.
|
|
27
|
-
|
|
28
|
-
## 2 Color Roles
|
|
29
|
-
|
|
30
|
-
Light values first; hex is the brand's native format. One accent — `primary` is the only chromatic hue
|
|
31
|
-
that carries meaning; status hues speak only status.
|
|
32
|
-
|
|
33
|
-
| Role | Value | Allowed where |
|
|
34
|
-
| --- | --- | --- |
|
|
35
|
-
| `background` / `card` / `popover` | white `#ffffff` | page, tiles, and overlays — the dominant surface |
|
|
36
|
-
| `foreground` | charcoal `#161616` | all headings and primary ink |
|
|
37
|
-
| `muted` / `secondary` | light gray `#f4f4f4` (Carbon surface-1) | field fills, alternate-row bands, hovered tiles |
|
|
38
|
-
| `muted-foreground` | mid gray `#525252` | meta, sub-headlines, secondary text |
|
|
39
|
-
| `border` / `input` | hairline `#e0e0e0` (Carbon gray-20) | every card edge, grid line, field rule, divider |
|
|
40
|
-
| `primary` | IBM Blue `#0f62fe` | the one primary action; links; active nav; focus rule |
|
|
41
|
-
| `accent` | blue-10 tint `#edf5ff` | selected/hovered rows and nav, on-accent surfaces only |
|
|
42
|
-
| `ring` | `primary` `#0f62fe` | the 2px focus outline — keyboard-first, unmistakable |
|
|
43
|
-
| `destructive` | red-60 `#da1e28` | destructive actions and error state only |
|
|
44
|
-
| `success` / `warning` | green-50 `#24a148` / yellow-30 `#f1c21b` | status signalling only, never chrome |
|
|
45
|
-
|
|
46
|
-
## 3 Typography
|
|
47
|
-
|
|
48
|
-
One family carries everything: **IBM Plex Sans** for UI, body, and headings — hierarchy comes from size
|
|
49
|
-
and weight, never a second face. Operator headings run `font-weight-strong` (600); the marketing
|
|
50
|
-
weight-300 hero display treatment stays behind. **IBM Plex Mono** returns for IDs, codes, timestamps,
|
|
51
|
-
and log lines — Carbon keeps mono to product surfaces, and an operator UI is a product surface. Body
|
|
52
|
-
carries Carbon's signature `+0.16px` positive letter-spacing (part of the voice — keep it). Numeric
|
|
53
|
-
columns render `tabular-nums` so figures align down a column.
|
|
54
|
-
|
|
55
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
56
|
-
| --- | --- | --- | --- |
|
|
57
|
-
| h1 | page title | 32px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
58
|
-
| h2 | section head | 24px / 1.33 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
-
| h3 | card / group head | 20px / 1.40 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
-
| body | UI + prose | 16px / 1.50 | `font-weight-normal` · +0.16px |
|
|
61
|
-
| small | labels, meta, dense table | 14px / 1.29 | `font-weight-normal` · +0.16px |
|
|
62
|
-
| caption | eyebrow, utility meta | 12px / 1.33 | `font-weight-normal` · +0.32px, sentence case |
|
|
63
|
-
|
|
64
|
-
Eyebrows stay sentence case — Carbon resists the all-caps tracked eyebrow. Bump weight for emphasis;
|
|
65
|
-
never change size.
|
|
66
|
-
|
|
67
|
-
## 4 Component Stylings
|
|
68
|
-
|
|
69
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
70
|
-
|
|
71
|
-
- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (0px, square), 12px·16px
|
|
72
|
-
padding, never pill. Secondary follows Carbon's charcoal treatment: `foreground` fill,
|
|
73
|
-
`primary-foreground` text. Tertiary/ghost: transparent with a 1px `primary` border and `primary`
|
|
74
|
-
text, fill only on hover.
|
|
75
|
-
- **Input** — `muted` fill, a 1px bottom `border`; focus swaps the bottom rule for Carbon's signature
|
|
76
|
-
2px `ring` underline and draws the full focus outline, square, no radius.
|
|
77
|
-
- **Card** — `card` surface on a 1px `border`, 0px corners, no shadow; a "recommended" tile lifts by
|
|
78
|
-
moving to the `muted` ground, not by elevation.
|
|
79
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; row selection
|
|
80
|
-
tints `accent`; `tabular-nums` on numeric columns; `font-mono` on IDs and codes.
|
|
81
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`,
|
|
82
|
-
`side-panel-width-rich` for content-heavy), beside the work, not over it.
|
|
83
|
-
- **Badge** — square (0px) tag, hairline `border`, status fill; status badges take `success` /
|
|
84
|
-
`warning` / `destructive`, never `primary`.
|
|
85
|
-
|
|
86
|
-
## 5 Layout
|
|
87
|
-
|
|
88
|
-
Base spacing unit 4px (Carbon's 4-pixel grid); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 ·
|
|
89
|
-
48 · 64 · 96`. Shell dimensions map one-to-one to the layout primitives: side nav
|
|
90
|
-
`sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (48px icon rail), topbar `topbar-height`
|
|
91
|
-
(48px), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
92
|
-
`form-max-width`, tables full-width. Density is governed globally by `density-tier` (`dense`) and
|
|
93
|
-
stepped per archetype by the surface catalog. Sections separate by thin gray rows, not by large
|
|
94
|
-
vertical gaps — Carbon spends alignment, not air.
|
|
95
|
-
|
|
96
|
-
## 6 Depth
|
|
97
|
-
|
|
98
|
-
Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
|
|
99
|
-
|
|
100
|
-
- **0 — canvas** `background` white, no border.
|
|
101
|
-
- **1 — tile / card** `card` on a 1px `border`; no shadow — the default enterprise tile.
|
|
102
|
-
- **2 — surface band** the `muted` ground for alternate rows and hovered tiles; rank is surface
|
|
103
|
-
change, not elevation.
|
|
104
|
-
- **3 — overlay** `popover` / menu / side panel / modal — the one place `shadow-intensity` earns a
|
|
105
|
-
soft `sm`/`md` shadow.
|
|
106
|
-
|
|
107
|
-
Focus is Carbon's 2px `primary` outline (with a hairline-strong underline on fields), visible on every
|
|
108
|
-
interactive element. Three z-levels: content, sticky chrome, overlay.
|
|
109
|
-
|
|
110
|
-
## 7 Do's & Don'ts
|
|
111
|
-
|
|
112
|
-
- **Do** keep every button, card, input, and container at 0px square — the flat geometry *is* the
|
|
113
|
-
brand.
|
|
114
|
-
- **Do** reserve `primary` IBM Blue for the single primary action, links, and the focus rule; treat it
|
|
115
|
-
as scarce.
|
|
116
|
-
- **Do** carry hierarchy with surface change (`background` → `muted`) and 1px hairlines — skip drop
|
|
117
|
-
shadows.
|
|
118
|
-
- **Do** apply the +0.16px tracking to body sizes and `tabular-nums` / `font-mono` to figures and IDs.
|
|
119
|
-
- **Don't** round corners — even 4px breaks the Carbon look.
|
|
120
|
-
- **Don't** bold operator headings past `font-weight-strong`, or reach for the marketing weight-300
|
|
121
|
-
hero display.
|
|
122
|
-
- **Don't** promote a second chromatic accent — status uses `success` / `warning` / `destructive`
|
|
123
|
-
only.
|
|
124
|
-
- **Don't** open detail or edit in a modal when the side panel fits, and don't signal rank with shadow.
|
|
125
|
-
|
|
126
|
-
## 8 Responsive
|
|
127
|
-
|
|
128
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
129
|
-
|
|
130
|
-
| Breakpoint | What changes |
|
|
131
|
-
| --- | --- |
|
|
132
|
-
| 375 | side nav → hamburger overlay; utility meta hides; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
133
|
-
| 768 | side nav collapses to the 48px icon rail; tables scroll their overflow; card grid → 2-up |
|
|
134
|
-
| 1024 | side nav expands to 256px; two-pane queue+detail holds side by side; grid up to 4-up |
|
|
135
|
-
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
136
|
-
|
|
137
|
-
## 9 Agent Prompt Guide
|
|
138
|
-
|
|
139
|
-
This entry dresses an internal operator surface — a queue, a data console, an admin panel — in Carbon.
|
|
140
|
-
Carry over: flat 0px square geometry, IBM Blue as the single accent, IBM Plex Sans plus Plex Mono, the
|
|
141
|
-
4px grid, hairline-and-surface-change depth, the 2px blue focus rule, and the +0.16px body tracking.
|
|
142
|
-
Leave behind: the 76/60/42px weight-300 hero display type, the full-bleed blue CTA banner, the dark
|
|
143
|
-
inverted footer, and the soft-blue hero gradient — all marketing.
|
|
144
|
-
|
|
145
|
-
- Lead every list surface with its data table; keep it square and dense.
|
|
146
|
-
- Accent only the primary action. IBM Blue is scarce — links, primary CTA, focus. Anything more is
|
|
147
|
-
drift.
|
|
148
|
-
- Keep 0px corners everywhere; a rounded corner reads as a different brand.
|
|
149
|
-
- IDs, codes, and timestamps in Plex Mono; every numeric column `tabular-nums`; body keeps +0.16px
|
|
150
|
-
tracking and sentence-case eyebrows.
|
|
151
|
-
- Depth is hairline and surface change; reach past a hairline only for a real overlay.
|
|
152
|
-
- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
|
|
153
|
-
- Keep the whole app light; do not invert to charcoal outside a deliberate dark opt-in.
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Intercom
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Intercom — the operator reading
|
|
9
|
-
|
|
10
|
-
The calm, editorial customer-service brand rendered for internal tools. Intercom's public surfaces
|
|
11
|
-
are publication-quiet and product-screenshot-led; an operator surface wearing this brand keeps the
|
|
12
|
-
warm cream canvas, the white-on-cream lift, the charcoal ink, the single reserved Fin Orange, the
|
|
13
|
-
modest radii, and the geometric-sans voice that never bolds past 500. The 72px hero display, the
|
|
14
|
-
product-mockup rhythm, the pure-black quote strip, the pill tab toggles, and the 96px section
|
|
15
|
-
breathing stay behind. What carries is the feel: a warm cream ground the category never uses, panels
|
|
16
|
-
that lift by turning white rather than by casting shadow, and one orange spark held in reserve.
|
|
17
|
-
|
|
18
|
-
## 1 Visual Theme
|
|
19
|
-
|
|
20
|
-
Light by default; dark is opt-in (Intercom ships no dark theme on the public web). The anchor surface
|
|
21
|
-
is not white — it is a soft warm cream `background` (`#f5f1ec`), the brand's defining signal. Panels
|
|
22
|
-
and cards lift **onto white** (`card`, `#ffffff`): the depth strategy is a surface change, not a shadow.
|
|
23
|
-
Flat throughout — hierarchy comes from the cream-to-white ladder, warm hairline `border` (`#d3cec6`),
|
|
24
|
-
and type weight, never heavy elevation. A single chromatic voltage, Fin Orange (`primary`, `#ff5600`),
|
|
25
|
-
is held in reserve for the one action that matters; everything neutral is charcoal ink (`foreground`,
|
|
26
|
-
`#111111`) on cream. Corners are modest — `radius` (8px) on buttons and inputs, a larger step on cards
|
|
27
|
-
— never pill, never square. Density is `standard`: calm and editorial, not cramped.
|
|
28
|
-
|
|
29
|
-
## 2 Color Roles
|
|
30
|
-
|
|
31
|
-
Light values. One accent: Fin Orange is the only chromatic hue that carries meaning; the report
|
|
32
|
-
palette lives in charts, status speaks only status.
|
|
33
|
-
|
|
34
|
-
| Role | Value | Allowed where |
|
|
35
|
-
| --- | --- | --- |
|
|
36
|
-
| `background` | cream `#f5f1ec` | the page canvas — warm, never pure white; the brand's defining surface |
|
|
37
|
-
| `card` / `popover` | white `#ffffff` | cards, panels, overlays — they lift off the cream by turning white |
|
|
38
|
-
| `foreground` | charcoal `#111111` | all primary ink, headlines, and neutral/secondary button labels |
|
|
39
|
-
| `muted` | warm cream `#ebe7e1` | hover rows, subtle fills, quiet panel bands (surface-2) |
|
|
40
|
-
| `muted-foreground` | ink-muted `#626260` | labels, captions, secondary text, inactive tabs |
|
|
41
|
-
| `secondary` | warm cream `#ebe7e1` | secondary button fill — ink label on cream, 1px `border` |
|
|
42
|
-
| `border` / `input` | warm hairline `#d3cec6` | every separator, grid line, and field edge — a soft warm gray, not an ink line |
|
|
43
|
-
| `primary` | Fin Orange `#ff5600` | the single primary action per surface; active nav; the one reserved voltage |
|
|
44
|
-
| `accent` | deep cream `#e6e0d6` | selected/hovered rows and nav — Intercom selects by a warm-neutral shift, not by colour |
|
|
45
|
-
| `ring` | Fin Orange `#ff5600` | the focus outline — unmistakable, because keyboard-first |
|
|
46
|
-
| `destructive` | error red `#c41c1c` | destructive actions and error state only |
|
|
47
|
-
| `success` / `warning` | green `#0bdf50` / amber `#d97706` | status signalling only, never chrome |
|
|
48
|
-
|
|
49
|
-
Charcoal is Intercom's marketing primary because a marketing page carries many CTAs; the operator
|
|
50
|
-
reading has one primary action per surface, so it earns the reserved orange, and charcoal stays the
|
|
51
|
-
neutral ink for secondary actions. Brand Blue (`#0007cb`) and the pure-black quote strip are marketing
|
|
52
|
-
graces — they carry no operator role (see §7).
|
|
53
|
-
|
|
54
|
-
## 3 Typography
|
|
55
|
-
|
|
56
|
-
One sans, one mono. `font-sans` is Saans — Intercom's proprietary geometric sans (Inter at weight 500
|
|
57
|
-
the closest open substitute); the whole ramp rides it, display voice carried by size and modest weight,
|
|
58
|
-
not a second family. The signature is restraint: `font-weight-strong` stops at **500** — Saans at 500
|
|
59
|
-
reads confident without bold, and the brand never reaches past it. Negative tracking is the other
|
|
60
|
-
signature, scaling with size (the corpus runs -0.5px at 28px). `font-mono` is SaansMono (JetBrains Mono
|
|
61
|
-
the approximation) for IDs, codes, timestamps, and log lines; numeric columns render `tabular-nums`.
|
|
62
|
-
|
|
63
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
64
|
-
| --- | --- | --- | --- |
|
|
65
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
66
|
-
| h2 | section head | 20px / 1.3 | `font-weight-strong` · -0.015em |
|
|
67
|
-
| h3 | card / group head | 16px / 1.35 | `font-weight-strong` · -0.01em |
|
|
68
|
-
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
69
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
70
|
-
| eyebrow | section eyebrow | 13px / 1.3 | `font-weight-strong`, sentence case, no tracking |
|
|
71
|
-
| code | IDs, logs, amounts | 13px / 1.5 | `font-weight-normal` |
|
|
72
|
-
|
|
73
|
-
Body line-height relaxes to 1.5 — an editorial breath the category tightens away. Eyebrows are
|
|
74
|
-
**sentence case**, never the all-caps tracked label the operator default reaches for. Bump weight to
|
|
75
|
-
`font-weight-strong` (500) for emphasis; never bold. The 72px hero display stays behind.
|
|
76
|
-
|
|
77
|
-
## 4 Component Stylings
|
|
78
|
-
|
|
79
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
80
|
-
|
|
81
|
-
- **Button** — `primary`: filled Fin Orange on `primary-foreground` (white), `radius` (8px), no pill.
|
|
82
|
-
Secondary: `secondary` warm-cream fill, 1px `border`, `foreground` ink label. Ghost: transparent,
|
|
83
|
-
`accent` on hover.
|
|
84
|
-
- **Input** — `card` (white) fill, 1px `border` (`border-weight`), `radius`; focus draws the Fin Orange `ring` at 2px, no glow.
|
|
85
|
-
- **Card** — `card` white surface lifting off the cream canvas, 1px `border`, a larger corner step from
|
|
86
|
-
the radius scale; shadow only when a true overlay floats (`shadow-intensity`); inset by `density-inset`.
|
|
87
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
88
|
-
numeric columns; row selection tints `accent` (warm-neutral, not orange).
|
|
89
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
|
|
90
|
-
for content-heavy), beside the work, not over it.
|
|
91
|
-
- **Badge** — pill radius, hairline `border`, `muted`/status fill, sentence-case label; status badges
|
|
92
|
-
take `success` / `warning` / `destructive`, never `primary`.
|
|
93
|
-
|
|
94
|
-
## 5 Layout
|
|
95
|
-
|
|
96
|
-
Base spacing unit 8px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px
|
|
97
|
-
section step stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
98
|
-
`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (56px, the
|
|
99
|
-
corpus nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal cap
|
|
100
|
-
`modal-width-max`, forms `form-max-width`, tables full-width; card interior padding a calm 24px. Density
|
|
101
|
-
is governed globally by `density-tier` and stepped per archetype by the surface catalog.
|
|
102
|
-
|
|
103
|
-
## 6 Depth
|
|
104
|
-
|
|
105
|
-
Flat, surface-change-first. Hierarchy comes from the cream-to-white ladder and warm hairlines, not
|
|
106
|
-
shadow — Intercom resists drop shadows:
|
|
107
|
-
|
|
108
|
-
- **0 — canvas** `background` cream (`#f5f1ec`), no border.
|
|
109
|
-
- **1 — panel / card** `card` white lifting off the cream on a 1px `border`; the lift is the elevation.
|
|
110
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a single
|
|
111
|
-
faint `sm` shadow, over a scrim for modals. Rank is the white-on-cream shift, the border, and position.
|
|
112
|
-
|
|
113
|
-
Focus is a 2px Fin Orange `ring` outline (never a glow), visible on every interactive element. Three
|
|
114
|
-
z-levels: content, sticky chrome, overlay.
|
|
115
|
-
|
|
116
|
-
## 7 Do's & Don'ts
|
|
117
|
-
|
|
118
|
-
- **Do** anchor on the warm cream canvas — pure white reads as ordinary SaaS; the cream is the brand.
|
|
119
|
-
- **Do** lift panels and cards onto white (`card`) off the cream — the surface change is the depth.
|
|
120
|
-
- **Do** reserve Fin Orange (`primary`) for the single most important action; everything else is
|
|
121
|
-
charcoal ink or status.
|
|
122
|
-
- **Do** keep corners modest (`radius` 8px on buttons/inputs, the larger step on cards), write eyebrows
|
|
123
|
-
in sentence case, apply `tabular-nums` to numeric columns and `font-mono` to IDs/codes/timestamps.
|
|
124
|
-
- **Don't** use pure white as the canvas, or add drop shadows to floating cards.
|
|
125
|
-
- **Don't** spread Fin Orange — no orange section fills, no orange on secondary actions, no second
|
|
126
|
-
chromatic accent. The report palette stays in charts; status uses `success` / `warning` / `destructive`.
|
|
127
|
-
- **Don't** bold — Saans stops at weight 500; emphasise by weight, never a heavier cut or a size jump.
|
|
128
|
-
- **Don't** write all-caps tracked eyebrows, pill the primary CTA, or pull the 72px hero, the black
|
|
129
|
-
quote strip, or the product-mockup rhythm into operator chrome.
|
|
130
|
-
|
|
131
|
-
## 8 Responsive
|
|
132
|
-
|
|
133
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
134
|
-
|
|
135
|
-
| Breakpoint | What changes |
|
|
136
|
-
| --- | --- |
|
|
137
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
138
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow; card grids drop to 2-up |
|
|
139
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side; card grids 3-up |
|
|
140
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; the cream breathing widens |
|
|
141
|
-
|
|
142
|
-
## 9 Agent Prompt Guide
|
|
143
|
-
|
|
144
|
-
Directives the emitting agent follows verbatim. This brand is calm and editorial; keep it restrained
|
|
145
|
-
for operator work.
|
|
146
|
-
|
|
147
|
-
- Reach for the warm cream canvas first — never pure white; the cream tint is Intercom.
|
|
148
|
-
- Lift panels and cards by turning them white on the cream, not by casting a shadow.
|
|
149
|
-
- Accent only the primary action in Fin Orange (`primary`). If two things want the accent, one is not
|
|
150
|
-
primary. Neutral and secondary actions are charcoal ink on cream.
|
|
151
|
-
- Type stays Saans (Inter fallback) at weight 500 for emphasis and 400 for body — never bold. Eyebrows
|
|
152
|
-
are sentence case, never all-caps tracked; page titles carry negative tracking.
|
|
153
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`. Every workflow
|
|
154
|
-
completes from the keyboard; the Fin Orange `ring` focus outline is always visible.
|
|
155
|
-
- Stay flat — the cream-to-white ladder and warm hairlines before shadow; reach for the one faint tier
|
|
156
|
-
only for a real overlay.
|
|
157
|
-
- One accent. The report palette (`chart-*`) is for charts only; Brand Blue and the black quote strip
|
|
158
|
-
are not operator colors. Leave the hero, the product-mockup rhythm, and the 96px breathing behind.
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Kraken
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Kraken — the operator reading
|
|
9
|
-
|
|
10
|
-
The operator reading of Kraken's brand — a clean, trustworthy crypto-exchange look built on a
|
|
11
|
-
commanding purple. Kraken's own surfaces are marketing-editorial: a Kraken-Brand display face at
|
|
12
|
-
hero scale (48/36/28px, weight 700, hard negative tracking) over a pure-white canvas. This entry
|
|
13
|
-
keeps what survives at operator scale — the white canvas, the single commanding Kraken Purple
|
|
14
|
-
accent, the cool near-black ink, the cool blue-gray neutral field, the firm 12px rounded-not-pill
|
|
15
|
-
geometry, the whisper-level shadows, the negative-tracking type voice — and leaves the hero-scale
|
|
16
|
-
display behind. Purple reads commanding in marketing; at operator scale it stays the one reserved
|
|
17
|
-
accent.
|
|
18
|
-
|
|
19
|
-
## 1 Visual Theme
|
|
20
|
-
|
|
21
|
-
Light by default; dark is opt-in. Flat: hierarchy comes from cool hairline `border`, type weight, and
|
|
22
|
-
color contrast — never decorative shadow (the brand's shadows are whisper-level). A single accent —
|
|
23
|
-
Kraken Purple `primary` (`#7132f5`) — commands the one action that matters, active nav, and the inline
|
|
24
|
-
brand link. Ink is a cool near-black `foreground` (`#101114`) on a pure-white `background` (`#ffffff`);
|
|
25
|
-
the neutral field is a cool blue-gray ladder (`#686b82` → `#9497a9` → `#dedee5`) that reads
|
|
26
|
-
engineered, not flatly warm. The geometry is firmly rounded — 12px controls, never a pill. Density is
|
|
27
|
-
`standard`; the anchor surface is a white canvas beside a faintly cool `sidebar`.
|
|
28
|
-
|
|
29
|
-
## 2 Color Roles
|
|
30
|
-
|
|
31
|
-
Light values. One accent: `primary` is the only chromatic hue that carries brand meaning; the
|
|
32
|
-
positive/negative trading hues speak status only.
|
|
33
|
-
|
|
34
|
-
| Role | Value | Allowed where |
|
|
35
|
-
| --- | --- | --- |
|
|
36
|
-
| `background` / `card` / `popover` | pure white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
|
|
37
|
-
| `foreground` | cool near-black `#101114` | all primary ink and headings |
|
|
38
|
-
| `muted` | faint cool gray `#f2f2f5` | hover rows, subtle fills, quiet bands |
|
|
39
|
-
| `secondary` | soft cool gray `#f6f6f8` | secondary button fill, one step off the canvas |
|
|
40
|
-
| `muted-foreground` | cool gray `#686b82` | labels, captions, secondary running text (dims to silver-blue `#9497a9` for the quietest meta) |
|
|
41
|
-
| `border` / `input` | cool hairline `#dedee5` | every separator, grid line, and field edge — the highest-frequency token |
|
|
42
|
-
| `primary` | Kraken Purple `#7132f5` (dark `#5741d8`, deep `#5b1ecf`) | the one primary action; active nav; the inline brand link — reserved |
|
|
43
|
-
| `accent` | purple wash `#ebe5fe` | selected/hovered rows and nav — a light wash of `primary`, on-accent surfaces only |
|
|
44
|
-
| `ring` | `primary` purple | the focus outline — inputs focus to a 2px Kraken Purple edge |
|
|
45
|
-
| `destructive` | sell/down red `#cf2e3f` | destructive actions, error state, and down-moves |
|
|
46
|
-
| `success` | positive green `#149e61` | success status and up-moves (badge text darkens to `#026b3f`) |
|
|
47
|
-
| `warning` | amber `#e08c0a` | caution status only — never a chrome fill |
|
|
48
|
-
|
|
49
|
-
Kraken Purple has documented dark (`#5741d8`) and deep (`#5b1ecf`) variants for outlined edges and
|
|
50
|
-
press states, and a 16%-alpha subtle fill — but it stays the single scarce accent (§7); the trading
|
|
51
|
-
up/down hues live only in figures and status.
|
|
52
|
-
|
|
53
|
-
## 3 Typography
|
|
54
|
-
|
|
55
|
-
One sans, one mono. `font-sans` is IBM Plex Sans — the corpus's own documented fallback for the
|
|
56
|
-
proprietary Kraken-Brand/Kraken-Product pair; the single sans serves UI, body, headings, and labels,
|
|
57
|
-
with heading weight and the negative tracking carrying the display voice. `font-mono` is IBM Plex Mono
|
|
58
|
-
— the fintech number voice for asset prices, percent changes, IDs, and timestamps. Numeric columns
|
|
59
|
-
render `tabular-nums` so figures align down a column.
|
|
60
|
-
|
|
61
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
62
|
-
| --- | --- | --- | --- |
|
|
63
|
-
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
64
|
-
| h2 | section head | 20px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
-
| h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
|
|
66
|
-
| body | UI + prose | 14px / 1.45 | `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`, uppercase |
|
|
69
|
-
| number | table figures, prices | 14px / 1.4 · 500 | `font-mono`, `tabular-nums` |
|
|
70
|
-
|
|
71
|
-
The corpus's signature — the Kraken-Brand display at 48/36/28px, weight 700, with `-1px` / `-0.5px`
|
|
72
|
-
tracking — is a marketing hero and stays behind; at operator heading scale the weight steps to
|
|
73
|
-
`font-weight-strong` (600) while the negative tracking carries.
|
|
74
|
-
|
|
75
|
-
## 4 Component Stylings
|
|
76
|
-
|
|
77
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
78
|
-
|
|
79
|
-
- **Button** — `primary`: filled Kraken Purple on `primary-foreground`, `radius` (12px), no pill.
|
|
80
|
-
Outlined: `background` fill, 1px `primary`-dark `border`, `primary` text. Subtle: the 16% purple
|
|
81
|
-
wash (`accent`) with `primary` text. Secondary: `secondary` gray fill, `foreground`.
|
|
82
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
|
|
83
|
-
2px Kraken Purple edge, no glow.
|
|
84
|
-
- **Card** — `card` surface on a 1px `border`, `radius`; shadow only when a card must lift off the
|
|
85
|
-
canvas, and then only the whisper tier.
|
|
86
|
-
- **Table / asset row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection
|
|
87
|
-
tints `accent`; price/amount cells take `font-mono` + `tabular-nums`; direction cells take `success`
|
|
88
|
-
(up) / `destructive` (down) as text color, never a fill.
|
|
89
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
|
|
90
|
-
for content-heavy), beside the work, not over it.
|
|
91
|
-
- **Badge** — hairline `border`, `muted` / status fill at low alpha, uppercase caption; status badges
|
|
92
|
-
take `success` / `warning` / `destructive`, never `primary` (corpus badges: success green on a 16%
|
|
93
|
-
wash, neutral gray on a 12% wash).
|
|
94
|
-
|
|
95
|
-
## 5 Layout
|
|
96
|
-
|
|
97
|
-
Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the corpus's odd
|
|
98
|
-
marketing steps — 3/5/6/13/15/25 — stay behind). Shell dimensions map one-to-one to the layout
|
|
99
|
-
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
|
|
100
|
-
panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
|
|
101
|
-
tables full-width. Density is governed globally by `density-tier` and stepped per archetype by the
|
|
102
|
-
surface catalog — never by absolute overrides; the layout reads clean and calm, not cramped.
|
|
103
|
-
|
|
104
|
-
## 6 Depth
|
|
105
|
-
|
|
106
|
-
Flat, hairline-first. Hierarchy comes from the surface ladder and cool hairlines, not shadow:
|
|
107
|
-
|
|
108
|
-
- **0 — canvas** `background` (`#ffffff`), no border.
|
|
109
|
-
- **1 — panel / card** `card` on a 1px `border`; rank reads by hairline and position, not brightness.
|
|
110
|
-
The whisper micro shadow (`rgba(16,24,40,0.04) 0 1px 4px`) lifts a card only when it must.
|
|
111
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the soft
|
|
112
|
-
subtle tier (`rgba(0,0,0,0.03) 0 4px 24px`); no level stacks a heavier shadow to signal rank.
|
|
113
|
-
|
|
114
|
-
Focus is a 2px `ring` (Kraken Purple) outline, never a glow, on every interactive element; three
|
|
115
|
-
z-levels: content, sticky chrome, overlay.
|
|
116
|
-
|
|
117
|
-
## 7 Do's & Don'ts
|
|
118
|
-
|
|
119
|
-
- **Do** reserve `primary` (Kraken Purple) for the single most important action, active nav, and inline
|
|
120
|
-
brand links. Commanding on marketing, scarce on an operator surface.
|
|
121
|
-
- **Do** keep controls at 12px `radius` — firmly rounded, never a pill; badges and chips may step down
|
|
122
|
-
to 6–8px.
|
|
123
|
-
- **Do** carry every figure in `font-mono` with `tabular-nums`; direction rides `success` /
|
|
124
|
-
`destructive` as text color, never a fill.
|
|
125
|
-
- **Don't** introduce a second brand accent, and never reach for a purple outside the defined scale
|
|
126
|
-
(`#7132f5` / `#5741d8` / `#5b1ecf`) — off-scale purples read off-brand.
|
|
127
|
-
- **Don't** pill the primary CTA — 12px is the button ceiling; pill radius is for badges only.
|
|
128
|
-
- **Don't** signal elevation with heavy or stacked drop shadows — the system has two whisper tiers and
|
|
129
|
-
nothing louder.
|
|
130
|
-
|
|
131
|
-
## 8 Responsive
|
|
132
|
-
|
|
133
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
134
|
-
|
|
135
|
-
| Breakpoint | What changes |
|
|
136
|
-
| --- | --- |
|
|
137
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; asset rows stack ticker over price |
|
|
138
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
139
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
140
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
141
|
-
|
|
142
|
-
## 9 Agent Prompt Guide
|
|
143
|
-
|
|
144
|
-
Directives the emitting agent follows verbatim:
|
|
145
|
-
|
|
146
|
-
- Anchor on the pure-white canvas; accent only the primary action, active nav, and inline links in
|
|
147
|
-
Kraken Purple. If two things want the purple, one is not primary.
|
|
148
|
-
- Keep controls at 12px `radius` — firmly rounded, never a pill. Badges and chips step down to 6–8px.
|
|
149
|
-
- Every numeric column is `tabular-nums` and every price / ID / timestamp is `font-mono`; direction and
|
|
150
|
-
status ride `success` / `destructive` as text color, never a fill.
|
|
151
|
-
- Stay flat — cool hairline and the surface ladder before any shadow; reach past the two whisper tiers
|
|
152
|
-
only for a true overlay. Emphasise by weight, not size; carry the negative `heading-tracking` on
|
|
153
|
-
headings.
|
|
154
|
-
- Leave the marketing skin behind: the Kraken-Brand hero display at 48/36/28px weight 700 stays behind.
|
|
155
|
-
What carries: the palette, its cool temperature, the single commanding purple, the firm 12px rounded
|
|
156
|
-
geometry, the whisper-shadow depth, and the tabular fintech number voice.
|