@nurix/etna 0.19.11 → 0.19.13
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/README.md +6 -4
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/agents/maintenance.md +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/agents/discussion-baseline.md +1 -1
- package/data/harnesses/discussion/harness.json +1 -1
- package/data/harnesses/etna/agents/maintenance.md +1 -1
- package/data/harnesses/etna/harness.json +1 -1
- package/data/harnesses/hr/CLAUDE.md +1 -1
- package/data/harnesses/hr/harness.json +1 -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,130 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: VoltAgent
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# VoltAgent — near-black electric-green developer-console operator design
|
|
9
|
-
|
|
10
|
-
The *operator* reading of VoltAgent — a near-black IDE dressed as a documentation site: an
|
|
11
|
-
unrelenting `#101010` canvas with no light counterpart, one electric-green accent, hairline-bordered
|
|
12
|
-
cards, code-editor mockups. **Categorically dark**, like the source: dark is the signature, a valued
|
|
13
|
-
light daytime mode ships alongside. What carries — the near-black canvas, the single accent held
|
|
14
|
-
scarce, hairline-only flat depth, Inter + SF Mono, the 6px radius, near-black text on green (never
|
|
15
|
-
white); what stays behind — the 60px hero, the code-editor mockups, the 48px band rhythm, the green
|
|
16
|
-
divider band. One green does everything, so `success` is the brand's own deeper emerald `#10b981`
|
|
17
|
-
(its inline-link green), never the accent.
|
|
18
|
-
|
|
19
|
-
## 1 Visual Theme
|
|
20
|
-
|
|
21
|
-
Dark by default; light is the opt-in daytime mode. The UI floats on the near-black canvas `background` (`#101010`) —
|
|
22
|
-
no gradient, no glow, no illustration, just the surface and its hairlines. Emphatically flat: hierarchy comes from
|
|
23
|
-
1px `border` hairlines, type weight, and the off-white/near-black contrast, never a drop shadow (only true overlays
|
|
24
|
-
lift). A single accent, electric-green `primary` (`#00d992`), is reserved for the one primary action, live-status
|
|
25
|
-
indicators, the active-nav mark, and the focus `ring`; ink is a strain-reducing off-white `foreground` (`#f2f2f2`).
|
|
26
|
-
Density is `standard`, dense-capable from the engineered-documentation heritage, stepping denser per archetype. The
|
|
27
|
-
anchor surface is the near-black canvas beside a hair-darker `sidebar`, separated by a hairline, not a band.
|
|
28
|
-
|
|
29
|
-
## 2 Color Roles
|
|
30
|
-
|
|
31
|
-
The signature is dark; both themes are valued. One chromatic accent — `primary` is the only hue that
|
|
32
|
-
carries the primary-action meaning; status hues speak only status; the deeper emerald `success` is
|
|
33
|
-
deliberately not the accent green.
|
|
34
|
-
|
|
35
|
-
| Role | Light (daytime) | Dark (signature) | Allowed where |
|
|
36
|
-
| --- | --- | --- | --- |
|
|
37
|
-
| `background` / `card` | `#ffffff` / `#ffffff` | `#101010` / `#1a1a1a` | page canvas; panels a hairline above it |
|
|
38
|
-
| `foreground` | `#101010` | `#f2f2f2` | all primary ink (off-white on dark to ease strain) |
|
|
39
|
-
| `muted` / `secondary` | `#f4f4f5` | `#242424` | hover rows, quiet fills, secondary-button fill |
|
|
40
|
-
| `muted-foreground` | `#6b7280` | `#8b949e` | labels, captions, secondary text |
|
|
41
|
-
| `border` / `input` | `#e4e4e7` | `#3d3a39` | every separator, grid line, and field edge |
|
|
42
|
-
| `primary` | `#00d992` | `#00d992` | the one primary action; live indicators; active nav; `ring` |
|
|
43
|
-
| `primary-foreground` | `#101010` | `#101010` | text on the green — near-black, never white (brand mandate) |
|
|
44
|
-
| `accent` | `#ececed` | `#2e2e2e` | selected / hovered rows and nav — a neutral surface lift, never green |
|
|
45
|
-
| `ring` | `#00d992` | `#00d992` | the focus outline — unmistakable, because keyboard-first |
|
|
46
|
-
| `destructive` | `#dc2626` | `#f04438` | destructive actions and error state only |
|
|
47
|
-
| `success` / `warning` | `#10b981` / `#d97706` | `#10b981` / `#f59e0b` | status only, never chrome; `success` is the deeper emerald, not the accent |
|
|
48
|
-
|
|
49
|
-
## 3 Typography
|
|
50
|
-
|
|
51
|
-
Two faces. `font-sans` is Inter (weights 400 / 500 / 600 / 700) — display, body, UI, button, and every uppercase
|
|
52
|
-
eyebrow ride it; a second family never does the label work. `font-mono` is SF Mono (`SFMono-Regular` with Menlo /
|
|
53
|
-
Monaco / Consolas fallbacks; JetBrains Mono or Geist Mono the free substitutes) for IDs, codes, timestamps, log
|
|
54
|
-
lines, and metric counters; numeric columns render `tabular-nums`. The signature label is the **uppercase Inter
|
|
55
|
-
eyebrow with wide positive tracking** (`+0.18em`, the source's `2.52px` at `14px`) — the brand's one flourish.
|
|
56
|
-
|
|
57
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
58
|
-
| --- | --- | --- | --- |
|
|
59
|
-
| h1 | page title | 24px / 1.35 | `font-weight-strong` (600) · `heading-tracking` |
|
|
60
|
-
| h2 | section head | 20px / 1.4 | `font-weight-strong` (600) · `heading-tracking` |
|
|
61
|
-
| h3 | card / group head | 16px / 1.5 | `font-weight-strong` (600) · 0 |
|
|
62
|
-
| body | UI + prose | 14px / 1.45 | `font-weight-normal` (400) |
|
|
63
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
64
|
-
| caption | uppercase eyebrow | 12px / 1.3 | `font-weight-strong`, `+0.18em`, uppercase |
|
|
65
|
-
| code | IDs, logs, amounts | mono 13px / 1.4 | `font-weight-normal` |
|
|
66
|
-
|
|
67
|
-
The calm 60px/400 hero display stays behind — operator headings top out at a 24px title, emphasized by
|
|
68
|
-
weight, never by a heavier display.
|
|
69
|
-
|
|
70
|
-
## 4 Component Stylings
|
|
71
|
-
|
|
72
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
73
|
-
|
|
74
|
-
- **Button** — primary: filled green `primary` on near-black `primary-foreground`, `radius` (6px), never a pill. Secondary: `card` fill, 1px `border`, `foreground`. Ghost: transparent, green `primary` label (the one place a green *label* is allowed), `accent` on hover.
|
|
75
|
-
- **Input** — `muted` fill on dark, `background` fill on light; 1px `border` (`border-weight`), `radius`; focus draws the green `ring` at full 2px, no glow.
|
|
76
|
-
- **Card** — `card` surface on a 1px `border`; the hairline carries the edge, not a shadow; inset by `density-inset`. Featured cards take a 3px `border` or a 2px `primary` green edge, never a fill.
|
|
77
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection tints `accent` (neutral, never green).
|
|
78
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
|
|
79
|
-
- **Badge** — pill radius (badges only), `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, live pills take `primary`.
|
|
80
|
-
|
|
81
|
-
## 5 Layout
|
|
82
|
-
|
|
83
|
-
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing
|
|
84
|
-
48px band rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
85
|
-
`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (52px),
|
|
86
|
-
side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal `modal-width-max`, forms
|
|
87
|
-
`form-max-width`, tables full-width — the source has only a marketing top-nav, so these are the operator
|
|
88
|
-
standard. Density is governed globally by `density-tier` and stepped per archetype by the surface catalog.
|
|
89
|
-
|
|
90
|
-
## 6 Depth
|
|
91
|
-
|
|
92
|
-
Flat and hairline-first. Depth comes from the surface ladder and hairlines, not shadow:
|
|
93
|
-
|
|
94
|
-
- **0 — canvas** `background` (`#101010` dark / `#ffffff` light), no border.
|
|
95
|
-
- **1 — panel / card** `card` a hairline above the canvas on a 1px `border` — the source seats marketing cards directly on the canvas with only a hairline; the operator reading lifts panels one surface step so dense tables read, keeping the hairline as the primary edge.
|
|
96
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft lift; rank is border, surface, and position, never a heavier shadow.
|
|
97
|
-
|
|
98
|
-
A 2px `primary` green border marks a featured or active card; the dashed divider stays behind. Focus is a 2px green `ring` outline (never a glow) on every interactive element; three z-levels: content, sticky chrome, overlay.
|
|
99
|
-
|
|
100
|
-
## 7 Do's & Don'ts
|
|
101
|
-
|
|
102
|
-
- **Do** anchor the signature on the near-black canvas (`#101010`); ship the light daytime mode as the opt-in, never the default read.
|
|
103
|
-
- **Do** reserve electric-green `primary` for the single primary action, live indicators, the active-nav mark, and the focus `ring` — its scarcity is what reads as voltage.
|
|
104
|
-
- **Do** render code, log, and terminal surfaces in `font-mono` (SF Mono) with `tabular-nums`; carry the uppercase Inter eyebrow at `+0.18em` for section labels.
|
|
105
|
-
- **Don't** fill a decorative surface with the accent green — it is action, live-status, and the focus ring only; a green *label* is allowed only on the ghost button.
|
|
106
|
-
- **Don't** let a status green equal the accent green — `success` is the deeper emerald `#10b981`, never a CTA.
|
|
107
|
-
- **Don't** pill the primary CTA or use a radius outside `radius-scale` (buttons/inputs 6px, cards 8px; pill is badges and live tags only), and don't signal elevation with drop shadows — hairlines and the one-step surface lift carry depth.
|
|
108
|
-
|
|
109
|
-
## 8 Responsive
|
|
110
|
-
|
|
111
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
112
|
-
|
|
113
|
-
| Breakpoint | What changes |
|
|
114
|
-
| --- | --- |
|
|
115
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
116
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
117
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
118
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
119
|
-
|
|
120
|
-
Code and log surfaces keep mono legibility by scrolling horizontally, not wrapping.
|
|
121
|
-
|
|
122
|
-
## 9 Agent Prompt Guide
|
|
123
|
-
|
|
124
|
-
Directives the emitting agent follows verbatim:
|
|
125
|
-
|
|
126
|
-
- Wear the near-black canvas as the signature; the light daytime mode is opt-in only — never make light the default for this brand. Panels sit a hairline above the canvas.
|
|
127
|
-
- Spend the electric green once per surface: the primary action, live indicators, the active-nav mark, the focus `ring`. If two things want the green, one is not primary. Never fill a decorative surface with it; text on the green is near-black (`#101010`), never white.
|
|
128
|
-
- `success` is the deeper emerald `#10b981`, never the accent green — keep status legible against a brand whose accent is already green.
|
|
129
|
-
- Render every code, log, terminal, and metric surface in `font-mono` (SF Mono); every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`; section labels wear the uppercase Inter eyebrow at `+0.18em`.
|
|
130
|
-
- Depth is hairlines and one surface step, never shadow; reach for the overlay lift only for a true modal or popover. Detail and edit go in the side panel, never a modal. The green `ring` focus outline is always visible. Leave behind the 60px hero, the code-editor mockups, the 48px band rhythm, and the green divider.
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Warp
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Warp — the warm-monochrome terminal operator design
|
|
9
|
-
|
|
10
|
-
Warp is an agentic development environment — a terminal wrapping an AI agent — and its marketing site
|
|
11
|
-
mirrors the product: a single warm near-charcoal band running the whole page (warmer than pure black),
|
|
12
|
-
copy almost entirely in Inter, DM Mono for the terminal mockups, no gradient, no chromatic accent
|
|
13
|
-
anywhere. This entry is the *operator* reading of that brand — an internal tool (agent-run console,
|
|
14
|
-
session queue, deploy stream) in Warp's language. What carries: the warm brown-beige temperature on
|
|
15
|
-
every neutral, the extremely tight near-rectangular radius, the Inter + DM Mono voice, the quiet display
|
|
16
|
-
(weight 400, negative tracking, never heavy), hairline-only flat depth, and — the defining trait — a
|
|
17
|
-
**monochrome** system with no chromatic accent. What stays behind: the 64px hero display, the 96px
|
|
18
|
-
section rhythm, the full-page terminal-mockup imagery, and the always-dark marketing band.
|
|
19
|
-
|
|
20
|
-
**Warm, light, and monochrome.** Warp's identity is the warmth, not the darkness — `oklch` hue 84.6,
|
|
21
|
-
a brown-beige tint on every neutral. This theme keeps that warmth on a **light** paper floor so the
|
|
22
|
-
light-default floor holds cleanly; the brand's own warm-charcoal `#2b2622` survives as the code /
|
|
23
|
-
log / terminal inlay (Warp is a terminal — that surface is real chrome, not a mockup). With no
|
|
24
|
-
chromatic accent, the one operator accent is **ink**: the primary action is a filled warm-charcoal
|
|
25
|
-
button.
|
|
26
|
-
|
|
27
|
-
## 1 Visual Theme
|
|
28
|
-
|
|
29
|
-
Light by default; dark is opt-in. The whole UI floats on a warm paper `background` (`#f2efe8`); cards
|
|
30
|
-
lift to Warp's own off-white `card` (`#f7f5f0`), so a panel reads by a hair of brightness plus its warm
|
|
31
|
-
hairline, never a shadow. Emphatically flat: hierarchy is carried by warm hairline `border`, type
|
|
32
|
-
weight, and the paper-to-off-white surface step. There is **no chromatic accent** — the single accent is
|
|
33
|
-
monochrome ink, warm near-charcoal `primary` (`#2b2622`, Warp's own canvas color), reserved for the one
|
|
34
|
-
primary action, the active-nav indicator, and the focus `ring`. Density is `standard`; the temperature
|
|
35
|
-
and near-rectangular radius keep the terminal-dialect tightness.
|
|
36
|
-
|
|
37
|
-
## 2 Color Roles
|
|
38
|
-
|
|
39
|
-
Light values. No chromatic accent: `primary` is monochrome ink; the chart series live only in charts
|
|
40
|
-
(see §7); status hues speak only status.
|
|
41
|
-
|
|
42
|
-
| Role | Value | Allowed where |
|
|
43
|
-
| --- | --- | --- |
|
|
44
|
-
| `background` | warm paper `#f2efe8` | the page floor and content canvas — the dominant surface |
|
|
45
|
-
| `card` / `popover` | Warp off-white `#f7f5f0` | cards and overlays — a bright warm lift off the paper, differentiated by hairline |
|
|
46
|
-
| `foreground` | warm charcoal `#2b2622` | display and all primary ink — Warp's own canvas color, inverted to ink |
|
|
47
|
-
| `muted` / `secondary` | soft warm fill `#eae6dd` | hover rows, quiet band tints, secondary-button fill |
|
|
48
|
-
| `muted-foreground` | warm gray `#6b655c` | labels, captions, secondary text |
|
|
49
|
-
| `border` / `input` | warm hairline `#e2ddd2` | every separator, grid line, and field edge — one warm step, not an ink line |
|
|
50
|
-
| `primary` | warm charcoal `#2b2622` | the one primary action; the focus `ring`; the active-nav indicator — ink, not a hue |
|
|
51
|
-
| `primary-foreground` | off-white `#f7f5f0` | text on the charcoal action — the brand's own light tone |
|
|
52
|
-
| `accent` | warm selection lift `#e4dfd4` | selected / hovered rows and nav — a neutral warm step, never ink-filled |
|
|
53
|
-
| `ring` | `primary` charcoal | the focus outline — unmistakable, because keyboard-first |
|
|
54
|
-
| `destructive` | warm brick-red `#c0392b` | destructive actions and error state only |
|
|
55
|
-
| `success` / `warning` | warm green `#5b8a45` / warm amber `#b8791f` | status signalling only, never chrome |
|
|
56
|
-
|
|
57
|
-
The warm-charcoal `#2b2622` is not only ink — it is also the code / log / terminal inlay surface (§6).
|
|
58
|
-
|
|
59
|
-
## 3 Typography
|
|
60
|
-
|
|
61
|
-
`font-sans` is Inter — one sans carries body, UI, labels, and headings, weights 400 / 500 the working
|
|
62
|
-
pair. `font-mono` is DM Mono for IDs, codes, timestamps, log lines, and every terminal surface; numeric
|
|
63
|
-
columns render `tabular-nums`. The defining typographic trait is the **quiet display**: page titles wear
|
|
64
|
-
weight 400 with negative tracking — never a billboard — while smaller component heads step up to the
|
|
65
|
-
strong 500. The 64px hero display and rare Instrument Serif italic stay behind; a surface tops out at a
|
|
66
|
-
24px page title.
|
|
67
|
-
|
|
68
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
69
|
-
| --- | --- | --- | --- |
|
|
70
|
-
| h1 | page title | 24px / 1.25 | `font-weight-normal` (400) · `heading-tracking` |
|
|
71
|
-
| h2 | section head | 20px / 1.3 | `font-weight-normal` (400) · `heading-tracking` |
|
|
72
|
-
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` (500) · 0 |
|
|
73
|
-
| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
|
|
74
|
-
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
75
|
-
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.04em`, uppercase |
|
|
76
|
-
| code | IDs, logs, amounts | mono 13px / 1.4 | `font-weight-normal` |
|
|
77
|
-
|
|
78
|
-
Keep page titles at 400 with negative tracking — the quiet voice; never a heading at 700+, and emphasise by size, never heavy weight.
|
|
79
|
-
|
|
80
|
-
## 4 Component Stylings
|
|
81
|
-
|
|
82
|
-
Every recurring operator component composes from the primitives — no literal values.
|
|
83
|
-
- **Button** — primary: filled charcoal `primary` on off-white `primary-foreground`, `radius` (near-rectangular), never a pill. Secondary: off-white `card` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
84
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the charcoal `ring` at full 2px, no glow.
|
|
85
|
-
- **Card** — off-white `card` surface on a 1px `border` — the bright step off the paper carries the lift; shadow only when a true overlay must separate; inset by `density-inset`.
|
|
86
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection warms to `accent`.
|
|
87
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
|
|
88
|
-
- **Badge** — pill radius (badges only), `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
89
|
-
|
|
90
|
-
## 5 Layout
|
|
91
|
-
|
|
92
|
-
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
|
|
93
|
-
96px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
94
|
-
`sidebar-width-expanded` (240px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (52px, the
|
|
95
|
-
brand's nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal cap
|
|
96
|
-
`modal-width-max`, forms `form-max-width`, tables full-width — a touch tight, the terminal dialect
|
|
97
|
-
through the shell. Density is governed globally by `density-tier` and stepped per archetype by the
|
|
98
|
-
surface catalog — never by absolute overrides.
|
|
99
|
-
|
|
100
|
-
## 6 Depth
|
|
101
|
-
|
|
102
|
-
Flat and hairline-only. Depth comes from the paper-to-off-white surface step and warm hairlines, not shadow:
|
|
103
|
-
- **0 — canvas** `background` (`#f2efe8`), no border.
|
|
104
|
-
- **1 — panel / card** off-white `card` (`#f7f5f0`) on a 1px `border`; the bright step off the paper plus the hairline carries the lift. Selected / hover rows warm to `accent` (`#e4dfd4`).
|
|
105
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest soft lift, enough to float an overlay above the paper. Rank is surface, border, and position — never a heavier shadow.
|
|
106
|
-
- **inlay — code / log / terminal** warm charcoal `#2b2622` with off-white text and `font-mono` — Warp's own terminal chrome carried into a light UI.
|
|
107
|
-
|
|
108
|
-
Focus is a 2px charcoal `ring` outline (never a glow), visible on every interactive element; three z-levels: content, sticky chrome, overlay.
|
|
109
|
-
|
|
110
|
-
## 7 Do's & Don'ts
|
|
111
|
-
|
|
112
|
-
- **Do** anchor every surface on the warm paper canvas — pure white as the page floor reads as any-other-tool; the brown-beige tint is Warp.
|
|
113
|
-
- **Do** keep the accent monochrome — the primary action, the focus `ring`, and the active-nav indicator are warm-charcoal ink. There is no chromatic accent, by design.
|
|
114
|
-
- **Do** keep page titles at weight 400 with negative tracking, and render every code, log, and terminal surface in `font-mono` (DM Mono) on the warm-charcoal inlay, with `tabular-nums` on numeric columns.
|
|
115
|
-
- **Don't** introduce a chromatic brand accent — the off-white-and-charcoal monochrome IS Warp's voice; a colored CTA breaks the brand.
|
|
116
|
-
- **Don't** render a heading at 700+ or reach for a generous pill radius — the display is quiet at 400 and the button radius is near-rectangular (3–4px); pill is badges only.
|
|
117
|
-
- **Don't** drop a soft drop-shadow on cards or replace the warm paper with a cool gray or pure white — hairlines and the surface step carry depth, and the warmth is the identity.
|
|
118
|
-
|
|
119
|
-
## 8 Responsive
|
|
120
|
-
|
|
121
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
-
|
|
123
|
-
| Breakpoint | What changes |
|
|
124
|
-
| --- | --- |
|
|
125
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
126
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
128
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
129
|
-
|
|
130
|
-
Code and log inlays keep mono legibility at every breakpoint by scrolling, not wrapping.
|
|
131
|
-
|
|
132
|
-
## 9 Agent Prompt Guide
|
|
133
|
-
|
|
134
|
-
Directives the emitting agent follows verbatim:
|
|
135
|
-
- Reach for the warm paper canvas first — never pure white or a cool gray for the page floor; the brown-beige tint is Warp. Cards are the off-white bright step above it.
|
|
136
|
-
- The accent is monochrome ink: spend warm-charcoal once per surface on the primary action, the focus `ring`, and the active-nav indicator. There is no chromatic accent — do not introduce one. Color otherwise belongs to data and status.
|
|
137
|
-
- Page titles wear weight 400 with negative tracking — the quiet voice; component heads and labels earn the strong 500. Never render a heading at 700+.
|
|
138
|
-
- Render code, log, and terminal panels in `font-mono` (DM Mono) on the warm-charcoal `#2b2622` inlay — show real terminal chrome, not a light mockup of it. Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
|
|
139
|
-
- Keep the geometry near-rectangular — the button/input radius is 3–4px; pill is badges only. Depth is the paper-to-off-white step and warm hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work, never a modal.
|
|
140
|
-
- Keyboard-first: the charcoal `ring` focus outline is always visible. Leave behind the 64px hero display, the 96px section rhythm, the full-page terminal-mockup imagery, and the always-dark marketing band.
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Webflow
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Webflow — the visual-builder operator reading
|
|
9
|
-
|
|
10
|
-
A deliberate operator reading of the Webflow brand: engineered, near-monochrome, hairline-first. The
|
|
11
|
-
marketing site breathes 80px hero display type and full-saturation category cards; an operator
|
|
12
|
-
surface keeps the near-black primary, the pure-gray neutrals, and the single crisp blue, and leaves
|
|
13
|
-
the display type and chromatic fills behind.
|
|
14
|
-
|
|
15
|
-
## 1 Visual Theme
|
|
16
|
-
|
|
17
|
-
Light by default; dark is opt-in. Flat and engineered: a generous white canvas (`background`
|
|
18
|
-
`#ffffff`) carries near-black ink (`foreground` `#080808` — deeper than pure black, so it reads as
|
|
19
|
-
branded, not default). Hierarchy comes from hairline `border` (`#d8d8d8`), type weight, and contrast —
|
|
20
|
-
never heavy shadow; the brand's layered drop-shadow is a marketing flourish operator surfaces reserve
|
|
21
|
-
for true overlays. The primary action is a near-black fill, not a color; a single chromatic accent — a
|
|
22
|
-
crisp blue `#146ef5` — is reserved for interactive state (focus, selection, active nav). The neutral
|
|
23
|
-
ramp is pure achromatic gray, no temperature. Density is `standard`; the anchor surface is white
|
|
24
|
-
content beside a barely-tinted `sidebar`.
|
|
25
|
-
|
|
26
|
-
## 2 Color Roles
|
|
27
|
-
|
|
28
|
-
Light values first. One chromatic accent — the blue carries interactive meaning; near-black is the
|
|
29
|
-
action ink; status hues speak only status. The five brand hues live only in charts (§9).
|
|
30
|
-
|
|
31
|
-
| Role | Value | Allowed where |
|
|
32
|
-
| --- | --- | --- |
|
|
33
|
-
| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
34
|
-
| `foreground` | near-black `#080808` | all primary ink, headings, wordmark |
|
|
35
|
-
| `muted` / `secondary` | light gray `#f4f4f4` | hover rows, subtle fills, secondary buttons |
|
|
36
|
-
| `muted-foreground` | mid gray `#5a5a5a` | labels, captions, secondary text |
|
|
37
|
-
| `border` / `input` | hairline `#d8d8d8` | every separator, grid line, and field edge |
|
|
38
|
-
| `primary` | near-black `#080808` | the one primary action; every primary CTA |
|
|
39
|
-
| `primary-foreground` | white `#ffffff` | ink on the near-black action |
|
|
40
|
-
| `accent` | faint blue tint `#eaf1fe` | selected/hovered rows and nav, on-accent surfaces only |
|
|
41
|
-
| `accent-foreground` / `ring` | blue `#146ef5` | active nav ink, link emphasis, and the focus outline |
|
|
42
|
-
| `destructive` | red `#ee1d36` | destructive actions and error state only |
|
|
43
|
-
| `success` / `warning` | green `#00d722` / amber `#ffae13` | status signalling only, never chrome |
|
|
44
|
-
|
|
45
|
-
The purple / pink / blue / orange / green category palette is marketing fill; it carries no operator role except as the chart series (§7).
|
|
46
|
-
|
|
47
|
-
## 3 Typography
|
|
48
|
-
|
|
49
|
-
One sans, one mono. `font-sans` is WF Visual Sans Variable (falling back to Inter) — a single family
|
|
50
|
-
carries UI, body, and headings; weight and tracking, not a second face, carry the display voice. The
|
|
51
|
-
brand's ceiling is `font-weight-strong` 600 — it never goes heavier. `font-mono` is WFVisualSans-Mono
|
|
52
|
-
(Inconsolata fallback) for IDs, codes, timestamps, and log lines. Display tracks negative
|
|
53
|
-
(`heading-tracking` `-0.01em`) — tight kerning is part of the voice. Numeric columns render
|
|
54
|
-
`tabular-nums` so figures align down a column (floor f04).
|
|
55
|
-
|
|
56
|
-
| Step | Role | Size · line | Weight · tracking |
|
|
57
|
-
| --- | --- | --- | --- |
|
|
58
|
-
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
-
| h2 | section head | 20px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
-
| h3 | card / group head | 16px / 1.5 | `font-weight-strong` |
|
|
61
|
-
| body | UI + prose, dense table | 14px / 1.6 | `font-weight-normal` |
|
|
62
|
-
| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.6px`, uppercase |
|
|
63
|
-
|
|
64
|
-
Bump weight one step for emphasis — never past 600, never by resizing. Badge labels take the brand's signature semibold caption; the marketing eyebrow (`+1.5px` uppercase) survives as the section label.
|
|
65
|
-
|
|
66
|
-
## 4 Component Stylings
|
|
67
|
-
|
|
68
|
-
Every recurring component composes from the primitives — no literal values.
|
|
69
|
-
|
|
70
|
-
- **Button** — `primary`: filled `primary` (near-black) on `primary-foreground`, `radius` 4px, no pill.
|
|
71
|
-
Secondary: `background` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
72
|
-
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring`
|
|
73
|
-
(blue) at 2px, no glow.
|
|
74
|
-
- **Card** — `card` surface, 1px `border`, `radius` steps up to the 8px card radius; shadow only when
|
|
75
|
-
lifted (`shadow-intensity`); inset by `density-inset`.
|
|
76
|
-
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
77
|
-
numeric columns; row selection tints `accent`.
|
|
78
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
|
|
79
|
-
for content-heavy), beside the work, not over it (floor f03).
|
|
80
|
-
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
|
|
81
|
-
`success` / `warning` / `destructive`, never `primary`; the info badge fills `ring` blue.
|
|
82
|
-
|
|
83
|
-
## 5 Layout
|
|
84
|
-
|
|
85
|
-
Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 ·
|
|
86
|
-
24 · 32 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
87
|
-
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
|
|
88
|
-
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
|
|
89
|
-
tables full-width. Density is governed globally by `density-tier` (rewriting the scale through
|
|
90
|
-
`density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides.
|
|
91
|
-
|
|
92
|
-
## 6 Depth
|
|
93
|
-
|
|
94
|
-
Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
|
|
95
|
-
|
|
96
|
-
- **0 — canvas** `background`, no border.
|
|
97
|
-
- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
|
|
98
|
-
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
99
|
-
shadow. The brand's five-stop layered drop-shadow collapses to this single restrained lift; rank is
|
|
100
|
-
border and position, never a heavier stack.
|
|
101
|
-
|
|
102
|
-
Focus is a 2px `ring` (blue) outline, never a glow, on every interactive element (floor f06). Three
|
|
103
|
-
z-levels: content, sticky chrome, overlay.
|
|
104
|
-
|
|
105
|
-
## 7 Do's & Don'ts
|
|
106
|
-
|
|
107
|
-
- **Do** reserve `primary` (near-black) for the single most important action; everything else is
|
|
108
|
-
neutral or status, and hierarchy rides hairlines, weight, and whitespace — the brand is flat.
|
|
109
|
-
- **Do** keep one chromatic accent: blue `#146ef5` for interactive state; nothing else competes.
|
|
110
|
-
- **Do** apply `tabular-nums` to numeric columns, `font-mono` to IDs/codes/timestamps, and cap type
|
|
111
|
-
weight at 600 — emphasize by weight, never by resizing or a heavier face.
|
|
112
|
-
- **Don't** use the purple / pink / blue / orange / green category palette as button or chrome fills —
|
|
113
|
-
those stay in the chart series; a chromatic CTA is off-brand.
|
|
114
|
-
- **Don't** pill the primary CTA or reach for a radius outside `radius-scale` (buttons 4px, cards 8px).
|
|
115
|
-
- **Don't** open detail or edit in a modal when the side panel fits — modals are confirmations only.
|
|
116
|
-
- **Don't** import the 80px hero display type or marketing gutters into an operator surface.
|
|
117
|
-
|
|
118
|
-
## 8 Responsive
|
|
119
|
-
|
|
120
|
-
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
121
|
-
|
|
122
|
-
| Breakpoint | What changes |
|
|
123
|
-
| --- | --- |
|
|
124
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
125
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
126
|
-
| 1024 / 1440 | sidebar expands; two-pane queue+detail holds; forms cap at `form-max-width`, tables full-width |
|
|
127
|
-
|
|
128
|
-
## 9 Agent Prompt Guide
|
|
129
|
-
|
|
130
|
-
Directives the emitting agent follows verbatim:
|
|
131
|
-
|
|
132
|
-
- What carries: the near-black `primary` action, pure achromatic gray neutrals, the single blue
|
|
133
|
-
interactive accent, 4px button / 8px card radius, the WF Visual Sans → Inter voice at weights
|
|
134
|
-
400–600 with negative tracking, and the five brand hues as the chart series. What stays behind: the
|
|
135
|
-
80px hero display type, full-saturation category-card fills, and marketing gutters.
|
|
136
|
-
- Accent only the primary action with near-black; reserve blue for focus, selection, and active nav.
|
|
137
|
-
If two things want emphasis, one of them is not primary.
|
|
138
|
-
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (f04).
|
|
139
|
-
- Every workflow completes from the keyboard; the 2px blue `ring` is always visible (f06). Stay flat —
|
|
140
|
-
hairline and weight before shadow; reach past a hairline only for a real overlay.
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v1
|
|
3
|
-
product: Wired
|
|
4
|
-
provenance: library
|
|
5
|
-
sourced: 2026-07-04
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Wired — the print-editorial, black-on-white operator reading
|
|
9
|
-
|
|
10
|
-
An operator translation of Wired's design language — a flagship technology magazine ported to the
|
|
11
|
-
screen. The marketing theatre stays behind: the 64px `WiredDisplay` cover headline, the full-bleed
|
|
12
|
-
16:9 hero photography, the magazine story grid. What carries is the chassis underneath — a strict
|
|
13
|
-
black-on-white duet with no chromatic accent, square geometry on every control, hairline-only
|
|
14
|
-
elevation, and an editorial three-face type voice where a serif carries the page title over the sans
|
|
15
|
-
that runs the chrome.
|
|
16
|
-
|
|
17
|
-
## 1 Visual Theme
|
|
18
|
-
|
|
19
|
-
Light by default; dark is opt-in. Pure and unmistakable: black ink on a white canvas, the way a printed
|
|
20
|
-
page reads. Flat — hierarchy is the `border` hairline, type weight, and stark ink contrast, never
|
|
21
|
-
shadow (the brand uses none). The single "accent" is black itself (`primary`), reserved for the
|
|
22
|
-
wordmark, the one CTA, and active nav; there is no chromatic accent in the chrome. Temperature is
|
|
23
|
-
dead-neutral — every gray a true achromatic gray, colder than any tinted-slate tool. Geometry is
|
|
24
|
-
square: `radius` 0 on every control, the non-negotiable signature. The anchor is a white canvas beside
|
|
25
|
-
a white `sidebar` split by a hairline; density is `standard`, the breathing riding type, not rows.
|
|
26
|
-
|
|
27
|
-
## 2 Color Roles
|
|
28
|
-
|
|
29
|
-
Light values. A deliberate black-and-white duet: `primary` is black, the sole chromatic grace (link
|
|
30
|
-
blue) is text-links only, and status hues are derived (the brand ships none), kept deep to sit under
|
|
31
|
-
the austerity.
|
|
32
|
-
|
|
33
|
-
| Role | Value | Allowed where |
|
|
34
|
-
| --- | --- | --- |
|
|
35
|
-
| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
36
|
-
| `foreground` | pure black `#000000` | every headline and every line of ink — the brand override (see §7) |
|
|
37
|
-
| `muted` / `secondary` | canvas-soft `#f5f5f5` | hover rows, subtle fills, secondary button — the brand's single soft tint |
|
|
38
|
-
| `muted-foreground` | body gray `#757575` | bylines, timestamps, labels, secondary metadata |
|
|
39
|
-
| `border` | hairline `#e0e0e0` | every divider, story-row rule, table grid line, and card edge — the brand's only "line" |
|
|
40
|
-
| `input` | black `#000000` | the field edge — Wired's square black-bordered input is a signature (dividers stay hairline) |
|
|
41
|
-
| `primary` | black `#000000` | the one CTA fill; the wordmark; active nav; the heavy-border moment |
|
|
42
|
-
| `accent` | canvas-soft `#f5f5f5` | selected / hovered rows and nav — selection tints, never colours |
|
|
43
|
-
| `ring` | black `#000000` | the 2px focus outline — it IS the brand's heavy black border, put to keyboard use |
|
|
44
|
-
| `destructive` | deep red `#c1121f` | destructive actions and error state only |
|
|
45
|
-
| `success` / `warning` | green `#1a7f37` / amber `#b45309` | status signalling only, never chrome |
|
|
46
|
-
|
|
47
|
-
The link blue `#057dbc` is the one chromatic grace — inline text-links only, never a button, nav, or
|
|
48
|
-
focus ring. It survives in the chart ramp (`chart-2`) as the single accent series; every other is gray.
|
|
49
|
-
|
|
50
|
-
## 3 Typography
|
|
51
|
-
|
|
52
|
-
Three faces, three roles — the editorial ladder. `font-sans` is Apercu (Inter fallback), the humanist
|
|
53
|
-
sans that runs all chrome: nav, labels, buttons, metadata, table cells, dense body. Page titles wear
|
|
54
|
-
the **serif** — `WiredDisplay` shading into `BreveText`; *Playfair Display* / *Lora* the open
|
|
55
|
-
substitutes — applied to h1/h2 by hand at operator scale, never the 64px hero. `font-mono` is derived
|
|
56
|
-
(the corpus ships none) for IDs, codes, timestamps; numeric columns render `tabular-nums`.
|
|
57
|
-
|
|
58
|
-
| Step | Role | Family | Size · line | Weight · tracking |
|
|
59
|
-
| --- | --- | --- | --- | --- |
|
|
60
|
-
| h1 | page title | serif | 32px / 1.1 | 400 · `heading-tracking` |
|
|
61
|
-
| h2 | section head | serif | 26px / 1.08 | 400 · `heading-tracking` |
|
|
62
|
-
| h3 | card / group head | sans | 17px / 1.3 | `font-weight-strong` · 0 |
|
|
63
|
-
| body | UI + prose | sans | 14px / 1.4 | `font-weight-normal` |
|
|
64
|
-
| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
|
|
65
|
-
| caption | uppercase eyebrow / category | sans | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
|
|
66
|
-
| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
|
|
67
|
-
|
|
68
|
-
Two weights only: sans emphasis 700, serif heading 400 — **never** promote the display past 400, its
|
|
69
|
-
elegance is the typeface, not the weight.
|
|
70
|
-
|
|
71
|
-
## 4 Component Stylings
|
|
72
|
-
|
|
73
|
-
- **Button** — `primary`: filled black on `primary-foreground`, `radius` 0 (a sharp rectangle), never a
|
|
74
|
-
pill. Secondary is the brand outline: `background` fill, 1px ink `border`. Ghost: `accent` on hover.
|
|
75
|
-
- **Input** — `background` fill, 1px `input` (black) border, `radius` 0; focus draws the black `ring` at
|
|
76
|
-
a full 2px with 1px offset, no glow. Standalone fields wear the black edge; inline table-edit cells
|
|
77
|
-
relax to the `border` hairline.
|
|
78
|
-
- **Card** — `card` surface, no shadow; hierarchy is the 1px `border` hairline alone, `radius` 0.
|
|
79
|
-
- **Table row** — height `table-row-height`; `border` hairline grid lines; `muted` on hover;
|
|
80
|
-
`tabular-nums` on numeric columns; row selection tints `accent`.
|
|
81
|
-
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
|
|
82
|
-
beside the work, not over it; it lifts by a 2px `border`, never a shadow.
|
|
83
|
-
- **Badge** — square (`radius` 0), hairline `border`, `muted` / status fill, uppercase caption; status
|
|
84
|
-
badges take `success` / `warning` / `destructive`, never `primary`.
|
|
85
|
-
|
|
86
|
-
## 5 Layout
|
|
87
|
-
|
|
88
|
-
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48`. Shell dimensions
|
|
89
|
-
map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`,
|
|
90
|
-
topbar `topbar-height` (the thin masthead band), side panel `side-panel-width` / `side-panel-width-rich`,
|
|
91
|
-
modal `modal-width-max`, forms `form-max-width`, tables full-width in a wide ~1400px container. Density
|
|
92
|
-
is governed globally by `density-tier` and stepped per archetype — never by absolute overrides.
|
|
93
|
-
|
|
94
|
-
## 6 Depth
|
|
95
|
-
|
|
96
|
-
Flat, and emphatically so — the brand uses zero drop-shadows. Hierarchy is the surface duet and
|
|
97
|
-
hairlines, across three z-levels (content, sticky chrome, overlay):
|
|
98
|
-
|
|
99
|
-
- **0 — canvas** `background`, no border. Almost every surface lives here.
|
|
100
|
-
- **1 — hairline** `card` / row / input on a 1px `border` (`#e0e0e0`) — the brand's only elevation cue.
|
|
101
|
-
- **2 — heavy black border** a 2px `border` at ink for the moment that must stand off the page — a
|
|
102
|
-
floated overlay, the side panel, the modal; rank is border weight and position, never a shadow.
|
|
103
|
-
|
|
104
|
-
Focus reuses that heavy black border: a 2px black `ring` outline (never a glow) on every interactive
|
|
105
|
-
element, put to keyboard work.
|
|
106
|
-
|
|
107
|
-
## 7 Do's & Don'ts
|
|
108
|
-
|
|
109
|
-
- **Do** hold the strict black-on-white duet — pure-black `foreground` on `#ffffff` canvas is a
|
|
110
|
-
deliberate brand override of the usual near-black default; keep it.
|
|
111
|
-
- **Do** keep `radius` at 0 on every button, input, card, and badge; the only round shape is a circular
|
|
112
|
-
icon container. Carry elevation with the `border` hairline (or the 2px black border), never a shadow.
|
|
113
|
-
- **Don't** introduce a chromatic brand accent — link blue is text-links only, never a button, nav, or
|
|
114
|
-
focus ring; the chrome accent is black.
|
|
115
|
-
- **Don't** round a corner, bold the serif past 400, drop a soft shadow, or open detail in a modal when
|
|
116
|
-
the side panel fits.
|
|
117
|
-
|
|
118
|
-
## 8 Responsive
|
|
119
|
-
|
|
120
|
-
| Breakpoint | What changes |
|
|
121
|
-
| --- | --- |
|
|
122
|
-
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; h1 32 → 26; density holds |
|
|
123
|
-
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
124
|
-
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
125
|
-
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
126
|
-
|
|
127
|
-
## 9 Agent Prompt Guide
|
|
128
|
-
|
|
129
|
-
- **Carries:** the strict black-on-white duet; pure-black ink and CTA; the dead-neutral achromatic
|
|
130
|
-
grays; square `radius` 0 geometry; hairline-and-black-border elevation (zero shadow); the Apercu sans
|
|
131
|
-
for all chrome with the editorial serif on page titles; the scarce link blue for text links only.
|
|
132
|
-
- **Stays behind:** the 64px `WiredDisplay` cover hero; the full-bleed 16:9 story photography; the
|
|
133
|
-
magazine cover-grid; the relaxed 2.2 byline line-height; the campaign-only heavy-border theatrics.
|
|
134
|
-
- Lead every list with its table and every entity with its primary read — not chrome. The accent is
|
|
135
|
-
black; if something wants colour it wants weight or a hairline, and link blue stays on text links.
|
|
136
|
-
- Keep every control square; page titles wear the serif (never bolded past 400), everything else Apercu
|
|
137
|
-
sans; `tabular-nums` on numeric columns, `font-mono` on IDs / codes / timestamps.
|
|
138
|
-
- Every workflow completes from the keyboard, the 2px black `ring` always visible; stay flat — hairline
|
|
139
|
-
and the black border before anything, the brand owns no shadow.
|