@nurix/etna 0.19.50 → 0.19.52
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/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/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,201 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: sentry
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [dev-tools, monitoring, observability]
|
|
6
|
-
keywords: [violet, lime, console, developer, uppercase, dark-console]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 sentry entry (2026-07-04); 2026-07-12 re-audit of sentry.io public identity. Rubik is the brand's own open UI face; proprietary Monaco substituted with JetBrains Mono (closest open mono)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# sentry — an incident room at 2 a.m.
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A fluorescent-lit incident room at 2 a.m.: white workbenches, a near-black violet
|
|
16
|
-
terminal window open on every screen, one lime highlighter capping the failing line.
|
|
17
|
-
Light by default — the brand's white transactional polarity, not its dark marketing
|
|
18
|
-
hero; flat, with cool violet-leaning hairlines carrying the grid. The dark theme is
|
|
19
|
-
the iconic violet console, an authored ladder, not inverted paper. Density standard,
|
|
20
|
-
dense-capable from the console heritage.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Deep ink-violet `foreground` on the white `background`; the single accent is the
|
|
24
|
-
authoritative midnight-violet `primary` — the near-black button that reads strongest
|
|
25
|
-
on either polarity, never softened to a bright brand-violet. `accent` is a faint
|
|
26
|
-
violet wash for selected rows and nav only. `ring` is the one documented focus blue,
|
|
27
|
-
reserved for keyboard focus. Lime and pink live in `chart-2`/`chart-3` and one scarce
|
|
28
|
-
highlight glyph per viewport — never a button, a fill, or body text. Status hues
|
|
29
|
-
(`destructive`, `success`, `warning`) speak only status.
|
|
30
|
-
|
|
31
|
-
## 3 Typography
|
|
32
|
-
Rubik (UI) / JetBrains Mono (code, logs, telemetry). The brand signature is uppercase
|
|
33
|
-
caps with wide tracking on buttons and eyebrows — a console-prompt cadence on the
|
|
34
|
-
caption step. Register scope: the display register is Rubik at page-title weight only
|
|
35
|
-
(the chunky marketing display stays behind); mono owns every ID, timestamp, stack
|
|
36
|
-
trace, and log line. Numeric columns are always `tabular-nums`; emphasis bumps
|
|
37
|
-
weight, never size.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons `radius-md`, `primary` fill, uppercase tracked label, no pill; inputs
|
|
41
|
-
hairline `input` border with the blue `ring` focus, no glow; cards on `card` with a
|
|
42
|
-
hairline, shadow only for true overlays; table rows dense with `muted` hover and
|
|
43
|
-
`accent` selection; code and log panels invert to the near-black violet inlay
|
|
44
|
-
(`sidebar`-family surfaces) with mono text; badges hairline with `muted`/status fill
|
|
45
|
-
and uppercase caption.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base; sidebar 248/56px; topbar 56px; side panel 420/640px; content max 1280px;
|
|
49
|
-
tables full-width. The 96px marketing rhythm stays behind — chrome is tight, the
|
|
50
|
-
density lives in the data.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
Light: flat — hairlines and type weight carry hierarchy; shadow only on overlays,
|
|
54
|
-
violet-tinted, never gray-black. Dark: the authored console ladder — `background`
|
|
55
|
-
0.22 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held at 296; hairlines
|
|
56
|
-
lighten one step, shadow stays minimal because the ladder does the work.
|
|
57
|
-
|
|
58
|
-
## 7 Motion
|
|
59
|
-
Quick and mechanical, like a console. Named moments: `row-resolve` (issue-row state
|
|
60
|
-
change, 140ms fade), `panel-slide` (side panel, 220ms, interruptible), `primary-press`
|
|
61
|
-
(100ms). Physicality is granted only to auth and the first-run empty state. Nothing
|
|
62
|
-
animates in tables, log streams, or any keyboard-initiated action.
|
|
63
|
-
|
|
64
|
-
## 8 Iconography & Charts
|
|
65
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
66
|
-
axes, no gridline fills; the categorical ramp runs violet → lime → pink → blue →
|
|
67
|
-
amber (`chart-1..5`) — the brand's chart-only voltage; tooltips on `surface-overlay`
|
|
68
|
-
with mono numerals.
|
|
69
|
-
|
|
70
|
-
## 9 Voice
|
|
71
|
-
Terse engineer-to-engineer: verbs first, stack-trace plain, no cheer. "Resolve issue" ·
|
|
72
|
-
"No unresolved events — next digest at 09:00" · "This alert rule overlaps an existing
|
|
73
|
-
rule; merge them or narrow the filter."
|
|
74
|
-
|
|
75
|
-
## 10 Do's & Don'ts
|
|
76
|
-
Do reserve midnight-violet `primary` for the one action and active nav — the
|
|
77
|
-
near-black is the point. Do keep buttons and eyebrows uppercase with wide tracking.
|
|
78
|
-
Do dress code and log panels in the dark violet inlay with mono. Don't make lime a
|
|
79
|
-
fill or a success color — it is one highlight glyph per viewport plus `chart-2`.
|
|
80
|
-
Don't promote pink or bright violet to chrome. Don't pill the CTA; don't blend the
|
|
81
|
-
two polarities on one band; don't signal rank with heavy shadow.
|
|
82
|
-
|
|
83
|
-
## 11 Responsive
|
|
84
|
-
375: sidebar → drawer, side panel → full sheet, log inlays scroll horizontally, never
|
|
85
|
-
wrap. 768: sidebar collapses to the icon rail; tables scroll overflow. 1024/1440:
|
|
86
|
-
two-pane queue+detail holds; dashboards take the full width.
|
|
87
|
-
|
|
88
|
-
## 12 Agent Prompt Guide
|
|
89
|
-
Reach for the white transactional canvas first; the violet console is the dark theme,
|
|
90
|
-
not the default. Spend `primary` once. Uppercase-track every button and eyebrow.
|
|
91
|
-
Every ID and timestamp is mono; every numeric column tabular. Lime appears once per
|
|
92
|
-
viewport or not at all. Dark is authored — consult the block, never derive.
|
|
93
|
-
|
|
94
|
-
```yaml design-values
|
|
95
|
-
color:
|
|
96
|
-
light:
|
|
97
|
-
background: oklch(0.985 0.006 300)
|
|
98
|
-
foreground: oklch(0.23 0.055 296)
|
|
99
|
-
card: oklch(0.995 0.005 300)
|
|
100
|
-
card-foreground: oklch(0.23 0.055 296)
|
|
101
|
-
popover: oklch(0.995 0.005 300)
|
|
102
|
-
popover-foreground: oklch(0.23 0.055 296)
|
|
103
|
-
primary: oklch(0.19 0.04 296)
|
|
104
|
-
primary-foreground: oklch(0.98 0.007 300)
|
|
105
|
-
secondary: oklch(0.962 0.01 299)
|
|
106
|
-
secondary-foreground: oklch(0.26 0.05 296)
|
|
107
|
-
muted: oklch(0.955 0.008 299)
|
|
108
|
-
muted-foreground: oklch(0.5 0.029 300)
|
|
109
|
-
accent: oklch(0.929 0.021 298)
|
|
110
|
-
accent-foreground: oklch(0.26 0.055 296)
|
|
111
|
-
destructive: oklch(0.586 0.222 17.6)
|
|
112
|
-
destructive-foreground: oklch(0.99 0.005 17)
|
|
113
|
-
success: oklch(0.627 0.17 149)
|
|
114
|
-
warning: oklch(0.666 0.157 58)
|
|
115
|
-
border: oklch(0.925 0.007 296)
|
|
116
|
-
input: oklch(0.86 0.014 290)
|
|
117
|
-
ring: oklch(0.623 0.188 260)
|
|
118
|
-
surface-raised: oklch(0.99 0.005 300)
|
|
119
|
-
surface-overlay: oklch(0.995 0.005 300)
|
|
120
|
-
chart-1: oklch(0.49 0.19 296)
|
|
121
|
-
chart-2: oklch(0.89 0.19 124)
|
|
122
|
-
chart-3: oklch(0.75 0.16 359)
|
|
123
|
-
chart-4: oklch(0.62 0.19 260)
|
|
124
|
-
chart-5: oklch(0.67 0.16 58)
|
|
125
|
-
sidebar: oklch(0.975 0.008 299)
|
|
126
|
-
sidebar-foreground: oklch(0.23 0.055 296)
|
|
127
|
-
sidebar-primary: oklch(0.19 0.04 296)
|
|
128
|
-
sidebar-primary-foreground: oklch(0.98 0.007 300)
|
|
129
|
-
sidebar-accent: oklch(0.929 0.021 298)
|
|
130
|
-
sidebar-accent-foreground: oklch(0.26 0.055 296)
|
|
131
|
-
sidebar-border: oklch(0.92 0.008 296)
|
|
132
|
-
sidebar-ring: oklch(0.623 0.188 260)
|
|
133
|
-
dark:
|
|
134
|
-
background: oklch(0.22 0.045 296)
|
|
135
|
-
foreground: oklch(0.93 0.01 300)
|
|
136
|
-
card: oklch(0.26 0.045 296)
|
|
137
|
-
card-foreground: oklch(0.93 0.01 300)
|
|
138
|
-
popover: oklch(0.32 0.045 296)
|
|
139
|
-
popover-foreground: oklch(0.93 0.01 300)
|
|
140
|
-
primary: oklch(0.93 0.02 300)
|
|
141
|
-
primary-foreground: oklch(0.2 0.04 296)
|
|
142
|
-
secondary: oklch(0.3 0.045 296)
|
|
143
|
-
secondary-foreground: oklch(0.9 0.012 300)
|
|
144
|
-
muted: oklch(0.29 0.045 296)
|
|
145
|
-
muted-foreground: oklch(0.72 0.025 300)
|
|
146
|
-
accent: oklch(0.32 0.06 296)
|
|
147
|
-
accent-foreground: oklch(0.93 0.015 300)
|
|
148
|
-
destructive: oklch(0.62 0.21 18)
|
|
149
|
-
destructive-foreground: oklch(0.14 0.02 18)
|
|
150
|
-
success: oklch(0.72 0.17 149)
|
|
151
|
-
warning: oklch(0.75 0.15 58)
|
|
152
|
-
border: oklch(0.34 0.045 296)
|
|
153
|
-
input: oklch(0.34 0.045 296)
|
|
154
|
-
ring: oklch(0.68 0.17 260)
|
|
155
|
-
surface-raised: oklch(0.27 0.045 296)
|
|
156
|
-
surface-overlay: oklch(0.32 0.045 296)
|
|
157
|
-
chart-1: oklch(0.65 0.15 296)
|
|
158
|
-
chart-2: oklch(0.89 0.19 124)
|
|
159
|
-
chart-3: oklch(0.75 0.16 359)
|
|
160
|
-
chart-4: oklch(0.68 0.15 260)
|
|
161
|
-
chart-5: oklch(0.75 0.14 58)
|
|
162
|
-
sidebar: oklch(0.19 0.045 296)
|
|
163
|
-
sidebar-foreground: oklch(0.9 0.015 300)
|
|
164
|
-
sidebar-primary: oklch(0.93 0.02 300)
|
|
165
|
-
sidebar-primary-foreground: oklch(0.2 0.04 296)
|
|
166
|
-
sidebar-accent: oklch(0.26 0.05 296)
|
|
167
|
-
sidebar-accent-foreground: oklch(0.92 0.015 300)
|
|
168
|
-
sidebar-border: oklch(0.28 0.045 296)
|
|
169
|
-
sidebar-ring: oklch(0.68 0.17 260)
|
|
170
|
-
typography:
|
|
171
|
-
display: { family: "Rubik Variable", fallback: "-apple-system, system-ui, sans-serif", weights: [600] }
|
|
172
|
-
sans: { family: "Rubik Variable", fallback: "-apple-system, system-ui, sans-serif", weights: [400, 600] }
|
|
173
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, Menlo, monospace", weights: [400] }
|
|
174
|
-
ramp:
|
|
175
|
-
display: { size: 28px, line: 34px, weight: 600, family: sans }
|
|
176
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans }
|
|
177
|
-
h2: { size: 20px, line: 26px, weight: 600, family: sans }
|
|
178
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
179
|
-
small: { size: 13px, line: 19px, weight: 400, family: sans }
|
|
180
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.015em, transform: uppercase }
|
|
181
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
182
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps, logs, stack-traces] }
|
|
183
|
-
elevation:
|
|
184
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
185
|
-
hairline: border
|
|
186
|
-
shadow:
|
|
187
|
-
overlay: "0 8px 28px oklch(0.22 0.05 296 / 0.16)"
|
|
188
|
-
popover: "0 4px 14px oklch(0.22 0.05 296 / 0.12)"
|
|
189
|
-
dark-ladder: { background: 0.22, raised: 0.27, overlay: 0.32, hue-held: 296 }
|
|
190
|
-
motion:
|
|
191
|
-
duration: { press: 100ms, fade: 140ms, panel: 220ms }
|
|
192
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
193
|
-
entrance-never: ease-in
|
|
194
|
-
identity-moments: [auth, first-run-empty]
|
|
195
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
196
|
-
charts:
|
|
197
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
198
|
-
sequential: { from: background, to: chart-1 }
|
|
199
|
-
diverging: { negative: destructive, mid: muted, positive: success }
|
|
200
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
|
|
201
|
-
```
|
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: shopify
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [commerce, smb, admin]
|
|
6
|
-
keywords: [cream, mint, pill, editorial, warm, black-ink]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 shopify entry (2026-07-04); 2026-07-12 re-audit of shopify.com public identity. Proprietary Neue Haas Grotesk display stays behind per v1; operator face is Inter (v1-documented workhorse); mono derived as IBM Plex Mono (brand ships none)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# shopify — an indie storefront on opening day
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A well-lit indie storefront on opening day: cream kraft paper on the counter, crisp
|
|
16
|
-
white price cards, a mint "open" sign in the window, prices inked in pure black.
|
|
17
|
-
Light by default; the cream `background` under white `card` panels is the brand's
|
|
18
|
-
editorial warmth, and white cards lift on a soft layered paper-halo shadow — the one
|
|
19
|
-
departure from flat. Comfortable standard density; the pill button carries in from
|
|
20
|
-
the brand. The dark theme is the shop after hours — warm charcoal, same layering.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Pure black `foreground` and `primary` — black is ink, a neutral, not a second color.
|
|
24
|
-
The single chromatic accent is the aloe-mint `accent`: a fill for selection, growth,
|
|
25
|
-
and the featured tier, never behind type and never a status color. The text ladder
|
|
26
|
-
runs cool zinc against the warm cream canvas — that temperature split is the
|
|
27
|
-
signature. Status reads on the saturated `success` / `warning` / `destructive` only.
|
|
28
|
-
`ring` matches `primary`: an unmistakable black outline.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Inter carries everything — body, tables, labels, headings — so one sans serves dense
|
|
32
|
-
chrome; IBM Plex Mono takes IDs, codes, and timestamps. Headings track slightly
|
|
33
|
-
open, the editorial voice running opposite to tight-tracked operator defaults; apply
|
|
34
|
-
the `ss03` stylistic set at the root so it rides every role. Register scope: no
|
|
35
|
-
display face — the thin marketing display stays behind; mono owns data. Numeric
|
|
36
|
-
columns are `tabular-nums`; emphasis bumps weight, never size.
|
|
37
|
-
|
|
38
|
-
## 4 Component Stylings
|
|
39
|
-
Buttons are pills — the brand's non-negotiable override of the no-pill default:
|
|
40
|
-
`primary` black pill, secondary white pill with hairline `border`, featured takes the
|
|
41
|
-
`accent` mint fill with black ink. Inputs on `card` fill with hairline `border` and
|
|
42
|
-
the black `ring` focus. Cards white on cream with a hairline plus the layered paper
|
|
43
|
-
halo. Table rows hairline grid, `muted` hover, `accent` selection tint. Detail opens
|
|
44
|
-
in the side panel. Badges hairline with `muted`/status fill, uppercase caption —
|
|
45
|
-
mint marks featured, never status.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base; sidebar 248/56px; topbar 56px; side panel 440/640px; content max 1200px;
|
|
49
|
-
card and section insets run generous — the brand pads comfortably — but the global
|
|
50
|
-
tier stays standard.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
The paper halo carries hierarchy: canvas flat, white cards lifted on many tiny
|
|
54
|
-
low-opacity green-tinted shadows (never one hard drop), overlays one step up. Rank is
|
|
55
|
-
border, position, and the soft halo. Dark: the authored ladder — `background` 0.17 L,
|
|
56
|
-
`surface-raised` +0.05, `surface-overlay` +0.10, warm hue held at 106 — with the halo
|
|
57
|
-
dimmed to a whisper.
|
|
58
|
-
|
|
59
|
-
## 7 Motion
|
|
60
|
-
Comfortable and unhurried, never springy. Named moments: `card-settle` (card entry,
|
|
61
|
-
180ms fade), `panel-slide` (side panel, 260ms, interruptible), `pill-press` (primary
|
|
62
|
-
action, 120ms). Physicality is granted only to first-run onboarding and the empty
|
|
63
|
-
storefront state. Nothing animates in tables or keyboard-initiated actions.
|
|
64
|
-
|
|
65
|
-
## 8 Iconography & Charts
|
|
66
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
67
|
-
axes, no gridline fills; categorical ramp leads with commerce green then mint, amber,
|
|
68
|
-
slate-blue, warm red (`chart-1..5`); tooltips on `surface-overlay` with mono
|
|
69
|
-
numerals.
|
|
70
|
-
|
|
71
|
-
## 9 Voice
|
|
72
|
-
A helpful shopkeeper: plain verbs, merchant-first nouns, quietly encouraging without
|
|
73
|
-
exclamation. "Add product" · "No orders yet today — your store opened 2 hours ago" ·
|
|
74
|
-
"This discount overlaps an active one; customers get whichever is larger."
|
|
75
|
-
|
|
76
|
-
## 10 Do's & Don'ts
|
|
77
|
-
Do pill every button — this brand overrides the no-pill default. Do layer white cards
|
|
78
|
-
on the cream canvas and lift them with the paper halo, never a hard drop. Do keep
|
|
79
|
-
`ss03` at the root and headings tracked open. Don't use the pale mint as a status
|
|
80
|
-
color or behind type. Don't promote a second chromatic accent. Don't bring the
|
|
81
|
-
cinematic black canvas or thin display type into operator chrome.
|
|
82
|
-
|
|
83
|
-
## 11 Responsive
|
|
84
|
-
375: sidebar → drawer, side panel → full sheet, card grids stack. 768: sidebar
|
|
85
|
-
collapses to the icon rail; tables scroll overflow. 1024/1440: two-pane queue+detail
|
|
86
|
-
holds; forms cap, dashboards take the full width.
|
|
87
|
-
|
|
88
|
-
## 12 Agent Prompt Guide
|
|
89
|
-
Cream page, white cards, black ink, one mint fill — in that order. The primary action
|
|
90
|
-
is a black pill; if two things want mint, one is not featured. Keep the zinc text
|
|
91
|
-
ladder cool against the warm cream. Every numeric column tabular, every ID mono.
|
|
92
|
-
Dark is authored — consult the block, never derive.
|
|
93
|
-
|
|
94
|
-
```yaml design-values
|
|
95
|
-
color:
|
|
96
|
-
light:
|
|
97
|
-
background: oklch(0.986 0.008 106)
|
|
98
|
-
foreground: oklch(0 0 0)
|
|
99
|
-
card: oklch(0.995 0.005 106)
|
|
100
|
-
card-foreground: oklch(0 0 0)
|
|
101
|
-
popover: oklch(0.995 0.005 106)
|
|
102
|
-
popover-foreground: oklch(0 0 0)
|
|
103
|
-
primary: oklch(0 0 0)
|
|
104
|
-
primary-foreground: oklch(0.99 0.005 106)
|
|
105
|
-
secondary: oklch(0.965 0.005 286)
|
|
106
|
-
secondary-foreground: oklch(0.25 0.006 286)
|
|
107
|
-
muted: oklch(0.955 0.005 286)
|
|
108
|
-
muted-foreground: oklch(0.5 0.014 286)
|
|
109
|
-
accent: oklch(0.938 0.079 155)
|
|
110
|
-
accent-foreground: oklch(0.22 0.04 160)
|
|
111
|
-
destructive: oklch(0.572 0.21 32)
|
|
112
|
-
destructive-foreground: oklch(0.99 0.005 32)
|
|
113
|
-
success: oklch(0.533 0.108 168)
|
|
114
|
-
warning: oklch(0.555 0.146 49)
|
|
115
|
-
border: oklch(0.92 0.005 286)
|
|
116
|
-
input: oklch(0.92 0.005 286)
|
|
117
|
-
ring: oklch(0 0 0)
|
|
118
|
-
surface-raised: oklch(0.99 0.006 106)
|
|
119
|
-
surface-overlay: oklch(0.995 0.005 106)
|
|
120
|
-
chart-1: oklch(0.533 0.108 168)
|
|
121
|
-
chart-2: oklch(0.79 0.12 155)
|
|
122
|
-
chart-3: oklch(0.67 0.13 75)
|
|
123
|
-
chart-4: oklch(0.55 0.1 240)
|
|
124
|
-
chart-5: oklch(0.55 0.16 25)
|
|
125
|
-
sidebar: oklch(0.975 0.008 106)
|
|
126
|
-
sidebar-foreground: oklch(0.15 0.008 106)
|
|
127
|
-
sidebar-primary: oklch(0 0 0)
|
|
128
|
-
sidebar-primary-foreground: oklch(0.99 0.005 106)
|
|
129
|
-
sidebar-accent: oklch(0.938 0.079 155)
|
|
130
|
-
sidebar-accent-foreground: oklch(0.22 0.04 160)
|
|
131
|
-
sidebar-border: oklch(0.92 0.006 106)
|
|
132
|
-
sidebar-ring: oklch(0 0 0)
|
|
133
|
-
dark:
|
|
134
|
-
background: oklch(0.17 0.006 106)
|
|
135
|
-
foreground: oklch(0.96 0.01 106)
|
|
136
|
-
card: oklch(0.21 0.007 106)
|
|
137
|
-
card-foreground: oklch(0.96 0.01 106)
|
|
138
|
-
popover: oklch(0.27 0.008 106)
|
|
139
|
-
popover-foreground: oklch(0.96 0.01 106)
|
|
140
|
-
primary: oklch(0.96 0.008 106)
|
|
141
|
-
primary-foreground: oklch(0.17 0.006 106)
|
|
142
|
-
secondary: oklch(0.26 0.007 106)
|
|
143
|
-
secondary-foreground: oklch(0.92 0.008 106)
|
|
144
|
-
muted: oklch(0.25 0.007 106)
|
|
145
|
-
muted-foreground: oklch(0.7 0.01 106)
|
|
146
|
-
accent: oklch(0.32 0.05 160)
|
|
147
|
-
accent-foreground: oklch(0.93 0.06 155)
|
|
148
|
-
destructive: oklch(0.62 0.19 32)
|
|
149
|
-
destructive-foreground: oklch(0.14 0.02 32)
|
|
150
|
-
success: oklch(0.68 0.12 165)
|
|
151
|
-
warning: oklch(0.72 0.13 60)
|
|
152
|
-
border: oklch(0.3 0.008 106)
|
|
153
|
-
input: oklch(0.3 0.008 106)
|
|
154
|
-
ring: oklch(0.96 0.008 106)
|
|
155
|
-
surface-raised: oklch(0.22 0.007 106)
|
|
156
|
-
surface-overlay: oklch(0.27 0.008 106)
|
|
157
|
-
chart-1: oklch(0.68 0.12 168)
|
|
158
|
-
chart-2: oklch(0.85 0.1 155)
|
|
159
|
-
chart-3: oklch(0.75 0.12 75)
|
|
160
|
-
chart-4: oklch(0.65 0.09 240)
|
|
161
|
-
chart-5: oklch(0.65 0.14 25)
|
|
162
|
-
sidebar: oklch(0.15 0.006 106)
|
|
163
|
-
sidebar-foreground: oklch(0.93 0.01 106)
|
|
164
|
-
sidebar-primary: oklch(0.96 0.008 106)
|
|
165
|
-
sidebar-primary-foreground: oklch(0.17 0.006 106)
|
|
166
|
-
sidebar-accent: oklch(0.24 0.03 160)
|
|
167
|
-
sidebar-accent-foreground: oklch(0.93 0.06 155)
|
|
168
|
-
sidebar-border: oklch(0.26 0.007 106)
|
|
169
|
-
sidebar-ring: oklch(0.96 0.008 106)
|
|
170
|
-
typography:
|
|
171
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
172
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600], features: [ss03] }
|
|
173
|
-
mono: { family: "IBM Plex Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
174
|
-
ramp:
|
|
175
|
-
display: { size: 28px, line: 34px, weight: 600, family: sans, tracking: 0.005em }
|
|
176
|
-
h1: { size: 24px, line: 29px, weight: 600, family: sans, tracking: 0.005em }
|
|
177
|
-
h2: { size: 20px, line: 26px, weight: 600, family: sans, tracking: 0.005em }
|
|
178
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
179
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
180
|
-
caption: { size: 12px, line: 15px, weight: 600, family: sans, tracking: 0.06em, transform: uppercase }
|
|
181
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
182
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps] }
|
|
183
|
-
elevation:
|
|
184
|
-
radius: { sm: 4px, md: 8px, lg: 12px, pill: 9999px }
|
|
185
|
-
hairline: border
|
|
186
|
-
shadow:
|
|
187
|
-
card: "0 1px 2px oklch(0.35 0.03 160 / 0.05), 0 2px 6px oklch(0.35 0.03 160 / 0.05), 0 6px 16px oklch(0.35 0.03 160 / 0.06)"
|
|
188
|
-
overlay: "0 8px 28px oklch(0.35 0.03 160 / 0.14)"
|
|
189
|
-
popover: "0 4px 14px oklch(0.35 0.03 160 / 0.1)"
|
|
190
|
-
dark-ladder: { background: 0.17, raised: 0.22, overlay: 0.27, hue-held: 106 }
|
|
191
|
-
motion:
|
|
192
|
-
duration: { press: 120ms, fade: 180ms, panel: 260ms }
|
|
193
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
194
|
-
entrance-never: ease-in
|
|
195
|
-
identity-moments: [first-run-onboarding, empty-storefront]
|
|
196
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
197
|
-
charts:
|
|
198
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
199
|
-
sequential: { from: background, to: chart-1 }
|
|
200
|
-
diverging: { negative: destructive, mid: muted, positive: chart-1 }
|
|
201
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 56px, side-panel: [440px, 640px], content-max: 1200px }
|
|
202
|
-
```
|
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: slack
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [collaboration, messaging]
|
|
6
|
-
keywords: [vibrant, rounded, aubergine, friendly, conversational]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 slack entry (2026-07-04); 2026-07-12 re-audit of slack.com public identity. Proprietary Slack display/UI faces substituted with Lato (v1-documented humanist stand-in); mono is JetBrains Mono (v1-named)."
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# slack — an office common room with a plum feature wall
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
An office common room mid-morning: white walls, warm chatter, rounded furniture, and
|
|
16
|
-
one deep-aubergine feature wall where the noticeboard lives. Light by default; the
|
|
17
|
-
content canvas is white with hairline hierarchy, flat, with a friendlier radius than
|
|
18
|
-
a terminal. The one deliberate exception to the light polarity is the brand's most
|
|
19
|
-
enduring asset — the aubergine `sidebar`, a categorically dark rail carrying light
|
|
20
|
-
text in both themes. Density standard, nudged a hair toward comfort.
|
|
21
|
-
|
|
22
|
-
## 2 Color Roles
|
|
23
|
-
Near-black `foreground` on white; a single accent — aubergine `primary` — reserved
|
|
24
|
-
for the one action that matters, plus the rail. Lavender `accent` tints selected and
|
|
25
|
-
hovered rows; blue is a functional inline-link color, never a chrome or CTA hue.
|
|
26
|
-
Status hues (`destructive` rust, `success` green, `warning` amber) speak only status.
|
|
27
|
-
The Slack logo quad (blue, green, yellow, red) lives exclusively in `chart-2..5`.
|
|
28
|
-
Aubergine is a surface and CTA color, never a type color.
|
|
29
|
-
|
|
30
|
-
## 3 Typography
|
|
31
|
-
Lato (UI, body, headings) / JetBrains Mono (IDs, codes, timestamps). The humanist
|
|
32
|
-
face carries Slack's warmth at UI sizes; heading weight, not a second family, carries
|
|
33
|
-
emphasis. Body rides a relaxed 1.5 leading — legible without going airy. Register
|
|
34
|
-
scope: no display face — hero-scale display stays on marketing; mono owns data.
|
|
35
|
-
Numeric columns render `tabular-nums`; bump weight one step for emphasis, never size.
|
|
36
|
-
|
|
37
|
-
## 4 Component Stylings
|
|
38
|
-
The primary CTA is the one pill — filled aubergine `primary`, bold label; every other
|
|
39
|
-
control sits on the `radius-md` workhorse. Secondary buttons take the lavender
|
|
40
|
-
`secondary` fill; ghost hovers tint `accent`. Inputs hairline `border` with the
|
|
41
|
-
aubergine `ring` at focus. Cards hairline on `card`, soft shadow only when lifting.
|
|
42
|
-
Table rows hairline grid, `muted` hover, lavender `accent` selection. The sidebar is
|
|
43
|
-
the aubergine rail: active item a `sidebar-primary` band, hover the subtler
|
|
44
|
-
`sidebar-accent`. Detail opens in the side panel. Badges hairline, uppercase caption,
|
|
45
|
-
status fills only.
|
|
46
|
-
|
|
47
|
-
## 5 Layout
|
|
48
|
-
4px base with 8px as the dominant step — Slack's relaxed rhythm; sidebar 256/56px;
|
|
49
|
-
topbar 56px; side panel 420/640px; content max 1280px; forms cap comfortably; tables
|
|
50
|
-
full-width.
|
|
51
|
-
|
|
52
|
-
## 6 Depth
|
|
53
|
-
Flat on the light canvas; the aubergine rail is a fixed dark plane, not an elevation —
|
|
54
|
-
its prominence is the surface-polarity split, never shadow. Hairlines carry
|
|
55
|
-
structure; overlays earn a soft aubergine-tinted shadow. Dark: the authored ladder —
|
|
56
|
-
`background` 0.19 L, `surface-raised` +0.05, `surface-overlay` +0.10, hue held at
|
|
57
|
-
327 — while the rail stays one step deeper than the canvas.
|
|
58
|
-
|
|
59
|
-
## 7 Motion
|
|
60
|
-
Friendly but businesslike — soft fades, no bounce. Named moments: `thread-open` (side
|
|
61
|
-
panel, 260ms, interruptible), `row-arrive` (list content, 180ms fade), `pill-press`
|
|
62
|
-
(primary action, 120ms). Physicality is granted only to onboarding and first-run
|
|
63
|
-
empty states. Nothing animates in tables, message lists, or keyboard-initiated
|
|
64
|
-
actions.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
68
|
-
axes, no gridline fills; the categorical ramp is aubergine then the logo quad —
|
|
69
|
-
blue, green, yellow, red (`chart-1..5`), the one place the quad appears; tooltips on
|
|
70
|
-
`surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
A friendly colleague, not a mascot: contractions welcome, celebration restrained to
|
|
74
|
-
moments the user earned. "Send to channel" · "You're all caught up — nothing new
|
|
75
|
-
since 9:14" · "That channel name is taken; try adding your team's name."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do keep the aubergine `sidebar` in both themes — light-on-aubergine is by design. Do
|
|
79
|
-
give only the primary CTA the pill; everything else stays on the workhorse radius.
|
|
80
|
-
Do scope blue to inline links. Don't promote a third accent — aubergine plus
|
|
81
|
-
link-blue is exhaustive. Don't set aubergine body text. Don't bring pastel-mesh
|
|
82
|
-
gradients or hero display onto an operator surface; don't pill anything but the CTA.
|
|
83
|
-
|
|
84
|
-
## 11 Responsive
|
|
85
|
-
375: the aubergine rail → off-canvas drawer, side panel → full sheet, list+detail
|
|
86
|
-
stacks. 768: rail collapses to the icon rail; tables scroll overflow. 1024/1440:
|
|
87
|
-
rail expands, two-pane queue+detail holds; forms cap, dashboards full width.
|
|
88
|
-
|
|
89
|
-
## 12 Agent Prompt Guide
|
|
90
|
-
Keep the rail aubergine and everything else light. Accent only the primary action;
|
|
91
|
-
if two things want aubergine, one is not primary. Blue is for links, not buttons.
|
|
92
|
-
The pill belongs to the CTA alone. Every numeric column tabular, every ID mono.
|
|
93
|
-
Dark is authored — consult the block, never derive.
|
|
94
|
-
|
|
95
|
-
```yaml design-values
|
|
96
|
-
color:
|
|
97
|
-
light:
|
|
98
|
-
background: oklch(0.99 0.005 308)
|
|
99
|
-
foreground: oklch(0.23 0.006 308)
|
|
100
|
-
card: oklch(0.995 0.005 308)
|
|
101
|
-
card-foreground: oklch(0.23 0.006 308)
|
|
102
|
-
popover: oklch(0.995 0.005 308)
|
|
103
|
-
popover-foreground: oklch(0.23 0.006 308)
|
|
104
|
-
primary: oklch(0.306 0.108 327)
|
|
105
|
-
primary-foreground: oklch(0.98 0.008 327)
|
|
106
|
-
secondary: oklch(0.966 0.022 312)
|
|
107
|
-
secondary-foreground: oklch(0.3 0.1 327)
|
|
108
|
-
muted: oklch(0.965 0.006 308)
|
|
109
|
-
muted-foreground: oklch(0.5 0.012 308)
|
|
110
|
-
accent: oklch(0.966 0.022 312)
|
|
111
|
-
accent-foreground: oklch(0.3 0.1 327)
|
|
112
|
-
destructive: oklch(0.571 0.182 36)
|
|
113
|
-
destructive-foreground: oklch(0.99 0.006 36)
|
|
114
|
-
success: oklch(0.514 0.106 167)
|
|
115
|
-
warning: oklch(0.666 0.157 58)
|
|
116
|
-
border: oklch(0.925 0.005 308)
|
|
117
|
-
input: oklch(0.925 0.005 308)
|
|
118
|
-
ring: oklch(0.374 0.136 323)
|
|
119
|
-
surface-raised: oklch(0.99 0.005 308)
|
|
120
|
-
surface-overlay: oklch(0.995 0.005 308)
|
|
121
|
-
chart-1: oklch(0.306 0.108 327)
|
|
122
|
-
chart-2: oklch(0.768 0.13 223)
|
|
123
|
-
chart-3: oklch(0.691 0.142 160)
|
|
124
|
-
chart-4: oklch(0.797 0.152 83)
|
|
125
|
-
chart-5: oklch(0.588 0.222 11.5)
|
|
126
|
-
sidebar: oklch(0.306 0.108 327)
|
|
127
|
-
sidebar-foreground: oklch(0.94 0.02 327)
|
|
128
|
-
sidebar-primary: oklch(0.374 0.136 323)
|
|
129
|
-
sidebar-primary-foreground: oklch(0.97 0.015 323)
|
|
130
|
-
sidebar-accent: oklch(0.36 0.1 327)
|
|
131
|
-
sidebar-accent-foreground: oklch(0.95 0.015 327)
|
|
132
|
-
sidebar-border: oklch(0.4 0.09 327)
|
|
133
|
-
sidebar-ring: oklch(0.85 0.05 323)
|
|
134
|
-
dark:
|
|
135
|
-
background: oklch(0.19 0.012 327)
|
|
136
|
-
foreground: oklch(0.93 0.008 327)
|
|
137
|
-
card: oklch(0.23 0.012 327)
|
|
138
|
-
card-foreground: oklch(0.93 0.008 327)
|
|
139
|
-
popover: oklch(0.29 0.014 327)
|
|
140
|
-
popover-foreground: oklch(0.93 0.008 327)
|
|
141
|
-
primary: oklch(0.42 0.12 327)
|
|
142
|
-
primary-foreground: oklch(0.97 0.01 327)
|
|
143
|
-
secondary: oklch(0.27 0.014 327)
|
|
144
|
-
secondary-foreground: oklch(0.9 0.01 327)
|
|
145
|
-
muted: oklch(0.26 0.014 327)
|
|
146
|
-
muted-foreground: oklch(0.7 0.015 327)
|
|
147
|
-
accent: oklch(0.3 0.05 327)
|
|
148
|
-
accent-foreground: oklch(0.93 0.01 327)
|
|
149
|
-
destructive: oklch(0.64 0.19 33)
|
|
150
|
-
destructive-foreground: oklch(0.14 0.02 33)
|
|
151
|
-
success: oklch(0.65 0.12 167)
|
|
152
|
-
warning: oklch(0.75 0.14 60)
|
|
153
|
-
border: oklch(0.31 0.014 327)
|
|
154
|
-
input: oklch(0.31 0.014 327)
|
|
155
|
-
ring: oklch(0.75 0.1 323)
|
|
156
|
-
surface-raised: oklch(0.24 0.012 327)
|
|
157
|
-
surface-overlay: oklch(0.29 0.014 327)
|
|
158
|
-
chart-1: oklch(0.62 0.13 327)
|
|
159
|
-
chart-2: oklch(0.768 0.13 223)
|
|
160
|
-
chart-3: oklch(0.691 0.142 160)
|
|
161
|
-
chart-4: oklch(0.797 0.152 83)
|
|
162
|
-
chart-5: oklch(0.62 0.2 12)
|
|
163
|
-
sidebar: oklch(0.25 0.09 327)
|
|
164
|
-
sidebar-foreground: oklch(0.93 0.015 327)
|
|
165
|
-
sidebar-primary: oklch(0.4 0.13 323)
|
|
166
|
-
sidebar-primary-foreground: oklch(0.97 0.012 323)
|
|
167
|
-
sidebar-accent: oklch(0.32 0.1 327)
|
|
168
|
-
sidebar-accent-foreground: oklch(0.95 0.012 327)
|
|
169
|
-
sidebar-border: oklch(0.36 0.09 327)
|
|
170
|
-
sidebar-ring: oklch(0.85 0.05 323)
|
|
171
|
-
typography:
|
|
172
|
-
display: { family: "Lato", fallback: "system-ui, sans-serif", weights: [700] }
|
|
173
|
-
sans: { family: "Lato", fallback: "system-ui, sans-serif", weights: [400, 700] }
|
|
174
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, Menlo, monospace", weights: [400] }
|
|
175
|
-
ramp:
|
|
176
|
-
display: { size: 28px, line: 36px, weight: 700, family: sans }
|
|
177
|
-
h1: { size: 24px, line: 31px, weight: 700, family: sans }
|
|
178
|
-
h2: { size: 18px, line: 25px, weight: 700, family: sans }
|
|
179
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
180
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
181
|
-
caption: { size: 12px, line: 14px, weight: 700, family: sans, tracking: 0.08em, transform: uppercase }
|
|
182
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
183
|
-
register-scope: { sans: [chrome, controls, body, page-title], mono: [data, ids, timestamps] }
|
|
184
|
-
elevation:
|
|
185
|
-
radius: { sm: 4px, md: 8px, lg: 12px, pill: 9999px }
|
|
186
|
-
hairline: border
|
|
187
|
-
shadow:
|
|
188
|
-
overlay: "0 8px 28px oklch(0.3 0.09 327 / 0.16)"
|
|
189
|
-
popover: "0 4px 14px oklch(0.3 0.09 327 / 0.12)"
|
|
190
|
-
dark-ladder: { background: 0.19, raised: 0.24, overlay: 0.29, hue-held: 327 }
|
|
191
|
-
motion:
|
|
192
|
-
duration: { press: 120ms, fade: 180ms, panel: 260ms }
|
|
193
|
-
easing: { standard: "cubic-bezier(0.2, 0, 0, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
194
|
-
entrance-never: ease-in
|
|
195
|
-
identity-moments: [onboarding, first-run-empty]
|
|
196
|
-
iconography: { set: lucide, stroke: 1.5px, grid: [16px, 20px] }
|
|
197
|
-
charts:
|
|
198
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
199
|
-
sequential: { from: background, to: chart-1 }
|
|
200
|
-
diverging: { negative: chart-5, mid: muted, positive: chart-3 }
|
|
201
|
-
layout: { base: 4px, sidebar: [256px, 56px], topbar: 56px, side-panel: [420px, 640px], content-max: 1280px }
|
|
202
|
-
```
|