@nurix/etna 0.19.49 → 0.19.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/apollo/harness.json +2 -2
- package/data/harnesses/apollo/hooks/hooks.json +3 -1
- package/data/harnesses/apollo/skills/design/SKILL.md +55 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +8 -4
- package/data/harnesses/apollo/skills/design/references/content.md +5 -5
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/apollo/skills/design/references/intake.md +11 -7
- package/data/harnesses/apollo/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +26 -6
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/hooks/hooks.json +3 -1
- package/data/harnesses/code/skills/design/SKILL.md +55 -29
- package/data/harnesses/code/skills/design/references/compose.md +8 -4
- package/data/harnesses/code/skills/design/references/content.md +5 -5
- package/data/harnesses/code/skills/design/references/existing-apps.md +1 -1
- package/data/harnesses/code/skills/design/references/intake.md +11 -7
- package/data/harnesses/code/skills/design/references/object-pass.md +1 -1
- package/data/harnesses/code/skills/design/references/ship-gate.md +3 -3
- package/data/harnesses/code/skills/design/scripts/select-chart.mjs +26 -6
- package/package.json +2 -2
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/apollo/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/apollo/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/apollo/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/apollo/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/apollo/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/apollo/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/apollo/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/apollo/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/apollo/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/apollo/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/apollo/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/apollo/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/apollo/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/apollo/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/apollo/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/apollo/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/apollo/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/apollo/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/apollo/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/apollo/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/apollo/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/apollo/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/apollo/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/apollo/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/apollo/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/apollo/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/apollo/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/apollo/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/apollo/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/apollo/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/apollo/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/apollo/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/apollo/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/apollo/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/apollo/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/apollo/skills/design/design-md/variants/warm-approachable.md +0 -216
- package/data/harnesses/code/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/code/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/code/skills/design/data/chart-styling/Readme.md +0 -33
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datadog-classic-six-aligned.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/econ-red-rule-horizontal.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/grafana-dark-threshold-bands.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/material-rounded-explicit-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/plot-currentcolor-inherit.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/saas-gradient-glow-area.md +0 -19
- package/data/harnesses/code/skills/design/data/chart-styling/shadcn-composable-css-vars.md +0 -19
- package/data/harnesses/code/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/code/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/code/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/code/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/code/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/code/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/code/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/code/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/code/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/code/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/code/skills/design/data/color/accent-presets.md +0 -90
- package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md +0 -91
- package/data/harnesses/code/skills/design/data/color/arc-peach-play.md +0 -90
- package/data/harnesses/code/skills/design/data/color/attio-hunter-teal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/carbon-cyan-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/clay-parchment.md +0 -90
- package/data/harnesses/code/skills/design/data/color/duolingo-feather.md +0 -90
- package/data/harnesses/code/skills/design/data/color/geist-mono-signal.md +0 -90
- package/data/harnesses/code/skills/design/data/color/linear-graphite-violet.md +0 -90
- package/data/harnesses/code/skills/design/data/color/mercury-onyx-cobalt.md +0 -90
- package/data/harnesses/code/skills/design/data/color/notion-paper-ink.md +0 -90
- package/data/harnesses/code/skills/design/data/color/radix-slate-iris.md +0 -90
- package/data/harnesses/code/skills/design/data/color/raycast-void-spectrum.md +0 -90
- package/data/harnesses/code/skills/design/data/color/spectrum-celery-fuchsia.md +0 -90
- package/data/harnesses/code/skills/design/data/color/stripe-blurple-ruby.md +0 -90
- package/data/harnesses/code/skills/design/data/color/superhuman-cod-picton.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/operations-review/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/operations-review/corpus.md +0 -87
- package/data/harnesses/code/skills/design/data/corpora/operations-review/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/corpus.md +0 -83
- package/data/harnesses/code/skills/design/data/corpora/procurement-approvals/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/companies.csv +0 -15
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/corpus.md +0 -89
- package/data/harnesses/code/skills/design/data/corpora/revenue-analytics/people.csv +0 -25
- package/data/harnesses/code/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/code/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/code/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/code/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/code/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/code/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md +0 -18
- package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md +0 -16
- package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md +0 -16
- package/data/harnesses/code/skills/design/data/iconography.md +0 -199
- package/data/harnesses/code/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/code/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/code/skills/design/data/tells.csv +0 -34
- package/data/harnesses/code/skills/design/data/typography/anton-work-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/archivo-black-archivo.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/bitter-karla.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/dm-serif-dm-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/fraunces-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/geist-geist-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/hubot-sans-mona-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/ibm-plex-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/instrument-serif-instrument-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/inter-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/libre-baskerville-libre-franklin.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/newsreader-inter.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/playfair-display-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/public-sans-operator-single-family.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/sohne-inter-fintech.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/source-serif-source-sans.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/space-grotesk-work-sans-space-mono.md +0 -17
- package/data/harnesses/code/skills/design/data/typography/spectral-manrope.md +0 -17
- package/data/harnesses/code/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/code/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/code/skills/design/design-md/SCHEMA.md +0 -179
- package/data/harnesses/code/skills/design/design-md/index.csv +0 -67
- package/data/harnesses/code/skills/design/design-md/library/airbnb.md +0 -207
- package/data/harnesses/code/skills/design/design-md/library/airtable.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/anthropic-claude.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/apple.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/binance.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/bmw.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/cal.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/clay.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/clickhouse.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/cohere.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/coinbase.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/composio.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/cursor.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/elevenlabs.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/expo.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/figma.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/framer.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/hashicorp.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/ibm.md +0 -205
- package/data/harnesses/code/skills/design/design-md/library/intercom.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/kraken.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/linear-app.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/lovable.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/meta.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/minimax.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/mintlify.md +0 -210
- package/data/harnesses/code/skills/design/design-md/library/miro.md +0 -209
- package/data/harnesses/code/skills/design/design-md/library/mistral-ai.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/mongodb.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/notion.md +0 -204
- package/data/harnesses/code/skills/design/design-md/library/nvidia.md +0 -215
- package/data/harnesses/code/skills/design/design-md/library/ollama.md +0 -213
- package/data/harnesses/code/skills/design/design-md/library/opencode-ai.md +0 -216
- package/data/harnesses/code/skills/design/design-md/library/posthog.md +0 -218
- package/data/harnesses/code/skills/design/design-md/library/raycast.md +0 -214
- package/data/harnesses/code/skills/design/design-md/library/replicate.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/resend.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/revolut.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/runwayml.md +0 -203
- package/data/harnesses/code/skills/design/design-md/library/sanity.md +0 -200
- package/data/harnesses/code/skills/design/design-md/library/sentry.md +0 -201
- package/data/harnesses/code/skills/design/design-md/library/shopify.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/slack.md +0 -202
- package/data/harnesses/code/skills/design/design-md/library/spacex.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/spotify.md +0 -206
- package/data/harnesses/code/skills/design/design-md/library/stripe.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/supabase.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/superhuman.md +0 -194
- package/data/harnesses/code/skills/design/design-md/library/tesla.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/theverge.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/together-ai.md +0 -193
- package/data/harnesses/code/skills/design/design-md/library/uber.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/vercel.md +0 -195
- package/data/harnesses/code/skills/design/design-md/library/voltagent.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/warp.md +0 -196
- package/data/harnesses/code/skills/design/design-md/library/webflow.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wired.md +0 -197
- package/data/harnesses/code/skills/design/design-md/library/wise.md +0 -198
- package/data/harnesses/code/skills/design/design-md/library/x-ai.md +0 -199
- package/data/harnesses/code/skills/design/design-md/library/zapier.md +0 -198
- package/data/harnesses/code/skills/design/design-md/nurix.md +0 -214
- package/data/harnesses/code/skills/design/design-md/variants/editorial-luxury.md +0 -184
- package/data/harnesses/code/skills/design/design-md/variants/expressive-saas.md +0 -216
- package/data/harnesses/code/skills/design/design-md/variants/quiet-premium.md +0 -211
- package/data/harnesses/code/skills/design/design-md/variants/terse-dense-operator.md +0 -212
- package/data/harnesses/code/skills/design/design-md/variants/warm-approachable.md +0 -216
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: figma
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [design-tools, collaboration, creative]
|
|
6
|
-
keywords: [monochrome, black-white, magenta, flat, warm-paper, mono-labels]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 figma entry (2026-07-04); 2026-07-12 re-audit of Figma public brand; Inter substitutes the proprietary Figma Sans (matching its fine variable-weight axis); Space Mono substitutes Figma Mono; light destructive deepened one step for body contrast"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# figma — an architect's white drafting table with one magenta sticky tab
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An architect's drafting table: white sheet, pure black fineliner, warm off-white trace
|
|
16
|
-
paper for the panels, and a single magenta sticky tab marking the live drawing. Light by
|
|
17
|
-
default; emphatically flat — hierarchy is hairline `border`, type weight, and the
|
|
18
|
-
black/white contrast itself, never heavy shadow. Monochrome spine, joyful edges: the
|
|
19
|
-
pastels are demoted to chart encodings. The dark theme is the studio's night board —
|
|
20
|
-
warm-neutral charcoal rungs, the fineliner flipped to white, the magenta tab unmoved.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Black ink `foreground` on the white `background`, warm off-white for `muted` and the
|
|
24
|
-
`sidebar` ground. `primary` fills black — the brand's own primary is achromatic — so
|
|
25
|
-
magenta stays a single-shot pop: the focus `ring`, active indicators, and the pale
|
|
26
|
-
`accent` selection tint. The pastel color blocks are marketing surfaces, reappearing only
|
|
27
|
-
as `chart-*`. Status hues speak only status; the light `destructive` is the brand red
|
|
28
|
-
deepened one step for body contrast.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (the open substitute for Figma Sans, matching its fine variable-weight axis) over
|
|
32
|
-
Space Mono (the open substitute for Figma Mono — IDs, codes, timestamps, and the
|
|
33
|
-
uppercase eyebrow labels, never body). One voice that flexes by weight, not a
|
|
34
|
-
multi-family stack; the poster-scale display and its aggressive tracking stay behind.
|
|
35
|
-
Register scope: display register for page titles, empty states, and auth; mono for data
|
|
36
|
-
and eyebrow labels; numeric columns `tabular-nums`.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-sm` (6px), black `primary` fill, no pill — but icon-only buttons stay
|
|
40
|
-
circular, the one marketing shape that carries. Inputs on `background` with hairline;
|
|
41
|
-
focus draws the magenta `ring` at 2px, no fill change. Cards on hairline, large feature
|
|
42
|
-
cards may take `radius-lg`. Table rows with `muted` hover, selection tinting `accent`
|
|
43
|
-
with a magenta ring indicator. Detail opens in the side panel; badges take hairline,
|
|
44
|
-
`muted` or status fills, uppercase mono captions — never `primary`, never magenta.
|
|
45
|
-
|
|
46
|
-
## 5 Layout
|
|
47
|
-
8px base (Figma's grid); sidebar 240/48px on the warm off-white ground; topbar 56px (the
|
|
48
|
-
brand's own nav height); side panel 440/640px; content max 1360px. Density standard,
|
|
49
|
-
stepping denser per archetype; the 96px section rhythm stays behind.
|
|
50
|
-
|
|
51
|
-
## 6 Depth
|
|
52
|
-
Light: the surface ladder, hairlines, and black/white contrast carry rank; overlays earn
|
|
53
|
-
the one soft warm-tinted tier. Dark: the surface ladder does depth — `background` 0.18 L,
|
|
54
|
-
`surface-raised` +0.05, `surface-overlay` +0.10, warm-neutral hue held near 100. The 2px
|
|
55
|
-
magenta `ring` is the one chromatic depth signal, constantly visible to keyboard users.
|
|
56
|
-
|
|
57
|
-
## 7 Motion
|
|
58
|
-
Precise, tool-like. Named moments: `tab-flick` (selection indicator slide, 120ms),
|
|
59
|
-
`panel-slide` (side panel, 220ms, interruptible), `board-fade` (page content, 140ms).
|
|
60
|
-
Physicality is granted only to auth and first-run empty states; canvas-like surfaces
|
|
61
|
-
never bounce; nothing animates on keyboard-initiated actions.
|
|
62
|
-
|
|
63
|
-
## 8 Iconography & Charts
|
|
64
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default; icon-only buttons
|
|
65
|
-
circular. Charts: hairline axes, no gridline fills; the categorical ramp spends the
|
|
66
|
-
demoted marketing pastels as encodings — lilac, mint, coral, navy, pink (`chart-1..5`);
|
|
67
|
-
tooltips on `surface-overlay` with mono numerals.
|
|
68
|
-
|
|
69
|
-
## 9 Voice
|
|
70
|
-
Friendly precision — a tool that likes its users but respects their time. "New project" ·
|
|
71
|
-
"All caught up — 4 files updated today" · "You can't move this file; ask an editor for
|
|
72
|
-
access."
|
|
73
|
-
|
|
74
|
-
## 10 Do's & Don'ts
|
|
75
|
-
Do wear the spine: black on white, warm off-white panels, hairline depth. Do keep magenta
|
|
76
|
-
single-shot — the focus ring and small active indicators, never a fill or body text. Do
|
|
77
|
-
keep icon-only buttons circular. Don't reach for the pastel blocks as chrome — charts
|
|
78
|
-
only. Don't pill the CTA — pills stay on the marketing site. Don't introduce a second
|
|
79
|
-
chromatic accent or signal elevation with heavy shadows.
|
|
80
|
-
|
|
81
|
-
## 11 Responsive
|
|
82
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
83
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane list+detail
|
|
84
|
-
holds. 1440: forms cap; tables and dashboards use the full width.
|
|
85
|
-
|
|
86
|
-
## 12 Agent Prompt Guide
|
|
87
|
-
Primary action fills black; if two things want the black fill, one is not primary.
|
|
88
|
-
Magenta is single-shot: ring and active indicators only. Weight, not scale, carries
|
|
89
|
-
hierarchy — bump one step, never resize. Eyebrows are uppercase mono. The pastels live
|
|
90
|
-
only in charts. Dark is authored — consult the block, never invert the drafting sheet.
|
|
91
|
-
|
|
92
|
-
```yaml design-values
|
|
93
|
-
color:
|
|
94
|
-
light:
|
|
95
|
-
background: oklch(0.99 0.005 100)
|
|
96
|
-
foreground: oklch(0.15 0.005 100)
|
|
97
|
-
card: oklch(0.995 0.005 100)
|
|
98
|
-
card-foreground: oklch(0.15 0.005 100)
|
|
99
|
-
popover: oklch(0.995 0.005 100)
|
|
100
|
-
popover-foreground: oklch(0.15 0.005 100)
|
|
101
|
-
primary: oklch(0.15 0.005 100)
|
|
102
|
-
primary-foreground: oklch(0.99 0.005 100)
|
|
103
|
-
secondary: oklch(0.965 0.005 106)
|
|
104
|
-
secondary-foreground: oklch(0.15 0.005 100)
|
|
105
|
-
muted: oklch(0.965 0.005 106)
|
|
106
|
-
muted-foreground: oklch(0.5 0.006 100)
|
|
107
|
-
accent: oklch(0.944 0.033 351)
|
|
108
|
-
accent-foreground: oklch(0.38 0.16 2)
|
|
109
|
-
destructive: oklch(0.577 0.205 25)
|
|
110
|
-
destructive-foreground: oklch(0.98 0.008 25)
|
|
111
|
-
success: oklch(0.636 0.172 149)
|
|
112
|
-
warning: oklch(0.76 0.142 60)
|
|
113
|
-
border: oklch(0.925 0.005 100)
|
|
114
|
-
input: oklch(0.925 0.005 100)
|
|
115
|
-
ring: oklch(0.673 0.233 2)
|
|
116
|
-
surface-raised: oklch(0.985 0.005 100)
|
|
117
|
-
surface-overlay: oklch(0.995 0.005 100)
|
|
118
|
-
chart-1: oklch(0.62 0.13 300)
|
|
119
|
-
chart-2: oklch(0.7 0.11 165)
|
|
120
|
-
chart-3: oklch(0.68 0.14 35)
|
|
121
|
-
chart-4: oklch(0.45 0.1 265)
|
|
122
|
-
chart-5: oklch(0.7 0.18 2)
|
|
123
|
-
sidebar: oklch(0.976 0.005 106)
|
|
124
|
-
sidebar-foreground: oklch(0.15 0.005 100)
|
|
125
|
-
sidebar-primary: oklch(0.15 0.005 100)
|
|
126
|
-
sidebar-primary-foreground: oklch(0.99 0.005 100)
|
|
127
|
-
sidebar-accent: oklch(0.944 0.033 351)
|
|
128
|
-
sidebar-accent-foreground: oklch(0.3 0.1 2)
|
|
129
|
-
sidebar-border: oklch(0.925 0.005 100)
|
|
130
|
-
sidebar-ring: oklch(0.673 0.233 2)
|
|
131
|
-
dark:
|
|
132
|
-
background: oklch(0.18 0.005 100)
|
|
133
|
-
foreground: oklch(0.95 0.005 100)
|
|
134
|
-
card: oklch(0.22 0.006 100)
|
|
135
|
-
card-foreground: oklch(0.95 0.005 100)
|
|
136
|
-
popover: oklch(0.28 0.006 100)
|
|
137
|
-
popover-foreground: oklch(0.95 0.005 100)
|
|
138
|
-
primary: oklch(0.95 0.005 100)
|
|
139
|
-
primary-foreground: oklch(0.18 0.005 100)
|
|
140
|
-
secondary: oklch(0.26 0.006 100)
|
|
141
|
-
secondary-foreground: oklch(0.92 0.005 100)
|
|
142
|
-
muted: oklch(0.25 0.006 100)
|
|
143
|
-
muted-foreground: oklch(0.72 0.008 100)
|
|
144
|
-
accent: oklch(0.32 0.05 355)
|
|
145
|
-
accent-foreground: oklch(0.95 0.01 355)
|
|
146
|
-
destructive: oklch(0.64 0.19 25)
|
|
147
|
-
destructive-foreground: oklch(0.14 0.02 25)
|
|
148
|
-
success: oklch(0.7 0.15 152)
|
|
149
|
-
warning: oklch(0.78 0.13 65)
|
|
150
|
-
border: oklch(0.29 0.006 100)
|
|
151
|
-
input: oklch(0.29 0.006 100)
|
|
152
|
-
ring: oklch(0.71 0.21 2)
|
|
153
|
-
surface-raised: oklch(0.23 0.006 100)
|
|
154
|
-
surface-overlay: oklch(0.28 0.006 100)
|
|
155
|
-
chart-1: oklch(0.7 0.13 300)
|
|
156
|
-
chart-2: oklch(0.76 0.11 165)
|
|
157
|
-
chart-3: oklch(0.74 0.13 35)
|
|
158
|
-
chart-4: oklch(0.62 0.1 265)
|
|
159
|
-
chart-5: oklch(0.75 0.19 2)
|
|
160
|
-
sidebar: oklch(0.16 0.005 100)
|
|
161
|
-
sidebar-foreground: oklch(0.92 0.005 100)
|
|
162
|
-
sidebar-primary: oklch(0.95 0.005 100)
|
|
163
|
-
sidebar-primary-foreground: oklch(0.18 0.005 100)
|
|
164
|
-
sidebar-accent: oklch(0.3 0.045 355)
|
|
165
|
-
sidebar-accent-foreground: oklch(0.94 0.01 355)
|
|
166
|
-
sidebar-border: oklch(0.25 0.006 100)
|
|
167
|
-
sidebar-ring: oklch(0.71 0.21 2)
|
|
168
|
-
typography:
|
|
169
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
170
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
171
|
-
mono: { family: "Space Mono", fallback: "ui-monospace, monospace", weights: [400, 700] }
|
|
172
|
-
ramp:
|
|
173
|
-
display: { size: 28px, line: 36px, weight: 600, family: display, tracking: -0.015em }
|
|
174
|
-
h1: { size: 24px, line: 31px, weight: 600, family: sans, tracking: -0.01em }
|
|
175
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
176
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
177
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
178
|
-
caption: { size: 12px, line: 16px, weight: 400, family: mono, tracking: 0.05em, transform: uppercase }
|
|
179
|
-
data: { size: 13px, line: 19px, weight: 400, family: mono, features: [tnum] }
|
|
180
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, timestamps, eyebrow-labels] }
|
|
181
|
-
elevation:
|
|
182
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
183
|
-
hairline: border
|
|
184
|
-
shadow:
|
|
185
|
-
overlay: "0 8px 28px oklch(0.25 0.01 100 / 0.1)"
|
|
186
|
-
popover: "0 4px 16px oklch(0.25 0.01 100 / 0.06)"
|
|
187
|
-
dark-ladder: { background: 0.18, raised: 0.23, overlay: 0.28, hue-held: 100 }
|
|
188
|
-
motion:
|
|
189
|
-
duration: { press: 120ms, fade: 140ms, panel: 220ms }
|
|
190
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
191
|
-
entrance-never: ease-in
|
|
192
|
-
identity-moments: [auth, first-run-empty]
|
|
193
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
194
|
-
charts:
|
|
195
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
196
|
-
sequential: { from: background, to: chart-4 }
|
|
197
|
-
diverging: { negative: destructive, mid: muted, positive: chart-2 }
|
|
198
|
-
layout: { base: 8px, sidebar: [240px, 48px], topbar: 56px, side-panel: [440px, 640px], content-max: 1360px }
|
|
199
|
-
```
|
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: framer
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [design-tools, web-builders, creative]
|
|
6
|
-
keywords: [dark, black, artboard, blue-signal, poster, tight-tracking]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 framer entry (2026-07-04); 2026-07-12 re-audit of Framer public brand; Inter (with its cv/ss character variants) is the brand's operator body voice, standing in for the hero-scale GT Walsheim; Geist Mono for data; the brand ships dark-only — the light theme here is the authored opt-in counterpart"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# framer — a blacked-out photo studio with one blue status light
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A photographer's blacked-out studio: near-black walls swallowing the edges, one white
|
|
16
|
-
poster pinned dead center, and a single blue status LED that means *recording*. Dark by
|
|
17
|
-
default and dark by identity — the brand ships no light mode; the light theme in the
|
|
18
|
-
block is the authored opt-in counterpart, a gallery print of the same poster. Hierarchy
|
|
19
|
-
rises through a three-step surface ladder — canvas, surface-1, surface-2 — with hairlines
|
|
20
|
-
and white ink against gray; never heavy shadow. Selection is lift, not color.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Pure-white ink `foreground` on the near-black `background`; hierarchy is binary — ink or
|
|
24
|
-
`muted-foreground`, no mid-tones between. `primary` is the high-contrast white button,
|
|
25
|
-
one per surface. Framer Blue lives in `ring`, links, and active indicators — a signal,
|
|
26
|
-
never a fill. `accent` is the surface-2 lift for hover and selection. The gradient hues
|
|
27
|
-
(violet, magenta, orange, coral) carry no chrome role — chart series only. Status hues
|
|
28
|
-
speak only status.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter (body, UI, headings — with its `cv01/cv05/cv09/cv11/ss03/ss07` character variants
|
|
32
|
-
on; they are the brand's body voice) over Geist Mono (IDs, codes, timestamps, logs). The
|
|
33
|
-
signature is tight tracking: headings run tighter-than-neutral, never the hero's -5%
|
|
34
|
-
extreme; the GT Walsheim display stays behind. Register scope: display register for page
|
|
35
|
-
titles, empty states, and auth; mono for data; numeric columns `tabular-nums` (Inter
|
|
36
|
-
carries `tnum`).
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-sm` (8px), white `primary` fill on the dark shell, no pill; secondary on
|
|
40
|
-
surface-1 with hairline. Inputs on `card` with hairline; focus draws the blue `ring` at
|
|
41
|
-
2px — the one chromatic moment in the field. Cards on surface-1 with hairline; a faint
|
|
42
|
-
light top-edge plus soft drop only when one truly floats. Table rows lift to `accent`
|
|
43
|
-
(surface-2) on selection, never a colored fill. Detail opens in the side panel; badges
|
|
44
|
-
take hairline with status fills — never `primary`, never the blue.
|
|
45
|
-
|
|
46
|
-
## 5 Layout
|
|
47
|
-
4px base (the marketing 5px rhythm normalizes to the operator ramp); sidebar 248/56px;
|
|
48
|
-
topbar 56px (the brand's nav height); side panel 440/640px; content max 1400px — the
|
|
49
|
-
poster composure kept, not terminal density.
|
|
50
|
-
|
|
51
|
-
## 6 Depth
|
|
52
|
-
The charcoal ladder is the depth system: `background` 0.15 L, `surface-raised` +0.06,
|
|
53
|
-
`surface-overlay` +0.12, cool hue held at 250; overlays add a light top-edge and one soft
|
|
54
|
-
blue-tinted drop against the near-black. No level stacks a heavier shadow to signal rank.
|
|
55
|
-
Focus is the 2px blue `ring` — the only chromatic depth signal; three z-levels: content,
|
|
56
|
-
chrome, overlay.
|
|
57
|
-
|
|
58
|
-
## 7 Motion
|
|
59
|
-
Poster-confident but brief — the tool that sells motion must not fidget. Named moments:
|
|
60
|
-
`surface-lift` (hover/selection rung step, 120ms), `panel-slide` (side panel, 260ms,
|
|
61
|
-
interruptible), `publish-press` (primary-action press, 120ms). Physicality is granted
|
|
62
|
-
only to auth and first-run empty states; nothing animates in tables or on any
|
|
63
|
-
keyboard-initiated action.
|
|
64
|
-
|
|
65
|
-
## 8 Iconography & Charts
|
|
66
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes on
|
|
67
|
-
the dark canvas, no gridline fills; the categorical ramp spends the demoted gradient
|
|
68
|
-
atmosphere as data — blue, violet, magenta, orange, coral (`chart-1..5`); tooltips on
|
|
69
|
-
`surface-overlay` with mono numerals.
|
|
70
|
-
|
|
71
|
-
## 9 Voice
|
|
72
|
-
Poster-terse: few words, high confidence, no exclamation. "Publish" · "Nothing queued —
|
|
73
|
-
the site is live" · "This breakpoint has unlinked overrides; review before publishing."
|
|
74
|
-
|
|
75
|
-
## 10 Do's & Don'ts
|
|
76
|
-
Do keep the base dark — the near-black canvas is the identity. Do keep Framer Blue a
|
|
77
|
-
signal: ring, links, active indicators; if the blue becomes a fill, the brand is
|
|
78
|
-
drifting. Do mark selection by surface lift, not tint. Do keep hierarchy binary — ink or
|
|
79
|
-
ink-muted, nothing between. Don't wash any section in a gradient — gradients were
|
|
80
|
-
marketing atmosphere. Don't pill operator buttons. Don't open detail in a modal when the
|
|
81
|
-
side panel fits.
|
|
82
|
-
|
|
83
|
-
## 11 Responsive
|
|
84
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
85
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane queue+detail
|
|
86
|
-
holds. 1440: forms cap; tables and dashboards use the full width. The dark theme holds at
|
|
87
|
-
every width.
|
|
88
|
-
|
|
89
|
-
## 12 Agent Prompt Guide
|
|
90
|
-
Build dark on the charcoal ladder — canvas, surface-1, surface-2 — with white ink and
|
|
91
|
-
gray muted. The one primary action is a white button. Blue only as signal. Track headings
|
|
92
|
-
tight; keep Inter's character variants on; every ID and timestamp in Geist Mono. Selected
|
|
93
|
-
is lift, not color. Light is the authored opt-in — consult the block, never invert.
|
|
94
|
-
|
|
95
|
-
```yaml design-values
|
|
96
|
-
color:
|
|
97
|
-
light:
|
|
98
|
-
background: oklch(0.985 0.005 250)
|
|
99
|
-
foreground: oklch(0.17 0.005 250)
|
|
100
|
-
card: oklch(0.995 0.005 250)
|
|
101
|
-
card-foreground: oklch(0.17 0.005 250)
|
|
102
|
-
popover: oklch(0.995 0.005 250)
|
|
103
|
-
popover-foreground: oklch(0.17 0.005 250)
|
|
104
|
-
primary: oklch(0.17 0.005 250)
|
|
105
|
-
primary-foreground: oklch(0.985 0.005 250)
|
|
106
|
-
secondary: oklch(0.945 0.006 250)
|
|
107
|
-
secondary-foreground: oklch(0.22 0.006 250)
|
|
108
|
-
muted: oklch(0.955 0.005 250)
|
|
109
|
-
muted-foreground: oklch(0.48 0.01 250)
|
|
110
|
-
accent: oklch(0.93 0.007 250)
|
|
111
|
-
accent-foreground: oklch(0.2 0.006 250)
|
|
112
|
-
destructive: oklch(0.577 0.21 25)
|
|
113
|
-
destructive-foreground: oklch(0.98 0.008 25)
|
|
114
|
-
success: oklch(0.63 0.17 150)
|
|
115
|
-
warning: oklch(0.66 0.15 70)
|
|
116
|
-
border: oklch(0.9 0.006 250)
|
|
117
|
-
input: oklch(0.9 0.006 250)
|
|
118
|
-
ring: oklch(0.62 0.18 249)
|
|
119
|
-
surface-raised: oklch(0.99 0.005 250)
|
|
120
|
-
surface-overlay: oklch(0.995 0.005 250)
|
|
121
|
-
chart-1: oklch(0.55 0.18 249)
|
|
122
|
-
chart-2: oklch(0.55 0.2 295)
|
|
123
|
-
chart-3: oklch(0.6 0.22 340)
|
|
124
|
-
chart-4: oklch(0.66 0.15 55)
|
|
125
|
-
chart-5: oklch(0.62 0.18 25)
|
|
126
|
-
sidebar: oklch(0.97 0.005 250)
|
|
127
|
-
sidebar-foreground: oklch(0.2 0.006 250)
|
|
128
|
-
sidebar-primary: oklch(0.17 0.005 250)
|
|
129
|
-
sidebar-primary-foreground: oklch(0.985 0.005 250)
|
|
130
|
-
sidebar-accent: oklch(0.93 0.007 250)
|
|
131
|
-
sidebar-accent-foreground: oklch(0.2 0.006 250)
|
|
132
|
-
sidebar-border: oklch(0.9 0.006 250)
|
|
133
|
-
sidebar-ring: oklch(0.62 0.18 249)
|
|
134
|
-
dark:
|
|
135
|
-
background: oklch(0.15 0.005 250)
|
|
136
|
-
foreground: oklch(0.97 0.005 250)
|
|
137
|
-
card: oklch(0.2 0.006 250)
|
|
138
|
-
card-foreground: oklch(0.97 0.005 250)
|
|
139
|
-
popover: oklch(0.27 0.007 250)
|
|
140
|
-
popover-foreground: oklch(0.95 0.005 250)
|
|
141
|
-
primary: oklch(0.97 0.005 250)
|
|
142
|
-
primary-foreground: oklch(0.15 0.005 250)
|
|
143
|
-
secondary: oklch(0.24 0.006 250)
|
|
144
|
-
secondary-foreground: oklch(0.93 0.005 250)
|
|
145
|
-
muted: oklch(0.24 0.006 250)
|
|
146
|
-
muted-foreground: oklch(0.7 0.008 250)
|
|
147
|
-
accent: oklch(0.27 0.007 250)
|
|
148
|
-
accent-foreground: oklch(0.95 0.005 250)
|
|
149
|
-
destructive: oklch(0.637 0.208 25)
|
|
150
|
-
destructive-foreground: oklch(0.14 0.02 25)
|
|
151
|
-
success: oklch(0.723 0.192 150)
|
|
152
|
-
warning: oklch(0.769 0.165 70)
|
|
153
|
-
border: oklch(0.28 0.007 250)
|
|
154
|
-
input: oklch(0.28 0.007 250)
|
|
155
|
-
ring: oklch(0.669 0.184 249)
|
|
156
|
-
surface-raised: oklch(0.21 0.006 250)
|
|
157
|
-
surface-overlay: oklch(0.27 0.007 250)
|
|
158
|
-
chart-1: oklch(0.669 0.184 249)
|
|
159
|
-
chart-2: oklch(0.6 0.2 295)
|
|
160
|
-
chart-3: oklch(0.65 0.22 340)
|
|
161
|
-
chart-4: oklch(0.72 0.16 55)
|
|
162
|
-
chart-5: oklch(0.68 0.18 25)
|
|
163
|
-
sidebar: oklch(0.13 0.005 250)
|
|
164
|
-
sidebar-foreground: oklch(0.93 0.005 250)
|
|
165
|
-
sidebar-primary: oklch(0.97 0.005 250)
|
|
166
|
-
sidebar-primary-foreground: oklch(0.15 0.005 250)
|
|
167
|
-
sidebar-accent: oklch(0.22 0.006 250)
|
|
168
|
-
sidebar-accent-foreground: oklch(0.92 0.005 250)
|
|
169
|
-
sidebar-border: oklch(0.24 0.006 250)
|
|
170
|
-
sidebar-ring: oklch(0.669 0.184 249)
|
|
171
|
-
typography:
|
|
172
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
173
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
174
|
-
mono: { family: "Geist Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
175
|
-
ramp:
|
|
176
|
-
display: { size: 28px, line: 33px, weight: 600, family: display, tracking: -0.025em }
|
|
177
|
-
h1: { size: 24px, line: 29px, weight: 600, family: sans, tracking: -0.02em }
|
|
178
|
-
h2: { size: 20px, line: 25px, weight: 600, family: sans, tracking: -0.015em }
|
|
179
|
-
body: { size: 15px, line: 21px, weight: 400, family: sans }
|
|
180
|
-
small: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
181
|
-
caption: { size: 13px, line: 16px, weight: 400, family: sans, tracking: 0.01em }
|
|
182
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
183
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, codes, timestamps, logs] }
|
|
184
|
-
elevation:
|
|
185
|
-
radius: { sm: 8px, md: 10px, lg: 14px }
|
|
186
|
-
hairline: border
|
|
187
|
-
shadow:
|
|
188
|
-
overlay: "0 10px 32px oklch(0.05 0.01 250 / 0.55)"
|
|
189
|
-
popover: "0 4px 16px oklch(0.05 0.01 250 / 0.4)"
|
|
190
|
-
dark-ladder: { background: 0.15, raised: 0.21, overlay: 0.27, hue-held: 250 }
|
|
191
|
-
motion:
|
|
192
|
-
duration: { press: 120ms, fade: 160ms, panel: 260ms }
|
|
193
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
194
|
-
entrance-never: ease-in
|
|
195
|
-
identity-moments: [auth, first-run-empty]
|
|
196
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
197
|
-
charts:
|
|
198
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
199
|
-
sequential: { from: background, to: chart-1 }
|
|
200
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
201
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1400px }
|
|
202
|
-
```
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: hashicorp
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [infra, devops, enterprise]
|
|
6
|
-
keywords: [pure-black, charcoal, engineered, blue, multi-product, flat]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 hashicorp entry (2026-07-04); 2026-07-12 re-audit of HashiCorp public brand; Inter substitutes the licensed HashiCorp Sans; JetBrains Mono for data; the pure-black canvas is the brand's recorded override of the no-pure-black floor; the blue action fill carries near-black ink at operator contrast (marketing white-on-blue is large-text scale)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# hashicorp — a midnight data-center corridor of matte black racks
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A data-center corridor at night: matte pure-black racks in ordered rows, charcoal panel
|
|
16
|
-
faces one lift above the void, felt-thin seams between them, and a single blue status LED
|
|
17
|
-
per rack meaning *healthy*. Dark by default — and literally pure black: the `background`
|
|
18
|
-
is `#000000` by recorded brand override (the doctrine's no-pure-black floor yields to the
|
|
19
|
-
brand token; noted plainly here, and the neutral-tint rule yields with it). Emphatically
|
|
20
|
-
flat: the charcoal ladder, hairlines, weight, and white-on-black contrast carry
|
|
21
|
-
everything — never shadow. The light theme is the opt-in counterpart, drawn from the
|
|
22
|
-
brand's light documentation surfaces.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
White ink `foreground` on the pure-black `background`; `card` is the charcoal surface-1
|
|
26
|
-
lift, `secondary`/`accent` the surface-2 rung for hover and selection, `muted` the faint
|
|
27
|
-
inset well *below* the canvas. `primary` accent-blue is the one product-neutral chromatic
|
|
28
|
-
hue — the primary action, the focus `ring`, active nav; on the fill it carries near-black
|
|
29
|
-
ink at operator contrast (the marketing white-on-blue lives at large-text scale). The
|
|
30
|
-
per-product palette — Terraform purple, Vault yellow, Waypoint cyan, Nomad green,
|
|
31
|
-
Boundary coral — carries no UI role; it draws the chart ramp. Status hues speak status.
|
|
32
|
-
|
|
33
|
-
## 3 Typography
|
|
34
|
-
Inter (the open substitute for the geometric-humanist HashiCorp Sans) — one family across
|
|
35
|
-
the whole hierarchy, headings at 600 with tight tracking, the 700 display weights left
|
|
36
|
-
behind — over JetBrains Mono, the operator's reclaim for IDs, codes, timestamps, and log
|
|
37
|
-
lines. Register scope: display register for page titles, empty states, and auth; the
|
|
38
|
-
uppercase eyebrow above meaningful sections; numeric columns `tabular-nums`.
|
|
39
|
-
|
|
40
|
-
## 4 Component Stylings
|
|
41
|
-
Buttons `radius-sm` (6px), blue `primary` fill with ink label, never a pill; secondary on
|
|
42
|
-
the surface-2 charcoal with hairline; the brand's white-on-black CTA is a legitimate
|
|
43
|
-
monochrome variant for a lone hero action. Inputs on `background` with the strong
|
|
44
|
-
hairline; focus draws the blue `ring` at 2px. Cards are the charcoal lift off black on a
|
|
45
|
-
hairline — the lift is the depth. Table rows hover to `accent` with a blue left
|
|
46
|
-
indicator on selection. Detail opens in the side panel; badges take hairline with status
|
|
47
|
-
fills, uppercase captions; pill radius is badges-only.
|
|
48
|
-
|
|
49
|
-
## 5 Layout
|
|
50
|
-
8px base; sidebar 256/56px; topbar 64px (the brand's nav height); side panel 440/640px;
|
|
51
|
-
content max 1440px. Density standard, stepping denser per archetype; the 96px marketing
|
|
52
|
-
rhythm and full-bleed CTA banners stay behind.
|
|
53
|
-
|
|
54
|
-
## 6 Depth
|
|
55
|
-
Shadowless. The ladder is the system: `background` pure black, `card` surface-1 at 0.21
|
|
56
|
-
L, `secondary` surface-2 at 0.26, hairline charcoal-3 seams, hue held at 264 — the
|
|
57
|
-
`muted` well recesses below the canvas. Overlays earn only the faintest blue-tinted lift
|
|
58
|
-
above a scrim. Focus is the 2px blue `ring`; three z-levels: content, chrome, overlay.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Machine-room steady. Named moments: `rack-lift` (hover/selection rung step, 100ms),
|
|
62
|
-
`panel-slide` (side panel, 220ms, interruptible), `plan-press` (primary-action press,
|
|
63
|
-
120ms). Physicality is granted only to auth and first-run empty states; run queues and
|
|
64
|
-
log streams update without animation; nothing moves on keyboard-initiated actions.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes on
|
|
68
|
-
black, no gridline fills; the categorical ramp is the per-product palette's one
|
|
69
|
-
legitimate home — Terraform purple, Vault yellow, Waypoint cyan, Nomad green, Boundary
|
|
70
|
-
coral (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
Infrastructure formal: precise nouns, states named exactly, no exclamation. "Queue plan" ·
|
|
74
|
-
"No drift detected — 42 workspaces healthy" · "Apply blocked: this policy check requires
|
|
75
|
-
a soft-mandatory override."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do anchor on the pure-black canvas — it is deliberate, not a near-black to be softened.
|
|
79
|
-
Do spend blue once per surface: primary action, focus ring, active nav. Do reclaim mono
|
|
80
|
-
for every ID, code, timestamp, and log line. Do draw chart series from the product
|
|
81
|
-
palette — the one place multiple hues are legitimate. Don't rebuild the per-product
|
|
82
|
-
accent system as chrome or fill a surface with a product hue. Don't pill controls. Don't
|
|
83
|
-
signal elevation with shadows, and never pair a display-only face with a different body
|
|
84
|
-
family — this brand is one family across the hierarchy.
|
|
85
|
-
|
|
86
|
-
## 11 Responsive
|
|
87
|
-
375: sidebar → off-canvas drawer; side panel → full sheet; density holds. 768: sidebar
|
|
88
|
-
collapses to the icon rail; tables scroll their overflow. 1024: two-pane queue+detail
|
|
89
|
-
holds. 1440: forms cap; tables and dashboards use the full width.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Wear the pure-black canvas by default; cards are the charcoal lift, not white. Spend blue
|
|
93
|
-
once — if two things want it, one is not primary. Headings at 600 with tight tracking,
|
|
94
|
-
one family; eyebrows uppercase above sections. The product palette exists only inside
|
|
95
|
-
charts. Depth is the ladder plus hairlines, never shadow. Both themes are authored —
|
|
96
|
-
consult the block, never derive.
|
|
97
|
-
|
|
98
|
-
```yaml design-values
|
|
99
|
-
color:
|
|
100
|
-
light:
|
|
101
|
-
background: oklch(0.99 0.005 264)
|
|
102
|
-
foreground: oklch(0.2 0.01 264)
|
|
103
|
-
card: oklch(0.995 0.005 264)
|
|
104
|
-
card-foreground: oklch(0.2 0.01 264)
|
|
105
|
-
popover: oklch(0.995 0.005 264)
|
|
106
|
-
popover-foreground: oklch(0.2 0.01 264)
|
|
107
|
-
primary: oklch(0.53 0.22 259)
|
|
108
|
-
primary-foreground: oklch(0.98 0.005 264)
|
|
109
|
-
secondary: oklch(0.945 0.007 264)
|
|
110
|
-
secondary-foreground: oklch(0.24 0.01 264)
|
|
111
|
-
muted: oklch(0.955 0.006 264)
|
|
112
|
-
muted-foreground: oklch(0.5 0.015 266)
|
|
113
|
-
accent: oklch(0.93 0.01 260)
|
|
114
|
-
accent-foreground: oklch(0.22 0.01 264)
|
|
115
|
-
destructive: oklch(0.55 0.21 29)
|
|
116
|
-
destructive-foreground: oklch(0.98 0.008 29)
|
|
117
|
-
success: oklch(0.6 0.14 163)
|
|
118
|
-
warning: oklch(0.75 0.15 91)
|
|
119
|
-
border: oklch(0.89 0.008 264)
|
|
120
|
-
input: oklch(0.89 0.008 264)
|
|
121
|
-
ring: oklch(0.53 0.22 259)
|
|
122
|
-
surface-raised: oklch(0.985 0.005 264)
|
|
123
|
-
surface-overlay: oklch(0.995 0.005 264)
|
|
124
|
-
chart-1: oklch(0.511 0.184 302)
|
|
125
|
-
chart-2: oklch(0.72 0.15 91)
|
|
126
|
-
chart-3: oklch(0.6 0.11 198)
|
|
127
|
-
chart-4: oklch(0.58 0.14 163)
|
|
128
|
-
chart-5: oklch(0.6 0.19 22)
|
|
129
|
-
sidebar: oklch(0.965 0.006 264)
|
|
130
|
-
sidebar-foreground: oklch(0.24 0.01 264)
|
|
131
|
-
sidebar-primary: oklch(0.53 0.22 259)
|
|
132
|
-
sidebar-primary-foreground: oklch(0.98 0.005 264)
|
|
133
|
-
sidebar-accent: oklch(0.93 0.01 260)
|
|
134
|
-
sidebar-accent-foreground: oklch(0.22 0.01 264)
|
|
135
|
-
sidebar-border: oklch(0.89 0.008 264)
|
|
136
|
-
sidebar-ring: oklch(0.53 0.22 259)
|
|
137
|
-
dark:
|
|
138
|
-
background: oklch(0 0 0)
|
|
139
|
-
foreground: oklch(0.97 0.005 264)
|
|
140
|
-
card: oklch(0.21 0.013 264)
|
|
141
|
-
card-foreground: oklch(0.97 0.005 264)
|
|
142
|
-
popover: oklch(0.26 0.016 264)
|
|
143
|
-
popover-foreground: oklch(0.95 0.005 264)
|
|
144
|
-
primary: oklch(0.639 0.195 257)
|
|
145
|
-
primary-foreground: oklch(0.12 0.01 257)
|
|
146
|
-
secondary: oklch(0.26 0.016 264)
|
|
147
|
-
secondary-foreground: oklch(0.93 0.006 264)
|
|
148
|
-
muted: oklch(0.16 0.009 264)
|
|
149
|
-
muted-foreground: oklch(0.775 0.011 262)
|
|
150
|
-
accent: oklch(0.26 0.016 264)
|
|
151
|
-
accent-foreground: oklch(0.95 0.005 264)
|
|
152
|
-
destructive: oklch(0.57 0.21 29)
|
|
153
|
-
destructive-foreground: oklch(0.98 0.008 29)
|
|
154
|
-
success: oklch(0.742 0.16 163)
|
|
155
|
-
warning: oklch(0.872 0.171 91)
|
|
156
|
-
border: oklch(0.36 0.014 274)
|
|
157
|
-
input: oklch(0.36 0.014 274)
|
|
158
|
-
ring: oklch(0.639 0.195 257)
|
|
159
|
-
surface-raised: oklch(0.21 0.013 264)
|
|
160
|
-
surface-overlay: oklch(0.26 0.016 264)
|
|
161
|
-
chart-1: oklch(0.62 0.18 302)
|
|
162
|
-
chart-2: oklch(0.872 0.171 91)
|
|
163
|
-
chart-3: oklch(0.751 0.126 198)
|
|
164
|
-
chart-4: oklch(0.742 0.16 163)
|
|
165
|
-
chart-5: oklch(0.652 0.202 22)
|
|
166
|
-
sidebar: oklch(0.12 0.009 264)
|
|
167
|
-
sidebar-foreground: oklch(0.93 0.006 264)
|
|
168
|
-
sidebar-primary: oklch(0.639 0.195 257)
|
|
169
|
-
sidebar-primary-foreground: oklch(0.12 0.01 257)
|
|
170
|
-
sidebar-accent: oklch(0.21 0.013 264)
|
|
171
|
-
sidebar-accent-foreground: oklch(0.95 0.005 264)
|
|
172
|
-
sidebar-border: oklch(0.26 0.014 264)
|
|
173
|
-
sidebar-ring: oklch(0.639 0.195 257)
|
|
174
|
-
typography:
|
|
175
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
176
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500, 600] }
|
|
177
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
178
|
-
ramp:
|
|
179
|
-
display: { size: 28px, line: 34px, weight: 600, family: display, tracking: -0.02em }
|
|
180
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.015em }
|
|
181
|
-
h2: { size: 18px, line: 24px, weight: 600, family: sans, tracking: -0.01em }
|
|
182
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
183
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
184
|
-
caption: { size: 12px, line: 17px, weight: 600, family: sans, tracking: 0.05em, transform: uppercase }
|
|
185
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
186
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, codes, timestamps, logs] }
|
|
187
|
-
elevation:
|
|
188
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
189
|
-
hairline: border
|
|
190
|
-
shadow:
|
|
191
|
-
overlay: "0 10px 32px oklch(0.1 0.015 264 / 0.55)"
|
|
192
|
-
popover: "0 4px 16px oklch(0.1 0.015 264 / 0.4)"
|
|
193
|
-
dark-ladder: { background: 0.0, raised: 0.21, overlay: 0.26, hue-held: 264 }
|
|
194
|
-
motion:
|
|
195
|
-
duration: { press: 120ms, fade: 150ms, panel: 220ms }
|
|
196
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
197
|
-
entrance-never: ease-in
|
|
198
|
-
identity-moments: [auth, first-run-empty]
|
|
199
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
200
|
-
charts:
|
|
201
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
202
|
-
sequential: { from: background, to: chart-3 }
|
|
203
|
-
diverging: { negative: destructive, mid: muted, positive: chart-4 }
|
|
204
|
-
layout: { base: 8px, sidebar: [256px, 56px], topbar: 64px, side-panel: [440px, 640px], content-max: 1440px }
|
|
205
|
-
```
|