@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,205 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: ibm
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [enterprise, business-tools, data]
|
|
6
|
-
keywords: [carbon, square, ibm-blue, plex, dense, flat]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 ibm entry (2026-07-04) + 2026-07-12 re-audit of IBM's Carbon Design System; IBM Plex Sans + IBM Plex Mono kept (both open, OFL, the brand's own faces); the 76/60/42px weight-300 hero display, full-bleed blue CTA banner, inverted footer, and hero gradient stay behind; dark theme authored from Carbon's Gray 100"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# ibm — an engineer's ruled drafting sheet on the square grid
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An engineer's drafting sheet under even light: white paper ruled in fine gray, every
|
|
16
|
-
element set on a square grid, one blue plotter line, and nothing rounded. Light by
|
|
17
|
-
default; flat and square — every button, card, input, and container sits at 0px corners,
|
|
18
|
-
and rank is carried by a 1px hairline `border` and surface change, never shadow. A single
|
|
19
|
-
accent, IBM Blue `primary`, is reserved for the one action that matters, links, and the
|
|
20
|
-
focus rule. The neutral ramp is charcoal ink on white with fine gray doing the structural
|
|
21
|
-
work. Dense by design — Carbon expects a lot on the page, not a lot of air. The dark
|
|
22
|
-
theme is Carbon's Gray 100, authored as a ladder.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
Charcoal `foreground` on white `background`; `primary` IBM Blue is the only chromatic hue
|
|
26
|
-
that carries meaning — the one primary action, links, active nav, and the focus rule,
|
|
27
|
-
treated as scarce. `accent` is a blue-10 tint for selected and hovered rows, a surface
|
|
28
|
-
step not a fill. Status hues (`destructive`, `success`, `warning`) speak status only.
|
|
29
|
-
Sections separate by thin gray rows, not large gaps — Carbon spends alignment, not air.
|
|
30
|
-
Sidebar sits a faint gray step off the white in both themes.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
IBM Plex Sans carries UI, body, and headings — rank comes from size and weight, never a
|
|
34
|
-
second face; IBM Plex Mono returns for IDs, codes, timestamps, and log lines. Register
|
|
35
|
-
scope: operator headings run weight 600, and the marketing weight-300 hero display stays
|
|
36
|
-
behind. Body keeps Carbon's signature +0.16px positive tracking. Eyebrows stay sentence
|
|
37
|
-
case — Carbon resists the all-caps tracked eyebrow. Every numeric column renders
|
|
38
|
-
`tabular-nums`; emphasis bumps weight, never size.
|
|
39
|
-
|
|
40
|
-
## 4 Component Stylings
|
|
41
|
-
Buttons `radius-sm` (0px, square, never pill), IBM Blue `primary` fill; secondary follows
|
|
42
|
-
Carbon's charcoal treatment, `foreground` fill with `primary-foreground` text; ghost is a
|
|
43
|
-
1px `primary` border, fill only on hover. Inputs take a `muted` fill and a 1px bottom
|
|
44
|
-
`border`; focus swaps it for the signature 2px `ring` underline plus the full outline,
|
|
45
|
-
square. Cards flat on `card` with a hairline, 0px corners, no shadow; a recommended tile
|
|
46
|
-
lifts by moving to `muted`, not by elevation. Table rows dense on `border` grid, `muted`
|
|
47
|
-
hover, `accent` selection, mono figures. Detail opens in the side panel. Badges square,
|
|
48
|
-
hairline, status fill, never `primary`.
|
|
49
|
-
|
|
50
|
-
## 5 Layout
|
|
51
|
-
4px base (Carbon's grid); ramp 2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. Side nav
|
|
52
|
-
256/48px; topbar 48px; side panel 420/640px; content max 1312px; tables full-width. Dense
|
|
53
|
-
globally — Carbon spends alignment, not air — stepped per archetype, never absolute overrides.
|
|
54
|
-
|
|
55
|
-
## 6 Depth
|
|
56
|
-
Flat — the surface ladder and hairlines carry all rank. Light: `background` → `muted`
|
|
57
|
-
surface change and 1px hairlines do the work; overlays earn the one soft blue-tinted
|
|
58
|
-
tier. Dark: the authored Gray 100 ladder — `background` 0.20 L, `surface-raised` +0.06,
|
|
59
|
-
`surface-overlay` +0.10, hue held at 262. Focus is Carbon's 2px `primary` outline (with a
|
|
60
|
-
strong underline on fields), always visible; three z-levels: content, sticky chrome, overlay.
|
|
61
|
-
|
|
62
|
-
## 7 Motion
|
|
63
|
-
Productive and quick. Named moments: `press` (primary action, 110ms), `panel-slide`
|
|
64
|
-
(side panel, 240ms, interruptible), `tile-fade` (content arrive, 150ms). Physicality is
|
|
65
|
-
granted only to auth; nothing animates in tables or any keyboard-initiated action.
|
|
66
|
-
|
|
67
|
-
## 8 Iconography & Charts
|
|
68
|
-
Lucide, 1.75px stroke (Carbon-weight), 16/20px grid, `muted-foreground` default. Charts:
|
|
69
|
-
hairline axes, no gridline fills; the Carbon categorical ramp — blue, purple, cyan,
|
|
70
|
-
magenta, gold (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
Plain and enterprise-clear — no exclamation, no marketing lift. "Create resource" · "No
|
|
74
|
-
instances running in this account" · "This action can't be undone; deleting removes 3
|
|
75
|
-
attached volumes."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do keep every button, card, input, and container at 0px square — the flat geometry is the
|
|
79
|
-
brand. Do reserve IBM Blue `primary` for the single action, links, and the focus rule.
|
|
80
|
-
Do carry rank with surface change and 1px hairlines, and keep the +0.16px body tracking
|
|
81
|
-
with sentence-case eyebrows. Don't round corners — even 4px breaks the Carbon look.
|
|
82
|
-
Don't bold headings past weight 600 or reach for the marketing weight-300 hero. Don't
|
|
83
|
-
promote a second chromatic accent or signal rank with shadow.
|
|
84
|
-
|
|
85
|
-
## 11 Responsive
|
|
86
|
-
375: side nav → hamburger overlay; utility meta hides; two-pane list+detail stacks; side
|
|
87
|
-
panel → full sheet; density holds. 768: side nav → 48px icon rail; tables scroll overflow;
|
|
88
|
-
card grid → 2-up. 1024: side nav expands; two-pane queue+detail holds; grid up to 4-up.
|
|
89
|
-
1440: content caps for forms; tables and dashboards take the full width.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Lead every list surface with its data table; keep it square and dense. Accent only the
|
|
93
|
-
primary action — IBM Blue is scarce (links, primary CTA, focus). Keep 0px corners
|
|
94
|
-
everywhere; a rounded corner reads as a different brand. IDs and timestamps in Plex Mono;
|
|
95
|
-
body keeps +0.16px tracking and sentence-case eyebrows. Dark is authored — consult the
|
|
96
|
-
block, never derive.
|
|
97
|
-
|
|
98
|
-
```yaml design-values
|
|
99
|
-
color:
|
|
100
|
-
light:
|
|
101
|
-
background: oklch(0.995 0.004 262)
|
|
102
|
-
foreground: oklch(0.21 0.006 262)
|
|
103
|
-
card: oklch(0.995 0.004 262)
|
|
104
|
-
card-foreground: oklch(0.21 0.006 262)
|
|
105
|
-
popover: oklch(0.995 0.004 262)
|
|
106
|
-
popover-foreground: oklch(0.21 0.006 262)
|
|
107
|
-
primary: oklch(0.56 0.24 262)
|
|
108
|
-
primary-foreground: oklch(0.99 0.004 262)
|
|
109
|
-
secondary: oklch(0.967 0.005 262)
|
|
110
|
-
secondary-foreground: oklch(0.25 0.007 262)
|
|
111
|
-
muted: oklch(0.967 0.005 262)
|
|
112
|
-
muted-foreground: oklch(0.44 0.008 262)
|
|
113
|
-
accent: oklch(0.965 0.016 254)
|
|
114
|
-
accent-foreground: oklch(0.45 0.20 262)
|
|
115
|
-
destructive: oklch(0.57 0.22 26)
|
|
116
|
-
destructive-foreground: oklch(0.99 0.008 26)
|
|
117
|
-
success: oklch(0.62 0.16 148)
|
|
118
|
-
warning: oklch(0.83 0.16 90)
|
|
119
|
-
border: oklch(0.907 0.005 262)
|
|
120
|
-
input: oklch(0.907 0.005 262)
|
|
121
|
-
ring: oklch(0.56 0.24 262)
|
|
122
|
-
surface-raised: oklch(0.985 0.005 262)
|
|
123
|
-
surface-overlay: oklch(0.995 0.004 262)
|
|
124
|
-
chart-1: oklch(0.56 0.24 262)
|
|
125
|
-
chart-2: oklch(0.55 0.20 300)
|
|
126
|
-
chart-3: oklch(0.60 0.12 200)
|
|
127
|
-
chart-4: oklch(0.60 0.22 350)
|
|
128
|
-
chart-5: oklch(0.70 0.13 90)
|
|
129
|
-
sidebar: oklch(0.967 0.005 262)
|
|
130
|
-
sidebar-foreground: oklch(0.21 0.006 262)
|
|
131
|
-
sidebar-primary: oklch(0.56 0.24 262)
|
|
132
|
-
sidebar-primary-foreground: oklch(0.99 0.004 262)
|
|
133
|
-
sidebar-accent: oklch(0.94 0.015 254)
|
|
134
|
-
sidebar-accent-foreground: oklch(0.40 0.18 262)
|
|
135
|
-
sidebar-border: oklch(0.907 0.005 262)
|
|
136
|
-
sidebar-ring: oklch(0.56 0.24 262)
|
|
137
|
-
dark:
|
|
138
|
-
background: oklch(0.20 0.006 262)
|
|
139
|
-
foreground: oklch(0.96 0.004 262)
|
|
140
|
-
card: oklch(0.26 0.007 262)
|
|
141
|
-
card-foreground: oklch(0.96 0.004 262)
|
|
142
|
-
popover: oklch(0.30 0.008 262)
|
|
143
|
-
popover-foreground: oklch(0.96 0.004 262)
|
|
144
|
-
primary: oklch(0.54 0.22 262)
|
|
145
|
-
primary-foreground: oklch(0.99 0.004 262)
|
|
146
|
-
secondary: oklch(0.28 0.008 262)
|
|
147
|
-
secondary-foreground: oklch(0.92 0.005 262)
|
|
148
|
-
muted: oklch(0.26 0.007 262)
|
|
149
|
-
muted-foreground: oklch(0.70 0.010 262)
|
|
150
|
-
accent: oklch(0.32 0.05 258)
|
|
151
|
-
accent-foreground: oklch(0.85 0.09 258)
|
|
152
|
-
destructive: oklch(0.64 0.20 26)
|
|
153
|
-
destructive-foreground: oklch(0.15 0.02 26)
|
|
154
|
-
success: oklch(0.68 0.15 148)
|
|
155
|
-
warning: oklch(0.80 0.15 90)
|
|
156
|
-
border: oklch(0.32 0.008 262)
|
|
157
|
-
input: oklch(0.32 0.008 262)
|
|
158
|
-
ring: oklch(0.66 0.18 258)
|
|
159
|
-
surface-raised: oklch(0.26 0.007 262)
|
|
160
|
-
surface-overlay: oklch(0.30 0.008 262)
|
|
161
|
-
chart-1: oklch(0.66 0.20 258)
|
|
162
|
-
chart-2: oklch(0.64 0.18 300)
|
|
163
|
-
chart-3: oklch(0.68 0.11 200)
|
|
164
|
-
chart-4: oklch(0.68 0.20 350)
|
|
165
|
-
chart-5: oklch(0.78 0.13 90)
|
|
166
|
-
sidebar: oklch(0.17 0.006 262)
|
|
167
|
-
sidebar-foreground: oklch(0.92 0.005 262)
|
|
168
|
-
sidebar-primary: oklch(0.54 0.22 262)
|
|
169
|
-
sidebar-primary-foreground: oklch(0.99 0.004 262)
|
|
170
|
-
sidebar-accent: oklch(0.30 0.045 258)
|
|
171
|
-
sidebar-accent-foreground: oklch(0.85 0.09 258)
|
|
172
|
-
sidebar-border: oklch(0.28 0.008 262)
|
|
173
|
-
sidebar-ring: oklch(0.66 0.18 258)
|
|
174
|
-
typography:
|
|
175
|
-
display: { family: "IBM Plex Sans", fallback: "system-ui, sans-serif", weights: [600] }
|
|
176
|
-
sans: { family: "IBM Plex Sans", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
177
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
178
|
-
ramp:
|
|
179
|
-
display: { size: 42px, line: 50px, weight: 600, family: display }
|
|
180
|
-
h1: { size: 32px, line: 40px, weight: 600, family: sans }
|
|
181
|
-
h2: { size: 24px, line: 32px, weight: 600, family: sans }
|
|
182
|
-
body: { size: 16px, line: 24px, weight: 400, family: sans, tracking: 0.16px }
|
|
183
|
-
small: { size: 14px, line: 18px, weight: 400, family: sans, tracking: 0.16px }
|
|
184
|
-
caption: { size: 12px, line: 16px, weight: 400, family: sans, tracking: 0.32px }
|
|
185
|
-
data: { size: 14px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
186
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, codes, timestamps] }
|
|
187
|
-
elevation:
|
|
188
|
-
radius: { sm: 0px, md: 0px, lg: 0px }
|
|
189
|
-
hairline: border
|
|
190
|
-
shadow:
|
|
191
|
-
overlay: "0 8px 28px oklch(0.20 0.02 262 / 0.10)"
|
|
192
|
-
popover: "0 4px 14px oklch(0.20 0.02 262 / 0.08)"
|
|
193
|
-
dark-ladder: { background: 0.20, raised: 0.26, overlay: 0.30, hue-held: 262 }
|
|
194
|
-
motion:
|
|
195
|
-
duration: { press: 110ms, fade: 150ms, panel: 240ms }
|
|
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]
|
|
199
|
-
iconography: { set: lucide, stroke: 1.75px, grid: [16px, 20px] }
|
|
200
|
-
charts:
|
|
201
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
202
|
-
sequential: { from: background, to: chart-1 }
|
|
203
|
-
diverging: { negative: destructive, mid: muted, positive: chart-3 }
|
|
204
|
-
layout: { base: 4px, sidebar: [256px, 48px], topbar: 48px, side-panel: [420px, 640px], content-max: 1312px }
|
|
205
|
-
```
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: intercom
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [customer-service, support, saas]
|
|
6
|
-
keywords: [cream, warm, fin-orange, editorial, calm, restrained]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 intercom entry (2026-07-04) + 2026-07-12 re-audit of the calm editorial customer-service brand; Inter Variable (emphasis capped at weight 500) substitutes Saans, JetBrains Mono substitutes SaansMono; the 72px hero, pure-black quote strip, pill tab toggles, and 96px section rhythm stay behind; Brand Blue and the report palette survive only as chart hues; dark theme authored (public web is light only)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# intercom — a quiet publishing office after the mail run
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A quiet publishing office after the mail run: a warm cream desk, white cards laid on top,
|
|
16
|
-
charcoal ink, and one orange wax stamp held in reserve. Light by default; the anchor
|
|
17
|
-
surface is not white — it is a soft warm cream `background`, the brand's defining signal.
|
|
18
|
-
Panels and cards lift onto white `card`: the depth strategy is a surface change, not a
|
|
19
|
-
shadow. Flat throughout — the cream-to-white ladder, warm hairline `border`, and type
|
|
20
|
-
weight carry rank. A single chromatic voltage, Fin Orange `primary`, is held in reserve
|
|
21
|
-
for the one action that matters. The dark theme is the same room by lamplight, a warm
|
|
22
|
-
charcoal ladder — never inverted paper. Density is calm and editorial.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
Charcoal `foreground` on cream `background`; cards and panels lift onto white `card` — the
|
|
26
|
-
white-on-cream shift is the elevation. `primary` Fin Orange is the single chromatic hue
|
|
27
|
-
that carries meaning — the one primary action per surface, held in reserve. `accent` is a
|
|
28
|
-
deeper cream for selection and hover — a warm-neutral shift, not color. Status hues speak
|
|
29
|
-
status only; Brand Blue and the report palette survive only in charts. Sidebar sits a
|
|
30
|
-
faint cream step off the canvas in both themes.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
Inter (single voice — the open substitute for Saans) / JetBrains Mono (IDs, timestamps,
|
|
34
|
-
log lines — substitute for SaansMono). Register scope: no hero display face — Inter
|
|
35
|
-
carries headings, and the signature is restraint, with emphasis capped at weight 500;
|
|
36
|
-
the brand never bolds past it. Negative tracking scales with size. Eyebrows are sentence
|
|
37
|
-
case, never all-caps tracked. Every numeric column renders `tabular-nums`.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons `radius-md` (8px, never pill), Fin Orange `primary` fill on white; secondary
|
|
41
|
-
takes warm-cream `secondary` with a hairline and a charcoal label; ghost goes `accent` on
|
|
42
|
-
hover. Inputs take a white `card` fill with a hairline `input` edge and a 2px Fin Orange
|
|
43
|
-
`ring`, no glow. Cards white lifting off the cream on a hairline, `radius-lg` for larger
|
|
44
|
-
panels; shadow only when a true overlay floats. Table rows `muted` hover, `accent`
|
|
45
|
-
selection (warm-neutral, not orange), mono numerals. Detail opens in the side panel.
|
|
46
|
-
Badges pill, hairline, `muted`/status fill, sentence-case label, never `primary`.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
8px base; ramp 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 248/56px; topbar 56px; side
|
|
50
|
-
panel 420/640px; content max 1280px; tables full-width; card interiors a calm 24px.
|
|
51
|
-
Standard density, calm and editorial, stepped per archetype, never absolute overrides.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Flat, surface-change-first — the cream-to-white ladder and warm hairlines carry rank;
|
|
55
|
-
Intercom resists drop shadows. Light: cards lift by turning white on the cream; overlays
|
|
56
|
-
earn one faint warm-tinted tier over a scrim. Dark: the authored ladder — `background`
|
|
57
|
-
0.19 L, `surface-raised` +0.04, `surface-overlay` +0.09, hue held at 60. Focus is a 2px
|
|
58
|
-
Fin Orange `ring`, always visible; three z-levels: content, sticky chrome, overlay.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Calm and editorial. Named moments: `panel-slide` (side panel, 240ms, interruptible),
|
|
62
|
-
`page-fade` (content arrive, 160ms), `press` (primary action, 120ms). Physicality is
|
|
63
|
-
granted only to auth and first-run empty states; nothing animates in tables or any
|
|
64
|
-
keyboard-initiated action.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes, no
|
|
68
|
-
gridline fills; the report palette runs as encodings — Fin Orange, brand blue, green,
|
|
69
|
-
pink, gold (`chart-1..5`); tooltips on `surface-overlay` with mono numerals.
|
|
70
|
-
|
|
71
|
-
## 9 Voice
|
|
72
|
-
Warm and human — a calm concierge, never breathless. "Start conversation" · "You're all
|
|
73
|
-
caught up — no open conversations" · "This customer hasn't replied in 3 days; a nudge may
|
|
74
|
-
help."
|
|
75
|
-
|
|
76
|
-
## 10 Do's & Don'ts
|
|
77
|
-
Do anchor on the warm cream canvas — pure white reads as ordinary SaaS; the cream is the
|
|
78
|
-
brand. Do lift panels onto white `card` off the cream — the surface change is the depth.
|
|
79
|
-
Do reserve Fin Orange for the single most important action. Don't use pure white as the
|
|
80
|
-
canvas or add drop shadows to floating cards. Don't spread Fin Orange — no orange section
|
|
81
|
-
fills, no orange on secondary actions, no second chromatic accent. Don't bold past weight
|
|
82
|
-
500, pill the primary CTA, or write all-caps tracked eyebrows.
|
|
83
|
-
|
|
84
|
-
## 11 Responsive
|
|
85
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
86
|
-
density holds. 768: sidebar → icon rail; tables scroll overflow; card grids → 2-up. 1024:
|
|
87
|
-
two-pane queue+detail holds; card grids 3-up. 1440: forms cap; tables and dashboards take
|
|
88
|
-
the full width; the cream breathing widens.
|
|
89
|
-
|
|
90
|
-
## 12 Agent Prompt Guide
|
|
91
|
-
Reach for the warm cream canvas first — never pure white; the cream tint is Intercom. Lift
|
|
92
|
-
cards by turning them white on the cream, not by casting a shadow. Accent only the primary
|
|
93
|
-
action in Fin Orange; if two things want it, one is not primary. Type stays at weight 500
|
|
94
|
-
for emphasis, never bold; eyebrows are sentence case. Every numeric column is mono
|
|
95
|
-
`tabular-nums`. Dark is authored — consult the block, never derive.
|
|
96
|
-
|
|
97
|
-
```yaml design-values
|
|
98
|
-
color:
|
|
99
|
-
light:
|
|
100
|
-
background: oklch(0.96 0.008 74)
|
|
101
|
-
foreground: oklch(0.18 0.004 74)
|
|
102
|
-
card: oklch(0.995 0.003 74)
|
|
103
|
-
card-foreground: oklch(0.18 0.004 74)
|
|
104
|
-
popover: oklch(0.995 0.003 74)
|
|
105
|
-
popover-foreground: oklch(0.18 0.004 74)
|
|
106
|
-
primary: oklch(0.65 0.215 37)
|
|
107
|
-
primary-foreground: oklch(0.99 0.01 60)
|
|
108
|
-
secondary: oklch(0.93 0.009 78)
|
|
109
|
-
secondary-foreground: oklch(0.24 0.005 74)
|
|
110
|
-
muted: oklch(0.93 0.009 78)
|
|
111
|
-
muted-foreground: oklch(0.50 0.006 78)
|
|
112
|
-
accent: oklch(0.91 0.013 80)
|
|
113
|
-
accent-foreground: oklch(0.24 0.005 74)
|
|
114
|
-
destructive: oklch(0.53 0.20 28)
|
|
115
|
-
destructive-foreground: oklch(0.99 0.01 28)
|
|
116
|
-
success: oklch(0.60 0.15 150)
|
|
117
|
-
warning: oklch(0.67 0.16 58)
|
|
118
|
-
border: oklch(0.85 0.012 80)
|
|
119
|
-
input: oklch(0.85 0.012 80)
|
|
120
|
-
ring: oklch(0.65 0.215 37)
|
|
121
|
-
surface-raised: oklch(0.99 0.004 74)
|
|
122
|
-
surface-overlay: oklch(0.995 0.003 74)
|
|
123
|
-
chart-1: oklch(0.65 0.215 37)
|
|
124
|
-
chart-2: oklch(0.55 0.15 265)
|
|
125
|
-
chart-3: oklch(0.60 0.14 150)
|
|
126
|
-
chart-4: oklch(0.62 0.16 340)
|
|
127
|
-
chart-5: oklch(0.70 0.13 90)
|
|
128
|
-
sidebar: oklch(0.945 0.010 74)
|
|
129
|
-
sidebar-foreground: oklch(0.18 0.004 74)
|
|
130
|
-
sidebar-primary: oklch(0.65 0.215 37)
|
|
131
|
-
sidebar-primary-foreground: oklch(0.99 0.01 60)
|
|
132
|
-
sidebar-accent: oklch(0.91 0.013 80)
|
|
133
|
-
sidebar-accent-foreground: oklch(0.24 0.005 74)
|
|
134
|
-
sidebar-border: oklch(0.85 0.012 80)
|
|
135
|
-
sidebar-ring: oklch(0.65 0.215 37)
|
|
136
|
-
dark:
|
|
137
|
-
background: oklch(0.19 0.008 60)
|
|
138
|
-
foreground: oklch(0.95 0.006 74)
|
|
139
|
-
card: oklch(0.23 0.009 60)
|
|
140
|
-
card-foreground: oklch(0.95 0.006 74)
|
|
141
|
-
popover: oklch(0.27 0.010 60)
|
|
142
|
-
popover-foreground: oklch(0.95 0.006 74)
|
|
143
|
-
primary: oklch(0.70 0.20 41)
|
|
144
|
-
primary-foreground: oklch(0.16 0.02 41)
|
|
145
|
-
secondary: oklch(0.25 0.009 60)
|
|
146
|
-
secondary-foreground: oklch(0.90 0.007 74)
|
|
147
|
-
muted: oklch(0.24 0.009 60)
|
|
148
|
-
muted-foreground: oklch(0.71 0.010 74)
|
|
149
|
-
accent: oklch(0.28 0.011 60)
|
|
150
|
-
accent-foreground: oklch(0.92 0.006 74)
|
|
151
|
-
destructive: oklch(0.62 0.20 28)
|
|
152
|
-
destructive-foreground: oklch(0.15 0.02 28)
|
|
153
|
-
success: oklch(0.68 0.15 150)
|
|
154
|
-
warning: oklch(0.74 0.15 58)
|
|
155
|
-
border: oklch(0.30 0.011 60)
|
|
156
|
-
input: oklch(0.30 0.011 60)
|
|
157
|
-
ring: oklch(0.70 0.20 41)
|
|
158
|
-
surface-raised: oklch(0.23 0.009 60)
|
|
159
|
-
surface-overlay: oklch(0.28 0.010 60)
|
|
160
|
-
chart-1: oklch(0.72 0.19 41)
|
|
161
|
-
chart-2: oklch(0.64 0.15 265)
|
|
162
|
-
chart-3: oklch(0.68 0.14 150)
|
|
163
|
-
chart-4: oklch(0.70 0.16 340)
|
|
164
|
-
chart-5: oklch(0.78 0.13 90)
|
|
165
|
-
sidebar: oklch(0.17 0.008 60)
|
|
166
|
-
sidebar-foreground: oklch(0.90 0.007 74)
|
|
167
|
-
sidebar-primary: oklch(0.70 0.20 41)
|
|
168
|
-
sidebar-primary-foreground: oklch(0.16 0.02 41)
|
|
169
|
-
sidebar-accent: oklch(0.26 0.011 60)
|
|
170
|
-
sidebar-accent-foreground: oklch(0.92 0.006 74)
|
|
171
|
-
sidebar-border: oklch(0.26 0.011 60)
|
|
172
|
-
sidebar-ring: oklch(0.70 0.20 41)
|
|
173
|
-
typography:
|
|
174
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [500] }
|
|
175
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 500] }
|
|
176
|
-
mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
177
|
-
ramp:
|
|
178
|
-
display: { size: 28px, line: 34px, weight: 500, family: display, tracking: -0.02em }
|
|
179
|
-
h1: { size: 24px, line: 30px, weight: 500, family: sans, tracking: -0.015em }
|
|
180
|
-
h2: { size: 20px, line: 26px, weight: 500, family: sans, tracking: -0.01em }
|
|
181
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
182
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
183
|
-
caption: { size: 13px, line: 17px, weight: 500, family: sans }
|
|
184
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
185
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, logs] }
|
|
186
|
-
elevation:
|
|
187
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
188
|
-
hairline: border
|
|
189
|
-
shadow:
|
|
190
|
-
overlay: "0 8px 28px oklch(0.20 0.02 60 / 0.10)"
|
|
191
|
-
popover: "0 4px 14px oklch(0.20 0.02 60 / 0.08)"
|
|
192
|
-
dark-ladder: { background: 0.19, raised: 0.23, overlay: 0.28, hue-held: 60 }
|
|
193
|
-
motion:
|
|
194
|
-
duration: { press: 120ms, fade: 160ms, panel: 240ms }
|
|
195
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
196
|
-
entrance-never: ease-in
|
|
197
|
-
identity-moments: [auth, first-run-empty]
|
|
198
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
199
|
-
charts:
|
|
200
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
201
|
-
sequential: { from: background, to: chart-1 }
|
|
202
|
-
diverging: { negative: destructive, mid: muted, positive: chart-3 }
|
|
203
|
-
layout: { base: 8px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
|
|
204
|
-
```
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: kraken
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [fintech, crypto, trading]
|
|
6
|
-
keywords: [purple, crypto, exchange, cool, rounded, trustworthy]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 kraken entry (2026-07-04) + 2026-07-12 re-audit of the public Kraken identity; proprietary Kraken-Brand/Kraken-Product faces substituted with IBM Plex Sans (the corpus's own documented fallback)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# kraken — a marble exchange lobby with one purple seal
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A marble-and-glass exchange lobby: white stone underfoot, cool steel fittings, and a
|
|
16
|
-
single deep-purple banner hung where every visitor's eye lands. Light default; dark is
|
|
17
|
-
the same lobby after close — cool charcoal holding the blue-violet cast, never flipped
|
|
18
|
-
paper. Flat: hierarchy rides hairline `border`, weight, and contrast; shadows stay at
|
|
19
|
-
whisper level. One accent — Kraken Purple `primary` — commands the one action that
|
|
20
|
-
matters. Density is standard; geometry firmly rounded, never a pill.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Cool near-black `foreground` on a white `background`; the neutral field is a cool
|
|
24
|
-
blue-gray ladder that reads engineered, not warm. `primary` purple is the only
|
|
25
|
-
chromatic hue carrying brand meaning: the primary action, active nav, the inline brand
|
|
26
|
-
link. `accent` is the light purple wash for selected rows and nav — a tint, never a
|
|
27
|
-
fill. Trading direction rides `success` (up) / `destructive` (down) as text color only;
|
|
28
|
-
`warning` is caution status, never chrome. `ring` focus is always the purple.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
IBM Plex Sans (single sans — the documented open fallback for the proprietary
|
|
32
|
-
Kraken-Brand/Kraken-Product pair) / IBM Plex Mono (the fintech number voice). Register
|
|
33
|
-
scope: the heavy display cut touches auth and first-run empty states only; Plex Sans at
|
|
34
|
-
600 with negative tracking carries every operator heading; Plex Mono owns prices,
|
|
35
|
-
percent changes, IDs, and timestamps — every numeric column `tabular-nums`. Emphasis
|
|
36
|
-
bumps weight, never size.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons `radius-md` (12px), `primary` fill, no pill; outlined variant takes a
|
|
40
|
-
`primary` hairline with `primary` text; subtle variant is the `accent` wash. Inputs
|
|
41
|
-
hairline `border` with a 2px `ring` focus, no glow. Cards flat on `card` with a
|
|
42
|
-
hairline; the whisper shadow only when a card must lift. Table rows dense with
|
|
43
|
-
`border` grid lines, `muted` hover, `accent` selection; direction cells color text
|
|
44
|
-
with `success`/`destructive`, never fills. Detail opens in the side panel. Badges:
|
|
45
|
-
hairline `border`, low-alpha status fill, uppercase caption, 6px corner.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base; ramp 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48. Sidebar 248/56px; topbar 56px;
|
|
49
|
-
side panel 440/680px; content max 1440px; tables full-width. Clean and calm, never
|
|
50
|
-
cramped — the marketing's odd 3/5/13px steps stay behind.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
Flat, hairline-first. Light: cool hairlines carry all structure; two whisper tiers
|
|
54
|
-
only — a micro lift for cards that must rise, a soft tier for true overlays — both
|
|
55
|
-
purple-tinted, never black. Dark: the surface ladder does depth — `background` 0.15 L,
|
|
56
|
-
`surface-raised` +0.05, `surface-overlay` +0.10, hue held at 286. Focus is a 2px
|
|
57
|
-
purple `ring`, never a glow; three z-levels: content, sticky chrome, overlay.
|
|
58
|
-
|
|
59
|
-
## 7 Motion
|
|
60
|
-
Composed. Named moments: `panel-dock` (side panel, 220ms, interruptible), `row-settle`
|
|
61
|
-
(list refresh fade, 140ms), `purple-press` (primary-action press, 100ms). Physicality
|
|
62
|
-
is granted only to auth and first-run empty states. Nothing animates in price tables,
|
|
63
|
-
order books, or any keyboard-initiated action.
|
|
64
|
-
|
|
65
|
-
## 8 Iconography & Charts
|
|
66
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
67
|
-
no gridline fills; categorical ramp runs purple-led (`chart-1..5`); up/down series
|
|
68
|
-
take `chart-2`/`chart-3`; tooltips on `surface-overlay` with mono numerals.
|
|
69
|
-
|
|
70
|
-
## 9 Voice
|
|
71
|
-
Steady desk officer: precise verbs, figures stated without flourish, no exclamation.
|
|
72
|
-
"Place order" · "No open positions — funding settles at 04:00 UTC" · "This withdrawal
|
|
73
|
-
exceeds your daily limit; verify to continue."
|
|
74
|
-
|
|
75
|
-
## 10 Do's & Don'ts
|
|
76
|
-
Do reserve Kraken Purple for exactly one action per viewport, active nav, and inline
|
|
77
|
-
brand links. Do keep controls at the 12px `radius-md` ceiling — badges step down,
|
|
78
|
-
nothing pills. Do carry every figure in mono with `tabular-nums`. Don't reach for an
|
|
79
|
-
off-scale purple — off-scale purples read off-brand. Don't signal elevation with heavy
|
|
80
|
-
or stacked shadows. Don't let up/down hues become fills or chrome.
|
|
81
|
-
|
|
82
|
-
## 11 Responsive
|
|
83
|
-
375: sidebar → off-canvas drawer, side panel → full sheet, asset rows stack ticker
|
|
84
|
-
over price. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane
|
|
85
|
-
queue+detail holds. 1440: forms cap; tables and dashboards take the full width.
|
|
86
|
-
|
|
87
|
-
## 12 Agent Prompt Guide
|
|
88
|
-
Anchor on the white canvas; if two things want the purple, one is not primary. Keep
|
|
89
|
-
the cool blue-gray temperature — never warm the neutrals. Every price, ID, and
|
|
90
|
-
timestamp is mono; direction is text color, never a fill. Stay flat — hairline and
|
|
91
|
-
surface before shadow. Dark is authored — consult the block, never derive.
|
|
92
|
-
|
|
93
|
-
```yaml design-values
|
|
94
|
-
color:
|
|
95
|
-
light:
|
|
96
|
-
background: oklch(0.99 0.005 286)
|
|
97
|
-
foreground: oklch(0.18 0.008 275)
|
|
98
|
-
card: oklch(0.995 0.005 286)
|
|
99
|
-
card-foreground: oklch(0.18 0.008 275)
|
|
100
|
-
popover: oklch(0.995 0.005 286)
|
|
101
|
-
popover-foreground: oklch(0.18 0.008 275)
|
|
102
|
-
primary: oklch(0.53 0.26 289)
|
|
103
|
-
primary-foreground: oklch(0.985 0.005 286)
|
|
104
|
-
secondary: oklch(0.972 0.005 286)
|
|
105
|
-
secondary-foreground: oklch(0.25 0.02 280)
|
|
106
|
-
muted: oklch(0.962 0.006 286)
|
|
107
|
-
muted-foreground: oklch(0.48 0.032 279)
|
|
108
|
-
accent: oklch(0.934 0.034 294)
|
|
109
|
-
accent-foreground: oklch(0.36 0.18 289)
|
|
110
|
-
destructive: oklch(0.55 0.196 21)
|
|
111
|
-
destructive-foreground: oklch(0.98 0.008 21)
|
|
112
|
-
success: oklch(0.55 0.13 157)
|
|
113
|
-
warning: oklch(0.68 0.155 68)
|
|
114
|
-
border: oklch(0.903 0.009 286)
|
|
115
|
-
input: oklch(0.903 0.009 286)
|
|
116
|
-
ring: oklch(0.53 0.26 289)
|
|
117
|
-
surface-raised: oklch(0.993 0.005 286)
|
|
118
|
-
surface-overlay: oklch(0.995 0.005 286)
|
|
119
|
-
chart-1: oklch(0.53 0.26 289)
|
|
120
|
-
chart-2: oklch(0.62 0.14 157)
|
|
121
|
-
chart-3: oklch(0.56 0.19 21)
|
|
122
|
-
chart-4: oklch(0.5 0.21 282)
|
|
123
|
-
chart-5: oklch(0.68 0.027 278)
|
|
124
|
-
sidebar: oklch(0.975 0.006 286)
|
|
125
|
-
sidebar-foreground: oklch(0.25 0.015 280)
|
|
126
|
-
sidebar-primary: oklch(0.53 0.26 289)
|
|
127
|
-
sidebar-primary-foreground: oklch(0.985 0.005 286)
|
|
128
|
-
sidebar-accent: oklch(0.93 0.025 292)
|
|
129
|
-
sidebar-accent-foreground: oklch(0.33 0.14 289)
|
|
130
|
-
sidebar-border: oklch(0.903 0.009 286)
|
|
131
|
-
sidebar-ring: oklch(0.53 0.26 289)
|
|
132
|
-
dark:
|
|
133
|
-
background: oklch(0.15 0.01 286)
|
|
134
|
-
foreground: oklch(0.93 0.008 286)
|
|
135
|
-
card: oklch(0.19 0.012 286)
|
|
136
|
-
card-foreground: oklch(0.93 0.008 286)
|
|
137
|
-
popover: oklch(0.25 0.014 286)
|
|
138
|
-
popover-foreground: oklch(0.93 0.008 286)
|
|
139
|
-
primary: oklch(0.58 0.24 289)
|
|
140
|
-
primary-foreground: oklch(0.985 0.005 286)
|
|
141
|
-
secondary: oklch(0.23 0.013 286)
|
|
142
|
-
secondary-foreground: oklch(0.89 0.01 286)
|
|
143
|
-
muted: oklch(0.22 0.012 286)
|
|
144
|
-
muted-foreground: oklch(0.68 0.022 280)
|
|
145
|
-
accent: oklch(0.29 0.055 289)
|
|
146
|
-
accent-foreground: oklch(0.92 0.03 293)
|
|
147
|
-
destructive: oklch(0.62 0.19 22)
|
|
148
|
-
destructive-foreground: oklch(0.14 0.02 22)
|
|
149
|
-
success: oklch(0.66 0.13 157)
|
|
150
|
-
warning: oklch(0.74 0.14 68)
|
|
151
|
-
border: oklch(0.27 0.013 286)
|
|
152
|
-
input: oklch(0.27 0.013 286)
|
|
153
|
-
ring: oklch(0.68 0.18 289)
|
|
154
|
-
surface-raised: oklch(0.2 0.012 286)
|
|
155
|
-
surface-overlay: oklch(0.25 0.014 286)
|
|
156
|
-
chart-1: oklch(0.62 0.2 289)
|
|
157
|
-
chart-2: oklch(0.7 0.13 157)
|
|
158
|
-
chart-3: oklch(0.64 0.17 21)
|
|
159
|
-
chart-4: oklch(0.58 0.18 282)
|
|
160
|
-
chart-5: oklch(0.72 0.03 278)
|
|
161
|
-
sidebar: oklch(0.13 0.01 286)
|
|
162
|
-
sidebar-foreground: oklch(0.9 0.008 286)
|
|
163
|
-
sidebar-primary: oklch(0.58 0.24 289)
|
|
164
|
-
sidebar-primary-foreground: oklch(0.985 0.005 286)
|
|
165
|
-
sidebar-accent: oklch(0.2 0.02 289)
|
|
166
|
-
sidebar-accent-foreground: oklch(0.9 0.02 292)
|
|
167
|
-
sidebar-border: oklch(0.22 0.012 286)
|
|
168
|
-
sidebar-ring: oklch(0.68 0.18 289)
|
|
169
|
-
typography:
|
|
170
|
-
display: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [600, 700] }
|
|
171
|
-
sans: { family: "IBM Plex Sans Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
172
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400, 500] }
|
|
173
|
-
ramp:
|
|
174
|
-
display: { size: 32px, line: 38px, weight: 700, family: display, tracking: -0.02em }
|
|
175
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.01em }
|
|
176
|
-
h2: { size: 20px, line: 26px, weight: 600, family: sans, tracking: -0.01em }
|
|
177
|
-
body: { size: 14px, line: 20px, weight: 400, family: sans }
|
|
178
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
179
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.02em }
|
|
180
|
-
data: { size: 14px, line: 20px, weight: 500, family: mono, features: [tnum] }
|
|
181
|
-
register-scope: { display: [auth, empty-state], sans: [chrome, controls, body, headings], mono: [data, prices, ids, timestamps] }
|
|
182
|
-
elevation:
|
|
183
|
-
radius: { sm: 6px, md: 12px, lg: 16px }
|
|
184
|
-
hairline: border
|
|
185
|
-
shadow:
|
|
186
|
-
overlay: "0 4px 24px oklch(0.3 0.04 286 / 0.08)"
|
|
187
|
-
popover: "0 1px 4px oklch(0.3 0.04 286 / 0.05)"
|
|
188
|
-
dark-ladder: { background: 0.15, raised: 0.2, overlay: 0.25, hue-held: 286 }
|
|
189
|
-
motion:
|
|
190
|
-
duration: { press: 100ms, fade: 140ms, panel: 220ms }
|
|
191
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
192
|
-
entrance-never: ease-in
|
|
193
|
-
identity-moments: [auth, first-run-empty]
|
|
194
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
195
|
-
charts:
|
|
196
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
197
|
-
sequential: { from: background, to: chart-1 }
|
|
198
|
-
diverging: { negative: chart-3, mid: muted, positive: chart-2 }
|
|
199
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [440px, 680px], content-max: 1440px }
|
|
200
|
-
```
|