@aexol/spectral 0.7.0 → 0.7.1
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/dist/agent/index.js +76 -301
- package/dist/cli.js +11 -0
- package/dist/designer/data/systems/agentic/DESIGN.md +71 -0
- package/dist/designer/data/systems/agentic/components.html +154 -0
- package/dist/designer/data/systems/agentic/tokens.css +63 -0
- package/dist/designer/data/systems/airbnb/DESIGN.md +393 -0
- package/dist/designer/data/systems/airbnb/components.html +1373 -0
- package/dist/designer/data/systems/airbnb/tokens.css +261 -0
- package/dist/designer/data/systems/airtable/DESIGN.md +92 -0
- package/dist/designer/data/systems/airtable/components.html +489 -0
- package/dist/designer/data/systems/airtable/tokens.css +261 -0
- package/dist/designer/data/systems/ant/DESIGN.md +71 -0
- package/dist/designer/data/systems/ant/components.html +154 -0
- package/dist/designer/data/systems/ant/tokens.css +63 -0
- package/dist/designer/data/systems/apple/DESIGN.md +250 -0
- package/dist/designer/data/systems/apple/components.html +749 -0
- package/dist/designer/data/systems/apple/tokens.css +286 -0
- package/dist/designer/data/systems/application/DESIGN.md +71 -0
- package/dist/designer/data/systems/application/components.html +154 -0
- package/dist/designer/data/systems/application/tokens.css +63 -0
- package/dist/designer/data/systems/arc/DESIGN.md +152 -0
- package/dist/designer/data/systems/arc/components.html +432 -0
- package/dist/designer/data/systems/arc/tokens.css +137 -0
- package/dist/designer/data/systems/artistic/DESIGN.md +71 -0
- package/dist/designer/data/systems/artistic/components.html +136 -0
- package/dist/designer/data/systems/artistic/tokens.css +63 -0
- package/dist/designer/data/systems/atelier-zero/DESIGN.md +316 -0
- package/dist/designer/data/systems/atelier-zero/components.html +136 -0
- package/dist/designer/data/systems/atelier-zero/tokens.css +63 -0
- package/dist/designer/data/systems/bento/DESIGN.md +71 -0
- package/dist/designer/data/systems/bento/components.html +136 -0
- package/dist/designer/data/systems/bento/tokens.css +63 -0
- package/dist/designer/data/systems/binance/DESIGN.md +348 -0
- package/dist/designer/data/systems/binance/components.html +550 -0
- package/dist/designer/data/systems/binance/tokens.css +255 -0
- package/dist/designer/data/systems/bmw/DESIGN.md +183 -0
- package/dist/designer/data/systems/bmw/components.html +551 -0
- package/dist/designer/data/systems/bmw/tokens.css +179 -0
- package/dist/designer/data/systems/bmw-m/DESIGN.md +246 -0
- package/dist/designer/data/systems/bmw-m/components.html +342 -0
- package/dist/designer/data/systems/bmw-m/tokens.css +64 -0
- package/dist/designer/data/systems/bold/DESIGN.md +71 -0
- package/dist/designer/data/systems/bold/components.html +136 -0
- package/dist/designer/data/systems/bold/tokens.css +63 -0
- package/dist/designer/data/systems/brutalism/DESIGN.md +71 -0
- package/dist/designer/data/systems/brutalism/components.html +154 -0
- package/dist/designer/data/systems/brutalism/tokens.css +63 -0
- package/dist/designer/data/systems/bugatti/DESIGN.md +271 -0
- package/dist/designer/data/systems/bugatti/components.html +342 -0
- package/dist/designer/data/systems/bugatti/tokens.css +64 -0
- package/dist/designer/data/systems/cafe/DESIGN.md +71 -0
- package/dist/designer/data/systems/cafe/components.html +136 -0
- package/dist/designer/data/systems/cafe/tokens.css +63 -0
- package/dist/designer/data/systems/cal/DESIGN.md +262 -0
- package/dist/designer/data/systems/cal/components.html +376 -0
- package/dist/designer/data/systems/cal/tokens.css +265 -0
- package/dist/designer/data/systems/canva/DESIGN.md +157 -0
- package/dist/designer/data/systems/canva/components.html +461 -0
- package/dist/designer/data/systems/canva/tokens.css +147 -0
- package/dist/designer/data/systems/cisco/DESIGN.md +201 -0
- package/dist/designer/data/systems/cisco/components.html +342 -0
- package/dist/designer/data/systems/cisco/tokens.css +64 -0
- package/dist/designer/data/systems/claude/DESIGN.md +315 -0
- package/dist/designer/data/systems/claude/components.html +483 -0
- package/dist/designer/data/systems/claude/tokens.css +130 -0
- package/dist/designer/data/systems/clay/DESIGN.md +307 -0
- package/dist/designer/data/systems/clay/components.html +136 -0
- package/dist/designer/data/systems/clay/tokens.css +63 -0
- package/dist/designer/data/systems/claymorphism/DESIGN.md +71 -0
- package/dist/designer/data/systems/claymorphism/components.html +136 -0
- package/dist/designer/data/systems/claymorphism/tokens.css +63 -0
- package/dist/designer/data/systems/clean/DESIGN.md +71 -0
- package/dist/designer/data/systems/clean/components.html +136 -0
- package/dist/designer/data/systems/clean/tokens.css +63 -0
- package/dist/designer/data/systems/clickhouse/DESIGN.md +284 -0
- package/dist/designer/data/systems/clickhouse/components.html +506 -0
- package/dist/designer/data/systems/clickhouse/tokens.css +135 -0
- package/dist/designer/data/systems/cohere/DESIGN.md +269 -0
- package/dist/designer/data/systems/cohere/components.html +353 -0
- package/dist/designer/data/systems/cohere/tokens.css +126 -0
- package/dist/designer/data/systems/coinbase/DESIGN.md +132 -0
- package/dist/designer/data/systems/coinbase/components.html +501 -0
- package/dist/designer/data/systems/coinbase/tokens.css +257 -0
- package/dist/designer/data/systems/colorful/DESIGN.md +71 -0
- package/dist/designer/data/systems/colorful/components.html +136 -0
- package/dist/designer/data/systems/colorful/tokens.css +63 -0
- package/dist/designer/data/systems/composio/DESIGN.md +310 -0
- package/dist/designer/data/systems/composio/components.html +342 -0
- package/dist/designer/data/systems/composio/tokens.css +64 -0
- package/dist/designer/data/systems/contemporary/DESIGN.md +71 -0
- package/dist/designer/data/systems/contemporary/components.html +136 -0
- package/dist/designer/data/systems/contemporary/tokens.css +63 -0
- package/dist/designer/data/systems/corporate/DESIGN.md +71 -0
- package/dist/designer/data/systems/corporate/components.html +136 -0
- package/dist/designer/data/systems/corporate/tokens.css +63 -0
- package/dist/designer/data/systems/cosmic/DESIGN.md +71 -0
- package/dist/designer/data/systems/cosmic/components.html +136 -0
- package/dist/designer/data/systems/cosmic/tokens.css +63 -0
- package/dist/designer/data/systems/creative/DESIGN.md +71 -0
- package/dist/designer/data/systems/creative/components.html +136 -0
- package/dist/designer/data/systems/creative/tokens.css +63 -0
- package/dist/designer/data/systems/cursor/DESIGN.md +312 -0
- package/dist/designer/data/systems/cursor/components.html +654 -0
- package/dist/designer/data/systems/cursor/tokens.css +218 -0
- package/dist/designer/data/systems/dashboard/DESIGN.md +71 -0
- package/dist/designer/data/systems/dashboard/components.html +154 -0
- package/dist/designer/data/systems/dashboard/tokens.css +63 -0
- package/dist/designer/data/systems/default/DESIGN.md +62 -0
- package/dist/designer/data/systems/default/components.html +523 -0
- package/dist/designer/data/systems/default/tokens.css +200 -0
- package/dist/designer/data/systems/discord/DESIGN.md +162 -0
- package/dist/designer/data/systems/discord/components.html +359 -0
- package/dist/designer/data/systems/discord/tokens.css +125 -0
- package/dist/designer/data/systems/dithered/DESIGN.md +71 -0
- package/dist/designer/data/systems/dithered/components.html +136 -0
- package/dist/designer/data/systems/dithered/tokens.css +63 -0
- package/dist/designer/data/systems/doodle/DESIGN.md +71 -0
- package/dist/designer/data/systems/doodle/components.html +136 -0
- package/dist/designer/data/systems/doodle/tokens.css +63 -0
- package/dist/designer/data/systems/dramatic/DESIGN.md +71 -0
- package/dist/designer/data/systems/dramatic/components.html +136 -0
- package/dist/designer/data/systems/dramatic/tokens.css +63 -0
- package/dist/designer/data/systems/duolingo/DESIGN.md +154 -0
- package/dist/designer/data/systems/duolingo/components.html +532 -0
- package/dist/designer/data/systems/duolingo/tokens.css +130 -0
- package/dist/designer/data/systems/editorial/DESIGN.md +71 -0
- package/dist/designer/data/systems/editorial/components.html +154 -0
- package/dist/designer/data/systems/editorial/tokens.css +63 -0
- package/dist/designer/data/systems/elegant/DESIGN.md +71 -0
- package/dist/designer/data/systems/elegant/components.html +136 -0
- package/dist/designer/data/systems/elegant/tokens.css +63 -0
- package/dist/designer/data/systems/elevenlabs/DESIGN.md +268 -0
- package/dist/designer/data/systems/elevenlabs/components.html +342 -0
- package/dist/designer/data/systems/elevenlabs/tokens.css +127 -0
- package/dist/designer/data/systems/energetic/DESIGN.md +72 -0
- package/dist/designer/data/systems/energetic/components.html +136 -0
- package/dist/designer/data/systems/energetic/tokens.css +63 -0
- package/dist/designer/data/systems/enterprise/DESIGN.md +71 -0
- package/dist/designer/data/systems/enterprise/components.html +154 -0
- package/dist/designer/data/systems/enterprise/tokens.css +63 -0
- package/dist/designer/data/systems/expo/DESIGN.md +284 -0
- package/dist/designer/data/systems/expo/components.html +342 -0
- package/dist/designer/data/systems/expo/tokens.css +64 -0
- package/dist/designer/data/systems/expressive/DESIGN.md +71 -0
- package/dist/designer/data/systems/expressive/components.html +136 -0
- package/dist/designer/data/systems/expressive/tokens.css +63 -0
- package/dist/designer/data/systems/fantasy/DESIGN.md +71 -0
- package/dist/designer/data/systems/fantasy/components.html +136 -0
- package/dist/designer/data/systems/fantasy/tokens.css +63 -0
- package/dist/designer/data/systems/ferrari/DESIGN.md +317 -0
- package/dist/designer/data/systems/ferrari/components.html +342 -0
- package/dist/designer/data/systems/ferrari/tokens.css +64 -0
- package/dist/designer/data/systems/figma/DESIGN.md +223 -0
- package/dist/designer/data/systems/figma/components.html +344 -0
- package/dist/designer/data/systems/figma/tokens.css +126 -0
- package/dist/designer/data/systems/flat/DESIGN.md +71 -0
- package/dist/designer/data/systems/flat/components.html +136 -0
- package/dist/designer/data/systems/flat/tokens.css +63 -0
- package/dist/designer/data/systems/framer/DESIGN.md +249 -0
- package/dist/designer/data/systems/framer/components.html +438 -0
- package/dist/designer/data/systems/framer/tokens.css +238 -0
- package/dist/designer/data/systems/friendly/DESIGN.md +71 -0
- package/dist/designer/data/systems/friendly/components.html +136 -0
- package/dist/designer/data/systems/friendly/tokens.css +63 -0
- package/dist/designer/data/systems/futuristic/DESIGN.md +71 -0
- package/dist/designer/data/systems/futuristic/components.html +136 -0
- package/dist/designer/data/systems/futuristic/tokens.css +63 -0
- package/dist/designer/data/systems/github/DESIGN.md +155 -0
- package/dist/designer/data/systems/github/components.html +383 -0
- package/dist/designer/data/systems/github/tokens.css +125 -0
- package/dist/designer/data/systems/glassmorphism/DESIGN.md +71 -0
- package/dist/designer/data/systems/glassmorphism/components.html +154 -0
- package/dist/designer/data/systems/glassmorphism/tokens.css +63 -0
- package/dist/designer/data/systems/gradient/DESIGN.md +71 -0
- package/dist/designer/data/systems/gradient/components.html +154 -0
- package/dist/designer/data/systems/gradient/tokens.css +63 -0
- package/dist/designer/data/systems/hashicorp/DESIGN.md +281 -0
- package/dist/designer/data/systems/hashicorp/components.html +502 -0
- package/dist/designer/data/systems/hashicorp/tokens.css +272 -0
- package/dist/designer/data/systems/hud/DESIGN.md +173 -0
- package/dist/designer/data/systems/hud/components.html +136 -0
- package/dist/designer/data/systems/hud/tokens.css +63 -0
- package/dist/designer/data/systems/huggingface/DESIGN.md +149 -0
- package/dist/designer/data/systems/huggingface/components.html +346 -0
- package/dist/designer/data/systems/huggingface/tokens.css +125 -0
- package/dist/designer/data/systems/ibm/DESIGN.md +335 -0
- package/dist/designer/data/systems/ibm/components.html +342 -0
- package/dist/designer/data/systems/ibm/tokens.css +64 -0
- package/dist/designer/data/systems/intercom/DESIGN.md +149 -0
- package/dist/designer/data/systems/intercom/components.html +557 -0
- package/dist/designer/data/systems/intercom/tokens.css +150 -0
- package/dist/designer/data/systems/kami/DESIGN.md +410 -0
- package/dist/designer/data/systems/kami/components.html +601 -0
- package/dist/designer/data/systems/kami/tokens.css +272 -0
- package/dist/designer/data/systems/kraken/DESIGN.md +128 -0
- package/dist/designer/data/systems/kraken/components.html +342 -0
- package/dist/designer/data/systems/kraken/tokens.css +64 -0
- package/dist/designer/data/systems/lamborghini/DESIGN.md +291 -0
- package/dist/designer/data/systems/lamborghini/components.html +342 -0
- package/dist/designer/data/systems/lamborghini/tokens.css +64 -0
- package/dist/designer/data/systems/levels/DESIGN.md +71 -0
- package/dist/designer/data/systems/levels/components.html +154 -0
- package/dist/designer/data/systems/levels/tokens.css +63 -0
- package/dist/designer/data/systems/linear-app/DESIGN.md +370 -0
- package/dist/designer/data/systems/linear-app/components.html +370 -0
- package/dist/designer/data/systems/linear-app/tokens.css +130 -0
- package/dist/designer/data/systems/lingo/DESIGN.md +71 -0
- package/dist/designer/data/systems/lingo/components.html +154 -0
- package/dist/designer/data/systems/lingo/tokens.css +63 -0
- package/dist/designer/data/systems/loom/DESIGN.md +201 -0
- package/dist/designer/data/systems/loom/components.html +446 -0
- package/dist/designer/data/systems/loom/tokens.css +138 -0
- package/dist/designer/data/systems/lovable/DESIGN.md +301 -0
- package/dist/designer/data/systems/lovable/components.html +441 -0
- package/dist/designer/data/systems/lovable/tokens.css +258 -0
- package/dist/designer/data/systems/luxury/DESIGN.md +71 -0
- package/dist/designer/data/systems/luxury/components.html +154 -0
- package/dist/designer/data/systems/luxury/tokens.css +63 -0
- package/dist/designer/data/systems/mastercard/DESIGN.md +368 -0
- package/dist/designer/data/systems/mastercard/components.html +342 -0
- package/dist/designer/data/systems/mastercard/tokens.css +64 -0
- package/dist/designer/data/systems/material/DESIGN.md +71 -0
- package/dist/designer/data/systems/material/components.html +154 -0
- package/dist/designer/data/systems/material/tokens.css +63 -0
- package/dist/designer/data/systems/meta/DESIGN.md +369 -0
- package/dist/designer/data/systems/meta/components.html +398 -0
- package/dist/designer/data/systems/meta/tokens.css +263 -0
- package/dist/designer/data/systems/minimal/DESIGN.md +71 -0
- package/dist/designer/data/systems/minimal/components.html +154 -0
- package/dist/designer/data/systems/minimal/tokens.css +63 -0
- package/dist/designer/data/systems/minimax/DESIGN.md +260 -0
- package/dist/designer/data/systems/minimax/components.html +590 -0
- package/dist/designer/data/systems/minimax/tokens.css +148 -0
- package/dist/designer/data/systems/mintlify/DESIGN.md +329 -0
- package/dist/designer/data/systems/mintlify/components.html +737 -0
- package/dist/designer/data/systems/mintlify/tokens.css +256 -0
- package/dist/designer/data/systems/miro/DESIGN.md +111 -0
- package/dist/designer/data/systems/miro/components.html +342 -0
- package/dist/designer/data/systems/miro/tokens.css +64 -0
- package/dist/designer/data/systems/mission-control/DESIGN.md +474 -0
- package/dist/designer/data/systems/mission-control/components.html +136 -0
- package/dist/designer/data/systems/mission-control/tokens.css +63 -0
- package/dist/designer/data/systems/mistral-ai/DESIGN.md +264 -0
- package/dist/designer/data/systems/mistral-ai/components.html +338 -0
- package/dist/designer/data/systems/mistral-ai/tokens.css +125 -0
- package/dist/designer/data/systems/modern/DESIGN.md +71 -0
- package/dist/designer/data/systems/modern/components.html +154 -0
- package/dist/designer/data/systems/modern/tokens.css +63 -0
- package/dist/designer/data/systems/mongodb/DESIGN.md +269 -0
- package/dist/designer/data/systems/mongodb/components.html +462 -0
- package/dist/designer/data/systems/mongodb/tokens.css +176 -0
- package/dist/designer/data/systems/mono/DESIGN.md +71 -0
- package/dist/designer/data/systems/mono/components.html +136 -0
- package/dist/designer/data/systems/mono/tokens.css +63 -0
- package/dist/designer/data/systems/neobrutalism/DESIGN.md +71 -0
- package/dist/designer/data/systems/neobrutalism/components.html +136 -0
- package/dist/designer/data/systems/neobrutalism/tokens.css +63 -0
- package/dist/designer/data/systems/neon/DESIGN.md +71 -0
- package/dist/designer/data/systems/neon/components.html +136 -0
- package/dist/designer/data/systems/neon/tokens.css +63 -0
- package/dist/designer/data/systems/neumorphism/DESIGN.md +71 -0
- package/dist/designer/data/systems/neumorphism/components.html +136 -0
- package/dist/designer/data/systems/neumorphism/tokens.css +63 -0
- package/dist/designer/data/systems/nike/DESIGN.md +366 -0
- package/dist/designer/data/systems/nike/components.html +512 -0
- package/dist/designer/data/systems/nike/tokens.css +304 -0
- package/dist/designer/data/systems/notion/DESIGN.md +312 -0
- package/dist/designer/data/systems/notion/components.html +413 -0
- package/dist/designer/data/systems/notion/tokens.css +130 -0
- package/dist/designer/data/systems/nvidia/DESIGN.md +296 -0
- package/dist/designer/data/systems/nvidia/components.html +414 -0
- package/dist/designer/data/systems/nvidia/tokens.css +133 -0
- package/dist/designer/data/systems/ollama/DESIGN.md +270 -0
- package/dist/designer/data/systems/ollama/components.html +700 -0
- package/dist/designer/data/systems/ollama/tokens.css +242 -0
- package/dist/designer/data/systems/openai/DESIGN.md +140 -0
- package/dist/designer/data/systems/openai/components.html +382 -0
- package/dist/designer/data/systems/openai/tokens.css +133 -0
- package/dist/designer/data/systems/opencode-ai/DESIGN.md +284 -0
- package/dist/designer/data/systems/opencode-ai/components.html +389 -0
- package/dist/designer/data/systems/opencode-ai/tokens.css +126 -0
- package/dist/designer/data/systems/pacman/DESIGN.md +71 -0
- package/dist/designer/data/systems/pacman/components.html +342 -0
- package/dist/designer/data/systems/pacman/tokens.css +64 -0
- package/dist/designer/data/systems/paper/DESIGN.md +71 -0
- package/dist/designer/data/systems/paper/components.html +136 -0
- package/dist/designer/data/systems/paper/tokens.css +63 -0
- package/dist/designer/data/systems/perplexity/DESIGN.md +286 -0
- package/dist/designer/data/systems/perplexity/components.html +455 -0
- package/dist/designer/data/systems/perplexity/tokens.css +151 -0
- package/dist/designer/data/systems/perspective/DESIGN.md +71 -0
- package/dist/designer/data/systems/perspective/components.html +136 -0
- package/dist/designer/data/systems/perspective/tokens.css +63 -0
- package/dist/designer/data/systems/pinterest/DESIGN.md +233 -0
- package/dist/designer/data/systems/pinterest/components.html +865 -0
- package/dist/designer/data/systems/pinterest/tokens.css +262 -0
- package/dist/designer/data/systems/playstation/DESIGN.md +367 -0
- package/dist/designer/data/systems/playstation/components.html +414 -0
- package/dist/designer/data/systems/playstation/tokens.css +150 -0
- package/dist/designer/data/systems/posthog/DESIGN.md +259 -0
- package/dist/designer/data/systems/posthog/components.html +827 -0
- package/dist/designer/data/systems/posthog/tokens.css +272 -0
- package/dist/designer/data/systems/premium/DESIGN.md +71 -0
- package/dist/designer/data/systems/premium/components.html +154 -0
- package/dist/designer/data/systems/premium/tokens.css +63 -0
- package/dist/designer/data/systems/professional/DESIGN.md +71 -0
- package/dist/designer/data/systems/professional/components.html +136 -0
- package/dist/designer/data/systems/professional/tokens.css +63 -0
- package/dist/designer/data/systems/publication/DESIGN.md +71 -0
- package/dist/designer/data/systems/publication/components.html +154 -0
- package/dist/designer/data/systems/publication/tokens.css +63 -0
- package/dist/designer/data/systems/raycast/DESIGN.md +271 -0
- package/dist/designer/data/systems/raycast/components.html +507 -0
- package/dist/designer/data/systems/raycast/tokens.css +143 -0
- package/dist/designer/data/systems/refined/DESIGN.md +71 -0
- package/dist/designer/data/systems/refined/components.html +136 -0
- package/dist/designer/data/systems/refined/tokens.css +63 -0
- package/dist/designer/data/systems/renault/DESIGN.md +314 -0
- package/dist/designer/data/systems/renault/components.html +154 -0
- package/dist/designer/data/systems/renault/tokens.css +63 -0
- package/dist/designer/data/systems/replicate/DESIGN.md +264 -0
- package/dist/designer/data/systems/replicate/components.html +340 -0
- package/dist/designer/data/systems/replicate/tokens.css +125 -0
- package/dist/designer/data/systems/resend/DESIGN.md +306 -0
- package/dist/designer/data/systems/resend/components.html +839 -0
- package/dist/designer/data/systems/resend/tokens.css +353 -0
- package/dist/designer/data/systems/retro/DESIGN.md +71 -0
- package/dist/designer/data/systems/retro/components.html +136 -0
- package/dist/designer/data/systems/retro/tokens.css +63 -0
- package/dist/designer/data/systems/revolut/DESIGN.md +188 -0
- package/dist/designer/data/systems/revolut/components.html +342 -0
- package/dist/designer/data/systems/revolut/tokens.css +64 -0
- package/dist/designer/data/systems/runwayml/DESIGN.md +247 -0
- package/dist/designer/data/systems/runwayml/components.html +638 -0
- package/dist/designer/data/systems/runwayml/tokens.css +204 -0
- package/dist/designer/data/systems/sanity/DESIGN.md +360 -0
- package/dist/designer/data/systems/sanity/components.html +342 -0
- package/dist/designer/data/systems/sanity/tokens.css +64 -0
- package/dist/designer/data/systems/sentry/DESIGN.md +265 -0
- package/dist/designer/data/systems/sentry/components.html +387 -0
- package/dist/designer/data/systems/sentry/tokens.css +219 -0
- package/dist/designer/data/systems/shadcn/DESIGN.md +71 -0
- package/dist/designer/data/systems/shadcn/components.html +732 -0
- package/dist/designer/data/systems/shadcn/tokens.css +255 -0
- package/dist/designer/data/systems/shopify/DESIGN.md +353 -0
- package/dist/designer/data/systems/shopify/components.html +342 -0
- package/dist/designer/data/systems/shopify/tokens.css +141 -0
- package/dist/designer/data/systems/simple/DESIGN.md +71 -0
- package/dist/designer/data/systems/simple/components.html +136 -0
- package/dist/designer/data/systems/simple/tokens.css +63 -0
- package/dist/designer/data/systems/skeumorphism/DESIGN.md +71 -0
- package/dist/designer/data/systems/skeumorphism/components.html +136 -0
- package/dist/designer/data/systems/skeumorphism/tokens.css +63 -0
- package/dist/designer/data/systems/slack/DESIGN.md +363 -0
- package/dist/designer/data/systems/slack/components.html +387 -0
- package/dist/designer/data/systems/slack/tokens.css +127 -0
- package/dist/designer/data/systems/sleek/DESIGN.md +71 -0
- package/dist/designer/data/systems/sleek/components.html +136 -0
- package/dist/designer/data/systems/sleek/tokens.css +63 -0
- package/dist/designer/data/systems/spacex/DESIGN.md +197 -0
- package/dist/designer/data/systems/spacex/components.html +496 -0
- package/dist/designer/data/systems/spacex/tokens.css +154 -0
- package/dist/designer/data/systems/spacious/DESIGN.md +71 -0
- package/dist/designer/data/systems/spacious/components.html +136 -0
- package/dist/designer/data/systems/spacious/tokens.css +63 -0
- package/dist/designer/data/systems/spotify/DESIGN.md +249 -0
- package/dist/designer/data/systems/spotify/components.html +365 -0
- package/dist/designer/data/systems/spotify/tokens.css +127 -0
- package/dist/designer/data/systems/starbucks/DESIGN.md +583 -0
- package/dist/designer/data/systems/starbucks/components.html +493 -0
- package/dist/designer/data/systems/starbucks/tokens.css +182 -0
- package/dist/designer/data/systems/storytelling/DESIGN.md +71 -0
- package/dist/designer/data/systems/storytelling/components.html +136 -0
- package/dist/designer/data/systems/storytelling/tokens.css +63 -0
- package/dist/designer/data/systems/stripe/DESIGN.md +325 -0
- package/dist/designer/data/systems/stripe/components.html +1018 -0
- package/dist/designer/data/systems/stripe/tokens.css +295 -0
- package/dist/designer/data/systems/supabase/DESIGN.md +258 -0
- package/dist/designer/data/systems/supabase/components.html +741 -0
- package/dist/designer/data/systems/supabase/tokens.css +294 -0
- package/dist/designer/data/systems/superhuman/DESIGN.md +255 -0
- package/dist/designer/data/systems/superhuman/components.html +537 -0
- package/dist/designer/data/systems/superhuman/tokens.css +160 -0
- package/dist/designer/data/systems/tesla/DESIGN.md +289 -0
- package/dist/designer/data/systems/tesla/components.html +724 -0
- package/dist/designer/data/systems/tesla/tokens.css +285 -0
- package/dist/designer/data/systems/tetris/DESIGN.md +71 -0
- package/dist/designer/data/systems/tetris/components.html +342 -0
- package/dist/designer/data/systems/tetris/tokens.css +64 -0
- package/dist/designer/data/systems/theverge/DESIGN.md +342 -0
- package/dist/designer/data/systems/theverge/components.html +342 -0
- package/dist/designer/data/systems/theverge/tokens.css +64 -0
- package/dist/designer/data/systems/together-ai/DESIGN.md +266 -0
- package/dist/designer/data/systems/together-ai/components.html +422 -0
- package/dist/designer/data/systems/together-ai/tokens.css +127 -0
- package/dist/designer/data/systems/totality-festival/DESIGN.md +206 -0
- package/dist/designer/data/systems/totality-festival/components.html +136 -0
- package/dist/designer/data/systems/totality-festival/tokens.css +63 -0
- package/dist/designer/data/systems/trading-terminal/DESIGN.md +178 -0
- package/dist/designer/data/systems/trading-terminal/components.html +154 -0
- package/dist/designer/data/systems/trading-terminal/tokens.css +63 -0
- package/dist/designer/data/systems/uber/DESIGN.md +298 -0
- package/dist/designer/data/systems/uber/components.html +347 -0
- package/dist/designer/data/systems/uber/tokens.css +131 -0
- package/dist/designer/data/systems/urdu/DESIGN.md +1002 -0
- package/dist/designer/data/systems/urdu/components.html +136 -0
- package/dist/designer/data/systems/urdu/tokens.css +63 -0
- package/dist/designer/data/systems/vercel/DESIGN.md +313 -0
- package/dist/designer/data/systems/vercel/components.html +839 -0
- package/dist/designer/data/systems/vercel/tokens.css +270 -0
- package/dist/designer/data/systems/vibrant/DESIGN.md +71 -0
- package/dist/designer/data/systems/vibrant/components.html +136 -0
- package/dist/designer/data/systems/vibrant/tokens.css +63 -0
- package/dist/designer/data/systems/vintage/DESIGN.md +71 -0
- package/dist/designer/data/systems/vintage/components.html +136 -0
- package/dist/designer/data/systems/vintage/tokens.css +63 -0
- package/dist/designer/data/systems/vodafone/DESIGN.md +426 -0
- package/dist/designer/data/systems/vodafone/components.html +342 -0
- package/dist/designer/data/systems/vodafone/tokens.css +64 -0
- package/dist/designer/data/systems/voltagent/DESIGN.md +326 -0
- package/dist/designer/data/systems/voltagent/components.html +154 -0
- package/dist/designer/data/systems/voltagent/tokens.css +63 -0
- package/dist/designer/data/systems/warm-editorial/DESIGN.md +65 -0
- package/dist/designer/data/systems/warm-editorial/components.html +136 -0
- package/dist/designer/data/systems/warm-editorial/tokens.css +63 -0
- package/dist/designer/data/systems/warp/DESIGN.md +256 -0
- package/dist/designer/data/systems/warp/components.html +411 -0
- package/dist/designer/data/systems/warp/tokens.css +156 -0
- package/dist/designer/data/systems/webex/DESIGN.md +207 -0
- package/dist/designer/data/systems/webex/components.html +342 -0
- package/dist/designer/data/systems/webex/tokens.css +64 -0
- package/dist/designer/data/systems/webflow/DESIGN.md +95 -0
- package/dist/designer/data/systems/webflow/components.html +413 -0
- package/dist/designer/data/systems/webflow/tokens.css +191 -0
- package/dist/designer/data/systems/wechat/DESIGN.md +302 -0
- package/dist/designer/data/systems/wechat/components.html +507 -0
- package/dist/designer/data/systems/wechat/tokens.css +176 -0
- package/dist/designer/data/systems/wired/DESIGN.md +281 -0
- package/dist/designer/data/systems/wired/components.html +342 -0
- package/dist/designer/data/systems/wired/tokens.css +64 -0
- package/dist/designer/data/systems/wise/DESIGN.md +176 -0
- package/dist/designer/data/systems/wise/components.html +365 -0
- package/dist/designer/data/systems/wise/tokens.css +141 -0
- package/dist/designer/data/systems/x-ai/DESIGN.md +260 -0
- package/dist/designer/data/systems/x-ai/components.html +460 -0
- package/dist/designer/data/systems/x-ai/tokens.css +268 -0
- package/dist/designer/data/systems/xiaohongshu/DESIGN.md +402 -0
- package/dist/designer/data/systems/xiaohongshu/components.html +865 -0
- package/dist/designer/data/systems/xiaohongshu/tokens.css +193 -0
- package/dist/designer/data/systems/zapier/DESIGN.md +331 -0
- package/dist/designer/data/systems/zapier/components.html +342 -0
- package/dist/designer/data/systems/zapier/tokens.css +64 -0
- package/dist/designer/guidelines.js +176 -0
- package/dist/designer/index.js +236 -0
- package/dist/designer/skills.js +1675 -0
- package/dist/designer/systems.js +216 -0
- package/dist/server/pi-bridge.js +155 -5
- package/dist/server/session-stream.js +45 -1
- package/package.json +1 -1
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Linear — reference components</title>
|
|
7
|
+
<meta
|
|
8
|
+
name="description"
|
|
9
|
+
content="Reference fixture for design-systems/linear-app. Every visible
|
|
10
|
+
value comes from tokens.css. Linear's signature moves: near-black
|
|
11
|
+
canvas, Inter Variable with cv01+ss03, weight-510 emphasis, indigo
|
|
12
|
+
accent, semi-transparent white borders, luminance stepping for depth."
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
:root {
|
|
17
|
+
--bg: #08090a;
|
|
18
|
+
--surface: #191a1b;
|
|
19
|
+
--surface-warm: var(--surface);
|
|
20
|
+
|
|
21
|
+
--fg: #f7f8f8;
|
|
22
|
+
--fg-2: #d0d6e0;
|
|
23
|
+
--muted: #8a8f98;
|
|
24
|
+
--meta: #62666d;
|
|
25
|
+
|
|
26
|
+
--border: rgba(255, 255, 255, 0.08);
|
|
27
|
+
--border-soft: rgba(255, 255, 255, 0.05);
|
|
28
|
+
|
|
29
|
+
--accent: #5e6ad2;
|
|
30
|
+
--accent-on: #ffffff;
|
|
31
|
+
--accent-hover: #828fff;
|
|
32
|
+
--accent-active: #4752c4;
|
|
33
|
+
|
|
34
|
+
--success: #27a644;
|
|
35
|
+
--warn: #eab308;
|
|
36
|
+
--danger: #dc2626;
|
|
37
|
+
|
|
38
|
+
--font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
|
39
|
+
--font-body: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
|
40
|
+
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
|
41
|
+
|
|
42
|
+
--text-xs: 12px;
|
|
43
|
+
--text-sm: 14px;
|
|
44
|
+
--text-base: 16px;
|
|
45
|
+
--text-lg: 18px;
|
|
46
|
+
--text-xl: 24px;
|
|
47
|
+
--text-2xl: 32px;
|
|
48
|
+
--text-3xl: 48px;
|
|
49
|
+
--text-4xl: 72px;
|
|
50
|
+
|
|
51
|
+
--leading-body: 1.5;
|
|
52
|
+
--leading-tight: 1.00;
|
|
53
|
+
--tracking-display: -0.022em;
|
|
54
|
+
|
|
55
|
+
--space-1: 4px;
|
|
56
|
+
--space-2: 8px;
|
|
57
|
+
--space-3: 12px;
|
|
58
|
+
--space-4: 16px;
|
|
59
|
+
--space-5: 20px;
|
|
60
|
+
--space-6: 24px;
|
|
61
|
+
--space-8: 32px;
|
|
62
|
+
--space-12: 48px;
|
|
63
|
+
|
|
64
|
+
--section-y-desktop: 80px;
|
|
65
|
+
--section-y-tablet: 48px;
|
|
66
|
+
--section-y-phone: 32px;
|
|
67
|
+
|
|
68
|
+
--radius-sm: 6px;
|
|
69
|
+
--radius-md: 8px;
|
|
70
|
+
--radius-lg: 12px;
|
|
71
|
+
--radius-pill: 9999px;
|
|
72
|
+
|
|
73
|
+
--elev-flat: none;
|
|
74
|
+
--elev-ring: 0 0 0 1px var(--border);
|
|
75
|
+
--elev-raised:
|
|
76
|
+
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
|
77
|
+
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
78
|
+
|
|
79
|
+
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%), 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
80
|
+
|
|
81
|
+
--motion-fast: 150ms;
|
|
82
|
+
--motion-base: 200ms;
|
|
83
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
84
|
+
|
|
85
|
+
--container-max: 1200px;
|
|
86
|
+
--container-gutter-desktop: 24px;
|
|
87
|
+
--container-gutter-tablet: 16px;
|
|
88
|
+
--container-gutter-phone: 12px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
92
|
+
html, body { margin: 0; padding: 0; }
|
|
93
|
+
body {
|
|
94
|
+
background: var(--bg);
|
|
95
|
+
color: var(--fg-2);
|
|
96
|
+
font-family: var(--font-body);
|
|
97
|
+
font-size: var(--text-base);
|
|
98
|
+
line-height: var(--leading-body);
|
|
99
|
+
/* Linear's signature: cv01 (alternate 'a') + ss03 (geometric alternates). */
|
|
100
|
+
font-feature-settings: "cv01", "ss03";
|
|
101
|
+
-webkit-font-smoothing: antialiased;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.container {
|
|
105
|
+
max-width: var(--container-max);
|
|
106
|
+
margin-inline: auto;
|
|
107
|
+
padding-inline: var(--container-gutter-desktop);
|
|
108
|
+
}
|
|
109
|
+
section { padding-block: var(--section-y-desktop); }
|
|
110
|
+
section + section { border-top: 1px solid var(--border); }
|
|
111
|
+
@media (max-width: 1023px) {
|
|
112
|
+
.container { padding-inline: var(--container-gutter-tablet); }
|
|
113
|
+
section { padding-block: var(--section-y-tablet); }
|
|
114
|
+
}
|
|
115
|
+
@media (max-width: 639px) {
|
|
116
|
+
.container { padding-inline: var(--container-gutter-phone); }
|
|
117
|
+
section { padding-block: var(--section-y-phone); }
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ─── Typography ────────────────────────────────────────────── */
|
|
121
|
+
h1, h2, h3 {
|
|
122
|
+
font-family: var(--font-display);
|
|
123
|
+
font-weight: 510; /* Linear's signature between-weight */
|
|
124
|
+
margin: 0;
|
|
125
|
+
color: var(--fg);
|
|
126
|
+
font-feature-settings: "cv01", "ss03";
|
|
127
|
+
line-height: var(--leading-tight);
|
|
128
|
+
}
|
|
129
|
+
h1 {
|
|
130
|
+
font-size: var(--text-4xl);
|
|
131
|
+
letter-spacing: var(--tracking-display);
|
|
132
|
+
}
|
|
133
|
+
h2 {
|
|
134
|
+
font-size: var(--text-2xl);
|
|
135
|
+
/* 32px heading 1: line-height 1.13, tracking -0.704px (-0.022em). */
|
|
136
|
+
line-height: 1.13;
|
|
137
|
+
letter-spacing: -0.022em;
|
|
138
|
+
}
|
|
139
|
+
h3 {
|
|
140
|
+
font-size: var(--text-xl);
|
|
141
|
+
/* 24px heading 2: line-height 1.33, tracking -0.288px (-0.012em).
|
|
142
|
+
Overrides the shared 1.00 set on h1/h2/h3 above. */
|
|
143
|
+
line-height: 1.33;
|
|
144
|
+
letter-spacing: -0.012em;
|
|
145
|
+
font-weight: 590;
|
|
146
|
+
}
|
|
147
|
+
p { margin: 0; }
|
|
148
|
+
.lead {
|
|
149
|
+
font-size: var(--text-lg);
|
|
150
|
+
line-height: 1.60;
|
|
151
|
+
color: var(--muted);
|
|
152
|
+
font-weight: 400;
|
|
153
|
+
letter-spacing: -0.009em;
|
|
154
|
+
}
|
|
155
|
+
.body-muted { color: var(--muted); }
|
|
156
|
+
.body-sm { font-size: var(--text-sm); color: var(--muted); }
|
|
157
|
+
.eyebrow {
|
|
158
|
+
font-size: var(--text-xs);
|
|
159
|
+
font-weight: 510;
|
|
160
|
+
color: var(--meta);
|
|
161
|
+
text-transform: uppercase;
|
|
162
|
+
letter-spacing: 0.08em;
|
|
163
|
+
}
|
|
164
|
+
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
|
165
|
+
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
|
166
|
+
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
|
167
|
+
|
|
168
|
+
/* ─── Buttons ───────────────────────────────────────────────── */
|
|
169
|
+
.btn {
|
|
170
|
+
display: inline-flex;
|
|
171
|
+
align-items: center;
|
|
172
|
+
gap: var(--space-2);
|
|
173
|
+
padding: 8px 16px;
|
|
174
|
+
border-radius: var(--radius-sm);
|
|
175
|
+
font-family: var(--font-display);
|
|
176
|
+
font-size: var(--text-sm);
|
|
177
|
+
font-weight: 510;
|
|
178
|
+
font-feature-settings: "cv01", "ss03";
|
|
179
|
+
line-height: 1;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
border: 1px solid transparent;
|
|
182
|
+
transition: background-color var(--motion-fast) var(--ease-standard),
|
|
183
|
+
color var(--motion-fast) var(--ease-standard);
|
|
184
|
+
text-decoration: none;
|
|
185
|
+
}
|
|
186
|
+
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
|
187
|
+
.btn-primary {
|
|
188
|
+
background: var(--accent);
|
|
189
|
+
color: var(--accent-on);
|
|
190
|
+
}
|
|
191
|
+
.btn-primary:hover { background: var(--accent-hover); }
|
|
192
|
+
.btn-ghost {
|
|
193
|
+
background: rgba(255, 255, 255, 0.02);
|
|
194
|
+
color: #e2e4e7;
|
|
195
|
+
border-color: rgba(36, 40, 44, 1);
|
|
196
|
+
}
|
|
197
|
+
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); }
|
|
198
|
+
|
|
199
|
+
/* ─── Pill badges ───────────────────────────────────────────── */
|
|
200
|
+
.pill {
|
|
201
|
+
display: inline-flex;
|
|
202
|
+
align-items: center;
|
|
203
|
+
padding: 0 10px 0 5px;
|
|
204
|
+
border-radius: var(--radius-pill);
|
|
205
|
+
font-size: var(--text-xs);
|
|
206
|
+
font-weight: 510;
|
|
207
|
+
color: var(--fg-2);
|
|
208
|
+
border: 1px solid #23252a;
|
|
209
|
+
line-height: 1.8;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* ─── Cards ─────────────────────────────────────────────────── */
|
|
213
|
+
.card {
|
|
214
|
+
background: rgba(255, 255, 255, 0.02);
|
|
215
|
+
border: 1px solid var(--border);
|
|
216
|
+
border-radius: var(--radius-md);
|
|
217
|
+
padding: var(--space-6);
|
|
218
|
+
transition: background-color var(--motion-base) var(--ease-standard);
|
|
219
|
+
}
|
|
220
|
+
.card:hover { background: rgba(255, 255, 255, 0.04); }
|
|
221
|
+
|
|
222
|
+
/* ─── Inputs ────────────────────────────────────────────────── */
|
|
223
|
+
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
224
|
+
.field label {
|
|
225
|
+
font-size: var(--text-sm);
|
|
226
|
+
font-weight: 510;
|
|
227
|
+
color: var(--fg-2);
|
|
228
|
+
font-feature-settings: "cv01", "ss03";
|
|
229
|
+
}
|
|
230
|
+
.field input {
|
|
231
|
+
background: rgba(255, 255, 255, 0.02);
|
|
232
|
+
color: var(--fg-2);
|
|
233
|
+
border: 1px solid var(--border);
|
|
234
|
+
border-radius: var(--radius-sm);
|
|
235
|
+
padding: 12px 14px;
|
|
236
|
+
font-family: var(--font-body);
|
|
237
|
+
font-size: var(--text-base);
|
|
238
|
+
font-feature-settings: "cv01", "ss03";
|
|
239
|
+
outline: none;
|
|
240
|
+
transition: border-color var(--motion-fast) var(--ease-standard);
|
|
241
|
+
}
|
|
242
|
+
.field input::placeholder { color: var(--meta); }
|
|
243
|
+
.field input:focus { border-color: var(--accent); }
|
|
244
|
+
|
|
245
|
+
/* ─── Layout ────────────────────────────────────────────────── */
|
|
246
|
+
.hero-grid {
|
|
247
|
+
display: grid;
|
|
248
|
+
grid-template-columns: 1.2fr 1fr;
|
|
249
|
+
gap: var(--space-12);
|
|
250
|
+
align-items: center;
|
|
251
|
+
}
|
|
252
|
+
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
|
253
|
+
.features-grid {
|
|
254
|
+
display: grid;
|
|
255
|
+
grid-template-columns: repeat(3, 1fr);
|
|
256
|
+
gap: var(--space-4);
|
|
257
|
+
}
|
|
258
|
+
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
|
259
|
+
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
|
260
|
+
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); }
|
|
261
|
+
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
|
262
|
+
</style>
|
|
263
|
+
</head>
|
|
264
|
+
<body>
|
|
265
|
+
<main class="container">
|
|
266
|
+
<!-- HERO -->
|
|
267
|
+
<section data-od-id="hero">
|
|
268
|
+
<div class="hero-grid">
|
|
269
|
+
<div class="stack-4">
|
|
270
|
+
<p class="eyebrow">Reference fixture · linear</p>
|
|
271
|
+
<h1>Built for the next era of product development.</h1>
|
|
272
|
+
<p class="lead" style="max-width:50ch">
|
|
273
|
+
Linear streamlines software projects, sprints, tasks, and bug
|
|
274
|
+
tracking. Precision engineered — from the 510 between-weight to
|
|
275
|
+
the semi-transparent white borders. Every value from tokens.css.
|
|
276
|
+
</p>
|
|
277
|
+
<div class="hero-actions">
|
|
278
|
+
<a href="./tokens.css" class="btn btn-primary">Start building</a>
|
|
279
|
+
<a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<aside style="display:flex;flex-direction:column;gap:var(--space-4)">
|
|
284
|
+
<div class="card">
|
|
285
|
+
<p class="eyebrow" style="margin-bottom:var(--space-3)">Issue tracker</p>
|
|
286
|
+
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
287
|
+
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--fg-2)">
|
|
288
|
+
<span style="width:8px;height:8px;border-radius:50%;background:#27a644;flex-shrink:0"></span>
|
|
289
|
+
Fix token channel drift in derive script
|
|
290
|
+
</div>
|
|
291
|
+
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--muted)">
|
|
292
|
+
<span style="width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0"></span>
|
|
293
|
+
Add 10 brand oracle fixtures
|
|
294
|
+
</div>
|
|
295
|
+
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--meta)">
|
|
296
|
+
<span style="width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,0.1);flex-shrink:0"></span>
|
|
297
|
+
Ship PR-B derive script
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
</aside>
|
|
302
|
+
</div>
|
|
303
|
+
</section>
|
|
304
|
+
|
|
305
|
+
<!-- FEATURES -->
|
|
306
|
+
<section data-od-id="features">
|
|
307
|
+
<div class="stack-3">
|
|
308
|
+
<p class="eyebrow">What this fixture exercises</p>
|
|
309
|
+
<h2 style="max-width:28ch">Darkness as the native medium.</h2>
|
|
310
|
+
</div>
|
|
311
|
+
|
|
312
|
+
<div class="features-grid" style="margin-block-start:var(--space-6)">
|
|
313
|
+
<article class="card stack-3">
|
|
314
|
+
<h3>Dark-first</h3>
|
|
315
|
+
<p class="body-sm">
|
|
316
|
+
#08090a marketing black → #191a1b elevated surface. Luminance
|
|
317
|
+
stepping, not color: each level increases white opacity by 0.02.
|
|
318
|
+
</p>
|
|
319
|
+
</article>
|
|
320
|
+
<article class="card stack-3">
|
|
321
|
+
<h3>Weight 510</h3>
|
|
322
|
+
<p class="body-sm">
|
|
323
|
+
Inter Variable's between-weight. Not 500, not 600 — precisely 510.
|
|
324
|
+
cv01+ss03 on all text transforms generic Inter into Linear's face.
|
|
325
|
+
</p>
|
|
326
|
+
</article>
|
|
327
|
+
<article class="card stack-3">
|
|
328
|
+
<h3>Indigo accent</h3>
|
|
329
|
+
<p class="body-sm">
|
|
330
|
+
#5e6ad2 for CTA backgrounds; #7170ff for interactive; #828fff
|
|
331
|
+
on hover. The only chromatic color in an otherwise achromatic system.
|
|
332
|
+
</p>
|
|
333
|
+
</article>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<div style="margin-block-start:var(--space-6);display:flex;gap:var(--space-2);flex-wrap:wrap">
|
|
337
|
+
<span class="pill">All issues</span>
|
|
338
|
+
<span class="pill">Active</span>
|
|
339
|
+
<span class="pill">Backlog</span>
|
|
340
|
+
<span class="pill">Done</span>
|
|
341
|
+
</div>
|
|
342
|
+
</section>
|
|
343
|
+
|
|
344
|
+
<!-- FORM -->
|
|
345
|
+
<section data-od-id="form">
|
|
346
|
+
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
|
347
|
+
<div class="stack-4">
|
|
348
|
+
<p class="eyebrow">Form components</p>
|
|
349
|
+
<h2>Inputs on dark surfaces.</h2>
|
|
350
|
+
<p class="lead" style="max-width:44ch">
|
|
351
|
+
rgba(255,255,255,0.02) background, border: 1px solid rgba(255,255,255,0.08).
|
|
352
|
+
Focus shifts border to --accent; no halo, no blue ring.
|
|
353
|
+
</p>
|
|
354
|
+
</div>
|
|
355
|
+
<form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
|
|
356
|
+
onsubmit="event.preventDefault()">
|
|
357
|
+
<div class="field">
|
|
358
|
+
<label for="email">Work email</label>
|
|
359
|
+
<input id="email" type="email" placeholder="you@company.com" />
|
|
360
|
+
</div>
|
|
361
|
+
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
|
362
|
+
<button type="submit" class="btn btn-primary">Sign up</button>
|
|
363
|
+
<button type="button" class="btn btn-ghost">Learn more</button>
|
|
364
|
+
</div>
|
|
365
|
+
</form>
|
|
366
|
+
</div>
|
|
367
|
+
</section>
|
|
368
|
+
</main>
|
|
369
|
+
</body>
|
|
370
|
+
</html>
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
2
|
+
* design-systems/linear-app/tokens.css
|
|
3
|
+
*
|
|
4
|
+
* Structured token bindings for the "Linear" brand — the dark-mode-native
|
|
5
|
+
* project management tool's precision engineering voice.
|
|
6
|
+
*
|
|
7
|
+
* Brand identity in three sentences:
|
|
8
|
+
* 1. Darkness as the native medium — near-black canvas (#08090a) where
|
|
9
|
+
* information density is managed through luminance steps rather than
|
|
10
|
+
* color variation; semi-transparent white borders throughout.
|
|
11
|
+
* 2. Inter Variable with OpenType "cv01","ss03" at all sizes, signature
|
|
12
|
+
* weight 510 (between regular and medium), aggressive negative
|
|
13
|
+
* letter-spacing at display sizes (-1.584px at 72px).
|
|
14
|
+
* 3. Almost entirely achromatic — the single chromatic color is Linear's
|
|
15
|
+
* indigo-violet (#5e6ad2 bg / #7170ff interactive), used only for
|
|
16
|
+
* CTAs and active states; everything else is grayscale.
|
|
17
|
+
*
|
|
18
|
+
* Schema decisions:
|
|
19
|
+
* - --bg: #08090a (marketing black); --surface: #191a1b (elevated).
|
|
20
|
+
* - --surface-warm aliases --surface (dark system, no warm tier).
|
|
21
|
+
* - --fg: #f7f8f8 (near-white — not pure white, prevents eye strain).
|
|
22
|
+
* - --fg-2: #d0d6e0 (silver-gray body text).
|
|
23
|
+
* - --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05).
|
|
24
|
+
* - --accent: #5e6ad2 (brand indigo bg); --accent-hover: #828fff.
|
|
25
|
+
* - --tracking-display: -0.022em (-1.584px / 72px normalized).
|
|
26
|
+
* - --radius-sm: 6px (buttons/inputs); --radius-md: 8px (cards).
|
|
27
|
+
* - --elev-raised: luminance stepping — no opaque shadow on dark.
|
|
28
|
+
* ─────────────────────────────────────────────────────────────────── */
|
|
29
|
+
|
|
30
|
+
:root {
|
|
31
|
+
/* ─── Surface ──────────────────────────────────────────────────── */
|
|
32
|
+
--bg: #08090a; /* marketing black — hero canvas */
|
|
33
|
+
--surface: #191a1b; /* elevated surface — cards, dropdowns */
|
|
34
|
+
--surface-warm: var(--surface); /* no warm tier in dark achromatic system */
|
|
35
|
+
|
|
36
|
+
/* ─── Foreground ───────────────────────────────────────────────── */
|
|
37
|
+
--fg: #f7f8f8; /* near-white primary text */
|
|
38
|
+
--fg-2: #d0d6e0; /* silver-gray body / secondary text */
|
|
39
|
+
--muted: #8a8f98; /* tertiary — placeholders, metadata */
|
|
40
|
+
--meta: #62666d; /* quaternary — timestamps, disabled */
|
|
41
|
+
|
|
42
|
+
/* ─── Border ───────────────────────────────────────────────────── */
|
|
43
|
+
--border: rgba(255, 255, 255, 0.08); /* standard semi-transparent white */
|
|
44
|
+
--border-soft: rgba(255, 255, 255, 0.05); /* ultra-subtle divider */
|
|
45
|
+
|
|
46
|
+
/* ─── Accent ───────────────────────────────────────────────────── */
|
|
47
|
+
--accent: #5e6ad2; /* brand indigo — CTA backgrounds */
|
|
48
|
+
--accent-on: #ffffff;
|
|
49
|
+
--accent-hover: #828fff; /* lighter saturated hover */
|
|
50
|
+
--accent-active: #4752c4; /* darker pressed state */
|
|
51
|
+
|
|
52
|
+
/* ─── Semantic ─────────────────────────────────────────────────── */
|
|
53
|
+
--success: #27a644; /* Linear green */
|
|
54
|
+
--warn: #eab308;
|
|
55
|
+
--danger: #dc2626;
|
|
56
|
+
|
|
57
|
+
/* ─── Typography ───────────────────────────────────────────────── */
|
|
58
|
+
--font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
|
59
|
+
--font-body: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
|
60
|
+
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
|
61
|
+
|
|
62
|
+
/* Type scale — DESIGN.md §Typography Hierarchy.
|
|
63
|
+
* Linear's display range 72px→10px; the 8 schema slots map the
|
|
64
|
+
* key stops. 64px secondary-hero lives inline in components.html. */
|
|
65
|
+
--text-xs: 12px; /* label / micro */
|
|
66
|
+
--text-sm: 14px; /* caption large / link small */
|
|
67
|
+
--text-base: 16px; /* body — standard reading */
|
|
68
|
+
--text-lg: 18px; /* body large — feature descriptions */
|
|
69
|
+
--text-xl: 24px; /* heading 2 */
|
|
70
|
+
--text-2xl: 32px; /* heading 1 */
|
|
71
|
+
--text-3xl: 48px; /* display — section headlines */
|
|
72
|
+
--text-4xl: 72px; /* display XL — hero */
|
|
73
|
+
|
|
74
|
+
/* Leading + tracking.
|
|
75
|
+
* --leading-tight=1.00: Linear's signature "engineered" compression.
|
|
76
|
+
* h2 (32px) → 1.13; h3 (24px) → 1.33 per DESIGN.md spec.
|
|
77
|
+
* --tracking-display: -0.022em = -1.584px / 72px normalized. */
|
|
78
|
+
--leading-body: 1.5;
|
|
79
|
+
--leading-tight: 1.00;
|
|
80
|
+
--tracking-display: -0.022em;
|
|
81
|
+
|
|
82
|
+
/* ─── Spacing ──────────────────────────────────────────────────── */
|
|
83
|
+
--space-1: 4px;
|
|
84
|
+
--space-2: 8px;
|
|
85
|
+
--space-3: 12px;
|
|
86
|
+
--space-4: 16px;
|
|
87
|
+
--space-5: 20px;
|
|
88
|
+
--space-6: 24px;
|
|
89
|
+
--space-8: 32px;
|
|
90
|
+
--space-12: 48px;
|
|
91
|
+
|
|
92
|
+
/* Section rhythm — DESIGN.md §Whitespace Philosophy. */
|
|
93
|
+
--section-y-desktop: 80px;
|
|
94
|
+
--section-y-tablet: 48px;
|
|
95
|
+
--section-y-phone: 32px;
|
|
96
|
+
|
|
97
|
+
/* ─── Radius ───────────────────────────────────────────────────── */
|
|
98
|
+
/* 6px for buttons/inputs (comfortable), 8px cards, 12px panels. */
|
|
99
|
+
--radius-sm: 6px;
|
|
100
|
+
--radius-md: 8px;
|
|
101
|
+
--radius-lg: 12px;
|
|
102
|
+
--radius-pill: 9999px;
|
|
103
|
+
|
|
104
|
+
/* ─── Elevation ────────────────────────────────────────────────── */
|
|
105
|
+
/* On dark surfaces: luminance stepping, not opaque drop shadows.
|
|
106
|
+
--elev-raised uses semi-transparent border-as-shadow technique. */
|
|
107
|
+
--elev-flat: none;
|
|
108
|
+
--elev-ring: 0 0 0 1px var(--border);
|
|
109
|
+
--elev-raised:
|
|
110
|
+
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
|
111
|
+
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
112
|
+
|
|
113
|
+
/* ─── Focus ────────────────────────────────────────────────────── */
|
|
114
|
+
/* Multi-layer stack per DESIGN.md §6 + §7: accent ring makes the
|
|
115
|
+
indicator visible on the near-black #08090a canvas. */
|
|
116
|
+
--focus-ring:
|
|
117
|
+
0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%),
|
|
118
|
+
0 4px 12px rgba(0, 0, 0, 0.1);
|
|
119
|
+
|
|
120
|
+
/* ─── Motion ───────────────────────────────────────────────────── */
|
|
121
|
+
--motion-fast: 150ms;
|
|
122
|
+
--motion-base: 200ms;
|
|
123
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
124
|
+
|
|
125
|
+
/* ─── Layout ───────────────────────────────────────────────────── */
|
|
126
|
+
--container-max: 1200px;
|
|
127
|
+
--container-gutter-desktop: 24px;
|
|
128
|
+
--container-gutter-tablet: 16px;
|
|
129
|
+
--container-gutter-phone: 12px;
|
|
130
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Design System Inspired by Lingo
|
|
2
|
+
|
|
3
|
+
> Category: Creative & Artistic
|
|
4
|
+
> Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.
|
|
5
|
+
|
|
6
|
+
## 1. Visual Theme & Atmosphere
|
|
7
|
+
|
|
8
|
+
Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.
|
|
9
|
+
|
|
10
|
+
- **Visual style:** bold, playful
|
|
11
|
+
- **Color stance:** primary, neutral, success, warning, danger
|
|
12
|
+
- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
|
|
13
|
+
|
|
14
|
+
## 2. Color
|
|
15
|
+
|
|
16
|
+
- **Primary:** `#58CC02` — Token from style foundations.
|
|
17
|
+
- **Secondary:** `#CE82FF` — Token from style foundations.
|
|
18
|
+
- **Success:** `#58CC02` — Token from style foundations.
|
|
19
|
+
- **Warning:** `#FFC800` — Token from style foundations.
|
|
20
|
+
- **Danger:** `#FF4B4B` — Token from style foundations.
|
|
21
|
+
- **Surface:** `#FFFFFF` — Token from style foundations.
|
|
22
|
+
- **Text:** `#3C3C3C` — Token from style foundations.
|
|
23
|
+
- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
|
|
24
|
+
|
|
25
|
+
- Favor Primary (#58CC02) for CTA emphasis.
|
|
26
|
+
- Use Surface (#FFFFFF) for large backgrounds and cards.
|
|
27
|
+
- Keep body copy on Text (#3C3C3C) for legibility.
|
|
28
|
+
|
|
29
|
+
## 3. Typography
|
|
30
|
+
|
|
31
|
+
- **Scale:** 12/14/16/20/24/32
|
|
32
|
+
- **Families:** primary=Nunito, display=Nunito, mono=JetBrains Mono
|
|
33
|
+
- **Weights:** 400, 500, 600, 700, 800, 900
|
|
34
|
+
- Headings should carry the style personality; body text should optimize scanability and contrast.
|
|
35
|
+
|
|
36
|
+
## 4. Spacing & Grid
|
|
37
|
+
|
|
38
|
+
- **Spacing scale:** 4/8/12/16/24/32
|
|
39
|
+
- Keep vertical rhythm consistent across sections and components.
|
|
40
|
+
- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
|
|
41
|
+
|
|
42
|
+
## 5. Layout & Composition
|
|
43
|
+
|
|
44
|
+
- Prefer clear content blocks with consistent internal padding.
|
|
45
|
+
- Keep hierarchy obvious: headline → support text → primary action.
|
|
46
|
+
- Use whitespace to separate concerns before adding borders or shadows.
|
|
47
|
+
|
|
48
|
+
## 6. Components
|
|
49
|
+
|
|
50
|
+
- Buttons: primary action uses `#58CC02`; secondary actions stay neutral.
|
|
51
|
+
- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
|
|
52
|
+
- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
|
|
53
|
+
|
|
54
|
+
## 7. Motion & Interaction
|
|
55
|
+
|
|
56
|
+
- Use subtle transitions that emphasize Primary (#58CC02) as the interaction signal.
|
|
57
|
+
- Default to short, purposeful transitions (150–250ms) with stable easing.
|
|
58
|
+
- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
|
|
59
|
+
|
|
60
|
+
## 8. Voice & Brand
|
|
61
|
+
|
|
62
|
+
- Tone should reflect the visual style: concise, confident, and product-specific.
|
|
63
|
+
- Keep microcopy action-oriented and avoid generic filler language.
|
|
64
|
+
- Preserve the style identity in headlines while keeping UI labels literal and clear.
|
|
65
|
+
|
|
66
|
+
## 9. Anti-patterns
|
|
67
|
+
|
|
68
|
+
- Do not introduce off-palette colors when an existing token can solve the problem.
|
|
69
|
+
- Do not flatten hierarchy by using the same type size/weight for all text.
|
|
70
|
+
- Do not add decorative effects that reduce readability or accessibility.
|
|
71
|
+
- Do not mix unrelated visual metaphors in the same interface.
|