@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,209 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: cal
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [scheduling, b2b-saas, dev-tools]
|
|
6
|
-
keywords: [monochrome, near-black, spacious, soft-rounded, minimal, ink-focus]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "v1 library entry (design-md/v1, sourced 2026-07-04) + 2026-07-12 re-audit; Cal Sans — licensed at v1 sourcing — has since been released openly on Google Fonts and is restored as the display face (weight 600); Inter Variable body, JetBrains Mono data"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# cal — a concierge desk in a minimalist hotel lobby
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A concierge desk in a minimalist hotel lobby: a white counter with soft-rounded edges,
|
|
16
|
-
a near-black leather ledger, a brass bell with no engraving — no color anywhere, and
|
|
17
|
-
the generosity is in the space between things. Light by default; dark is the lobby at
|
|
18
|
-
night, an authored cool ladder, not inverted marble. Near-monochrome: the one action
|
|
19
|
-
that matters wears near-black, not a chromatic accent — the system reads confidently
|
|
20
|
-
engineered without spending color on chrome. Flat but soft: hairlines, weight, and a
|
|
21
|
-
light-gray ladder, with soft shadows lifting only elevated cards. Density is spacious
|
|
22
|
-
— the whitespace is the signature.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
`primary` is near-black — the action layer is monochrome, and `ring` is ink too: the
|
|
26
|
-
border shifts to ink on focus, never a colored glow. Neutrals are cool-slate-tinted
|
|
27
|
-
whites and grays, never pure gray. `accent` is the achromatic soft-gray selection
|
|
28
|
-
tint. The one chromatic brand color, the link blue, rides inline links only and never
|
|
29
|
-
a CTA — it appears here solely as `chart-1`. One scarce near-black surface frames or
|
|
30
|
-
closes a view — the operator descendant of Cal's dark footer — at most one per view.
|
|
31
|
-
Status hues speak only status; in light they deepen one step so labels hold AA. The
|
|
32
|
-
badge pastels are the chart palette — the one place this monochrome brand spends
|
|
33
|
-
color.
|
|
34
|
-
|
|
35
|
-
## 3 Typography
|
|
36
|
-
Cal Sans — licensed at v1 sourcing, since released openly on Google Fonts — is
|
|
37
|
-
restored as the display voice: geometric, weight 600, tight negative tracking, worn by
|
|
38
|
-
page titles and empty states only. Inter Variable carries body, tables, buttons, nav,
|
|
39
|
-
and captions; heading emphasis is 600 with negative tracking, never bolder. JetBrains
|
|
40
|
-
Mono carries IDs, codes, and timestamps; numeric columns render `tabular-nums`. Hero
|
|
41
|
-
display (48–64px) stays behind; operator headings top out at 24px.
|
|
42
|
-
|
|
43
|
-
## 4 Component Stylings
|
|
44
|
-
Buttons: near-black `primary` fill, `radius-sm` (8px), no pill; press deepens one
|
|
45
|
-
step. Secondary: `background` fill, hairline, `foreground`. Inputs: `background` fill,
|
|
46
|
-
hairline; focus shifts the edge to the ink `ring` at 2px, no glow. Cards: `card` with
|
|
47
|
-
hairline, `radius-md` (12px) on content cards, soft shadow only when lifted. Table
|
|
48
|
-
rows: hairline grid, `muted` hover, `accent` selection, mono figures. Badges: pill
|
|
49
|
-
radius, `muted` or status fill, uppercase caption, never `primary`. Detail opens in
|
|
50
|
-
the side panel.
|
|
51
|
-
|
|
52
|
-
## 5 Layout
|
|
53
|
-
4px base; sidebar 248/56px; topbar 64px — Cal's airier nav band; side panel 420/640px;
|
|
54
|
-
content max 1280px. Density is spacious — generous whitespace is the brand — stepping
|
|
55
|
-
denser per archetype without cramming. The 96px marketing rhythm stays behind.
|
|
56
|
-
|
|
57
|
-
## 6 Depth
|
|
58
|
-
Soft and modern: the surface ladder and hairlines first, soft slate-tinted shadow
|
|
59
|
-
reserved for true lift — no heavy drops, no neumorphism, no glass. The scarce
|
|
60
|
-
near-black surface elevates by color contrast, not a heavier shadow. Dark is an
|
|
61
|
-
authored ladder: `background` 0.16 L, `surface-raised` +0.055, `surface-overlay`
|
|
62
|
-
+0.10, hue held at 264. Focus is the ink `ring`, visible on every interactive
|
|
63
|
-
element. Three z-levels: content, sticky chrome, overlay.
|
|
64
|
-
|
|
65
|
-
## 7 Motion
|
|
66
|
-
Unhurried and precise. Named moments: `slot-settle` (availability grid updates,
|
|
67
|
-
150ms), `panel-slide` (side panel, 250ms, interruptible), `ledger-press`
|
|
68
|
-
(primary-action press, 100ms). Physicality is granted to auth and first-run empty
|
|
69
|
-
states only. Calendars and keyboard-initiated actions never animate.
|
|
70
|
-
|
|
71
|
-
## 8 Iconography & Charts
|
|
72
|
-
Lucide, 1.75px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline
|
|
73
|
-
axes, no gridline fills; the categorical ramp is where the badge pastels live — link
|
|
74
|
-
blue, orange, pink, violet, emerald. Tooltips on `surface-overlay` with mono numerals.
|
|
75
|
-
|
|
76
|
-
## 9 Voice
|
|
77
|
-
Front-desk brevity: polite, exact, no exclamation. "Create booking" · "Nothing
|
|
78
|
-
scheduled — your next opening is Tuesday 09:00" · "This event type is linked to 4
|
|
79
|
-
routing forms; reassign them before archiving."
|
|
80
|
-
|
|
81
|
-
## 10 Do's & Don'ts
|
|
82
|
-
Do keep the action layer monochrome — near-black `primary`, ink `ring`. Do hold
|
|
83
|
-
display at Cal Sans 600 with tight tracking; body stays Inter. Do keep geometry soft:
|
|
84
|
-
8px controls, 12px cards. Don't promote the link blue to a CTA — it is inline-link and
|
|
85
|
-
chart-only. Don't exceed 16px radius on a card — larger reads consumer-toy. Don't
|
|
86
|
-
scatter the near-black surface — one framing element per view. Don't add heavy drop
|
|
87
|
-
shadows or any gradient.
|
|
88
|
-
|
|
89
|
-
## 11 Responsive
|
|
90
|
-
375: sidebar → off-canvas drawer; list+detail stacks; side panel → full sheet; density
|
|
91
|
-
holds. 768: sidebar → icon rail; tables scroll overflow. 1024: two-pane queue+detail
|
|
92
|
-
holds. 1440: forms cap at 640px; tables and dashboards use the full width under the
|
|
93
|
-
1280px cap.
|
|
94
|
-
|
|
95
|
-
## 12 Agent Prompt Guide
|
|
96
|
-
Reach first for white canvas, hairline, and the light-gray ladder — a grayscale
|
|
97
|
-
system. Accent only the primary action, in near-black; if two things want it, one is
|
|
98
|
-
not primary. Page titles wear Cal Sans 600 tight; never scale to hero sizes. Charts
|
|
99
|
-
are the only place color spends. The near-black framing surface appears at most once
|
|
100
|
-
per view. Dark is authored — consult the block, never derive.
|
|
101
|
-
|
|
102
|
-
```yaml design-values
|
|
103
|
-
color:
|
|
104
|
-
light:
|
|
105
|
-
background: oklch(0.99 0.005 264)
|
|
106
|
-
foreground: oklch(0.19 0.005 264)
|
|
107
|
-
card: oklch(0.995 0.005 264)
|
|
108
|
-
card-foreground: oklch(0.19 0.005 264)
|
|
109
|
-
popover: oklch(0.995 0.005 264)
|
|
110
|
-
popover-foreground: oklch(0.19 0.005 264)
|
|
111
|
-
primary: oklch(0.19 0.005 264)
|
|
112
|
-
primary-foreground: oklch(0.99 0.005 264)
|
|
113
|
-
secondary: oklch(0.97 0.005 264)
|
|
114
|
-
secondary-foreground: oklch(0.19 0.005 264)
|
|
115
|
-
muted: oklch(0.97 0.005 264)
|
|
116
|
-
muted-foreground: oklch(0.51 0.023 264)
|
|
117
|
-
accent: oklch(0.96 0.007 264)
|
|
118
|
-
accent-foreground: oklch(0.19 0.005 264)
|
|
119
|
-
destructive: oklch(0.55 0.19 27)
|
|
120
|
-
destructive-foreground: oklch(0.99 0.005 27)
|
|
121
|
-
success: oklch(0.55 0.13 162)
|
|
122
|
-
warning: oklch(0.62 0.15 66)
|
|
123
|
-
border: oklch(0.928 0.006 264)
|
|
124
|
-
input: oklch(0.928 0.006 264)
|
|
125
|
-
ring: oklch(0.19 0.005 264)
|
|
126
|
-
surface-raised: oklch(0.995 0.005 264)
|
|
127
|
-
surface-overlay: oklch(0.995 0.005 264)
|
|
128
|
-
chart-1: oklch(0.623 0.188 260)
|
|
129
|
-
chart-2: oklch(0.65 0.15 45)
|
|
130
|
-
chart-3: oklch(0.62 0.16 350)
|
|
131
|
-
chart-4: oklch(0.55 0.16 295)
|
|
132
|
-
chart-5: oklch(0.60 0.13 162)
|
|
133
|
-
sidebar: oklch(0.975 0.005 264)
|
|
134
|
-
sidebar-foreground: oklch(0.19 0.005 264)
|
|
135
|
-
sidebar-primary: oklch(0.19 0.005 264)
|
|
136
|
-
sidebar-primary-foreground: oklch(0.99 0.005 264)
|
|
137
|
-
sidebar-accent: oklch(0.955 0.006 264)
|
|
138
|
-
sidebar-accent-foreground: oklch(0.19 0.005 264)
|
|
139
|
-
sidebar-border: oklch(0.928 0.006 264)
|
|
140
|
-
sidebar-ring: oklch(0.19 0.005 264)
|
|
141
|
-
dark:
|
|
142
|
-
background: oklch(0.16 0.006 264)
|
|
143
|
-
foreground: oklch(0.95 0.005 264)
|
|
144
|
-
card: oklch(0.20 0.007 264)
|
|
145
|
-
card-foreground: oklch(0.95 0.005 264)
|
|
146
|
-
popover: oklch(0.26 0.008 264)
|
|
147
|
-
popover-foreground: oklch(0.95 0.005 264)
|
|
148
|
-
primary: oklch(0.95 0.005 264)
|
|
149
|
-
primary-foreground: oklch(0.18 0.006 264)
|
|
150
|
-
secondary: oklch(0.24 0.008 264)
|
|
151
|
-
secondary-foreground: oklch(0.92 0.005 264)
|
|
152
|
-
muted: oklch(0.23 0.007 264)
|
|
153
|
-
muted-foreground: oklch(0.70 0.015 264)
|
|
154
|
-
accent: oklch(0.27 0.008 264)
|
|
155
|
-
accent-foreground: oklch(0.93 0.005 264)
|
|
156
|
-
destructive: oklch(0.62 0.19 27)
|
|
157
|
-
destructive-foreground: oklch(0.13 0.02 27)
|
|
158
|
-
success: oklch(0.68 0.13 162)
|
|
159
|
-
warning: oklch(0.72 0.14 66)
|
|
160
|
-
border: oklch(0.27 0.008 264)
|
|
161
|
-
input: oklch(0.27 0.008 264)
|
|
162
|
-
ring: oklch(0.95 0.005 264)
|
|
163
|
-
surface-raised: oklch(0.215 0.007 264)
|
|
164
|
-
surface-overlay: oklch(0.26 0.008 264)
|
|
165
|
-
chart-1: oklch(0.65 0.17 260)
|
|
166
|
-
chart-2: oklch(0.72 0.14 45)
|
|
167
|
-
chart-3: oklch(0.70 0.15 350)
|
|
168
|
-
chart-4: oklch(0.65 0.14 295)
|
|
169
|
-
chart-5: oklch(0.70 0.12 162)
|
|
170
|
-
sidebar: oklch(0.14 0.006 264)
|
|
171
|
-
sidebar-foreground: oklch(0.92 0.005 264)
|
|
172
|
-
sidebar-primary: oklch(0.95 0.005 264)
|
|
173
|
-
sidebar-primary-foreground: oklch(0.18 0.006 264)
|
|
174
|
-
sidebar-accent: oklch(0.21 0.007 264)
|
|
175
|
-
sidebar-accent-foreground: oklch(0.92 0.005 264)
|
|
176
|
-
sidebar-border: oklch(0.21 0.007 264)
|
|
177
|
-
sidebar-ring: oklch(0.95 0.005 264)
|
|
178
|
-
typography:
|
|
179
|
-
display: { family: "Cal Sans", fallback: "system-ui, sans-serif", weights: [600] }
|
|
180
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
181
|
-
mono: { family: "JetBrains Mono Variable", fallback: "ui-monospace, monospace", weights: [400] }
|
|
182
|
-
ramp:
|
|
183
|
-
display: { size: 32px, line: 38px, weight: 600, family: display, tracking: -0.02em }
|
|
184
|
-
h1: { size: 24px, line: 30px, weight: 600, family: sans, tracking: -0.02em }
|
|
185
|
-
h2: { size: 18px, line: 25px, weight: 600, family: sans, tracking: -0.02em }
|
|
186
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
187
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
188
|
-
caption: { size: 12px, line: 14px, weight: 600, family: sans, tracking: 0.02em, transform: uppercase }
|
|
189
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
190
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body], mono: [data, ids, timestamps] }
|
|
191
|
-
elevation:
|
|
192
|
-
radius: { sm: 8px, md: 12px, lg: 16px }
|
|
193
|
-
hairline: border
|
|
194
|
-
shadow:
|
|
195
|
-
overlay: "0 4px 12px oklch(0.20 0.01 264 / 0.08)"
|
|
196
|
-
popover: "0 1px 2px oklch(0.20 0.01 264 / 0.05)"
|
|
197
|
-
dark-ladder: { background: 0.16, raised: 0.215, overlay: 0.26, hue-held: 264 }
|
|
198
|
-
motion:
|
|
199
|
-
duration: { press: 100ms, fade: 150ms, panel: 250ms }
|
|
200
|
-
easing: { standard: "cubic-bezier(0.4, 0, 0.2, 1)", exit: "cubic-bezier(0.4, 0, 1, 1)" }
|
|
201
|
-
entrance-never: ease-in
|
|
202
|
-
identity-moments: [auth, first-run-empty]
|
|
203
|
-
iconography: { set: lucide, stroke: 1.75px, grid: [16px, 20px] }
|
|
204
|
-
charts:
|
|
205
|
-
categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
|
|
206
|
-
sequential: { from: background, to: chart-1 }
|
|
207
|
-
diverging: { negative: destructive, mid: muted, positive: chart-5 }
|
|
208
|
-
layout: { base: 4px, sidebar: [248px, 56px], topbar: 64px, side-panel: [420px, 640px], content-max: 1280px }
|
|
209
|
-
```
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: clay
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [gtm-data, crm, sales-tools]
|
|
6
|
-
keywords: [warm, cream, near-black, rounded, playful-restrained, spacious]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 clay entry (2026-07-04) + 2026-07-12 re-audit of Clay's public brand; Inter Variable + JetBrains Mono per the v1 substitution (Plain Black hero display and 3D claymation stay behind); the saturated six-hue feature palette demoted to chart encodings; dark theme authored as a warm reading room (v1 shipped light only)"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# clay — a ceramicist's daylit studio at the worktable
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A ceramicist's daylit studio: cream paper laid on the worktable, one tool inked
|
|
16
|
-
near-black, forms rounded and generous, and all the color kept in the glaze samples
|
|
17
|
-
on the shelf. Light by default and warm, never cool — the cream `background` is the
|
|
18
|
-
non-negotiable signal that separates this from every cool-gray data platform. Flat:
|
|
19
|
-
rank is warm surface steps, hairline `border`, and type weight, never heavy shadow.
|
|
20
|
-
One reserved action tone — near-black `primary` — carries emphasis in the chrome.
|
|
21
|
-
The dark theme is the same studio after dusk: a warm-charcoal ladder, never inverted
|
|
22
|
-
paper. Density breathes; the tool breathes with it.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
Ink `foreground` on cream `background`; `primary` is near-black, the single tone the
|
|
26
|
-
chrome spends on emphasis — the one primary action and active nav, nothing else. The
|
|
27
|
-
saturated six — teal, pink, lavender, ochre, coral — are Clay's brand voltage, carried
|
|
28
|
-
here only as `chart-1..5`, never chrome. `accent` is a warmer cream for selection and
|
|
29
|
-
hover, a surface shift not a color. Status hues (`destructive`, `success`, `warning`)
|
|
30
|
-
speak status only. Sidebar sits a faint cream step off the canvas in both themes.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
Inter (single voice — the open substitute for Clay's UI face) / JetBrains Mono (IDs,
|
|
34
|
-
codes, timestamps, log lines). Register scope: no marketing display face — Inter at 600
|
|
35
|
-
carries every heading, and Plain Black stays hero-scale marketing. Emphasis bumps weight
|
|
36
|
-
one step, never size. Every numeric column renders `tabular-nums`; uppercase eyebrows
|
|
37
|
-
are the one tracked register.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons `radius-md` (12px, generous, no pill), near-black `primary` fill, hover deepens
|
|
41
|
-
one step; secondary takes `secondary` cream with a hairline; ghost goes `accent` on
|
|
42
|
-
hover. Inputs on `background` with a hairline `input` edge and a 2px near-black `ring`,
|
|
43
|
-
no glow. Cards flat on `card` with a hairline, stepping to `radius-lg` for large panels;
|
|
44
|
-
shadow only when a true overlay must lift. Table rows `muted` hover, `accent` selection,
|
|
45
|
-
mono numerals. Detail opens in the side panel. Badges alone pill — `muted` or status
|
|
46
|
-
fills, uppercase caption, never `primary`.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
4px base; ramp 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 260/60px; topbar 56px; side
|
|
50
|
-
panel 440/680px; content max 1320px; tables full-width. Spacious globally — the luxury is
|
|
51
|
-
cream space, not ornament — stepped denser per archetype, never absolute overrides.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Flat — warm surface steps and hairlines carry all rank; the cream-to-white ladder does
|
|
55
|
-
the work a shadow would elsewhere. Light: shadows only on true overlays (popover,
|
|
56
|
-
dialog), warm-tinted toward hue 85, never black. Dark: the authored ladder —
|
|
57
|
-
`background` 0.19 L, `surface-raised` +0.04, `surface-overlay` +0.09, hue held at 85.
|
|
58
|
-
Focus is a 2px near-black `ring`, always visible; three z-levels: content, chrome, overlay.
|
|
59
|
-
|
|
60
|
-
## 7 Motion
|
|
61
|
-
Calm and small. Named moments: `panel-slide` (side panel, 220ms, 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, palettes,
|
|
64
|
-
or any keyboard-initiated action.
|
|
65
|
-
|
|
66
|
-
## 8 Iconography & Charts
|
|
67
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
68
|
-
no gridline fills; the categorical ramp spends Clay's demoted feature palette as
|
|
69
|
-
encodings — teal, pink, lavender, ochre, coral (`chart-1..5`); tooltips on
|
|
70
|
-
`surface-overlay` with mono numerals.
|
|
71
|
-
|
|
72
|
-
## 9 Voice
|
|
73
|
-
Warm and plain — a friendly operator that never shouts. "Add record" · "All caught up —
|
|
74
|
-
nothing needs review today" · "This list is still importing; give it a minute before you
|
|
75
|
-
enrich."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do anchor every surface on the cream `background` — the warm tint is the identity. Do
|
|
79
|
-
reserve near-black `primary` for the single most important action. Do keep radius
|
|
80
|
-
generous — the rounded character is the brand. Don't cool the neutrals to gray — a gray
|
|
81
|
-
canvas is a different brand. Don't bring the saturated feature fills into chrome (no
|
|
82
|
-
hot-pink button, no teal panel) — they live only in charts. Don't pill the primary CTA
|
|
83
|
-
or signal elevation with heavy shadow.
|
|
84
|
-
|
|
85
|
-
## 11 Responsive
|
|
86
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
87
|
-
density holds. 768: sidebar → icon rail; tables scroll their overflow. 1024: two-pane
|
|
88
|
-
queue+detail holds side by side. 1440: forms cap; tables and dashboards take the full
|
|
89
|
-
width with generous cream gutters.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Reach for the cream canvas first — it is what makes the tool read as Clay. Accent only
|
|
93
|
-
the primary action, and the accent is near-black; if two want it, one is not primary.
|
|
94
|
-
The saturated palette lives only in charts. Keep radius generous; every numeric column is
|
|
95
|
-
mono `tabular-nums`. Dark is authored — consult the block, never derive.
|
|
96
|
-
|
|
97
|
-
```yaml design-values
|
|
98
|
-
color:
|
|
99
|
-
light:
|
|
100
|
-
background: oklch(0.985 0.012 85)
|
|
101
|
-
foreground: oklch(0.16 0.006 85)
|
|
102
|
-
card: oklch(0.995 0.006 85)
|
|
103
|
-
card-foreground: oklch(0.16 0.006 85)
|
|
104
|
-
popover: oklch(0.995 0.006 85)
|
|
105
|
-
popover-foreground: oklch(0.16 0.006 85)
|
|
106
|
-
primary: oklch(0.16 0.006 85)
|
|
107
|
-
primary-foreground: oklch(0.985 0.012 85)
|
|
108
|
-
secondary: oklch(0.955 0.012 88)
|
|
109
|
-
secondary-foreground: oklch(0.22 0.008 85)
|
|
110
|
-
muted: oklch(0.965 0.013 88)
|
|
111
|
-
muted-foreground: oklch(0.50 0.014 82)
|
|
112
|
-
accent: oklch(0.925 0.014 90)
|
|
113
|
-
accent-foreground: oklch(0.22 0.008 85)
|
|
114
|
-
destructive: oklch(0.58 0.20 25)
|
|
115
|
-
destructive-foreground: oklch(0.985 0.008 25)
|
|
116
|
-
success: oklch(0.60 0.13 150)
|
|
117
|
-
warning: oklch(0.72 0.15 70)
|
|
118
|
-
border: oklch(0.905 0.012 88)
|
|
119
|
-
input: oklch(0.905 0.012 88)
|
|
120
|
-
ring: oklch(0.16 0.006 85)
|
|
121
|
-
surface-raised: oklch(0.99 0.008 85)
|
|
122
|
-
surface-overlay: oklch(0.995 0.006 85)
|
|
123
|
-
chart-1: oklch(0.62 0.13 190)
|
|
124
|
-
chart-2: oklch(0.68 0.16 350)
|
|
125
|
-
chart-3: oklch(0.58 0.15 290)
|
|
126
|
-
chart-4: oklch(0.70 0.13 75)
|
|
127
|
-
chart-5: oklch(0.65 0.17 30)
|
|
128
|
-
sidebar: oklch(0.965 0.014 88)
|
|
129
|
-
sidebar-foreground: oklch(0.16 0.006 85)
|
|
130
|
-
sidebar-primary: oklch(0.16 0.006 85)
|
|
131
|
-
sidebar-primary-foreground: oklch(0.985 0.012 85)
|
|
132
|
-
sidebar-accent: oklch(0.925 0.014 90)
|
|
133
|
-
sidebar-accent-foreground: oklch(0.22 0.008 85)
|
|
134
|
-
sidebar-border: oklch(0.905 0.012 88)
|
|
135
|
-
sidebar-ring: oklch(0.16 0.006 85)
|
|
136
|
-
dark:
|
|
137
|
-
background: oklch(0.19 0.010 85)
|
|
138
|
-
foreground: oklch(0.94 0.010 85)
|
|
139
|
-
card: oklch(0.23 0.011 85)
|
|
140
|
-
card-foreground: oklch(0.94 0.010 85)
|
|
141
|
-
popover: oklch(0.27 0.012 85)
|
|
142
|
-
popover-foreground: oklch(0.94 0.010 85)
|
|
143
|
-
primary: oklch(0.94 0.010 85)
|
|
144
|
-
primary-foreground: oklch(0.19 0.010 85)
|
|
145
|
-
secondary: oklch(0.25 0.011 85)
|
|
146
|
-
secondary-foreground: oklch(0.90 0.010 85)
|
|
147
|
-
muted: oklch(0.24 0.011 85)
|
|
148
|
-
muted-foreground: oklch(0.72 0.014 82)
|
|
149
|
-
accent: oklch(0.28 0.013 88)
|
|
150
|
-
accent-foreground: oklch(0.92 0.010 85)
|
|
151
|
-
destructive: oklch(0.64 0.19 25)
|
|
152
|
-
destructive-foreground: oklch(0.15 0.02 25)
|
|
153
|
-
success: oklch(0.68 0.13 150)
|
|
154
|
-
warning: oklch(0.76 0.15 70)
|
|
155
|
-
border: oklch(0.29 0.012 85)
|
|
156
|
-
input: oklch(0.29 0.012 85)
|
|
157
|
-
ring: oklch(0.94 0.010 85)
|
|
158
|
-
surface-raised: oklch(0.23 0.011 85)
|
|
159
|
-
surface-overlay: oklch(0.28 0.012 85)
|
|
160
|
-
chart-1: oklch(0.70 0.13 190)
|
|
161
|
-
chart-2: oklch(0.74 0.15 350)
|
|
162
|
-
chart-3: oklch(0.66 0.15 290)
|
|
163
|
-
chart-4: oklch(0.76 0.13 75)
|
|
164
|
-
chart-5: oklch(0.72 0.16 30)
|
|
165
|
-
sidebar: oklch(0.17 0.010 85)
|
|
166
|
-
sidebar-foreground: oklch(0.90 0.010 85)
|
|
167
|
-
sidebar-primary: oklch(0.94 0.010 85)
|
|
168
|
-
sidebar-primary-foreground: oklch(0.19 0.010 85)
|
|
169
|
-
sidebar-accent: oklch(0.26 0.012 88)
|
|
170
|
-
sidebar-accent-foreground: oklch(0.92 0.010 85)
|
|
171
|
-
sidebar-border: oklch(0.25 0.011 85)
|
|
172
|
-
sidebar-ring: oklch(0.94 0.010 85)
|
|
173
|
-
typography:
|
|
174
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [600] }
|
|
175
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 600] }
|
|
176
|
-
mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
177
|
-
ramp:
|
|
178
|
-
display: { size: 30px, line: 38px, weight: 600, family: display, tracking: -0.01em }
|
|
179
|
-
h1: { size: 24px, line: 31px, weight: 600, family: sans }
|
|
180
|
-
h2: { size: 18px, line: 25px, weight: 600, family: sans }
|
|
181
|
-
body: { size: 16px, line: 25px, weight: 400, family: sans }
|
|
182
|
-
small: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
183
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
184
|
-
data: { size: 14px, line: 22px, weight: 400, family: mono, features: [tnum] }
|
|
185
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps] }
|
|
186
|
-
elevation:
|
|
187
|
-
radius: { sm: 8px, md: 12px, lg: 16px }
|
|
188
|
-
hairline: border
|
|
189
|
-
shadow:
|
|
190
|
-
overlay: "0 8px 30px oklch(0.20 0.02 85 / 0.10)"
|
|
191
|
-
popover: "0 4px 16px oklch(0.20 0.02 85 / 0.08)"
|
|
192
|
-
dark-ladder: { background: 0.19, raised: 0.23, overlay: 0.28, hue-held: 85 }
|
|
193
|
-
motion:
|
|
194
|
-
duration: { press: 120ms, fade: 160ms, panel: 220ms }
|
|
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-3 }
|
|
202
|
-
diverging: { negative: destructive, mid: muted, positive: chart-1 }
|
|
203
|
-
layout: { base: 4px, sidebar: [260px, 60px], topbar: 56px, side-panel: [440px, 680px], content-max: 1320px }
|
|
204
|
-
```
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
schema: design-md/v2
|
|
3
|
-
id: clickhouse
|
|
4
|
-
tier: brand
|
|
5
|
-
segments: [data-platform, analytics, dev-tools]
|
|
6
|
-
keywords: [dark, electric-yellow, monochrome, dense, high-contrast, engineered]
|
|
7
|
-
sourced: 2026-07-12
|
|
8
|
-
sources: "design-md/v1 clickhouse entry (2026-07-04) + 2026-07-12 re-audit of the black-canvas / electric-yellow system; Inter Variable (700, tight tracking) + JetBrains Mono per v1; dark is the signature theme (the brand ships no light surface) — a light counterpart is authored for the rare daytime need; full-bleed yellow bands and 56px stat numerals stay behind"
|
|
9
|
-
license: open
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# clickhouse — a darkened ops room lit by one voltage lamp
|
|
13
|
-
|
|
14
|
-
## 1 Visual Theme
|
|
15
|
-
A darkened ops room at 2am: a matte near-black console, one electric-yellow status
|
|
16
|
-
lamp, white readouts set in tight monospace, and nothing lit that isn't load-bearing.
|
|
17
|
-
**Dark is the signature theme** — the near-black canvas is the identity, and the light
|
|
18
|
-
counterpart is a rare daytime mode, not the default flipped. Emphatically flat: rank is
|
|
19
|
-
the surface ladder, hairline `border`, and white-on-black contrast, never shadow. One
|
|
20
|
-
accent — electric-yellow `primary` — is held scarce: the one primary action, the focus
|
|
21
|
-
`ring`, the active-nav indicator, nothing else. Neutrals are near-achromatic so the UI
|
|
22
|
-
reads engineered and monochrome, yellow its only voltage. Density is dense.
|
|
23
|
-
|
|
24
|
-
## 2 Color Roles
|
|
25
|
-
White `foreground` on near-black `background`; `primary` electric-yellow is the only
|
|
26
|
-
chromatic hue that carries meaning, with black `primary-foreground` for the
|
|
27
|
-
high-contrast brand signal. `accent` is an elevated neutral grey for hover and selected
|
|
28
|
-
rows — a lift, never a hue. Status hues (`destructive`, `success`, `warning`) speak
|
|
29
|
-
status only. The yellow's power is its scarcity at element scale; full-bleed yellow is
|
|
30
|
-
marketing voltage and carries no operator role. Sidebar sits a step below the canvas.
|
|
31
|
-
|
|
32
|
-
## 3 Typography
|
|
33
|
-
Inter (single voice — the open substitute for the brand cut) / JetBrains Mono (IDs,
|
|
34
|
-
codes, timestamps, log lines, SQL). Register scope: no separate display face — Inter at
|
|
35
|
-
700 with tight negative tracking is the defining trait, carried at operator sizes even as
|
|
36
|
-
the 72/56/40px hero scale stays behind. Every numeric column renders `tabular-nums`;
|
|
37
|
-
show the real query, not an illustration. Emphasis bumps weight, never size.
|
|
38
|
-
|
|
39
|
-
## 4 Component Stylings
|
|
40
|
-
Buttons `radius-md` (8px, never pill), yellow `primary` fill on black; secondary takes
|
|
41
|
-
the dim-panel `secondary` with a hairline; ghost goes `accent` on hover. Inputs on
|
|
42
|
-
`background` with a hairline `input` edge and a 2px yellow `ring`, no glow. Cards a
|
|
43
|
-
dim-panel step above the canvas on a hairline, `radius-lg` for large panels; depth is
|
|
44
|
-
the surface lift, never shadow. Table rows dense on `border` grid, `accent` hover,
|
|
45
|
-
`accent` selection with a yellow left-indicator, mono numerals. Detail opens in the side
|
|
46
|
-
panel. Badges: hairline, `muted`/status fill, uppercase caption, never `primary`.
|
|
47
|
-
|
|
48
|
-
## 5 Layout
|
|
49
|
-
4px base; ramp 2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sidebar 240/56px; topbar 64px
|
|
50
|
-
(the brand's nav height); side panel 420/640px; content max 1280px; tables full-width.
|
|
51
|
-
Dense globally — engineering-grade rhythm — stepped per archetype, never absolute overrides.
|
|
52
|
-
|
|
53
|
-
## 6 Depth
|
|
54
|
-
Flat and shadowless — the surface ladder and hairlines carry all rank. Dark: the
|
|
55
|
-
authored ladder — `background` 0.15 L, `surface-raised` +0.06, `surface-overlay` +0.10,
|
|
56
|
-
hue held at 105; overlays earn the faintest tinted lift over a scrim, never a heavier
|
|
57
|
-
shadow. Light: white canvas, hairlines, and the rare soft yellow-tinted shadow only on
|
|
58
|
-
true overlays. Focus is a 2px yellow `ring`, always visible; three z-levels: content,
|
|
59
|
-
sticky chrome, overlay.
|
|
60
|
-
|
|
61
|
-
## 7 Motion
|
|
62
|
-
Near-instant — speed is the brand. Named moments: `query-run` (press feedback, 90ms),
|
|
63
|
-
`panel-glide` (side panel, 200ms, interruptible), `row-fade` (content arrive, 130ms).
|
|
64
|
-
Physicality is granted only to auth. Nothing animates in tables, log streams, or any
|
|
65
|
-
keyboard-initiated action.
|
|
66
|
-
|
|
67
|
-
## 8 Iconography & Charts
|
|
68
|
-
Lucide, 1.5px stroke, 16/20px grid, `muted-foreground` default. Charts: hairline axes,
|
|
69
|
-
no gridline fills; the categorical ramp leads with the yellow voltage then reaches for
|
|
70
|
-
distinct counterpoints — yellow, blue, green, coral, violet (`chart-1..5`); tooltips on
|
|
71
|
-
`surface-overlay` with mono numerals.
|
|
72
|
-
|
|
73
|
-
## 9 Voice
|
|
74
|
-
Terse engineer — no ceremony, no exclamation. "Run query" · "No running queries — the
|
|
75
|
-
cluster is idle" · "This query scanned 4.2B rows; add a PREWHERE to narrow it."
|
|
76
|
-
|
|
77
|
-
## 10 Do's & Don'ts
|
|
78
|
-
Do wear the near-black canvas — this brand is categorically dark, with no light surface
|
|
79
|
-
to fall back to. Do reserve yellow `primary` for the primary action, the focus `ring`,
|
|
80
|
-
and the active-nav indicator — nothing else. Do carry hierarchy with the surface ladder,
|
|
81
|
-
hairlines, weight, and size. Don't introduce a second brand color — monochrome plus one
|
|
82
|
-
yellow. Don't fill large surfaces with yellow or set body text in it. Don't pill controls
|
|
83
|
-
or signal elevation with drop shadows.
|
|
84
|
-
|
|
85
|
-
## 11 Responsive
|
|
86
|
-
375: sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet;
|
|
87
|
-
density holds. 768: sidebar → icon rail; tables scroll their overflow. 1024: two-pane
|
|
88
|
-
queue+detail holds side by side. 1440: content caps for forms; tables and dashboards take
|
|
89
|
-
the full width.
|
|
90
|
-
|
|
91
|
-
## 12 Agent Prompt Guide
|
|
92
|
-
Wear the near-black canvas by default — cards and panels are the dim-panel lift off it,
|
|
93
|
-
not white. Spend yellow once per surface: primary action, focus ring, active-nav
|
|
94
|
-
indicator; if two things want it, one is not primary. Depth is surface contrast and
|
|
95
|
-
hairlines, never shadow. Every ID, timestamp, and SQL block is mono; show the real query.
|
|
96
|
-
Dark is authored — consult the block, never derive.
|
|
97
|
-
|
|
98
|
-
```yaml design-values
|
|
99
|
-
color:
|
|
100
|
-
light:
|
|
101
|
-
background: oklch(0.99 0.004 105)
|
|
102
|
-
foreground: oklch(0.17 0.006 105)
|
|
103
|
-
card: oklch(0.995 0.004 105)
|
|
104
|
-
card-foreground: oklch(0.17 0.006 105)
|
|
105
|
-
popover: oklch(0.995 0.004 105)
|
|
106
|
-
popover-foreground: oklch(0.17 0.006 105)
|
|
107
|
-
primary: oklch(0.17 0.006 105)
|
|
108
|
-
primary-foreground: oklch(0.99 0.004 105)
|
|
109
|
-
secondary: oklch(0.96 0.006 105)
|
|
110
|
-
secondary-foreground: oklch(0.24 0.007 105)
|
|
111
|
-
muted: oklch(0.965 0.006 105)
|
|
112
|
-
muted-foreground: oklch(0.48 0.008 105)
|
|
113
|
-
accent: oklch(0.93 0.008 108)
|
|
114
|
-
accent-foreground: oklch(0.24 0.007 105)
|
|
115
|
-
destructive: oklch(0.58 0.20 25)
|
|
116
|
-
destructive-foreground: oklch(0.99 0.008 25)
|
|
117
|
-
success: oklch(0.60 0.14 150)
|
|
118
|
-
warning: oklch(0.72 0.15 75)
|
|
119
|
-
border: oklch(0.91 0.007 105)
|
|
120
|
-
input: oklch(0.91 0.007 105)
|
|
121
|
-
ring: oklch(0.17 0.006 105)
|
|
122
|
-
surface-raised: oklch(0.985 0.005 105)
|
|
123
|
-
surface-overlay: oklch(0.995 0.004 105)
|
|
124
|
-
chart-1: oklch(0.80 0.16 108)
|
|
125
|
-
chart-2: oklch(0.55 0.16 250)
|
|
126
|
-
chart-3: oklch(0.56 0.14 150)
|
|
127
|
-
chart-4: oklch(0.58 0.18 30)
|
|
128
|
-
chart-5: oklch(0.56 0.15 300)
|
|
129
|
-
sidebar: oklch(0.965 0.006 105)
|
|
130
|
-
sidebar-foreground: oklch(0.17 0.006 105)
|
|
131
|
-
sidebar-primary: oklch(0.17 0.006 105)
|
|
132
|
-
sidebar-primary-foreground: oklch(0.99 0.004 105)
|
|
133
|
-
sidebar-accent: oklch(0.93 0.008 108)
|
|
134
|
-
sidebar-accent-foreground: oklch(0.24 0.007 105)
|
|
135
|
-
sidebar-border: oklch(0.91 0.007 105)
|
|
136
|
-
sidebar-ring: oklch(0.17 0.006 105)
|
|
137
|
-
dark:
|
|
138
|
-
background: oklch(0.15 0.006 105)
|
|
139
|
-
foreground: oklch(0.99 0.004 105)
|
|
140
|
-
card: oklch(0.21 0.007 105)
|
|
141
|
-
card-foreground: oklch(0.99 0.004 105)
|
|
142
|
-
popover: oklch(0.24 0.008 105)
|
|
143
|
-
popover-foreground: oklch(0.99 0.004 105)
|
|
144
|
-
primary: oklch(0.97 0.17 111)
|
|
145
|
-
primary-foreground: oklch(0.15 0.006 105)
|
|
146
|
-
secondary: oklch(0.21 0.007 105)
|
|
147
|
-
secondary-foreground: oklch(0.92 0.006 105)
|
|
148
|
-
muted: oklch(0.19 0.007 105)
|
|
149
|
-
muted-foreground: oklch(0.66 0.010 105)
|
|
150
|
-
accent: oklch(0.26 0.008 105)
|
|
151
|
-
accent-foreground: oklch(0.92 0.006 105)
|
|
152
|
-
destructive: oklch(0.64 0.20 25)
|
|
153
|
-
destructive-foreground: oklch(0.15 0.02 25)
|
|
154
|
-
success: oklch(0.70 0.16 150)
|
|
155
|
-
warning: oklch(0.78 0.15 75)
|
|
156
|
-
border: oklch(0.29 0.008 105)
|
|
157
|
-
input: oklch(0.29 0.008 105)
|
|
158
|
-
ring: oklch(0.97 0.17 111)
|
|
159
|
-
surface-raised: oklch(0.21 0.007 105)
|
|
160
|
-
surface-overlay: oklch(0.25 0.008 105)
|
|
161
|
-
chart-1: oklch(0.90 0.17 108)
|
|
162
|
-
chart-2: oklch(0.72 0.15 250)
|
|
163
|
-
chart-3: oklch(0.72 0.15 150)
|
|
164
|
-
chart-4: oklch(0.70 0.17 30)
|
|
165
|
-
chart-5: oklch(0.72 0.13 300)
|
|
166
|
-
sidebar: oklch(0.13 0.006 105)
|
|
167
|
-
sidebar-foreground: oklch(0.92 0.006 105)
|
|
168
|
-
sidebar-primary: oklch(0.97 0.17 111)
|
|
169
|
-
sidebar-primary-foreground: oklch(0.15 0.006 105)
|
|
170
|
-
sidebar-accent: oklch(0.22 0.008 105)
|
|
171
|
-
sidebar-accent-foreground: oklch(0.92 0.006 105)
|
|
172
|
-
sidebar-border: oklch(0.24 0.008 105)
|
|
173
|
-
sidebar-ring: oklch(0.97 0.17 111)
|
|
174
|
-
typography:
|
|
175
|
-
display: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [700] }
|
|
176
|
-
sans: { family: "Inter Variable", fallback: "system-ui, sans-serif", weights: [400, 700] }
|
|
177
|
-
mono: { family: "JetBrains Mono", fallback: "ui-monospace, monospace", weights: [400] }
|
|
178
|
-
ramp:
|
|
179
|
-
display: { size: 28px, line: 34px, weight: 700, family: display, tracking: -0.02em }
|
|
180
|
-
h1: { size: 24px, line: 30px, weight: 700, family: sans, tracking: -0.015em }
|
|
181
|
-
h2: { size: 18px, line: 24px, weight: 700, family: sans, tracking: -0.01em }
|
|
182
|
-
body: { size: 14px, line: 21px, weight: 400, family: sans }
|
|
183
|
-
small: { size: 13px, line: 18px, weight: 400, family: sans }
|
|
184
|
-
caption: { size: 12px, line: 16px, weight: 600, family: sans, tracking: 0.08em, transform: uppercase }
|
|
185
|
-
data: { size: 13px, line: 20px, weight: 400, family: mono, features: [tnum] }
|
|
186
|
-
register-scope: { display: [page-title, empty-state, auth], sans: [chrome, controls, body, headings], mono: [data, ids, timestamps, logs, sql] }
|
|
187
|
-
elevation:
|
|
188
|
-
radius: { sm: 6px, md: 8px, lg: 12px }
|
|
189
|
-
hairline: border
|
|
190
|
-
shadow:
|
|
191
|
-
overlay: "0 10px 34px oklch(0.12 0.012 105 / 0.55)"
|
|
192
|
-
popover: "0 4px 16px oklch(0.12 0.012 105 / 0.45)"
|
|
193
|
-
dark-ladder: { background: 0.15, raised: 0.21, overlay: 0.25, hue-held: 105 }
|
|
194
|
-
motion:
|
|
195
|
-
duration: { press: 90ms, fade: 130ms, panel: 200ms }
|
|
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.5px, 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: chart-4, mid: muted, positive: chart-3 }
|
|
204
|
-
layout: { base: 4px, sidebar: [240px, 56px], topbar: 64px, side-panel: [420px, 640px], content-max: 1280px }
|
|
205
|
-
```
|