Necati Özmen
GitHub
+3
-6
@@ -6,12 +6,6 @@ This repository is a curated collection of DESIGN.md files extracted from popula
|
||||
|
||||
## How to Contribute
|
||||
|
||||
### Request a New Site
|
||||
|
||||
To request a DESIGN.md for a website, [open an issue](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) with the website URL.
|
||||
|
||||
We receive many requests, and maintainer bandwidth is limited. Sponsor-backed requests are prioritized, consider supporting the project via [GitHub Sponsors](https://github.com/sponsors/VoltAgent) if you'd like faster turnaround.
|
||||
|
||||
### Improve an Existing DESIGN.md
|
||||
|
||||
If you notice issues with an existing file:
|
||||
@@ -23,6 +17,9 @@ If you notice issues with an existing file:
|
||||
5. Update the `preview.html` and `preview-dark.html` if your changes affect displayed tokens
|
||||
6. Open a PR with before/after rationale
|
||||
|
||||
|
||||
We cannot accept DESIGN.md pull requests to maintain the quality of the existing collection.
|
||||
|
||||
## License
|
||||
|
||||
By contributing, you agree your contributions are provided under the repository license terms.
|
||||
|
||||
@@ -76,89 +76,89 @@ Each site includes:
|
||||
|
||||
## Request a DESIGN.md
|
||||
|
||||
[Open a GitHub issue with this template](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) to request a DESIGN.md generation for a website.
|
||||
You can [request a DESIGN.md](https://getdesign.md/request) for specific website, including private requests delivered exclusively to you.
|
||||
|
||||
|
||||
## Collection
|
||||
|
||||
### AI & Machine Learning
|
||||
|
||||
- [**Claude**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/claude/) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout
|
||||
- [**Cohere**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cohere/) - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
|
||||
- [**ElevenLabs**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/elevenlabs/) - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
|
||||
- [**Minimax**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/minimax/) - AI model provider. Bold dark interface with neon accents
|
||||
- [**Mistral AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mistral.ai/) - Open-weight LLM provider. French-engineered minimalism, purple-toned
|
||||
- [**Ollama**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ollama/) - Run LLMs locally. Terminal-first, monochrome simplicity
|
||||
- [**OpenCode AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/opencode.ai/) - AI coding platform. Developer-centric dark theme
|
||||
- [**Replicate**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/replicate/) - Run ML models via API. Clean white canvas, code-forward
|
||||
- [**RunwayML**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/runwayml/) - AI video generation. Cinematic dark UI, media-rich layout
|
||||
- [**Together AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/together.ai/) - Open-source AI infrastructure. Technical, blueprint-style design
|
||||
- [**VoltAgent**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/voltagent/) - AI agent framework. Void-black canvas, emerald accent, terminal-native
|
||||
- [**xAI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/x.ai/) - Elon Musk's AI lab. Stark monochrome, futuristic minimalism
|
||||
- [**Claude**](https://getdesign.md/claude/design-md) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout
|
||||
- [**Cohere**](https://getdesign.md/cohere/design-md) - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
|
||||
- [**ElevenLabs**](https://getdesign.md/elevenlabs/design-md) - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
|
||||
- [**Minimax**](https://getdesign.md/minimax/design-md) - AI model provider. Bold dark interface with neon accents
|
||||
- [**Mistral AI**](https://getdesign.md/mistral.ai/design-md) - Open-weight LLM provider. French-engineered minimalism, purple-toned
|
||||
- [**Ollama**](https://getdesign.md/ollama/design-md) - Run LLMs locally. Terminal-first, monochrome simplicity
|
||||
- [**OpenCode AI**](https://getdesign.md/opencode.ai/design-md) - AI coding platform. Developer-centric dark theme
|
||||
- [**Replicate**](https://getdesign.md/replicate/design-md) - Run ML models via API. Clean white canvas, code-forward
|
||||
- [**RunwayML**](https://getdesign.md/runwayml/design-md) - AI video generation. Cinematic dark UI, media-rich layout
|
||||
- [**Together AI**](https://getdesign.md/together.ai/design-md) - Open-source AI infrastructure. Technical, blueprint-style design
|
||||
- [**VoltAgent**](https://getdesign.md/voltagent/design-md) - AI agent framework. Void-black canvas, emerald accent, terminal-native
|
||||
- [**xAI**](https://getdesign.md/x.ai/design-md) - Elon Musk's AI lab. Stark monochrome, futuristic minimalism
|
||||
|
||||
### Developer Tools & Platforms
|
||||
|
||||
- [**Cursor**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cursor/) - AI-first code editor. Sleek dark interface, gradient accents
|
||||
- [**Expo**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/expo/) - React Native platform. Dark theme, tight letter-spacing, code-centric
|
||||
- [**Linear**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/linear.app/) - Project management for engineers. Ultra-minimal, precise, purple accent
|
||||
- [**Lovable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lovable/) - AI full-stack builder. Playful gradients, friendly dev aesthetic
|
||||
- [**Mintlify**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mintlify/) - Documentation platform. Clean, green-accented, reading-optimized
|
||||
- [**PostHog**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/posthog/) - Product analytics. Playful hedgehog branding, developer-friendly dark UI
|
||||
- [**Raycast**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/raycast/) - Productivity launcher. Sleek dark chrome, vibrant gradient accents
|
||||
- [**Resend**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/resend/) - Email API for developers. Minimal dark theme, monospace accents
|
||||
- [**Sentry**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sentry/) - Error monitoring. Dark dashboard, data-dense, pink-purple accent
|
||||
- [**Supabase**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/supabase/) - Open-source Firebase alternative. Dark emerald theme, code-first
|
||||
- [**Superhuman**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/superhuman/) - Fast email client. Premium dark UI, keyboard-first, purple glow
|
||||
- [**Vercel**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/vercel/) - Frontend deployment platform. Black and white precision, Geist font
|
||||
- [**Warp**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/warp/) - Modern terminal. Dark IDE-like interface, block-based command UI
|
||||
- [**Zapier**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/zapier/) - Automation platform. Warm orange, friendly illustration-driven
|
||||
- [**Cursor**](https://getdesign.md/cursor/design-md) - AI-first code editor. Sleek dark interface, gradient accents
|
||||
- [**Expo**](https://getdesign.md/expo/design-md) - React Native platform. Dark theme, tight letter-spacing, code-centric
|
||||
- [**Linear**](https://getdesign.md/linear.app/design-md) - Project management for engineers. Ultra-minimal, precise, purple accent
|
||||
- [**Lovable**](https://getdesign.md/lovable/design-md) - AI full-stack builder. Playful gradients, friendly dev aesthetic
|
||||
- [**Mintlify**](https://getdesign.md/mintlify/design-md) - Documentation platform. Clean, green-accented, reading-optimized
|
||||
- [**PostHog**](https://getdesign.md/posthog/design-md) - Product analytics. Playful hedgehog branding, developer-friendly dark UI
|
||||
- [**Raycast**](https://getdesign.md/raycast/design-md) - Productivity launcher. Sleek dark chrome, vibrant gradient accents
|
||||
- [**Resend**](https://getdesign.md/resend/design-md) - Email API for developers. Minimal dark theme, monospace accents
|
||||
- [**Sentry**](https://getdesign.md/sentry/design-md) - Error monitoring. Dark dashboard, data-dense, pink-purple accent
|
||||
- [**Supabase**](https://getdesign.md/supabase/design-md) - Open-source Firebase alternative. Dark emerald theme, code-first
|
||||
- [**Superhuman**](https://getdesign.md/superhuman/design-md) - Fast email client. Premium dark UI, keyboard-first, purple glow
|
||||
- [**Vercel**](https://getdesign.md/vercel/design-md) - Frontend deployment platform. Black and white precision, Geist font
|
||||
- [**Warp**](https://getdesign.md/warp/design-md) - Modern terminal. Dark IDE-like interface, block-based command UI
|
||||
- [**Zapier**](https://getdesign.md/zapier/design-md) - Automation platform. Warm orange, friendly illustration-driven
|
||||
|
||||
### Infrastructure & Cloud
|
||||
|
||||
- [**ClickHouse**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clickhouse/) - Fast analytics database. Yellow-accented, technical documentation style
|
||||
- [**Composio**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/composio/) - Tool integration platform. Modern dark with colorful integration icons
|
||||
- [**HashiCorp**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/hashicorp/) - Infrastructure automation. Enterprise-clean, black and white
|
||||
- [**MongoDB**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mongodb/) - Document database. Green leaf branding, developer documentation focus
|
||||
- [**Sanity**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sanity/) - Headless CMS. Red accent, content-first editorial layout
|
||||
- [**Stripe**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/stripe/) - Payment infrastructure. Signature purple gradients, weight-300 elegance
|
||||
- [**ClickHouse**](https://getdesign.md/clickhouse/design-md) - Fast analytics database. Yellow-accented, technical documentation style
|
||||
- [**Composio**](https://getdesign.md/composio/design-md) - Tool integration platform. Modern dark with colorful integration icons
|
||||
- [**HashiCorp**](https://getdesign.md/hashicorp/design-md) - Infrastructure automation. Enterprise-clean, black and white
|
||||
- [**MongoDB**](https://getdesign.md/mongodb/design-md) - Document database. Green leaf branding, developer documentation focus
|
||||
- [**Sanity**](https://getdesign.md/sanity/design-md) - Headless CMS. Red accent, content-first editorial layout
|
||||
- [**Stripe**](https://getdesign.md/stripe/design-md) - Payment infrastructure. Signature purple gradients, weight-300 elegance
|
||||
|
||||
### Design & Productivity
|
||||
|
||||
- [**Airtable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airtable/) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
|
||||
- [**Cal.com**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cal/) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
|
||||
- [**Clay**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clay/) - Creative agency. Organic shapes, soft gradients, art-directed layout
|
||||
- [**Figma**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/figma/) - Collaborative design tool. Vibrant multi-color, playful yet professional
|
||||
- [**Framer**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/framer/) - Website builder. Bold black and blue, motion-first, design-forward
|
||||
- [**Intercom**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/intercom/) - Customer messaging. Friendly blue palette, conversational UI patterns
|
||||
- [**Miro**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/miro/) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
|
||||
- [**Notion**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/notion/) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
|
||||
- [**Pinterest**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/pinterest/) - Visual discovery platform. Red accent, masonry grid, image-first
|
||||
- [**Webflow**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/webflow/) - Visual web builder. Blue-accented, polished marketing site aesthetic
|
||||
- [**Airtable**](https://getdesign.md/airtable/design-md) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
|
||||
- [**Cal.com**](https://getdesign.md/cal/design-md) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
|
||||
- [**Clay**](https://getdesign.md/clay/design-md) - Creative agency. Organic shapes, soft gradients, art-directed layout
|
||||
- [**Figma**](https://getdesign.md/figma/design-md) - Collaborative design tool. Vibrant multi-color, playful yet professional
|
||||
- [**Framer**](https://getdesign.md/framer/design-md) - Website builder. Bold black and blue, motion-first, design-forward
|
||||
- [**Intercom**](https://getdesign.md/intercom/design-md) - Customer messaging. Friendly blue palette, conversational UI patterns
|
||||
- [**Miro**](https://getdesign.md/miro/design-md) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
|
||||
- [**Notion**](https://getdesign.md/notion/design-md) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
|
||||
- [**Pinterest**](https://getdesign.md/pinterest/design-md) - Visual discovery platform. Red accent, masonry grid, image-first
|
||||
- [**Webflow**](https://getdesign.md/webflow/design-md) - Visual web builder. Blue-accented, polished marketing site aesthetic
|
||||
|
||||
### Fintech & Crypto
|
||||
|
||||
- [**Coinbase**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/coinbase/) - Crypto exchange. Clean blue identity, trust-focused, institutional feel
|
||||
- [**Kraken**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/kraken/) - Crypto trading platform. Purple-accented dark UI, data-dense dashboards
|
||||
- [**Revolut**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/revolut/) - Digital banking. Sleek dark interface, gradient cards, fintech precision
|
||||
- [**Wise**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/wise/) - International money transfer. Bright green accent, friendly and clear
|
||||
- [**Coinbase**](https://getdesign.md/coinbase/design-md) - Crypto exchange. Clean blue identity, trust-focused, institutional feel
|
||||
- [**Kraken**](https://getdesign.md/kraken/design-md) - Crypto trading platform. Purple-accented dark UI, data-dense dashboards
|
||||
- [**Revolut**](https://getdesign.md/revolut/design-md) - Digital banking. Sleek dark interface, gradient cards, fintech precision
|
||||
- [**Wise**](https://getdesign.md/wise/design-md) - International money transfer. Bright green accent, friendly and clear
|
||||
|
||||
### Enterprise & Consumer
|
||||
|
||||
- [**Airbnb**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airbnb/) - Travel marketplace. Warm coral accent, photography-driven, rounded UI
|
||||
- [**Apple**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/apple/) - Consumer electronics. Premium white space, SF Pro, cinematic imagery
|
||||
- [**IBM**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ibm/) - Enterprise technology. Carbon design system, structured blue palette
|
||||
- [**NVIDIA**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/nvidia/) - GPU computing. Green-black energy, technical power aesthetic
|
||||
- [**SpaceX**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spacex/) - Space technology. Stark black and white, full-bleed imagery, futuristic
|
||||
- [**Spotify**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spotify/) - Music streaming. Vibrant green on dark, bold type, album-art-driven
|
||||
- [**Uber**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/uber/) - Mobility platform. Bold black and white, tight type, urban energy
|
||||
- [**Airbnb**](https://getdesign.md/airbnb/design-md) - Travel marketplace. Warm coral accent, photography-driven, rounded UI
|
||||
- [**Apple**](https://getdesign.md/apple/design-md) - Consumer electronics. Premium white space, SF Pro, cinematic imagery
|
||||
- [**IBM**](https://getdesign.md/ibm/design-md) - Enterprise technology. Carbon design system, structured blue palette
|
||||
- [**NVIDIA**](https://getdesign.md/nvidia/design-md) - GPU computing. Green-black energy, technical power aesthetic
|
||||
- [**SpaceX**](https://getdesign.md/spacex/design-md) - Space technology. Stark black and white, full-bleed imagery, futuristic
|
||||
- [**Spotify**](https://getdesign.md/spotify/design-md) - Music streaming. Vibrant green on dark, bold type, album-art-driven
|
||||
- [**Uber**](https://getdesign.md/uber/design-md) - Mobility platform. Bold black and white, tight type, urban energy
|
||||
|
||||
### Car Brands
|
||||
|
||||
- [**BMW**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/bmw/) - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
|
||||
- [**Ferrari**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ferrari/) - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
|
||||
- [**Lamborghini**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lamborghini/) - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
|
||||
- [**Renault**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/renault/) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
|
||||
- [**Tesla**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/tesla/) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
|
||||
- [**BMW**](https://getdesign.md/bmw/design-md) - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
|
||||
- [**Ferrari**](https://getdesign.md/ferrari/design-md) - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
|
||||
- [**Lamborghini**](https://getdesign.md/lamborghini/design-md) - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
|
||||
- [**Renault**](https://getdesign.md/renault/design-md) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
|
||||
- [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
# Design System Inspiration of Airbnb
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Airbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.
|
||||
|
||||
The typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's "belong anywhere" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.
|
||||
|
||||
What distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent
|
||||
- Airbnb Cereal VF — custom variable font with warm, rounded terminals
|
||||
- Palette-based token system (`--palette-*`) for systematic color management
|
||||
- Three-layer card shadows: border ring + soft blur + stronger blur
|
||||
- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements
|
||||
- Circular navigation controls (50% radius)
|
||||
- Photography-first listing cards — images are the hero content
|
||||
- Near-black text (`#222222`) — warm, not cold
|
||||
- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states
|
||||
- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red
|
||||
- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light
|
||||
- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover
|
||||
|
||||
### Premium Tiers
|
||||
- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding
|
||||
- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding
|
||||
|
||||
### Text Scale
|
||||
- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold
|
||||
- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text
|
||||
- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions
|
||||
- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state
|
||||
- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links
|
||||
|
||||
### Interactive
|
||||
- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational
|
||||
- **Border Gray** (`#c1c1c1`): Border color for cards and dividers
|
||||
- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces
|
||||
|
||||
### Surface & Shadows
|
||||
- **Pure White** (`#ffffff`): Page background, card surfaces
|
||||
- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift
|
||||
- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`
|
||||
- **OpenType Features**: `"salt"` (stylistic alternates) on specific caption elements
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |
|
||||
| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |
|
||||
| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |
|
||||
| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |
|
||||
| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |
|
||||
| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |
|
||||
| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |
|
||||
| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |
|
||||
| Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |
|
||||
| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |
|
||||
| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `"salt"` feature |
|
||||
| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |
|
||||
| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |
|
||||
| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `"salt"` feature |
|
||||
| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |
|
||||
|
||||
### Principles
|
||||
- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.
|
||||
- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.
|
||||
- **"salt" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.
|
||||
- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark**
|
||||
- Background: `#222222` (near-black, not pure black)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 24px
|
||||
- Radius: 8px
|
||||
- Hover: transitions to error/brand accent via `var(--accent-bg-error)`
|
||||
- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)
|
||||
|
||||
**Circular Nav**
|
||||
- Background: `#f2f2f2`
|
||||
- Text: `#222222`
|
||||
- Radius: 50% (circle)
|
||||
- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)
|
||||
- Active: 4px white border ring + focus shadow
|
||||
- Focus: scale(0.92) shrink animation
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Radius: 14px (badges), 20px (cards/buttons), 32px (large)
|
||||
- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)
|
||||
- Listing cards: full-width photography on top, details below
|
||||
- Carousel controls: circular 50% buttons
|
||||
|
||||
### Inputs
|
||||
- Search: `#222222` text
|
||||
- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring
|
||||
- Radius: depends on context (search bar uses pill-like rounding)
|
||||
|
||||
### Navigation
|
||||
- White sticky header with search bar centered
|
||||
- Airbnb logo (Rausch Red) left-aligned
|
||||
- Category filter pills: horizontal scroll below search
|
||||
- Circular nav controls for carousel navigation
|
||||
- "Become a Host" text link, avatar/menu right-aligned
|
||||
|
||||
### Image Treatment
|
||||
- Listing photography fills card top with generous height
|
||||
- Image carousel with dot indicators
|
||||
- Heart/wishlist icon overlay on images
|
||||
- 8px–14px radius on contained images
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px
|
||||
|
||||
### Grid & Container
|
||||
- Full-width header with centered search
|
||||
- Category pill bar: horizontal scrollable row
|
||||
- Listing grid: responsive multi-column (3–5 columns on desktop)
|
||||
- Full-width footer with link columns
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.
|
||||
- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.
|
||||
- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.
|
||||
|
||||
### Border Radius Scale
|
||||
- Subtle (4px): Small links
|
||||
- Standard (8px): Buttons, tabs, search elements
|
||||
- Badge (14px): Status badges, labels
|
||||
- Card (20px): Feature cards, large buttons
|
||||
- Large (32px): Large containers, hero elements
|
||||
- Circle (50%): Nav controls, avatars, icons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |
|
||||
| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |
|
||||
| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |
|
||||
|
||||
**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `#222222` (warm near-black) for text — never pure `#000000`
|
||||
- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent
|
||||
- Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional
|
||||
- Apply the three-layer card shadow for all elevated surfaces
|
||||
- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls
|
||||
- Use photography as the primary visual content — listings are image-first
|
||||
- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy
|
||||
- Use circular (50%) buttons for carousel/navigation controls
|
||||
|
||||
### Don't
|
||||
- Don't use pure black (`#000000`) for text — always `#222222` (warm)
|
||||
- Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only
|
||||
- Don't use thin font weights (300, 400) for headings — 500 minimum
|
||||
- Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated
|
||||
- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core
|
||||
- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system
|
||||
- Don't override the palette token system — use `--palette-*` variables consistently
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <375px | Single column, compact search |
|
||||
| Mobile | 375–550px | Standard mobile listing grid |
|
||||
| Tablet Small | 550–744px | 2-column listings |
|
||||
| Tablet | 744–950px | Search bar expansion |
|
||||
| Desktop Small | 950–1128px | 3-column listings |
|
||||
| Desktop | 1128–1440px | 4-column grid, full header |
|
||||
| Large Desktop | 1440–1920px | 5-column grid |
|
||||
| Ultra-wide | >1920px | Maximum grid width |
|
||||
|
||||
*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*
|
||||
|
||||
### Touch Targets
|
||||
- Circular nav buttons: adequate 50% radius sizing
|
||||
- Listing cards: full-card tap target on mobile
|
||||
- Search bar: prominently sized for thumb interaction
|
||||
- Category pills: horizontally scrollable with generous padding
|
||||
|
||||
### Collapsing Strategy
|
||||
- Listing grid: 5 → 4 → 3 → 2 → 1 columns
|
||||
- Search: expanded bar → compact bar → overlay
|
||||
- Category pills: horizontal scroll at all sizes
|
||||
- Navigation: full header → mobile simplified
|
||||
- Map: side panel → overlay/toggle
|
||||
|
||||
### Image Behavior
|
||||
- Listing photos: carousel with swipe on mobile
|
||||
- Responsive image sizing with aspect ratio maintained
|
||||
- Heart overlay positioned consistently across sizes
|
||||
- Photo quality adjusts based on viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#222222`)
|
||||
- Brand accent: Rausch Red (`#ff385c`)
|
||||
- Secondary text: `#6a6a6a`
|
||||
- Disabled: `rgba(0,0,0,0.24)`
|
||||
- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`
|
||||
- Card shadow: full three-layer stack
|
||||
- Button surface: `#f2f2f2`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a."
|
||||
- "Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon)."
|
||||
- "Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius)."
|
||||
- "Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent."
|
||||
- "Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — the photography provides all the color
|
||||
2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only
|
||||
3. Near-black (#222222) for text — the warmth matters
|
||||
4. Three-layer shadows create natural, warm lift — always use all three layers
|
||||
5. Generous radius: 8px buttons, 20px cards, 50% controls
|
||||
6. Cereal VF at 500–700 weight — no thin weights for any heading
|
||||
7. Photography is hero — every listing card is image-first
|
||||
@@ -1,23 +1,3 @@
|
||||
# Airbnb Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [Airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/airbnb/design-md
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Airbnb</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #1a1a1a; --near-black: #f0f0f0; --rausch: #ff385c; --deep-rausch: #e00b41;
|
||||
--secondary: #a0a0a0; --disabled: #666666; --border: #3a3a3a; --surface: #2a2a2a;
|
||||
--luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
|
||||
--shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
|
||||
--shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
|
||||
--font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #2a2a2a; }
|
||||
.nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--near-black); }
|
||||
.nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--rausch); }
|
||||
.hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
|
||||
.btn-circle:hover { box-shadow:var(--shadow-hover); }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
|
||||
.section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid #2a2a2a; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
|
||||
.card-body { padding:16px; }
|
||||
.card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
|
||||
.card p { font-size:14px; color:var(--secondary); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
|
||||
.spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
.radius-context { font-size:8px; color:var(--disabled); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid #2a2a2a; font-size:12px; color:var(--secondary); }
|
||||
.footer a { color:var(--rausch); text-decoration:underline; }
|
||||
|
||||
@media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">🔍</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff385c;color:#ffffff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Airbnb</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Explore Stays</a>
|
||||
<a class="btn-outline" href="#">Become a Host</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">←</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">→</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">🔍</span><div class="button-label">Search</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,233 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Airbnb</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;
|
||||
--secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;
|
||||
--luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
|
||||
--shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
|
||||
--shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
|
||||
--font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #ebebeb; }
|
||||
.nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--near-black); }
|
||||
.nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--rausch); }
|
||||
.hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
|
||||
.btn-circle:hover { box-shadow:var(--shadow-hover); }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
|
||||
.section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid #ebebeb; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
|
||||
.card-body { padding:16px; }
|
||||
.card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
|
||||
.card p { font-size:14px; color:var(--secondary); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
|
||||
.spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
.radius-context { font-size:8px; color:var(--disabled); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid #ebebeb; font-size:12px; color:var(--secondary); }
|
||||
.footer a { color:var(--rausch); text-decoration:underline; }
|
||||
|
||||
@media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">🔍</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Airbnb</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Explore Stays</a>
|
||||
<a class="btn-outline" href="#">Become a Host</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">←</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">→</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">🔍</span><div class="button-label">Search</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
# Design System Inspiration of Airtable
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
|
||||
|
||||
**Key Characteristics:**
|
||||
- White canvas with deep navy text (`#181d26`)
|
||||
- Airtable Blue (`#1b61c9`) as primary CTA and link color
|
||||
- Haas + Haas Groot Disp dual font system
|
||||
- Positive letter-spacing on body text (0.08px–0.28px)
|
||||
- 12px radius buttons, 16px–32px for cards
|
||||
- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
|
||||
- Semantic theme tokens: `--theme_*` CSS variable naming
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Deep Navy** (`#181d26`): Primary text
|
||||
- **Airtable Blue** (`#1b61c9`): CTA buttons, links
|
||||
- **White** (`#ffffff`): Primary surface
|
||||
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
|
||||
|
||||
### Semantic
|
||||
- **Success Green** (`#006400`): `--theme_success-text`
|
||||
- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
|
||||
- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
|
||||
|
||||
### Neutral
|
||||
- **Dark Gray** (`#333333`): Secondary text
|
||||
- **Mid Blue** (`#254fad`): Link/accent blue variant
|
||||
- **Border** (`#e0e2e6`): Card borders
|
||||
- **Light Surface** (`#f8fafc`): Subtle surface
|
||||
|
||||
### Shadows
|
||||
- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
|
||||
- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
|
||||
- **Display**: `Haas Groot Disp`, fallback: `Haas`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|
||||
|------|------|------|--------|-------------|----------------|
|
||||
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
|
||||
| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
|
||||
| Section Heading | Haas | 40px | 400 | 1.25 | normal |
|
||||
| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
|
||||
| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
|
||||
| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
|
||||
| Body | Haas | 18px | 400 | 1.35 | 0.18px |
|
||||
| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
|
||||
| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
|
||||
| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
|
||||
- **White**: white bg, `#181d26` text, 12px radius, 1px border white
|
||||
- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
|
||||
|
||||
### Cards: `1px solid #e0e2e6`, 16px–24px radius
|
||||
### Inputs: Standard Haas styling
|
||||
|
||||
## 5. Layout
|
||||
- Spacing: 1–48px (8px base)
|
||||
- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
|
||||
|
||||
## 6. Depth
|
||||
- Blue-tinted multi-layer shadow system
|
||||
- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
|
||||
### Don't: Skip positive letter-spacing, use heavy shadows
|
||||
|
||||
## 8. Responsive Behavior
|
||||
Breakpoints: 425–1664px (23 breakpoints)
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
- Text: Deep Navy (`#181d26`)
|
||||
- CTA: Airtable Blue (`#1b61c9`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Border: `#e0e2e6`
|
||||
@@ -1,23 +1,3 @@
|
||||
# Airtable Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [Airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/airtable/design-md
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Airtable</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#181d26; --navy:#f0f2f5; --blue:#1b61c9; --gray:#b0b4be; --border:#2a2e38; --weak:rgba(240,242,245,0.6); --light:#1e2330; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
|
||||
.nav-links a:hover { color:var(--blue); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:56px; }
|
||||
.color-swatch-info { padding:8px; }
|
||||
.color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
|
||||
.color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
|
||||
.color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
|
||||
|
||||
.type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:9px; color:var(--weak); margin-top:4px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
|
||||
|
||||
.form-group { margin-bottom:12px; max-width:380px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#c00; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
|
||||
.spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:10px; flex-wrap:wrap; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
|
||||
.radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
|
||||
.elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
|
||||
.elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
|
||||
.elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1b61c9;color:#fff;font-size:9px;font-weight:500;padding:4px 10px;border-radius:12px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);">Body — All your teams, all their workflows — connected in one workspace.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
|
||||
<div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
|
||||
<div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,164 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Airtable</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#fff; --navy:#181d26; --blue:#1b61c9; --gray:#333; --border:#e0e2e6; --weak:rgba(4,14,32,0.69); --light:#f8fafc; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
|
||||
.nav-links a:hover { color:var(--blue); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:56px; }
|
||||
.color-swatch-info { padding:8px; }
|
||||
.color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
|
||||
.color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
|
||||
.color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
|
||||
|
||||
.type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:9px; color:var(--weak); margin-top:4px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
|
||||
|
||||
.form-group { margin-bottom:12px; max-width:380px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#c00; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
|
||||
.spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:10px; flex-wrap:wrap; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
|
||||
.radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
|
||||
.elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
|
||||
.elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
|
||||
.elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);">Body — All your teams, all their workflows — connected in one workspace.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
|
||||
<div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
|
||||
<div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,313 +0,0 @@
|
||||
# Design System Inspiration of Apple
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Apple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.
|
||||
|
||||
The typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset — precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.
|
||||
|
||||
The color story is starkly binary. Product sections alternate between pure black (`#000000`) backgrounds with white text and light gray (`#f5f5f7`) backgrounds with near-black text (`#1d1d1f`). This creates a cinematic pacing — dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (`#0071e3`), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.
|
||||
|
||||
**Key Characteristics:**
|
||||
- SF Pro Display/Text with optical sizing — letterforms adapt automatically to size context
|
||||
- Binary light/dark section rhythm: black (`#000000`) alternating with light gray (`#f5f5f7`)
|
||||
- Single accent color: Apple Blue (`#0071e3`) reserved exclusively for interactive elements
|
||||
- Product-as-hero photography on solid color fields — no gradients, no textures, no distractions
|
||||
- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact
|
||||
- Full-width section layout with centered content — the viewport IS the canvas
|
||||
- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons
|
||||
- Generous whitespace between sections allowing each product moment to breathe
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure Black** (`#000000`): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.
|
||||
- **Light Gray** (`#f5f5f7`): Alternate section backgrounds, informational areas. Not white — the slight blue-gray tint prevents sterility.
|
||||
- **Near Black** (`#1d1d1f`): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.
|
||||
|
||||
### Interactive
|
||||
- **Apple Blue** (`#0071e3`): `--sk-focus-color`, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.
|
||||
- **Link Blue** (`#0066cc`): `--sk-body-link-color`, inline text links. Slightly darker than Apple Blue for text-level readability.
|
||||
- **Bright Blue** (`#2997ff`): Links on dark backgrounds. Higher luminance for contrast on black sections.
|
||||
|
||||
### Text
|
||||
- **White** (`#ffffff`): Text on dark backgrounds, button text on blue/dark CTAs.
|
||||
- **Near Black** (`#1d1d1f`): Primary body text on light backgrounds.
|
||||
- **Black 80%** (`rgba(0, 0, 0, 0.8)`): Secondary text, nav items on light backgrounds. Slightly softened.
|
||||
- **Black 48%** (`rgba(0, 0, 0, 0.48)`): Tertiary text, disabled states, carousel controls.
|
||||
|
||||
### Surface & Dark Variants
|
||||
- **Dark Surface 1** (`#272729`): Card backgrounds in dark sections.
|
||||
- **Dark Surface 2** (`#262628`): Subtle surface variation in dark contexts.
|
||||
- **Dark Surface 3** (`#28282a`): Elevated cards on dark backgrounds.
|
||||
- **Dark Surface 4** (`#2a2a2d`): Highest dark surface elevation.
|
||||
- **Dark Surface 5** (`#242426`): Deepest dark surface tone.
|
||||
|
||||
### Button States
|
||||
- **Button Active** (`#ededf2`): Active/pressed state for light buttons.
|
||||
- **Button Default Light** (`#fafafc`): Search/filter button backgrounds.
|
||||
- **Overlay** (`rgba(210, 210, 215, 0.64)`): Media control scrims, overlays.
|
||||
- **White 32%** (`rgba(255, 255, 255, 0.32)`): Hover state on dark modal close buttons.
|
||||
|
||||
### Shadows
|
||||
- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display**: `SF Pro Display`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
||||
- **Body**: `SF Pro Text`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
||||
- SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | Product launch headlines, maximum impact |
|
||||
| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | Feature section titles |
|
||||
| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | Product tile headlines |
|
||||
| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | Bold card headings |
|
||||
| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | Regular card headings |
|
||||
| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | Large navigation headings |
|
||||
| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | Light sub-navigation text |
|
||||
| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | Standard reading text |
|
||||
| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | Emphasized body text, labels |
|
||||
| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | Large button text, light weight |
|
||||
| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | Standard button text |
|
||||
| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | Body links, "Learn more" |
|
||||
| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | Secondary text, descriptions |
|
||||
| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | Emphasized captions |
|
||||
| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | Fine print, footnotes |
|
||||
| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | Bold fine print |
|
||||
| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | Legal text, smallest size |
|
||||
|
||||
### Principles
|
||||
- **Optical sizing as philosophy**: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.
|
||||
- **Weight restraint**: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.
|
||||
- **Negative tracking at all sizes**: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.
|
||||
- **Extreme line-height range**: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Blue (CTA)**
|
||||
- Background: `#0071e3` (Apple Blue)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 15px
|
||||
- Radius: 8px
|
||||
- Border: 1px solid transparent
|
||||
- Font: SF Pro Text, 17px, weight 400
|
||||
- Hover: background brightens slightly
|
||||
- Active: `#ededf2` background shift
|
||||
- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
|
||||
- Use: Primary call-to-action ("Buy", "Shop iPhone")
|
||||
|
||||
**Primary Dark**
|
||||
- Background: `#1d1d1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 15px
|
||||
- Radius: 8px
|
||||
- Font: SF Pro Text, 17px, weight 400
|
||||
- Use: Secondary CTA, dark variant
|
||||
|
||||
**Pill Link (Learn More / Shop)**
|
||||
- Background: transparent
|
||||
- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)
|
||||
- Radius: 980px (full pill)
|
||||
- Border: 1px solid `#0066cc`
|
||||
- Font: SF Pro Text, 14px-17px
|
||||
- Hover: underline decoration
|
||||
- Use: "Learn more" and "Shop" links — the signature Apple inline CTA
|
||||
|
||||
**Filter / Search Button**
|
||||
- Background: `#fafafc`
|
||||
- Text: `rgba(0, 0, 0, 0.8)`
|
||||
- Padding: 0px 14px
|
||||
- Radius: 11px
|
||||
- Border: 3px solid `rgba(0, 0, 0, 0.04)`
|
||||
- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
|
||||
- Use: Search bars, filter controls
|
||||
|
||||
**Media Control**
|
||||
- Background: `rgba(210, 210, 215, 0.64)`
|
||||
- Text: `rgba(0, 0, 0, 0.48)`
|
||||
- Radius: 50% (circular)
|
||||
- Active: scale(0.9), background shifts
|
||||
- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text
|
||||
- Use: Play/pause, carousel arrows
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)
|
||||
- Border: none (borders are rare in Apple's system)
|
||||
- Radius: 5px-8px
|
||||
- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` for elevated product cards
|
||||
- Content: centered, generous padding
|
||||
- Hover: no standard hover state — cards are static, links within them are interactive
|
||||
|
||||
### Navigation
|
||||
- Background: `rgba(0, 0, 0, 0.8)` (translucent dark) with `backdrop-filter: saturate(180%) blur(20px)`
|
||||
- Height: 48px (compact)
|
||||
- Text: `#ffffff` at 12px, weight 400
|
||||
- Active: underline on hover
|
||||
- Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport
|
||||
- Mobile: collapses to hamburger with full-screen overlay menu
|
||||
- The nav floats above content, maintaining its dark translucent glass regardless of section background
|
||||
|
||||
### Image Treatment
|
||||
- Products on solid-color fields (black or white) — no backgrounds, no context, just the object
|
||||
- Full-bleed section images that span the entire viewport width
|
||||
- Product photography at extremely high resolution with subtle shadows
|
||||
- Lifestyle images confined to rounded-corner containers (12px+ radius)
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Product Hero Module**
|
||||
- Full-viewport-width section with solid background (black or `#f5f5f7`)
|
||||
- Product name as the primary headline (SF Pro Display, 56px, weight 600)
|
||||
- One-line descriptor below in lighter weight
|
||||
- Two pill CTAs side by side: "Learn more" (outline) and "Buy" / "Shop" (filled)
|
||||
|
||||
**Product Grid Tile**
|
||||
- Square or near-square card on contrasting background
|
||||
- Product image dominating 60-70% of the tile
|
||||
- Product name + one-line description below
|
||||
- "Learn more" and "Shop" link pair at bottom
|
||||
|
||||
**Feature Comparison Strip**
|
||||
- Horizontal scroll of product variants
|
||||
- Each variant as a vertical card with image, name, and key specs
|
||||
- Minimal chrome — the products speak for themselves
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px
|
||||
- Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 980px (the recurring "980px radius" in pill buttons echoes this width)
|
||||
- Hero: full-viewport-width sections with centered content block
|
||||
- Product grids: 2-3 column layouts within centered container
|
||||
- Single-column for hero moments — one product, one message, full attention
|
||||
- No visible grid lines or gutters — spacing creates implied structure
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Cinematic breathing room**: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty — it is the pause between scenes in a film.
|
||||
- **Vertical rhythm through color blocks**: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, `#f5f5f7`, white). Each color change signals a new "scene."
|
||||
- **Compression within, expansion between**: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (5px): Small containers, link tags
|
||||
- Standard (8px): Buttons, product cards, image containers
|
||||
- Comfortable (11px): Search inputs, filter buttons
|
||||
- Large (12px): Feature panels, lifestyle image containers
|
||||
- Full Pill (980px): CTA links ("Learn more", "Shop"), navigation pills
|
||||
- Circle (50%): Media controls (play/pause, arrows)
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, solid background | Standard content sections, text blocks |
|
||||
| Navigation Glass | `backdrop-filter: saturate(180%) blur(20px)` on `rgba(0,0,0,0.8)` | Sticky navigation bar — the glass effect |
|
||||
| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Product cards, floating elements |
|
||||
| Media Control | `rgba(210, 210, 215, 0.64)` background with scale transforms | Play/pause buttons, carousel controls |
|
||||
| Focus (Accessibility) | `2px solid #0071e3` outline | Keyboard focus on all interactive elements |
|
||||
|
||||
**Shadow Philosophy**: Apple uses shadow extremely sparingly. The primary shadow (`3px 5px 30px` with 0.22 opacity) is soft, wide, and offset — mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the "product as physical sculpture" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).
|
||||
|
||||
### Decorative Depth
|
||||
- Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content
|
||||
- Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows
|
||||
- Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use SF Pro Display at 20px+ and SF Pro Text below 20px — respect the optical sizing boundary
|
||||
- Apply negative letter-spacing at all text sizes (not just headlines) — Apple tracks tight universally
|
||||
- Use Apple Blue (`#0071e3`) ONLY for interactive elements — it must be the singular accent
|
||||
- Alternate between black and light gray (`#f5f5f7`) section backgrounds for cinematic rhythm
|
||||
- Use 980px pill radius for CTA links — the signature Apple link shape
|
||||
- Keep product imagery on solid-color fields with no competing visual elements
|
||||
- Use the translucent dark glass (`rgba(0,0,0,0.8)` + blur) for sticky navigation
|
||||
- Compress headline line-heights to 1.07-1.14 — Apple headlines are famously tight
|
||||
|
||||
### Don't
|
||||
- Don't introduce additional accent colors — the entire chromatic budget is spent on blue
|
||||
- Don't use heavy shadows or multiple shadow layers — Apple's shadow system is one soft diffused shadow or nothing
|
||||
- Don't use borders on cards or containers — Apple almost never uses visible borders (except on specific buttons)
|
||||
- Don't apply wide letter-spacing to SF Pro — it is designed to run tight at every size
|
||||
- Don't use weight 800 or 900 — the maximum is 700 (bold), and even that is rare
|
||||
- Don't add textures, patterns, or gradients to backgrounds — solid colors only
|
||||
- Don't make the navigation opaque — the glass blur effect is essential to the Apple UI identity
|
||||
- Don't center-align body text — Apple body copy is left-aligned; only headlines center
|
||||
- Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Small Mobile | <360px | Minimum supported, single column |
|
||||
| Mobile | 360-480px | Standard mobile layout |
|
||||
| Mobile Large | 480-640px | Wider single column, larger images |
|
||||
| Tablet Small | 640-834px | 2-column product grids begin |
|
||||
| Tablet | 834-1024px | Full tablet layout, expanded nav |
|
||||
| Desktop Small | 1024-1070px | Standard desktop layout begins |
|
||||
| Desktop | 1070-1440px | Full layout, max content width |
|
||||
| Large Desktop | >1440px | Centered with generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTAs: 8px 15px padding creating ~44px touch height
|
||||
- Navigation links: 48px height with adequate spacing
|
||||
- Media controls: 50% radius circular buttons, minimum 44x44px
|
||||
- "Learn more" pills: generous padding for comfortable tapping
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero headlines: 56px Display → 40px → 28px on mobile, maintaining tight line-height proportionally
|
||||
- Product grids: 3-column → 2-column → single column stacked
|
||||
- Navigation: full horizontal nav → compact mobile menu (hamburger)
|
||||
- Product hero modules: full-bleed maintained at all sizes, text scales down
|
||||
- Section backgrounds: maintain full-width color blocks at all breakpoints — the cinematic rhythm never breaks
|
||||
- Image sizing: products scale proportionally, never crop — the product silhouette is sacred
|
||||
|
||||
### Image Behavior
|
||||
- Product photography maintains aspect ratio at all breakpoints
|
||||
- Hero product images scale down but stay centered
|
||||
- Full-bleed section backgrounds persist at every size
|
||||
- Lifestyle images may crop on mobile but maintain their rounded corners
|
||||
- Lazy loading for below-fold product images
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Apple Blue (`#0071e3`)
|
||||
- Page background (light): `#f5f5f7`
|
||||
- Page background (dark): `#000000`
|
||||
- Heading text (light): `#1d1d1f`
|
||||
- Heading text (dark): `#ffffff`
|
||||
- Body text: `rgba(0, 0, 0, 0.8)` on light, `#ffffff` on dark
|
||||
- Link (light bg): `#0066cc`
|
||||
- Link (dark bg): `#2997ff`
|
||||
- Focus ring: `#0071e3`
|
||||
- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding)."
|
||||
- "Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px."
|
||||
- "Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right."
|
||||
- "Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below."
|
||||
- "Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA."
|
||||
|
||||
### Iteration Guide
|
||||
1. Every interactive element gets Apple Blue (`#0071e3`) — no other accent colors
|
||||
2. Section backgrounds alternate: black for immersive moments, `#f5f5f7` for informational moments
|
||||
3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below — never mix
|
||||
4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px
|
||||
5. The navigation glass effect (translucent dark + blur) is non-negotiable — it defines the Apple web experience
|
||||
6. Products always appear on solid color fields — never on gradients, textures, or lifestyle backgrounds in hero modules
|
||||
7. Shadow is rare and always soft: `3px 5px 30px 0.22 opacity` or nothing at all
|
||||
8. Pill CTAs use 980px radius — this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape
|
||||
@@ -1,24 +1,3 @@
|
||||
# Apple Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [Apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/apple/design-md
|
||||
|
||||
@@ -1,420 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Apple</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #f5f5f7;
|
||||
--white: #000000;
|
||||
--pure-black: #000000;
|
||||
--light-gray: #1d1d1f;
|
||||
--apple-blue: #2997ff;
|
||||
--link-blue: #2997ff;
|
||||
--link-blue-dark: #2997ff;
|
||||
--gray-80: rgba(255,255,255,0.8);
|
||||
--gray-48: rgba(255,255,255,0.48);
|
||||
--button-active: #333336;
|
||||
--filter-bg: #1c1c1e;
|
||||
--dark-surface-1: #272729;
|
||||
--dark-surface-2: #28282a;
|
||||
--dark-surface-3: #2a2a2d;
|
||||
--overlay: rgba(60,60,67,0.64);
|
||||
--shadow-card: rgba(0,0,0,0.5) 3px 5px 30px 0px;
|
||||
--nav-bg: rgba(0,0,0,0.88);
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
font-family: var(--font-text);
|
||||
font-size: 17px; font-weight: 400; line-height: 1.47;
|
||||
letter-spacing: -0.374px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 32px; height: 48px;
|
||||
background: var(--nav-bg);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: #f5f5f7; text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: #ffffff; }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--apple-blue); color: #ffffff;
|
||||
padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 400;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.88; }
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: #f5f5f7; color: #000000;
|
||||
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; background: var(--light-gray); }
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 56px; font-weight: 600; line-height: 1.07;
|
||||
letter-spacing: -0.28px; color: var(--black); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 21px; font-weight: 400; line-height: 1.19; letter-spacing: 0.231px; color: var(--gray-80); max-width: 600px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-blue {
|
||||
display: inline-block; background: var(--apple-blue); color: #ffffff;
|
||||
padding: 8px 22px; border-radius: 980px; border: none;
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-blue:hover { opacity: 0.88; }
|
||||
.btn-outline {
|
||||
display: inline-block; background: transparent; color: var(--apple-blue);
|
||||
padding: 8px 22px; border-radius: 980px;
|
||||
border: 1px solid var(--apple-blue);
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-outline:hover { background: rgba(41,151,255,0.1); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 980px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--gray-48); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.28px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid #333336; margin: 0; }
|
||||
|
||||
/* DARK SECTION (inverted for dark mode = lighter section) */
|
||||
.section-dark { background: #1d1d1f; color: #f5f5f7; padding: 64px 32px; }
|
||||
.section-dark .section-inner { max-width: 980px; margin: 0 auto; }
|
||||
.section-dark .section-label { color: rgba(255,255,255,0.48); }
|
||||
.section-dark .section-title { color: #f5f5f7; }
|
||||
|
||||
/* GRAY SECTION (slightly lighter dark) */
|
||||
.section-gray { background: #1c1c1e; padding: 64px 32px; }
|
||||
.section-gray .section-inner { max-width: 980px; margin: 0 auto; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--black); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-48); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-48); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-80); letter-spacing: -0.224px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #333336; }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }
|
||||
.btn-dark-fill {
|
||||
display: inline-block; background: #f5f5f7; color: #000000;
|
||||
padding: 8px 22px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.btn-filter {
|
||||
display: inline-block; background: var(--filter-bg); color: var(--gray-80);
|
||||
padding: 6px 14px; border-radius: 11px; border: 3px solid rgba(255,255,255,0.06);
|
||||
font-family: var(--font-text); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.btn-media {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: var(--overlay); color: var(--gray-48); border: none;
|
||||
font-size: 14px; cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--dark-surface-1); border-radius: 8px; padding: 32px 24px; transition: box-shadow 0.3s; }
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.196px; line-height: 1.14; margin-bottom: 8px; color: #f5f5f7; }
|
||||
.card p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.43; letter-spacing: -0.224px; }
|
||||
.card-link { font-size: 14px; color: var(--link-blue); text-decoration: none; margin-top: 12px; display: inline-block; }
|
||||
.card-link:hover { text-decoration: underline; }
|
||||
|
||||
.card-light { background: #1c1c1e; }
|
||||
.card-elevated { background: var(--dark-surface-3); }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 6px; letter-spacing: -0.224px; }
|
||||
.form-input {
|
||||
width: 100%; background: #1c1c1e; color: var(--black);
|
||||
border: 1px solid #333336; padding: 10px 14px; border-radius: 8px;
|
||||
font-family: var(--font-text); font-size: 17px; outline: none;
|
||||
letter-spacing: -0.374px; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(41,151,255,0.25); }
|
||||
.form-input--focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(41,151,255,0.25); }
|
||||
.form-input--error { border-color: #ff453a; box-shadow: 0 0 0 3px rgba(255,69,58,0.25); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: #1c1c1e; color: var(--black);
|
||||
border: 1px solid #333336; padding: 10px 14px; border-radius: 8px;
|
||||
font-family: var(--font-text); font-size: 17px; resize: vertical; outline: none;
|
||||
letter-spacing: -0.374px;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--gray-48); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--apple-blue); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }
|
||||
.radius-label { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }
|
||||
.radius-context { font-size: 10px; color: var(--gray-48); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: #1c1c1e; border-radius: 8px; padding: 24px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--gray-48); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; background: #1d1d1f; font-size: 12px; color: var(--gray-48); letter-spacing: -0.12px; border-top: 1px solid #333336; }
|
||||
.footer a { color: var(--link-blue); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.section-dark { padding: 48px 20px; }
|
||||
.section-gray { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Shop Now</a>
|
||||
</nav>
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Apple</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-blue" href="#">Learn more</a>
|
||||
<a class="btn-outline" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f7</div><div class="color-swatch-role">Alternate sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1d1d1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1d1d1f</div><div class="color-swatch-role">Primary text, dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #333336"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Text on dark, button text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0071e3"></div><div class="color-swatch-info"><div class="color-swatch-name">Apple Blue</div><div class="color-swatch-hex">#0071e3</div><div class="color-swatch-role">Primary CTA, focus ring</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0066cc"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Blue</div><div class="color-swatch-hex">#0066cc</div><div class="color-swatch-role">Inline text links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2997ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Bright Blue</div><div class="color-swatch-hex">#2997ff</div><div class="color-swatch-role">Links on dark bg</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Black 80%</div><div class="color-swatch-hex">rgba(0,0,0,0.8)</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.48)"></div><div class="color-swatch-info"><div class="color-swatch-name">Black 48%</div><div class="color-swatch-hex">rgba(0,0,0,0.48)</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fafafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Filter BG</div><div class="color-swatch-hex">#fafafc</div><div class="color-swatch-role">Search/filter buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ededf2"></div><div class="color-swatch-info"><div class="color-swatch-name">Button Active</div><div class="color-swatch-hex">#ededf2</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Dark Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#272729"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 1</div><div class="color-swatch-hex">#272729</div><div class="color-swatch-role">Dark section cards</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282a"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 2</div><div class="color-swatch-hex">#28282a</div><div class="color-swatch-role">Dark elevated cards</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2a2a2d"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 3</div><div class="color-swatch-hex">#2a2a2d</div><div class="color-swatch-role">Highest dark elevation</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#242426"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 4</div><div class="color-swatch-hex">#242426</div><div class="color-swatch-role">Deepest dark tone</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:56px; font-weight:600; line-height:1.07; letter-spacing:-0.28px;">Display Hero</div><div class="type-meta">Display Hero -- 56px / 600 / 1.07 / -0.28px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.28px;">Section Heading</div><div class="type-meta">Section Heading -- 40px / 600 / 1.10 / normal / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.14; letter-spacing:0.196px;">Tile Heading</div><div class="type-meta">Tile Heading -- 28px / 400 / 1.14 / 0.196px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.19; letter-spacing:0.231px;">Card Title Bold</div><div class="type-meta">Card Title Bold -- 21px / 700 / 1.19 / 0.231px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.19; letter-spacing:0.231px;">Card Title Regular</div><div class="type-meta">Card Title Regular -- 21px / 400 / 1.19 / 0.231px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:17px; font-weight:400; line-height:1.47; letter-spacing:-0.374px;">Body -- The all-new design brings incredible capability. Powerful features let you do more than ever.</div><div class="type-meta">Body -- 17px / 400 / 1.47 / -0.374px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:17px; font-weight:600; line-height:1.24; letter-spacing:-0.374px;">Body Emphasis -- Featured highlights</div><div class="type-meta">Body Emphasis -- 17px / 600 / 1.24 / -0.374px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:-0.224px;">Link / Caption -- Learn more about the latest features</div><div class="type-meta">Link / Caption -- 14px / 400 / 1.43 / -0.224px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:12px; font-weight:400; line-height:1.33; letter-spacing:-0.12px;">Micro -- Legal text, footnotes, and fine print</div><div class="type-meta">Micro -- 12px / 400 / 1.33 / -0.12px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:10px; font-weight:400; line-height:1.47; letter-spacing:-0.08px;">Nano -- smallest size, regulatory labels</div><div class="type-meta">Nano -- 10px / 400 / 1.47 / -0.08px / SF Pro Text</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Buy</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Learn more</a><div class="button-label">Outline Pill</div></div>
|
||||
<div class="button-item"><a class="btn-dark-fill" href="#">Shop iPhone</a><div class="button-label">Light Fill</div></div>
|
||||
<div class="button-item"><a class="btn-filter" href="#">Search</a><div class="button-label">Filter</div></div>
|
||||
<div class="button-item"><button class="btn-media">▶</button><div class="button-label">Media</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--link-blue); padding:4px 16px; border-radius:980px; border:1px solid var(--link-blue); font-size:14px; font-weight:400; letter-spacing:-0.224px;">Learn more ></span><div class="button-label">Link Pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-dark">
|
||||
<section class="section-inner" id="cards-dark">
|
||||
<div class="section-label">04 / Cards (Dark)</div>
|
||||
<h2 class="section-title">Cards on Dark Background</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>iPhone</h3>
|
||||
<p>Designed to be extraordinary. Featuring the most advanced chip, an incredible camera system, and all-day battery life.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card card-elevated" style="box-shadow: var(--shadow-card);">
|
||||
<h3>MacBook Neo</h3>
|
||||
<p>Supercharged for pros. The most powerful MacBook ever with the M-series chip delivers unprecedented performance.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>iPad Air</h3>
|
||||
<p>Powerful and colorful. With the latest chip, stunning Liquid Retina display, and Apple Pencil support.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="section-gray">
|
||||
<div class="section-inner" id="cards-light">
|
||||
<div class="section-label">04 / Cards (Light)</div>
|
||||
<h2 class="section-title">Cards on Gray Background</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card card-light">
|
||||
<h3>AirPods Max</h3>
|
||||
<p>High-fidelity audio with active noise cancellation, spatial audio, and computational audio for immersive listening.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card card-light" style="box-shadow: var(--shadow-card);">
|
||||
<h3>Apple Watch</h3>
|
||||
<p>The ultimate device for a healthy life. Advanced health sensors, fitness metrics, and seamless connectivity.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card card-light">
|
||||
<h3>Apple TV+</h3>
|
||||
<p>Original shows and movies from the world's greatest storytellers. Stream on all your favorite devices.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Apple ID</label><input class="form-input" type="text" placeholder="name@example.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--focus" type="password" value="mypassword123"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="text" value="invalid@"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Feedback</label><textarea class="form-textarea" placeholder="Tell us about your experience..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:14px"></div><div class="spacing-value">14</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:17px"></div><div class="spacing-value">17</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons, Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:11px"></div><div class="radius-label">11px</div><div class="radius-context">Search</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Features</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:980px"></div><div class="radius-label">980px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Media</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #333336;"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, solid bg</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.8); backdrop-filter:blur(20px);"><div class="elevation-label">Nav Glass</div><div class="elevation-desc">Translucent + blur</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.5) 3px 5px 30px 0px;"><div class="elevation-label">Card Shadow</div><div class="elevation-desc">3px 5px 30px 0.5</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px #2997ff;"><div class="elevation-label">Focus</div><div class="elevation-desc">2px solid Bright Blue</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark-surface-3);"><div class="elevation-label">Dark Surface</div><div class="elevation-desc">#2a2a2d</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,414 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Apple</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #1d1d1f;
|
||||
--white: #ffffff;
|
||||
--pure-black: #000000;
|
||||
--light-gray: #f5f5f7;
|
||||
--apple-blue: #0071e3;
|
||||
--link-blue: #0066cc;
|
||||
--link-blue-dark: #2997ff;
|
||||
--gray-80: rgba(0,0,0,0.8);
|
||||
--gray-48: rgba(0,0,0,0.48);
|
||||
--button-active: #ededf2;
|
||||
--filter-bg: #fafafc;
|
||||
--dark-surface-1: #272729;
|
||||
--dark-surface-2: #28282a;
|
||||
--dark-surface-3: #2a2a2d;
|
||||
--overlay: rgba(210,210,215,0.64);
|
||||
--shadow-card: rgba(0,0,0,0.22) 3px 5px 30px 0px;
|
||||
--nav-bg: rgba(0,0,0,0.8);
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
font-family: var(--font-text);
|
||||
font-size: 17px; font-weight: 400; line-height: 1.47;
|
||||
letter-spacing: -0.374px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 32px; height: 48px;
|
||||
background: var(--nav-bg);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: #ffffff; }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--apple-blue); color: #ffffff;
|
||||
padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 400;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.88; }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; background: var(--light-gray); }
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 56px; font-weight: 600; line-height: 1.07;
|
||||
letter-spacing: -0.28px; color: var(--black); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 21px; font-weight: 400; line-height: 1.19; letter-spacing: 0.231px; color: var(--gray-80); max-width: 600px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-blue {
|
||||
display: inline-block; background: var(--apple-blue); color: #ffffff;
|
||||
padding: 8px 22px; border-radius: 980px; border: none;
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-blue:hover { opacity: 0.88; }
|
||||
.btn-outline {
|
||||
display: inline-block; background: transparent; color: var(--apple-blue);
|
||||
padding: 8px 22px; border-radius: 980px;
|
||||
border: 1px solid var(--apple-blue);
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-outline:hover { background: rgba(0,113,227,0.06); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 980px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--gray-48); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.28px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid #d2d2d7; margin: 0; }
|
||||
|
||||
/* DARK SECTION (full-width) */
|
||||
.section-dark { background: var(--pure-black); color: #ffffff; padding: 64px 32px; }
|
||||
.section-dark .section-inner { max-width: 980px; margin: 0 auto; }
|
||||
.section-dark .section-label { color: rgba(255,255,255,0.48); }
|
||||
.section-dark .section-title { color: #ffffff; }
|
||||
|
||||
/* LIGHT-GRAY SECTION */
|
||||
.section-gray { background: var(--light-gray); padding: 64px 32px; }
|
||||
.section-gray .section-inner { max-width: 980px; margin: 0 auto; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--black); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-48); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-48); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-80); letter-spacing: -0.224px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #d2d2d7; }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }
|
||||
.btn-dark-fill {
|
||||
display: inline-block; background: var(--black); color: #ffffff;
|
||||
padding: 8px 22px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-text); font-size: 17px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.btn-filter {
|
||||
display: inline-block; background: var(--filter-bg); color: var(--gray-80);
|
||||
padding: 6px 14px; border-radius: 11px; border: 3px solid rgba(0,0,0,0.04);
|
||||
font-family: var(--font-text); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.btn-media {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: var(--overlay); color: var(--gray-48); border: none;
|
||||
font-size: 14px; cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--light-gray); border-radius: 8px; padding: 32px 24px; transition: box-shadow 0.3s; }
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.196px; line-height: 1.14; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--gray-80); line-height: 1.43; letter-spacing: -0.224px; }
|
||||
.card-link { font-size: 14px; color: var(--link-blue); text-decoration: none; margin-top: 12px; display: inline-block; }
|
||||
.card-link:hover { text-decoration: underline; }
|
||||
|
||||
.card-dark { background: var(--dark-surface-1); color: #ffffff; }
|
||||
.card-dark h3 { color: #ffffff; }
|
||||
.card-dark p { color: rgba(255,255,255,0.7); }
|
||||
.card-dark .card-link { color: var(--link-blue-dark); }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 6px; letter-spacing: -0.224px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--white); color: var(--black);
|
||||
border: 1px solid #d2d2d7; padding: 10px 14px; border-radius: 8px;
|
||||
font-family: var(--font-text); font-size: 17px; outline: none;
|
||||
letter-spacing: -0.374px; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.2); }
|
||||
.form-input--focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.2); }
|
||||
.form-input--error { border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,0.2); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--white); color: var(--black);
|
||||
border: 1px solid #d2d2d7; padding: 10px 14px; border-radius: 8px;
|
||||
font-family: var(--font-text); font-size: 17px; resize: vertical; outline: none;
|
||||
letter-spacing: -0.374px;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--gray-48); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--apple-blue); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }
|
||||
.radius-label { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }
|
||||
.radius-context { font-size: 10px; color: var(--gray-48); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 8px; padding: 24px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--gray-48); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; background: var(--light-gray); font-size: 12px; color: var(--gray-48); letter-spacing: -0.12px; }
|
||||
.footer a { color: var(--link-blue); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.section-dark { padding: 48px 20px; }
|
||||
.section-gray { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Shop Now</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Apple</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-blue" href="#">Learn more</a>
|
||||
<a class="btn-outline" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f7</div><div class="color-swatch-role">Alternate sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1d1d1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1d1d1f</div><div class="color-swatch-role">Primary text, dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #d2d2d7"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Text on dark, button text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0071e3"></div><div class="color-swatch-info"><div class="color-swatch-name">Apple Blue</div><div class="color-swatch-hex">#0071e3</div><div class="color-swatch-role">Primary CTA, focus ring</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0066cc"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Blue</div><div class="color-swatch-hex">#0066cc</div><div class="color-swatch-role">Inline text links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2997ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Bright Blue</div><div class="color-swatch-hex">#2997ff</div><div class="color-swatch-role">Links on dark bg</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Black 80%</div><div class="color-swatch-hex">rgba(0,0,0,0.8)</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.48)"></div><div class="color-swatch-info"><div class="color-swatch-name">Black 48%</div><div class="color-swatch-hex">rgba(0,0,0,0.48)</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fafafc; border-bottom:1px solid #d2d2d7"></div><div class="color-swatch-info"><div class="color-swatch-name">Filter BG</div><div class="color-swatch-hex">#fafafc</div><div class="color-swatch-role">Search/filter buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ededf2; border-bottom:1px solid #d2d2d7"></div><div class="color-swatch-info"><div class="color-swatch-name">Button Active</div><div class="color-swatch-hex">#ededf2</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Dark Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#272729"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 1</div><div class="color-swatch-hex">#272729</div><div class="color-swatch-role">Dark section cards</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282a"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 2</div><div class="color-swatch-hex">#28282a</div><div class="color-swatch-role">Dark elevated cards</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2a2a2d"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 3</div><div class="color-swatch-hex">#2a2a2d</div><div class="color-swatch-role">Highest dark elevation</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#242426"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 4</div><div class="color-swatch-hex">#242426</div><div class="color-swatch-role">Deepest dark tone</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:56px; font-weight:600; line-height:1.07; letter-spacing:-0.28px;">Display Hero</div><div class="type-meta">Display Hero -- 56px / 600 / 1.07 / -0.28px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.28px;">Section Heading</div><div class="type-meta">Section Heading -- 40px / 600 / 1.10 / normal / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.14; letter-spacing:0.196px;">Tile Heading</div><div class="type-meta">Tile Heading -- 28px / 400 / 1.14 / 0.196px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.19; letter-spacing:0.231px;">Card Title Bold</div><div class="type-meta">Card Title Bold -- 21px / 700 / 1.19 / 0.231px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.19; letter-spacing:0.231px;">Card Title Regular</div><div class="type-meta">Card Title Regular -- 21px / 400 / 1.19 / 0.231px / SF Pro Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:17px; font-weight:400; line-height:1.47; letter-spacing:-0.374px;">Body -- The all-new design brings incredible capability. Powerful features let you do more than ever.</div><div class="type-meta">Body -- 17px / 400 / 1.47 / -0.374px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:17px; font-weight:600; line-height:1.24; letter-spacing:-0.374px;">Body Emphasis -- Featured highlights</div><div class="type-meta">Body Emphasis -- 17px / 600 / 1.24 / -0.374px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:-0.224px;">Link / Caption -- Learn more about the latest features</div><div class="type-meta">Link / Caption -- 14px / 400 / 1.43 / -0.224px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:12px; font-weight:400; line-height:1.33; letter-spacing:-0.12px;">Micro -- Legal text, footnotes, and fine print</div><div class="type-meta">Micro -- 12px / 400 / 1.33 / -0.12px / SF Pro Text</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-text); font-size:10px; font-weight:400; line-height:1.47; letter-spacing:-0.08px;">Nano -- smallest size, regulatory labels</div><div class="type-meta">Nano -- 10px / 400 / 1.47 / -0.08px / SF Pro Text</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Buy</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Learn more</a><div class="button-label">Outline Pill</div></div>
|
||||
<div class="button-item"><a class="btn-dark-fill" href="#">Shop iPhone</a><div class="button-label">Dark Fill</div></div>
|
||||
<div class="button-item"><a class="btn-filter" href="#">Search</a><div class="button-label">Filter</div></div>
|
||||
<div class="button-item"><button class="btn-media">▶</button><div class="button-label">Media</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--link-blue); padding:4px 16px; border-radius:980px; border:1px solid var(--link-blue); font-size:14px; font-weight:400; letter-spacing:-0.224px;">Learn more ></span><div class="button-label">Link Pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-dark">
|
||||
<section class="section-inner" id="cards-dark">
|
||||
<div class="section-label">04 / Cards (Dark)</div>
|
||||
<h2 class="section-title">Cards on Dark Background</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card card-dark">
|
||||
<h3>iPhone</h3>
|
||||
<p>Designed to be extraordinary. Featuring the most advanced chip, an incredible camera system, and all-day battery life.</p>
|
||||
<a class="card-link" href="#" style="color:#2997ff;">Learn more ></a>
|
||||
</div>
|
||||
<div class="card card-dark" style="box-shadow: var(--shadow-card);">
|
||||
<h3>MacBook Neo</h3>
|
||||
<p>Supercharged for pros. The most powerful MacBook ever with the M-series chip delivers unprecedented performance.</p>
|
||||
<a class="card-link" href="#" style="color:#2997ff;">Learn more ></a>
|
||||
</div>
|
||||
<div class="card card-dark">
|
||||
<h3>iPad Air</h3>
|
||||
<p>Powerful and colorful. With the latest chip, stunning Liquid Retina display, and Apple Pencil support.</p>
|
||||
<a class="card-link" href="#" style="color:#2997ff;">Learn more ></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="section-gray">
|
||||
<div class="section-inner" id="cards-light">
|
||||
<div class="section-label">04 / Cards (Light)</div>
|
||||
<h2 class="section-title">Cards on Light Background</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card" style="background:#ffffff;">
|
||||
<h3>AirPods Max</h3>
|
||||
<p>High-fidelity audio with active noise cancellation, spatial audio, and computational audio for immersive listening.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card" style="background:#ffffff; box-shadow: var(--shadow-card);">
|
||||
<h3>Apple Watch</h3>
|
||||
<p>The ultimate device for a healthy life. Advanced health sensors, fitness metrics, and seamless connectivity.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
<div class="card" style="background:#ffffff;">
|
||||
<h3>Apple TV+</h3>
|
||||
<p>Original shows and movies from the world's greatest storytellers. Stream on all your favorite devices.</p>
|
||||
<a class="card-link" href="#">Learn more ></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Apple ID</label><input class="form-input" type="text" placeholder="name@example.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--focus" type="password" value="mypassword123"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="text" value="invalid@"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Feedback</label><textarea class="form-textarea" placeholder="Tell us about your experience..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:14px"></div><div class="spacing-value">14</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:17px"></div><div class="spacing-value">17</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons, Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:11px"></div><div class="radius-label">11px</div><div class="radius-context">Search</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Features</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:980px"></div><div class="radius-label">980px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Media</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #d2d2d7;"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, solid bg</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.8); color:#fff; backdrop-filter:blur(20px);"><div class="elevation-label" style="color:#fff;">Nav Glass</div><div class="elevation-desc" style="color:rgba(255,255,255,0.6);">Translucent + blur</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.22) 3px 5px 30px 0px;"><div class="elevation-label">Card Shadow</div><div class="elevation-desc">3px 5px 30px 0.22</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px #0071e3;"><div class="elevation-label">Focus</div><div class="elevation-desc">2px solid Apple Blue</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark-surface-1); color:#fff;"><div class="elevation-label" style="color:#fff;">Dark Surface</div><div class="elevation-desc" style="color:rgba(255,255,255,0.5);">#272729</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,180 +0,0 @@
|
||||
# Design System Inspiration of BMW
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.
|
||||
|
||||
The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.
|
||||
|
||||
What makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.
|
||||
|
||||
**Key Characteristics:**
|
||||
- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority
|
||||
- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements
|
||||
- Zero border-radius detected — angular, sharp-cornered, industrial geometry
|
||||
- Dark hero photography + white content sections — showroom lighting rhythm
|
||||
- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility
|
||||
- Weight 900 for navigation emphasis — extreme contrast with 300 display
|
||||
- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering
|
||||
- Full-bleed automotive photography as primary visual content
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds
|
||||
- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent
|
||||
- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states
|
||||
|
||||
### Neutral Scale
|
||||
- **Near Black** (`#262626`): Primary text on light surfaces, dark link text
|
||||
- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata
|
||||
- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements
|
||||
|
||||
### Interactive States
|
||||
- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation
|
||||
- Text links use underline: none on hover — clean interaction
|
||||
|
||||
### Shadows
|
||||
- Minimal shadow system — depth through photography and dark/light section contrast
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`
|
||||
- **Body / UI**: `BMWTypeNextLatin`, same fallback stack
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |
|
||||
| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |
|
||||
| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |
|
||||
| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |
|
||||
| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |
|
||||
| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |
|
||||
|
||||
### Principles
|
||||
- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.
|
||||
- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.
|
||||
- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.
|
||||
- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
|
||||
- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
|
||||
- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)
|
||||
- No border-radius — sharp rectangular buttons
|
||||
|
||||
### Cards & Containers
|
||||
- No border-radius — all containers are sharp-cornered rectangles
|
||||
- White backgrounds on light sections
|
||||
- Dark backgrounds for hero/feature sections
|
||||
- No visible borders on most elements
|
||||
|
||||
### Navigation
|
||||
- BMWTypeNextLatin 18px weight 900 for primary nav links
|
||||
- White text on dark header
|
||||
- BMW logo 54x54px
|
||||
- Hover: remains white, text-decoration none
|
||||
- "Home" text link in header
|
||||
|
||||
### Image Treatment
|
||||
- Full-bleed automotive photography
|
||||
- Dark cinematic lighting
|
||||
- Edge-to-edge hero images
|
||||
- Car photography as primary visual content
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px
|
||||
|
||||
### Grid & Container
|
||||
- Full-width hero photography
|
||||
- Centered content sections
|
||||
- Footer: multi-column link grid
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.
|
||||
- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.
|
||||
|
||||
### Border Radius Scale
|
||||
- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |
|
||||
| Flat (Level 1) | White surface, no shadow | Content sections |
|
||||
| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |
|
||||
|
||||
**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use BMWTypeNextLatin Light (300) uppercase for all display headings
|
||||
- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable
|
||||
- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively
|
||||
- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional
|
||||
- Use full-bleed automotive photography for hero sections
|
||||
- Keep line-heights tight (1.15–1.30) throughout
|
||||
- Use `--site-context-*` CSS variables for theming
|
||||
|
||||
### Don't
|
||||
- Don't round corners — zero radius is the BMW identity
|
||||
- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only
|
||||
- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes
|
||||
- Don't add decorative elements — the photography and typography carry everything
|
||||
- Don't use relaxed line-heights — BMW text is always compressed
|
||||
- Don't lighten the dark hero sections — the contrast with white IS the design
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <375px | Minimum supported |
|
||||
| Mobile | 375–480px | Single column |
|
||||
| Mobile Large | 480–640px | Slight adjustments |
|
||||
| Tablet Small | 640–768px | 2-column begins |
|
||||
| Tablet | 768–920px | Standard tablet |
|
||||
| Desktop Small | 920–1024px | Desktop layout begins |
|
||||
| Desktop | 1024–1280px | Standard desktop |
|
||||
| Large Desktop | 1280–1440px | Expanded |
|
||||
| Ultra-wide | 1440–1600px | Maximum layout |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 60px → scales down, maintains uppercase
|
||||
- Navigation: horizontal → hamburger
|
||||
- Photography: full-bleed maintained at all sizes
|
||||
- Content sections: stack vertically
|
||||
- Footer: multi-column → stacked
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#262626`)
|
||||
- Secondary text: Meta Gray (`#757575`)
|
||||
- Accent: BMW Blue (`#1c69d4`)
|
||||
- Focus: BMW Focus Blue (`#0653b6`)
|
||||
- Muted: Silver (`#bbbbbb`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
|
||||
- "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
|
||||
- "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
|
||||
- "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."
|
||||
|
||||
### Iteration Guide
|
||||
1. Zero border-radius — every corner is sharp, no exceptions
|
||||
2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)
|
||||
3. BMW Blue for interactive only — never as background or decoration
|
||||
4. Photography carries emotion — the UI is pure precision
|
||||
5. Tight line-heights everywhere — 1.15 to 1.30 is the range
|
||||
+1
-21
@@ -1,23 +1,3 @@
|
||||
# Bmw Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [BMW](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/bmw/design-md
|
||||
|
||||
@@ -1,211 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by BMW</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #1a1a1a; --black: #e0e0e0; --bmw-blue: #1c69d4; --focus-blue: #0653b6;
|
||||
--meta: #999999; --silver: #666666; --dark: #1a1a1a;
|
||||
--font: 'Inter', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.8; }
|
||||
.nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }
|
||||
.hero-inner { max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { overflow:hidden; border:1px solid #e0e0e0; }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }
|
||||
.color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }
|
||||
.card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }
|
||||
.card p { font-size:16px; color:var(--meta); line-height:1.30; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }
|
||||
.form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }
|
||||
.footer a { color:var(--bmw-blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Explore</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1c69d4;color:#ffffff;font-size:11px;font-weight:700;padding:4px 10px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><div class="hero-inner">
|
||||
<h1>Design System<br>Inspired by BMW</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.</p>
|
||||
<div class="hero-buttons"><a class="btn-blue" href="#">Explore Models</a><a class="btn-outline" href="#">Find Your BMW</a></div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c69d4"></div><div class="color-swatch-info"><div class="color-swatch-name">BMW Blue</div><div class="color-swatch-hex">#1c69d4</div><div class="color-swatch-role">Highlight accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0653b6"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#0653b6</div><div class="color-swatch-role">Focus states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e0e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Theme White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#757575"></div><div class="color-swatch-info"><div class="color-swatch-name">Meta Gray</div><div class="color-swatch-hex">#757575</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#bbbbbb"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#bbbbbb</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;">DISPLAY HERO</div><div class="type-meta">Display — 60px / 300 / 1.30 / uppercase / BMWTypeNextLatin Light</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.30;">Section Heading</div><div class="type-meta">Section — 32px / 400 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:900; line-height:1.30;">Nav Emphasis — SHEER DRIVING PLEASURE</div><div class="type-meta">Nav — 18px / 900 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.15;">Body — The ultimate driving machine. Precision engineering meets luxury design.</div><div class="type-meta">Body — 16px / 400 / 1.15 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.20;">Button Bold — EXPLORE NOW</div><div class="type-meta">Button — 16px / 700 / 1.20 / BMWTypeNextLatin</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">BMW Blue</a><div class="button-label">Primary</div></div>
|
||||
<div class="button-item"><a class="btn-outline" style="color:var(--black); border-color:var(--black);" href="#">Outlined</a><div class="button-label">Secondary</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;">Dark Surface</span><div class="button-label">Dark</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:16px;">All buttons use 0px border-radius — sharp corners are non-negotiable.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>BMW iX</h3><p>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.</p></div>
|
||||
<div class="card"><h3>BMW M Series</h3><p>Performance without compromise. Track-ready engineering for the road.</p></div>
|
||||
<div class="card" style="background:var(--dark); color:var(--white); border:none;"><h3 style="color:var(--white);">Dark Variant</h3><p style="color:var(--silver);">Cards on dark surfaces. No border, no radius — pure geometry.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Model</label><input class="form-input" type="text" placeholder="BMW 3 Series"><div class="form-state-label">Default (sharp corners)</div></div>
|
||||
<div class="form-group"><label class="form-label">Location</label><input class="form-input form-input--focus" type="text" value="Munich"><div class="form-state-label">Focus (BMW Focus Blue)</div></div>
|
||||
<div class="form-group"><label class="form-label">VIN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Your configuration..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:60px"></div><div class="spacing-value">60</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:12px;">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — default</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark); color:var(--white); border:none;"><div class="elevation-label">Photography</div><div class="elevation-desc">Dark hero sections</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">BMW Focus Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,210 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by BMW</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --black: #262626; --bmw-blue: #1c69d4; --focus-blue: #0653b6;
|
||||
--meta: #757575; --silver: #bbbbbb; --dark: #1a1a1a;
|
||||
--font: 'Inter', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.8; }
|
||||
.nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }
|
||||
.hero-inner { max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { overflow:hidden; border:1px solid #e0e0e0; }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }
|
||||
.color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }
|
||||
.card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }
|
||||
.card p { font-size:16px; color:var(--meta); line-height:1.30; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }
|
||||
.form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }
|
||||
.footer a { color:var(--bmw-blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Explore</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero"><div class="hero-inner">
|
||||
<h1>Design System<br>Inspired by BMW</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.</p>
|
||||
<div class="hero-buttons"><a class="btn-blue" href="#">Explore Models</a><a class="btn-outline" href="#">Find Your BMW</a></div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c69d4"></div><div class="color-swatch-info"><div class="color-swatch-name">BMW Blue</div><div class="color-swatch-hex">#1c69d4</div><div class="color-swatch-role">Highlight accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0653b6"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#0653b6</div><div class="color-swatch-role">Focus states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e0e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Theme White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#757575"></div><div class="color-swatch-info"><div class="color-swatch-name">Meta Gray</div><div class="color-swatch-hex">#757575</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#bbbbbb"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#bbbbbb</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;">DISPLAY HERO</div><div class="type-meta">Display — 60px / 300 / 1.30 / uppercase / BMWTypeNextLatin Light</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.30;">Section Heading</div><div class="type-meta">Section — 32px / 400 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:900; line-height:1.30;">Nav Emphasis — SHEER DRIVING PLEASURE</div><div class="type-meta">Nav — 18px / 900 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.15;">Body — The ultimate driving machine. Precision engineering meets luxury design.</div><div class="type-meta">Body — 16px / 400 / 1.15 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.20;">Button Bold — EXPLORE NOW</div><div class="type-meta">Button — 16px / 700 / 1.20 / BMWTypeNextLatin</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">BMW Blue</a><div class="button-label">Primary</div></div>
|
||||
<div class="button-item"><a class="btn-outline" style="color:var(--black); border-color:var(--black);" href="#">Outlined</a><div class="button-label">Secondary</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;">Dark Surface</span><div class="button-label">Dark</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:16px;">All buttons use 0px border-radius — sharp corners are non-negotiable.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>BMW iX</h3><p>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.</p></div>
|
||||
<div class="card"><h3>BMW M Series</h3><p>Performance without compromise. Track-ready engineering for the road.</p></div>
|
||||
<div class="card" style="background:var(--dark); color:var(--white); border:none;"><h3 style="color:var(--white);">Dark Variant</h3><p style="color:var(--silver);">Cards on dark surfaces. No border, no radius — pure geometry.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Model</label><input class="form-input" type="text" placeholder="BMW 3 Series"><div class="form-state-label">Default (sharp corners)</div></div>
|
||||
<div class="form-group"><label class="form-label">Location</label><input class="form-input form-input--focus" type="text" value="Munich"><div class="form-state-label">Focus (BMW Focus Blue)</div></div>
|
||||
<div class="form-group"><label class="form-label">VIN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Your configuration..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:60px"></div><div class="spacing-value">60</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:12px;">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — default</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark); color:var(--white); border:none;"><div class="elevation-label">Photography</div><div class="elevation-desc">Dark hero sections</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">BMW Focus Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,259 +0,0 @@
|
||||
# Design System Inspiration of Cal.com
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.
|
||||
|
||||
Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.
|
||||
|
||||
The elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (`0px 0px 0px 1px`), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Purely grayscale brand palette — no brand colors, boldness through monochrome
|
||||
- Cal Sans custom geometric display font with extremely tight default letter-spacing
|
||||
- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
|
||||
- Cal Sans for headings, Inter for body — clean typographic division
|
||||
- Wide border-radius scale from 2px to 9999px (pill) — versatile rounding
|
||||
- White canvas with near-black (#242424) text — maximum contrast, zero decoration
|
||||
- Product screenshots as primary visual content — the scheduling UI sells itself
|
||||
- Built on Framer platform
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Charcoal** (`#242424`): Primary heading and button text — Cal.com's signature near-black, warmer than pure black
|
||||
- **Midnight** (`#111111`): Deepest text/overlay color — used at 50% opacity for subtle overlays
|
||||
- **White** (`#ffffff`): Primary background and surface — the dominant canvas
|
||||
|
||||
### Secondary & Accent
|
||||
- **Link Blue** (`#0099ff`): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
|
||||
- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction
|
||||
- **Default Link** (`#0000ee`): Browser-default link color on some elements — unmodified, signaling openness
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): Primary page background and card surfaces
|
||||
- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation — barely visible tint
|
||||
- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels
|
||||
|
||||
### Neutrals & Text
|
||||
- **Charcoal** (`#242424`): Headlines, buttons, primary UI text
|
||||
- **Midnight** (`#111111`): Deep black for high-contrast links and nav text
|
||||
- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content
|
||||
- **Pure Black** (`#000000`): Certain link text elements
|
||||
- **Border Gray** (approx `rgba(34, 42, 53, 0.08–0.10)`): Shadow-based borders using ring shadows instead of CSS borders
|
||||
|
||||
### Semantic & Accent
|
||||
- Cal.com is deliberately colorless for brand elements — "a grayscale brand to emphasise on boldness and professionalism"
|
||||
- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome
|
||||
- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral
|
||||
|
||||
### Gradient System
|
||||
- No gradients on the marketing site — the design is fully flat and monochrome
|
||||
- Depth is achieved entirely through shadows, not color transitions
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display**: `Cal Sans` — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)
|
||||
- **Body**: `Inter` — "rock-solid" standard body font. Fallback: `Inter Placeholder`
|
||||
- **UI Light**: `Cal Sans UI Variable Light` — light-weight variant (300) for softer UI text with -0.2px letter-spacing
|
||||
- **UI Medium**: `Cal Sans UI Medium` — medium-weight variant (500) for emphasized captions
|
||||
- **Mono**: `Roboto Mono` — for code blocks and technical content
|
||||
- **Tertiary**: `Matter Regular` / `Matter SemiBold` / `Matter Medium` — additional body fonts for specific contexts
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |
|
||||
| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |
|
||||
| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |
|
||||
| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |
|
||||
| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |
|
||||
| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |
|
||||
| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |
|
||||
| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |
|
||||
| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |
|
||||
| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |
|
||||
| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |
|
||||
| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |
|
||||
| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |
|
||||
| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |
|
||||
| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |
|
||||
|
||||
### Principles
|
||||
- **Cal Sans at large, Inter at small**: Cal Sans is exclusively for headings and display — never for body text. The system enforces this division strictly
|
||||
- **Tight by default, space when small**: Cal Sans letters are "intentionally spaced to be extremely close" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming
|
||||
- **Weight 300 body variant**: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines
|
||||
- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight
|
||||
- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
|
||||
- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
|
||||
- **Pill**: 9999px radius for rounded pill-shaped actions and badges
|
||||
- **Compact**: 4px padding, small text — utility actions within product UI
|
||||
- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` — a subtle inner-top highlight creating a 3D pressed effect
|
||||
|
||||
### Cards & Containers
|
||||
- **Shadow Card**: White background, multi-layered shadow — `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border
|
||||
- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation
|
||||
- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections
|
||||
- **Hover**: Likely subtle shadow deepening or scale transform
|
||||
|
||||
### Inputs & Forms
|
||||
- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border
|
||||
- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)
|
||||
- **Text input**: 8px radius, standard border treatment
|
||||
- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms
|
||||
|
||||
### Navigation
|
||||
- **Top nav**: White/transparent background, Cal Sans links at near-black
|
||||
- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis
|
||||
- **CTA button**: Dark Primary in the nav — high contrast call-to-action
|
||||
- **Mobile**: Collapses to hamburger with simplified navigation
|
||||
- **Sticky**: Fixed on scroll
|
||||
|
||||
### Image Treatment
|
||||
- **Product screenshots**: Large scheduling UI screenshots — the product is the primary visual
|
||||
- **Trust logos**: Grayscale company logos in a horizontal trust bar
|
||||
- **Aspect ratios**: Wide landscape for product UI screenshots
|
||||
- **No decorative imagery**: No illustrations, photos, or abstract graphics — pure product + typography
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
|
||||
- **Section padding**: 80px–96px vertical between major sections (generous)
|
||||
- **Card padding**: 12px–24px internal
|
||||
- **Component gaps**: 4px–8px between related elements
|
||||
- **Notable jump**: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier
|
||||
|
||||
### Grid & Container
|
||||
- **Max width**: ~1200px content container, centered
|
||||
- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids
|
||||
- **Feature showcase**: Product screenshots flanked by description text
|
||||
- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Lavish section spacing**: 80px–96px between sections creates a breathable, premium feel
|
||||
- **Product-first content**: Screenshots dominate the visual space — minimal surrounding decoration
|
||||
- **Centered headlines**: Cal Sans headings centered with generous margins above and below
|
||||
|
||||
### Border Radius Scale
|
||||
- **2px**: Subtle rounding on inline elements
|
||||
- **4px**: Small UI components
|
||||
- **6px–7px**: Buttons, small cards, images
|
||||
- **8px**: Standard interactive elements — buttons, inputs, images
|
||||
- **12px**: Medium containers — links, larger cards, images
|
||||
- **16px**: Large section containers
|
||||
- **29px**: Special rounded elements
|
||||
- **100px**: Large rounding — nearly circular on small elements
|
||||
- **1000px**: Very large rounding
|
||||
- **9999px**: Full pill shape — badges, links
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Flat) | No shadow | Page canvas, basic text containers |
|
||||
| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed/recessed elements, input wells |
|
||||
| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | Cards, containers — the workhorse shadow |
|
||||
| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | Alt card elevation without ring border |
|
||||
| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` or `rgb(255,255,255) 0px 2px 0px inset` | Button inner highlight — 3D pressed effect |
|
||||
| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |
|
||||
|
||||
### Shadow Philosophy
|
||||
Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:
|
||||
- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout
|
||||
- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth
|
||||
- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding
|
||||
- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel
|
||||
- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together
|
||||
|
||||
### Decorative Depth
|
||||
- No gradients or glow effects
|
||||
- All depth comes from the sophisticated shadow compositing system
|
||||
- The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing
|
||||
- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it
|
||||
- Maintain the grayscale palette — boldness comes from contrast, not color
|
||||
- Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow
|
||||
- Keep backgrounds pure white — the monochrome philosophy requires a clean canvas
|
||||
- Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality
|
||||
- Let product screenshots be the visual content — no illustrations, no decorative graphics
|
||||
- Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel
|
||||
|
||||
### Don't
|
||||
- Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading
|
||||
- Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only
|
||||
- Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach
|
||||
- Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px
|
||||
- Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges
|
||||
- Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only
|
||||
- Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character
|
||||
- Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |
|
||||
| Tablet Small | 640px–768px | 2-column begins for some elements |
|
||||
| Tablet | 768px–810px | Layout adjustments, fuller grid |
|
||||
| Tablet Large | 810px–1024px | Multi-column feature grids |
|
||||
| Desktop | 1024px–1199px | Full layout, expanded navigation |
|
||||
| Large Desktop | >1199px | Max-width container, centered content |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: 8px radius with comfortable padding (10px+ vertical)
|
||||
- Nav links: Dark text with adequate spacing
|
||||
- Mobile CTAs: Full-width dark buttons for easy thumb access
|
||||
- Pill badges: 9999px radius creates large, tappable targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav → hamburger on mobile
|
||||
- **Hero**: 64px Cal Sans display → ~36px on mobile
|
||||
- **Feature grids**: Multi-column → 2-column → single stacked column
|
||||
- **Product screenshots**: Scale within containers, maintaining aspect ratios
|
||||
- **Section spacing**: Reduces from 80px–96px to ~48px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale responsively
|
||||
- Trust logos reflow to multi-row grid on mobile
|
||||
- No art direction changes — same compositions at all sizes
|
||||
- Images use 7px–12px border-radius for consistent rounded corners
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary Text: Charcoal (`#242424`)
|
||||
- Deep Text: Midnight (`#111111`)
|
||||
- Secondary Text: Mid Gray (`#898989`)
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Link: Link Blue (`#0099ff`)
|
||||
- CTA Button: Charcoal (`#242424`) bg, white text
|
||||
- Shadow Border: `rgba(34, 42, 53, 0.08)` ring
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)"
|
||||
- "Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius"
|
||||
- "Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning"
|
||||
- "Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background"
|
||||
- "Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them
|
||||
2. Check that the palette is purely grayscale — if you see brand colors, remove them
|
||||
3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders
|
||||
4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space
|
||||
5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes
|
||||
+1
-21
@@ -1,23 +1,3 @@
|
||||
# Cal Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [Cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cal/design-md
|
||||
|
||||
@@ -1,449 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cal.com</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--charcoal: #242424;
|
||||
--midnight: #111111;
|
||||
--mid-gray: #898989;
|
||||
--white: #ffffff;
|
||||
--link-blue: #0099ff;
|
||||
--focus-blue: #3b82f6;
|
||||
--font-display: 'Cal Sans', system-ui, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'Roboto Mono', ui-monospace, monospace;
|
||||
|
||||
--dk-bg: #0a0a0a;
|
||||
--dk-surface: #141414;
|
||||
--dk-surface-elevated: #1c1c1c;
|
||||
--dk-border: #2a2a2a;
|
||||
--dk-border-light: #333333;
|
||||
--dk-text: #e8e8e8;
|
||||
--dk-text-secondary: #898989;
|
||||
--dk-text-muted: #555555;
|
||||
--dk-shadow-ring: rgba(255,255,255,0.06);
|
||||
--dk-shadow-soft: rgba(0,0,0,0.3);
|
||||
--dk-shadow-contact: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--dk-bg);
|
||||
color: var(--dk-text);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 200;
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 5px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 40px;
|
||||
background: rgba(10,10,10,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--dk-text); text-decoration: none; }
|
||||
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--dk-text-secondary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--dk-text); }
|
||||
.nav-cta {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
.hero { padding: 96px 40px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--dk-text);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--dk-text-secondary);
|
||||
max-width: 480px;
|
||||
margin: 0 auto 36px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-light {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-light:hover { opacity: 0.85; }
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--dk-text);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.btn-outline:hover { box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 1px; }
|
||||
|
||||
.section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--dk-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--dk-text-secondary);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.color-category { margin-bottom: 36px; }
|
||||
.color-category h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--dk-text);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; background: var(--dk-surface); }
|
||||
.swatch-name { font-size: 13px; font-weight: 600; color: var(--dk-text); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
|
||||
|
||||
.type-sample { padding: 20px 0; border-bottom: 1px solid var(--dk-border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--dk-text); margin-bottom: 6px; }
|
||||
.type-sample .type-label { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
|
||||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||
.btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
.btn-dk-surface {
|
||||
background: var(--dk-surface-elevated);
|
||||
color: var(--dk-text);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-pill-light {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 10px 24px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.card { border-radius: 12px; padding: 28px; }
|
||||
.card-dk { background: var(--dk-surface); box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.card-dk-elevated { background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.card-dk-inset { background: var(--dk-bg); box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||||
.card-hover { transition: transform 0.15s; }
|
||||
.card-hover:hover { transform: translateY(-2px); }
|
||||
.card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dk-text); margin-bottom: 8px; letter-spacing: 0.2px; }
|
||||
.card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--dk-text-secondary); letter-spacing: -0.2px; }
|
||||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-top: 14px; }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--dk-surface);
|
||||
color: var(--dk-text);
|
||||
outline: none;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
|
||||
.form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
.form-error-text { font-size: 11px; color: #ef4444; }
|
||||
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
|
||||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.spacing-box { background: var(--dk-text); border-radius: 4px; height: 40px; opacity: 0.5; }
|
||||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.radius-label { font-size: 12px; font-weight: 600; color: var(--dk-text); font-family: var(--font-mono); }
|
||||
.radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; max-width: 80px; }
|
||||
|
||||
.elevation-section { background: var(--dk-surface); border-radius: 16px; padding: 48px; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--dk-surface-elevated); border-radius: 12px; padding: 24px; min-height: 120px; }
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--dk-text); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; }
|
||||
.elev-inset { box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||||
.elev-ring-soft { box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-soft { box-shadow: var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-highlight { box-shadow: rgba(255,255,255,0.08) 0px 2px 0px 0px inset; background: var(--white); color: var(--charcoal); }
|
||||
.elev-highlight h4 { color: var(--charcoal); }
|
||||
.elev-highlight p { color: var(--mid-gray); }
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 48px 40px;
|
||||
font-size: 13px;
|
||||
color: var(--dk-text-muted);
|
||||
border-top: 1px solid var(--dk-border);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 12px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 64px 16px 48px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 48px 16px; }
|
||||
.section-title { font-size: 32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
.dark-badge { top: 10px; right: 10px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Cal.com</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-light">Explore Tokens</button>
|
||||
<button class="btn-outline">View DESIGN.md</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">A grayscale brand on dark surfaces.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#ffffff;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:rgba(255,255,255,0.06);"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring (Dark)</div><div class="swatch-hex">rgba(255,255,255,0.06)</div><div class="swatch-role">Dark mode ring shadows</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Accent (Minimal)</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">Cal Sans for display, Inter for body.</p>
|
||||
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-label">Cal Sans 64px / 600 / 1.10</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div><div class="type-label">Cal Sans 48px / 600 / 1.10</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-label">Cal Sans 24px / 600 / 1.30</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;">Sub-heading</div><div class="type-label">Cal Sans 20px / 600 / 1.20 / +0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;">Body Light — Elegant intro text for descriptions</div><div class="type-label">Inter 18px / 300 / 1.30 / -0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;">Body Standard — Reading text with comfortable line-height for long passages.</div><div class="type-label">Inter 16px / 300 / 1.50 / -0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div><div class="type-label">Inter 16px / 600 / 1.00</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption</div><div class="type-label">Inter 14px / 500 / 1.14</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div><div class="type-label">Roboto Mono 14px / 600 / 1.00</div></div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">Inverted for dark surfaces.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item"><button class="btn-light">Light Primary</button><span class="btn-label">#fff / #242424 / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-dk-surface">Surface</button><span class="btn-label">#1c1c1c / ring shadow / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-outline">Outline</button><span class="btn-label">transparent / ring / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-pill-light">Pill</button><span class="btn-label">#fff / 9999px</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Dark surface cards with shadow elevation.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-dk card-hover"><h4>Shadow Card</h4><p class="card-desc">Dark surface with ring + contact + diffused shadow compositing. Hover to lift.</p><p class="card-label">ring + contact + soft shadows</p></div>
|
||||
<div class="card card-dk-elevated"><h4>Elevated Card</h4><p class="card-desc">Lighter dark surface with ring shadow border for secondary content.</p><p class="card-label">ring shadow only</p></div>
|
||||
<div class="card card-dk-inset"><h4>Inset Card</h4><p class="card-desc">Deepest background with inset shadow for recessed content wells.</p><p class="card-label">inset shadow</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Dark surface inputs with ring shadows and blue focus.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Default Input</label><input type="text" placeholder="Enter your name"><span class="form-hint">ring shadow border / 8px</span></div>
|
||||
<div class="form-group"><label>Focus State</label><input type="text" placeholder="Focused" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(255,255,255,0.06) 0px 0px 0px 1px;"><span class="form-hint">blue focus ring</span></div>
|
||||
<div class="form-group"><label>Error State</label><input type="text" class="error" value="bad"><span class="form-error-text">Invalid input</span></div>
|
||||
<div class="form-group"><label>Textarea</label><textarea placeholder="Message..."></textarea><span class="form-hint">Same styling</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base with section-level jump to 80px–96px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">2px to pill 9999px.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Shadow compositing on dark surfaces.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Default canvas.</p></div>
|
||||
<div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Recessed/pressed appearance.</p></div>
|
||||
<div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring + contact + diffused. Workhorse.</p></div>
|
||||
<div class="elevation-card elev-soft"><h4>Level 3 — Soft</h4><p>Ambient shadow only.</p></div>
|
||||
<div class="elevation-card elev-highlight"><h4>Level 4 — Highlight</h4><p>White surface with inset bevel.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,575 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cal.com</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--charcoal: #242424;
|
||||
--midnight: #111111;
|
||||
--mid-gray: #898989;
|
||||
--white: #ffffff;
|
||||
--link-blue: #0099ff;
|
||||
--focus-blue: #3b82f6;
|
||||
--shadow-ring: rgba(34, 42, 53, 0.08);
|
||||
--shadow-soft: rgba(34, 42, 53, 0.05);
|
||||
--shadow-contact: rgba(19, 19, 22, 0.7);
|
||||
--font-display: 'Cal Sans', system-ui, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'Roboto Mono', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 40px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--midnight);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--charcoal);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--midnight); }
|
||||
.nav-cta {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.7; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 96px 40px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
letter-spacing: 0px;
|
||||
color: var(--charcoal);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--mid-gray);
|
||||
max-width: 480px;
|
||||
margin: 0 auto 36px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-dark {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset;
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.7; }
|
||||
.btn-white {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.btn-white:hover { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 6px 12px 0px; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
padding: 80px 40px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--mid-gray);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.color-category { margin-bottom: 36px; }
|
||||
.color-category h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; background: var(--white); }
|
||||
.swatch-name { font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--mid-gray); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(34,42,53,0.08);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--charcoal); margin-bottom: 6px; }
|
||||
.type-sample .type-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--mid-gray);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||
.btn-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
.btn-pill {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 10px 24px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.card { border-radius: 12px; padding: 28px; background: var(--white); }
|
||||
.card-shadow {
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.card-shadow-alt {
|
||||
box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px;
|
||||
}
|
||||
.card-inset {
|
||||
box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset;
|
||||
background: #fafafa;
|
||||
}
|
||||
.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-contact) 0px 2px 8px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 8px 16px 0px;
|
||||
}
|
||||
.card h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--mid-gray); letter-spacing: -0.2px; }
|
||||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-top: 14px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 14px; font-weight: 600; color: var(--charcoal); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
outline: none;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--mid-gray); }
|
||||
.form-group input:focus, .form-group textarea:focus {
|
||||
box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
.form-error-text { font-size: 11px; color: #dc2626; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
|
||||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.spacing-box { background: var(--charcoal); border-radius: 4px; height: 40px; }
|
||||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.radius-label { font-size: 12px; font-weight: 600; color: var(--charcoal); font-family: var(--font-mono); }
|
||||
.radius-context { font-size: 10px; color: var(--mid-gray); text-align: center; max-width: 80px; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-section { background: #f5f5f5; border-radius: 16px; padding: 48px; }
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 12px; padding: 24px; min-height: 120px; }
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--mid-gray); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; }
|
||||
.elev-inset { box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset; }
|
||||
.elev-ring-soft { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-soft { box-shadow: var(--shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-highlight { box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset; background: var(--charcoal); color: var(--white); }
|
||||
.elev-highlight h4 { color: var(--white); }
|
||||
.elev-highlight p { color: rgba(255,255,255,0.6); }
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 48px 40px;
|
||||
font-size: 13px;
|
||||
color: var(--mid-gray);
|
||||
border-top: 1px solid rgba(34,42,53,0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 12px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 64px 16px 48px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 48px 16px; }
|
||||
.section-title { font-size: 32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Cal.com</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-dark">Explore Tokens</button>
|
||||
<button class="btn-white">View DESIGN.md</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">A grayscale brand — boldness through monochrome, not color.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#ffffff; border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text, descriptions</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast link text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:rgba(34,42,53,0.08);border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring</div><div class="swatch-hex">rgba(34,42,53,0.08)</div><div class="swatch-role">Ring-shadow borders</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Accent (Minimal)</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">Cal Sans for display, Inter for body — a clean typographic division.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div>
|
||||
<div class="type-label">Display Hero — Cal Sans 64px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div>
|
||||
<div class="type-label">Section Heading — Cal Sans 48px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div>
|
||||
<div class="type-label">Feature Heading — Cal Sans 24px / 600 / 1.30</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;">Sub-heading</div>
|
||||
<div class="type-label">Sub-heading — Cal Sans 20px / 600 / 1.20 / +0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.10;">Card Title</div>
|
||||
<div class="type-label">Card Title — Cal Sans 16px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;">Body Light — Elegant light-weight intro text for descriptions and subtitles</div>
|
||||
<div class="type-label">Body Light — Inter 18px / 300 / 1.30 / -0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;">Body Standard — Standard reading text for longer content passages with comfortable line-height.</div>
|
||||
<div class="type-label">Body Standard — Inter 16px / 300 / 1.50 / -0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div>
|
||||
<div class="type-label">UI Label — Inter 16px / 600 / 1.00</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption Inter</div>
|
||||
<div class="type-label">Caption — Inter 14px / 500 / 1.14</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1.00;">Micro text</div>
|
||||
<div class="type-label">Micro — Inter 12px / 500 / 1.00</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div>
|
||||
<div class="type-label">Code — Roboto Mono 14px / 600 / 1.00</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">Dark CTAs with inset highlights, shadow-bordered white buttons, and pill shapes.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item">
|
||||
<button class="btn-dark">Dark Primary</button>
|
||||
<span class="btn-label">#242424 / white / 8px / inset highlight</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-white">White Shadow</button>
|
||||
<span class="btn-label">#fff / ring shadow / 8px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-pill">Pill Button</button>
|
||||
<span class="btn-label">#242424 / 9999px radius</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Multi-layered shadow elevation with ring borders instead of CSS borders.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-shadow card-hover">
|
||||
<h4>Shadow Card</h4>
|
||||
<p class="card-desc">Ring shadow + contact shadow + diffused shadow. The workhorse card pattern. Hover to see lift.</p>
|
||||
<p class="card-label">ring + contact + soft / 12px radius</p>
|
||||
</div>
|
||||
<div class="card card-shadow-alt">
|
||||
<h4>Alt Shadow Card</h4>
|
||||
<p class="card-desc">Contact shadow + soft shadow without the ring border. Lighter elevation.</p>
|
||||
<p class="card-label">contact + soft only / 12px radius</p>
|
||||
</div>
|
||||
<div class="card card-inset">
|
||||
<h4>Inset Card</h4>
|
||||
<p class="card-desc">Inset shadow creates a recessed, pressed-in appearance for input wells and secondary containers.</p>
|
||||
<p class="card-label">inset 0px 1px 1.9px rgba(0,0,0,0.16)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Shadow-bordered inputs with blue focus rings.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Default Input</label>
|
||||
<input type="text" placeholder="Enter your name">
|
||||
<span class="form-hint">shadow-ring border / 8px radius</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Focus State</label>
|
||||
<input type="text" placeholder="Focused" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.05) 0px 4px 8px 0px;">
|
||||
<span class="form-hint">focus: blue ring + shadows</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Error State</label>
|
||||
<input type="text" class="error" value="bad input">
|
||||
<span class="form-error-text">Invalid input</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea placeholder="Type a message..."></textarea>
|
||||
<span class="form-hint">Same shadow styling</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base with a jump from 28px to 80px for section-level tiers.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:3px;"></div><span class="spacing-label">3</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">Wide scale from sharp 2px to full pill 9999px.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small UI</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons, inputs</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards, links</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Multi-layered shadow compositing: ring borders + diffused shadows + inset highlights.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Page canvas and basic containers.</p></div>
|
||||
<div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Inset shadow. Pressed/recessed elements, input wells.</p></div>
|
||||
<div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring border + contact shadow + diffused shadow. The workhorse elevation.</p></div>
|
||||
<div class="elevation-card elev-soft"><h4>Level 3 — Soft Only</h4><p>Subtle ambient shadow without ring border. Gentle floating.</p></div>
|
||||
<div class="elevation-card elev-highlight"><h4>Level 4 — Inset Highlight</h4><p>White inset on dark bg. Button 3D bevel effect.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,312 +0,0 @@
|
||||
# Design System Inspiration of Claude (Anthropic)
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.
|
||||
|
||||
The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.
|
||||
|
||||
What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens
|
||||
- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
|
||||
- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech
|
||||
- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
|
||||
- Organic, editorial illustrations replacing typical tech iconography
|
||||
- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders
|
||||
- Magazine-like pacing with generous section spacing and serif-driven hierarchy
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.
|
||||
- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.
|
||||
- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.
|
||||
- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.
|
||||
|
||||
### Surface & Background
|
||||
- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.
|
||||
- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.
|
||||
- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.
|
||||
- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.
|
||||
- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.
|
||||
- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.
|
||||
- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.
|
||||
- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.
|
||||
- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.
|
||||
- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.
|
||||
|
||||
### Semantic & Accent
|
||||
- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.
|
||||
- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.
|
||||
- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the warm tone.
|
||||
- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.
|
||||
- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.
|
||||
- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.
|
||||
|
||||
### Gradient System
|
||||
- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a "gradient" effect as the eye moves through cream → sand → stone → charcoal → black sections.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Headline**: `Anthropic Serif`, with fallback: `Georgia`
|
||||
- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`
|
||||
- **Code**: `Anthropic Mono`, with fallback: `Arial`
|
||||
|
||||
*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.*
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |
|
||||
| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |
|
||||
| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |
|
||||
| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |
|
||||
| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |
|
||||
| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |
|
||||
| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |
|
||||
| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |
|
||||
| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |
|
||||
| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |
|
||||
| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |
|
||||
| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
|
||||
| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |
|
||||
| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |
|
||||
| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |
|
||||
| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |
|
||||
|
||||
### Principles
|
||||
- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.
|
||||
- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent "voice" across all headline sizes, as if the same author wrote every heading.
|
||||
- **Relaxed body line-height**: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.
|
||||
- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.
|
||||
- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Warm Sand (Secondary)**
|
||||
- Background: Warm Sand (`#e8e6dc`)
|
||||
- Text: Charcoal Warm (`#4d4c48`)
|
||||
- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
|
||||
- Radius: comfortably rounded (8px)
|
||||
- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
|
||||
- The workhorse button — warm, unassuming, clearly interactive
|
||||
|
||||
**White Surface**
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Anthropic Near Black (`#141413`)
|
||||
- Padding: 8px 16px 8px 12px
|
||||
- Radius: generously rounded (12px)
|
||||
- Hover: shifts to secondary background color
|
||||
- Clean, elevated button for light surfaces
|
||||
|
||||
**Dark Charcoal**
|
||||
- Background: Dark Surface (`#30302e`)
|
||||
- Text: Ivory (`#faf9f5`)
|
||||
- Padding: 0px 12px 0px 8px
|
||||
- Radius: comfortably rounded (8px)
|
||||
- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
|
||||
- The inverted variant for dark-on-light emphasis
|
||||
|
||||
**Brand Terracotta**
|
||||
- Background: Terracotta Brand (`#c96442`)
|
||||
- Text: Ivory (`#faf9f5`)
|
||||
- Radius: 8–12px
|
||||
- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
|
||||
- The primary CTA — the only button with chromatic color
|
||||
|
||||
**Dark Primary**
|
||||
- Background: Anthropic Near Black (`#141413`)
|
||||
- Text: Warm Silver (`#b0aea5`)
|
||||
- Padding: 9.6px 16.8px
|
||||
- Radius: generously rounded (12px)
|
||||
- Border: thin solid Dark Surface (`1px solid #30302e`)
|
||||
- Used on dark theme surfaces
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark
|
||||
- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark
|
||||
- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media
|
||||
- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content
|
||||
- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states
|
||||
- Section borders: `1px 0px 0px` (top-only) for list item separators
|
||||
|
||||
### Inputs & Forms
|
||||
- Text: Anthropic Near Black (`#141413`)
|
||||
- Padding: 1.6px 12px (very compact vertical)
|
||||
- Border: standard warm borders
|
||||
- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment
|
||||
- Radius: generously rounded (12px)
|
||||
|
||||
### Navigation
|
||||
- Sticky top nav with warm background
|
||||
- Logo: Claude wordmark in Anthropic Near Black
|
||||
- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)
|
||||
- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)
|
||||
- CTA: Terracotta Brand button or White Surface button
|
||||
- Hover: text shifts to foreground-primary, no decoration
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots showing the Claude chat interface
|
||||
- Generous border-radius on media (16–32px)
|
||||
- Embedded video players with rounded corners
|
||||
- Dark UI screenshots provide contrast against warm light canvas
|
||||
- Organic, hand-drawn illustrations for conceptual sections
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Model Comparison Cards**
|
||||
- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
|
||||
- Each model gets a bordered card with name, description, and capability badges
|
||||
- Border Warm (`#e8e6dc`) separation between items
|
||||
|
||||
**Organic Illustrations**
|
||||
- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
|
||||
- Abstract, conceptual rather than literal product diagrams
|
||||
- The primary visual personality — no other AI company uses this style
|
||||
|
||||
**Dark/Light Section Alternation**
|
||||
- The page alternates between Parchment light and Near Black dark sections
|
||||
- Creates a reading rhythm like chapters in a book
|
||||
- Each section feels like a distinct environment
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
|
||||
- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
|
||||
- Card internal padding: approximately 24–32px
|
||||
- Section vertical spacing: generous (estimated 80–120px between major sections)
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: approximately 1200px, centered
|
||||
- Hero: centered with editorial layout
|
||||
- Feature sections: single-column or 2–3 column card grids
|
||||
- Model comparison: clean 3-column grid
|
||||
- Full-width dark sections breaking the container for emphasis
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Editorial pacing**: Each section breathes like a magazine spread — generous top/bottom margins create natural reading pauses.
|
||||
- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.
|
||||
- **Content island approach**: Sections alternate between light and dark environments, creating distinct "rooms" for each message.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Minimal inline elements
|
||||
- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements
|
||||
- Comfortably rounded (8–8.5px): Standard buttons, cards, containers
|
||||
- Generously rounded (12px): Primary buttons, input fields, nav elements
|
||||
- Very rounded (16px): Featured containers, video players, tab lists
|
||||
- Highly rounded (24px): Tag-like elements, highlighted containers
|
||||
- Maximum rounded (32px): Hero containers, embedded media, large cards
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, no border | Parchment background, inline text |
|
||||
| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |
|
||||
| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |
|
||||
| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |
|
||||
| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active/pressed button states |
|
||||
|
||||
**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.
|
||||
|
||||
### Decorative Depth
|
||||
- **Light/Dark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections — entire sections shift elevation by changing the ambient light level.
|
||||
- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream tone IS the Claude personality
|
||||
- Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional
|
||||
- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments
|
||||
- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone
|
||||
- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows
|
||||
- Maintain the editorial serif/sans hierarchy — serif for content headlines, sans for UI
|
||||
- Use generous body line-height (1.60) for a literary reading experience
|
||||
- Alternate between light and dark sections to create chapter-like page rhythm
|
||||
- Apply generous border-radius (12–32px) for a soft, approachable feel
|
||||
|
||||
### Don't
|
||||
- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned
|
||||
- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs
|
||||
- Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted
|
||||
- Don't use sharp corners (< 6px radius) on buttons or cards — softness is core to the identity
|
||||
- Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts
|
||||
- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer
|
||||
- Don't use geometric/tech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling
|
||||
- Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality
|
||||
- Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code
|
||||
- Don't mix in sans-serif for headlines — the serif/sans split is the typographic identity
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |
|
||||
| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |
|
||||
| Large Mobile | 640–767px | Slightly wider content area |
|
||||
| Tablet | 768–991px | 2-column grids begin, condensed nav |
|
||||
| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use generous padding (8–16px vertical minimum)
|
||||
- Navigation links adequately spaced for thumb navigation
|
||||
- Card surfaces serve as large touch targets
|
||||
- Minimum recommended: 44x44px
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav collapses to hamburger on mobile
|
||||
- **Feature sections**: Multi-column → stacked single column
|
||||
- **Hero text**: 64px → 36px → ~25px progressive scaling
|
||||
- **Model cards**: 3-column → stacked vertical
|
||||
- **Section padding**: Reduces proportionally but maintains editorial rhythm
|
||||
- **Illustrations**: Scale proportionally, maintain aspect ratios
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale proportionally within rounded containers
|
||||
- Illustrations maintain quality at all sizes
|
||||
- Video embeds maintain 16:9 aspect ratio with rounded corners
|
||||
- No art direction changes between breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand CTA: "Terracotta Brand (#c96442)"
|
||||
- Page Background: "Parchment (#f5f4ed)"
|
||||
- Card Surface: "Ivory (#faf9f5)"
|
||||
- Primary Text: "Anthropic Near Black (#141413)"
|
||||
- Secondary Text: "Olive Gray (#5e5d59)"
|
||||
- Tertiary Text: "Stone Gray (#87867f)"
|
||||
- Borders (light): "Border Cream (#f0eee6)"
|
||||
- Dark Surface: "Dark Surface (#30302e)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius."
|
||||
- "Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px)."
|
||||
- "Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e)."
|
||||
- "Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px."
|
||||
- "Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans."
|
||||
|
||||
### Iteration Guide
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference specific color names — "use Olive Gray (#5e5d59)" not "make it gray"
|
||||
3. Always specify warm-toned variants — no cool grays
|
||||
4. Describe serif vs sans usage explicitly — "Anthropic Serif for the heading, Anthropic Sans for the label"
|
||||
5. For shadows, use "ring shadow (0px 0px 0px 1px)" or "whisper shadow" — never generic "drop shadow"
|
||||
6. Specify the warm background — "on Parchment (#f5f4ed)" or "on Near Black (#141413)"
|
||||
7. Keep illustrations organic and conceptual — describe "hand-drawn-feeling" style
|
||||
@@ -1,24 +1,3 @@
|
||||
# Claude Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [Claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/claude/design-md
|
||||
|
||||
@@ -1,803 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Claude</title>
|
||||
<style>
|
||||
:root {
|
||||
/* Primary */
|
||||
--color-near-black: #141413;
|
||||
--color-terracotta: #c96442;
|
||||
--color-coral: #d97757;
|
||||
/* Secondary & Accent */
|
||||
--color-error: #b53333;
|
||||
--color-focus-blue: #3898ec;
|
||||
/* Surface & Background */
|
||||
--color-parchment: #f5f4ed;
|
||||
--color-ivory: #faf9f5;
|
||||
--color-white: #ffffff;
|
||||
--color-warm-sand: #e8e6dc;
|
||||
--color-dark-surface: #30302e;
|
||||
--color-deep-dark: #141413;
|
||||
/* Neutrals & Text */
|
||||
--color-charcoal-warm: #4d4c48;
|
||||
--color-olive-gray: #5e5d59;
|
||||
--color-stone-gray: #87867f;
|
||||
--color-dark-warm: #3d3d3a;
|
||||
--color-warm-silver: #b0aea5;
|
||||
/* Borders & Rings */
|
||||
--color-border-cream: #f0eee6;
|
||||
--color-border-warm: #e8e6dc;
|
||||
--color-border-dark: #30302e;
|
||||
--color-ring-warm: #d1cfc5;
|
||||
--color-ring-deep: #c2c0b6;
|
||||
/* Fonts */
|
||||
--font-serif: Georgia, 'Times New Roman', Times, serif;
|
||||
--font-sans: Arial, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
/* Dark mode tokens */
|
||||
--bg-page: #141413;
|
||||
--bg-card: #30302e;
|
||||
--bg-nav: rgba(20,20,19,0.92);
|
||||
--text-primary: #faf9f5;
|
||||
--text-secondary: #87867f;
|
||||
--text-tertiary: #b0aea5;
|
||||
--border-color: #30302e;
|
||||
--border-subtle: #30302e;
|
||||
--section-label-color: #d97757;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.60;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-brand .logo-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--color-terracotta);
|
||||
border-radius: 8px;
|
||||
color: var(--color-ivory);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font-sans);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
background: var(--color-terracotta);
|
||||
color: var(--color-ivory);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(201,100,66,0.08) 0%, rgba(217,119,87,0.04) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 64px;
|
||||
font-weight: 500;
|
||||
line-height: 1.10;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.hero h1 span { color: var(--color-coral); }
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 20px;
|
||||
line-height: 1.60;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-brand {
|
||||
background: var(--color-terracotta);
|
||||
color: var(--color-ivory);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-dark-primary {
|
||||
background: var(--color-deep-dark);
|
||||
color: var(--color-warm-silver);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--color-dark-surface);
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.5px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
line-height: 1.20;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 48px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-whisper {
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: rgba(0,0,0,0.20) 0px 4px 24px;
|
||||
}
|
||||
.card-ring {
|
||||
border: none;
|
||||
box-shadow: 0px 0px 0px 1px #4d4c48;
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
line-height: 1.20;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.60; }
|
||||
.card-label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-coral);
|
||||
margin-bottom: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(217,119,87,0.12);
|
||||
border: 1px solid rgba(217,119,87,0.30);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--color-charcoal-warm);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-contained { border: 1px solid var(--color-dark-surface); }
|
||||
.elevation-ring { border: none; box-shadow: 0px 0px 0px 1px #4d4c48; }
|
||||
.elevation-whisper { border: 1px solid var(--color-dark-surface); box-shadow: rgba(0,0,0,0.20) 0px 4px 24px; }
|
||||
.elevation-inset { border: none; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.10); }
|
||||
.elevation-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-coral);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Try Claude</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Claude</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-brand">Explore Tokens</button>
|
||||
<button class="btn-dark-primary">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #141413; border-bottom: 1px solid #30302e;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Anthropic Near Black</div>
|
||||
<div class="color-swatch-hex">#141413</div>
|
||||
<div class="color-swatch-role">Primary text, dark-theme surface</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #c96442;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Terracotta Brand</div>
|
||||
<div class="color-swatch-hex">#c96442</div>
|
||||
<div class="color-swatch-role">Core brand color, primary CTA buttons</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d97757;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Coral Accent</div>
|
||||
<div class="color-swatch-hex">#d97757</div>
|
||||
<div class="color-swatch-role">Text accents, links on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #b53333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Error Crimson</div>
|
||||
<div class="color-swatch-hex">#b53333</div>
|
||||
<div class="color-swatch-role">Error states, warm red</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3898ec;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Focus Blue</div>
|
||||
<div class="color-swatch-hex">#3898ec</div>
|
||||
<div class="color-swatch-role">Input focus rings (only cool color)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f5f4ed; border-bottom: 1px solid #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Parchment</div>
|
||||
<div class="color-swatch-hex">#f5f4ed</div>
|
||||
<div class="color-swatch-role">Primary page background (light mode)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #faf9f5; border-bottom: 1px solid #f0eee6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ivory</div>
|
||||
<div class="color-swatch-hex">#faf9f5</div>
|
||||
<div class="color-swatch-role">Card surfaces, elevated containers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #f0eee6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Button surfaces, max contrast</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Warm Sand</div>
|
||||
<div class="color-swatch-hex">#e8e6dc</div>
|
||||
<div class="color-swatch-role">Button backgrounds, interactive surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #30302e;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Surface</div>
|
||||
<div class="color-swatch-hex">#30302e</div>
|
||||
<div class="color-swatch-role">Dark-theme containers, card backgrounds</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #4d4c48;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal Warm</div>
|
||||
<div class="color-swatch-hex">#4d4c48</div>
|
||||
<div class="color-swatch-role">Button text on light surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #5e5d59;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Olive Gray</div>
|
||||
<div class="color-swatch-hex">#5e5d59</div>
|
||||
<div class="color-swatch-role">Secondary body text (light mode)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #87867f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Stone Gray</div>
|
||||
<div class="color-swatch-hex">#87867f</div>
|
||||
<div class="color-swatch-role">Secondary text (dark), tertiary (light)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3d3d3a;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Warm</div>
|
||||
<div class="color-swatch-hex">#3d3d3a</div>
|
||||
<div class="color-swatch-role">Dark text links, emphasized secondary</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #b0aea5;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Warm Silver</div>
|
||||
<div class="color-swatch-hex">#b0aea5</div>
|
||||
<div class="color-swatch-role">Tertiary text on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic & Borders</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f0eee6; border-bottom: 1px solid #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Cream</div>
|
||||
<div class="color-swatch-hex">#f0eee6</div>
|
||||
<div class="color-swatch-role">Standard light-theme border</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Warm</div>
|
||||
<div class="color-swatch-hex">#e8e6dc</div>
|
||||
<div class="color-swatch-role">Prominent borders, section dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d1cfc5;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Warm</div>
|
||||
<div class="color-swatch-hex">#d1cfc5</div>
|
||||
<div class="color-swatch-role">Button hover/focus ring shadow</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #c2c0b6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Deep</div>
|
||||
<div class="color-swatch-hex">#c2c0b6</div>
|
||||
<div class="color-swatch-role">Active/pressed ring states</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 64px; font-weight: 500; line-height: 1.10;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 500 / 1.10 / normal — Anthropic Serif (Georgia fallback)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 52px; font-weight: 500; line-height: 1.20;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 52px / 500 / 1.20 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1.30;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 36px / 500 / 1.30 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.10;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 32px / 500 / 1.10 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.20;">Sub-heading Small</div>
|
||||
<div class="type-sample-label">Sub-heading Small — 25px / 500 / 1.20 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.60; color: var(--text-secondary);">Body serif text for editorial passages. The generous 1.60 line-height creates a literary reading experience closer to a book than a dashboard, with warm tones throughout.</div>
|
||||
<div class="type-sample-label">Body Serif — 17px / 400 / 1.60 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.60;">Body Large Sans</div>
|
||||
<div class="type-sample-label">Body Large — 20px / 400 / 1.60 / normal — Anthropic Sans (Arial fallback)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.60;">Standard body text for UI copy, navigation, and button labels. Anthropic Sans handles all functional text with quiet efficiency.</div>
|
||||
<div class="type-sample-label">Body Standard — 16px / 400 / 1.60 / normal — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.43 / normal — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.60; letter-spacing: 0.12px; color: var(--text-tertiary);">LABEL TEXT</div>
|
||||
<div class="type-sample-label">Label — 12px / 500 / 1.60 / 0.12px — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.60; letter-spacing: -0.32px;">const response = await claude.messages.create()</div>
|
||||
<div class="type-sample-label">Code — 15px / 400 / 1.60 / -0.32px — Anthropic Mono (SFMono fallback)</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button style="background: #e8e6dc; color: #4d4c48; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;">Warm Sand</button>
|
||||
<div class="button-demo-label">Warm Sand (Secondary)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #ffffff; color: #141413; padding: 8px 16px 8px 12px; border: 1px solid #f0eee6; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;">White Surface</button>
|
||||
<div class="button-demo-label">White Surface</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #30302e; color: #faf9f5; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;">Dark Charcoal</button>
|
||||
<div class="button-demo-label">Dark Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #c96442; color: #faf9f5; padding: 10px 20px; border: none; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;">Brand CTA</button>
|
||||
<div class="button-demo-label">Terracotta Brand</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #141413; color: #b0aea5; padding: 9.6px 16.8px; border: 1px solid #30302e; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;">Dark Primary</button>
|
||||
<div class="button-demo-label">Dark Primary</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Dark Surface Contained</h3>
|
||||
<p>Standard content card with 1px solid Dark Surface border and 12px radius. The default container on the dark Near Black canvas.</p>
|
||||
</div>
|
||||
<div class="card card-whisper">
|
||||
<div class="card-label">Whisper Shadow</div>
|
||||
<h3>Soft Elevated Card</h3>
|
||||
<p>Elevated card with deeper shadow on dark surfaces. The 0.20 opacity and 24px blur create subtle depth against the dark canvas.</p>
|
||||
</div>
|
||||
<div class="card card-ring">
|
||||
<div class="card-label">Ring Shadow</div>
|
||||
<h3>Warm Ring Halo</h3>
|
||||
<p>Interactive card using the signature ring shadow. On dark surfaces the ring uses Charcoal Warm for a subtle warm boundary.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px; font-family: var(--font-sans);">Base unit: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 12px; height: 12px;"></div><div class="spacing-label">3px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 120px; height: 120px;"></div><div class="spacing-label">30px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtly rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortably rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-label">12px</div><div class="radius-context">Generously rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Very rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 24px;"></div><div class="radius-label">24px</div><div class="radius-context">Highly rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 32px;"></div><div class="radius-label">32px</div><div class="radius-context">Maximum rounded</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Near Black background and inline text.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid Dark Surface. Standard cards and sections.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-ring">
|
||||
<div><div class="elevation-name">Ring</div><div class="elevation-desc">0px 0px 0px 1px ring shadow using Charcoal Warm. Interactive cards, buttons, hover states.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-whisper">
|
||||
<div><div class="elevation-name">Whisper</div><div class="elevation-desc">rgba(0,0,0,0.20) 0px 4px 24px. Deeper shadow on dark canvas for elevated cards.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-inset">
|
||||
<div><div class="elevation-name">Inset</div><div class="elevation-desc">inset 0px 0px 0px 1px at 10% white opacity. Active/pressed button states on dark.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,826 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Claude</title>
|
||||
<style>
|
||||
:root {
|
||||
/* Primary */
|
||||
--color-near-black: #141413;
|
||||
--color-terracotta: #c96442;
|
||||
--color-coral: #d97757;
|
||||
/* Secondary & Accent */
|
||||
--color-error: #b53333;
|
||||
--color-focus-blue: #3898ec;
|
||||
/* Surface & Background */
|
||||
--color-parchment: #f5f4ed;
|
||||
--color-ivory: #faf9f5;
|
||||
--color-white: #ffffff;
|
||||
--color-warm-sand: #e8e6dc;
|
||||
--color-dark-surface: #30302e;
|
||||
--color-deep-dark: #141413;
|
||||
/* Neutrals & Text */
|
||||
--color-charcoal-warm: #4d4c48;
|
||||
--color-olive-gray: #5e5d59;
|
||||
--color-stone-gray: #87867f;
|
||||
--color-dark-warm: #3d3d3a;
|
||||
--color-warm-silver: #b0aea5;
|
||||
/* Borders & Rings */
|
||||
--color-border-cream: #f0eee6;
|
||||
--color-border-warm: #e8e6dc;
|
||||
--color-border-dark: #30302e;
|
||||
--color-ring-warm: #d1cfc5;
|
||||
--color-ring-deep: #c2c0b6;
|
||||
/* Fonts */
|
||||
--font-serif: Georgia, 'Times New Roman', Times, serif;
|
||||
--font-sans: Arial, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
/* Light mode tokens */
|
||||
--bg-page: #f5f4ed;
|
||||
--bg-card: #faf9f5;
|
||||
--bg-nav: rgba(245,244,237,0.92);
|
||||
--text-primary: #141413;
|
||||
--text-secondary: #5e5d59;
|
||||
--text-tertiary: #87867f;
|
||||
--border-color: #f0eee6;
|
||||
--border-subtle: #f0eee6;
|
||||
--section-label-color: #c96442;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.60;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-brand .logo-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--color-terracotta);
|
||||
border-radius: 8px;
|
||||
color: var(--color-ivory);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font-sans);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
background: var(--color-terracotta);
|
||||
color: var(--color-ivory);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(201,100,66,0.06) 0%, rgba(217,119,87,0.03) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 64px;
|
||||
font-weight: 500;
|
||||
line-height: 1.10;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.hero h1 span { color: var(--color-terracotta); }
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 20px;
|
||||
line-height: 1.60;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-brand {
|
||||
background: var(--color-terracotta);
|
||||
color: var(--color-ivory);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-warm-sand {
|
||||
background: var(--color-warm-sand);
|
||||
color: var(--color-charcoal-warm);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.5px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
line-height: 1.20;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 48px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
.btn-white {
|
||||
background: var(--color-white);
|
||||
color: var(--color-near-black);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark {
|
||||
background: var(--color-dark-surface);
|
||||
color: var(--color-ivory);
|
||||
padding: 9.6px 16.8px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-whisper {
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: rgba(0,0,0,0.05) 0px 4px 24px;
|
||||
}
|
||||
.card-ring {
|
||||
border: none;
|
||||
box-shadow: 0px 0px 0px 1px var(--color-ring-warm);
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
line-height: 1.20;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.60; }
|
||||
.card-label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-terracotta);
|
||||
margin-bottom: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(201,100,66,0.10);
|
||||
border: 1px solid rgba(201,100,66,0.25);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--color-border-warm);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-contained { border: 1px solid var(--color-border-cream); }
|
||||
.elevation-ring { border: none; box-shadow: 0px 0px 0px 1px var(--color-ring-warm); }
|
||||
.elevation-whisper { border: 1px solid var(--color-border-cream); box-shadow: rgba(0,0,0,0.05) 0px 4px 24px; }
|
||||
.elevation-inset { border: none; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15); }
|
||||
.elevation-name {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-terracotta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Try Claude</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Claude</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-brand">Explore Tokens</button>
|
||||
<button class="btn-warm-sand">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #141413; border-bottom: 1px solid #30302e;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Anthropic Near Black</div>
|
||||
<div class="color-swatch-hex">#141413</div>
|
||||
<div class="color-swatch-role">Primary text, dark-theme surface</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #c96442;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Terracotta Brand</div>
|
||||
<div class="color-swatch-hex">#c96442</div>
|
||||
<div class="color-swatch-role">Core brand color, primary CTA buttons</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d97757;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Coral Accent</div>
|
||||
<div class="color-swatch-hex">#d97757</div>
|
||||
<div class="color-swatch-role">Text accents, links on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #b53333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Error Crimson</div>
|
||||
<div class="color-swatch-hex">#b53333</div>
|
||||
<div class="color-swatch-role">Error states, warm red</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3898ec;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Focus Blue</div>
|
||||
<div class="color-swatch-hex">#3898ec</div>
|
||||
<div class="color-swatch-role">Input focus rings (only cool color)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f5f4ed; border-bottom: 1px solid #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Parchment</div>
|
||||
<div class="color-swatch-hex">#f5f4ed</div>
|
||||
<div class="color-swatch-role">Primary page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #faf9f5; border-bottom: 1px solid #f0eee6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ivory</div>
|
||||
<div class="color-swatch-hex">#faf9f5</div>
|
||||
<div class="color-swatch-role">Card surfaces, elevated containers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #f0eee6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Button surfaces, max contrast</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Warm Sand</div>
|
||||
<div class="color-swatch-hex">#e8e6dc</div>
|
||||
<div class="color-swatch-role">Button backgrounds, interactive surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #30302e; border-bottom: 1px solid #4d4c48;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Surface</div>
|
||||
<div class="color-swatch-hex">#30302e</div>
|
||||
<div class="color-swatch-role">Dark-theme containers, nav borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #4d4c48;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal Warm</div>
|
||||
<div class="color-swatch-hex">#4d4c48</div>
|
||||
<div class="color-swatch-role">Button text on light surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #5e5d59;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Olive Gray</div>
|
||||
<div class="color-swatch-hex">#5e5d59</div>
|
||||
<div class="color-swatch-role">Secondary body text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #87867f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Stone Gray</div>
|
||||
<div class="color-swatch-hex">#87867f</div>
|
||||
<div class="color-swatch-role">Tertiary text, footnotes, metadata</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3d3d3a;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Warm</div>
|
||||
<div class="color-swatch-hex">#3d3d3a</div>
|
||||
<div class="color-swatch-role">Dark text links, emphasized secondary</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #b0aea5;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Warm Silver</div>
|
||||
<div class="color-swatch-hex">#b0aea5</div>
|
||||
<div class="color-swatch-role">Text on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic & Borders</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f0eee6; border-bottom: 1px solid #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Cream</div>
|
||||
<div class="color-swatch-hex">#f0eee6</div>
|
||||
<div class="color-swatch-role">Standard light-theme border</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e8e6dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Warm</div>
|
||||
<div class="color-swatch-hex">#e8e6dc</div>
|
||||
<div class="color-swatch-role">Prominent borders, section dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d1cfc5;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Warm</div>
|
||||
<div class="color-swatch-hex">#d1cfc5</div>
|
||||
<div class="color-swatch-role">Button hover/focus ring shadow</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #c2c0b6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Deep</div>
|
||||
<div class="color-swatch-hex">#c2c0b6</div>
|
||||
<div class="color-swatch-role">Active/pressed ring states</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 64px; font-weight: 500; line-height: 1.10;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 500 / 1.10 / normal — Anthropic Serif (Georgia fallback)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 52px; font-weight: 500; line-height: 1.20;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 52px / 500 / 1.20 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1.30;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 36px / 500 / 1.30 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.10;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 32px / 500 / 1.10 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.20;">Sub-heading Small</div>
|
||||
<div class="type-sample-label">Sub-heading Small — 25px / 500 / 1.20 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.60; color: var(--text-secondary);">Body serif text for editorial passages. The generous 1.60 line-height creates a literary reading experience closer to a book than a dashboard, with warm tones throughout.</div>
|
||||
<div class="type-sample-label">Body Serif — 17px / 400 / 1.60 / normal — Anthropic Serif</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.60;">Body Large Sans</div>
|
||||
<div class="type-sample-label">Body Large — 20px / 400 / 1.60 / normal — Anthropic Sans (Arial fallback)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.60;">Standard body text for UI copy, navigation, and button labels. Anthropic Sans handles all functional text with quiet efficiency.</div>
|
||||
<div class="type-sample-label">Body Standard — 16px / 400 / 1.60 / normal — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.43 / normal — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: Arial, system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.60; letter-spacing: 0.12px; color: var(--text-tertiary);">LABEL TEXT</div>
|
||||
<div class="type-sample-label">Label — 12px / 500 / 1.60 / 0.12px — Anthropic Sans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.60; letter-spacing: -0.32px;">const response = await claude.messages.create()</div>
|
||||
<div class="type-sample-label">Code — 15px / 400 / 1.60 / -0.32px — Anthropic Mono (SFMono fallback)</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button style="background: #e8e6dc; color: #4d4c48; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;">Warm Sand</button>
|
||||
<div class="button-demo-label">Warm Sand (Secondary)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #ffffff; color: #141413; padding: 8px 16px 8px 12px; border: 1px solid #f0eee6; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;">White Surface</button>
|
||||
<div class="button-demo-label">White Surface</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #30302e; color: #faf9f5; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;">Dark Charcoal</button>
|
||||
<div class="button-demo-label">Dark Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #c96442; color: #faf9f5; padding: 10px 20px; border: none; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;">Brand CTA</button>
|
||||
<div class="button-demo-label">Terracotta Brand</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: #141413; color: #b0aea5; padding: 9.6px 16.8px; border: 1px solid #30302e; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;">Dark Primary</button>
|
||||
<div class="button-demo-label">Dark Primary</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Cream Contained</h3>
|
||||
<p>Standard content card with 1px solid Border Cream and 8px radius. The default container for features and content sections on Ivory surface.</p>
|
||||
</div>
|
||||
<div class="card card-whisper">
|
||||
<div class="card-label">Whisper Shadow</div>
|
||||
<h3>Soft Elevated Card</h3>
|
||||
<p>Elevated card with whisper-soft shadow at 0.05 opacity and 24px blur. Suggests floating rather than casting. For featured product screenshots.</p>
|
||||
</div>
|
||||
<div class="card card-ring">
|
||||
<div class="card-label">Ring Shadow</div>
|
||||
<h3>Warm Ring Halo</h3>
|
||||
<p>Interactive card using Claude's signature ring shadow system. The 0px 0px 0px 1px pattern creates a border-like halo that is softer than a true border.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px; font-family: var(--font-sans);">Base unit: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 12px; height: 12px;"></div><div class="spacing-label">3px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 120px; height: 120px;"></div><div class="spacing-label">30px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtly rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortably rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-label">12px</div><div class="radius-context">Generously rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Very rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 24px;"></div><div class="radius-label">24px</div><div class="radius-context">Highly rounded</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 32px;"></div><div class="radius-label">32px</div><div class="radius-context">Maximum rounded</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Parchment background and inline text.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid Border Cream. Standard cards and sections.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-ring">
|
||||
<div><div class="elevation-name">Ring</div><div class="elevation-desc">0px 0px 0px 1px ring shadow using warm grays. Interactive cards, buttons, hover states.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-whisper">
|
||||
<div><div class="elevation-name">Whisper</div><div class="elevation-desc">rgba(0,0,0,0.05) 0px 4px 24px. Elevated feature cards, product screenshots.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-inset">
|
||||
<div><div class="elevation-name">Inset</div><div class="elevation-desc">inset 0px 0px 0px 1px at 15% opacity. Active/pressed button states.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,304 +0,0 @@
|
||||
# Design System Inspiration of Clay
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
|
||||
|
||||
The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
|
||||
|
||||
What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
|
||||
- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
|
||||
- Roobert font with 5 OpenType stylistic sets — quirky geometric character
|
||||
- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
|
||||
- Space Mono for code and technical labels
|
||||
- Generous border radius: 24px cards, 40px sections, 1584px pills
|
||||
- Mixed border styles: solid + dashed in the same interface
|
||||
- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
|
||||
- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
|
||||
- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
|
||||
|
||||
### Swatch Palette — Named Colors
|
||||
|
||||
**Matcha (Green)**
|
||||
- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
|
||||
- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
|
||||
- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
|
||||
|
||||
**Slushie (Cyan)**
|
||||
- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
|
||||
- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
|
||||
|
||||
**Lemon (Gold)**
|
||||
- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
|
||||
- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
|
||||
- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
|
||||
- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
|
||||
|
||||
**Ube (Purple)**
|
||||
- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
|
||||
- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
|
||||
- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
|
||||
|
||||
**Pomegranate (Pink/Red)**
|
||||
- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
|
||||
|
||||
**Blueberry (Navy Blue)**
|
||||
- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
|
||||
|
||||
### Neutral Scale (Warm)
|
||||
- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
|
||||
- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
|
||||
- **Dark Charcoal** (`#333333`): Link text on light backgrounds
|
||||
|
||||
### Surface & Border
|
||||
- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
|
||||
- **Oat Light** (`#eee9df`): Secondary lighter border
|
||||
- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
|
||||
- **Dark Border** (`#525a69`): Border on dark sections
|
||||
- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
|
||||
|
||||
### Badges
|
||||
- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
|
||||
- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
|
||||
- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
|
||||
|
||||
### Shadows
|
||||
- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
|
||||
- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary**: `Roobert`, fallback: `Arial`
|
||||
- **Monospace**: `Space Mono`
|
||||
- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
|
||||
| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
|
||||
| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
|
||||
| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
|
||||
| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
|
||||
| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
|
||||
| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
|
||||
| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
|
||||
| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
|
||||
| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
|
||||
| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
|
||||
| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
|
||||
| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
|
||||
| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
|
||||
| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
|
||||
|
||||
### Principles
|
||||
- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
|
||||
- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
|
||||
- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
|
||||
- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Transparent with Hover Animation)**
|
||||
- Background: transparent (`rgba(239, 241, 243, 0)`)
|
||||
- Text: `#000000`
|
||||
- Padding: 6.4px 12.8px
|
||||
- Border: none (or `1px solid #717989` for outlined variant)
|
||||
- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
|
||||
- Focus: `rgb(20, 110, 245) solid 2px` outline
|
||||
|
||||
**White Solid**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Padding: 6.4px
|
||||
- Hover: oat-200 swatch color, animated rotation + shadow
|
||||
- Use: Primary CTA on colored sections
|
||||
|
||||
**Ghost Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#000000`
|
||||
- Padding: 8px
|
||||
- Border: `1px solid #717989`
|
||||
- Radius: 4px
|
||||
- Hover: dragonfruit swatch color, white text, animated rotation
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff` on cream canvas
|
||||
- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
|
||||
- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
|
||||
- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
|
||||
- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
|
||||
|
||||
### Inputs & Forms
|
||||
- Text: `#000000`
|
||||
- Border: `1px solid #717989`
|
||||
- Radius: 4px
|
||||
- Focus: `rgb(20, 110, 245) solid 2px` outline
|
||||
|
||||
### Navigation
|
||||
- Sticky top nav on cream background
|
||||
- Roobert 15px weight 500 for nav links
|
||||
- Clay logo left-aligned
|
||||
- CTA buttons right-aligned with pill radius
|
||||
- Border bottom: `1px solid #dad4c8`
|
||||
- Mobile: hamburger collapse at 767px
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots in white cards with oat borders
|
||||
- Colorful illustrated sections with swatch background colors
|
||||
- 8px–24px radius on images
|
||||
- Full-width colorful section backgrounds
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Swatch Color Sections**
|
||||
- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
|
||||
- White text on dark swatches, black text on light swatches
|
||||
- Each section tells a distinct product story through its color
|
||||
|
||||
**Playful Hover Buttons**
|
||||
- Rotate -8deg + translate upward on hover
|
||||
- Hard offset shadow (`-7px 7px`) instead of soft blur
|
||||
- Background transitions to contrasting swatch color
|
||||
- Creates a physical, toy-like interaction quality
|
||||
|
||||
**Dashed Border Elements**
|
||||
- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
|
||||
- Used for secondary containers and decorative elements
|
||||
- Adds a hand-drawn, craft-like quality
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered
|
||||
- Feature sections alternate between white cards and colorful swatch backgrounds
|
||||
- Card grids: 2–3 columns on desktop
|
||||
- Full-width colorful sections break the grid
|
||||
- Footer with generous 40px radius container
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
|
||||
- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
|
||||
- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Ghost buttons, inputs
|
||||
- Standard (8px): Small cards, images, links
|
||||
- Badge (11px): Tag badges
|
||||
- Card (12px): Standard cards, buttons
|
||||
- Feature (24px): Feature cards, images, panels
|
||||
- Section (40px): Large sections, footer, containers
|
||||
- Pill (1584px): CTAs, pill-shaped buttons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, cream canvas | Page background |
|
||||
| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
|
||||
| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
|
||||
| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
|
||||
|
||||
**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
|
||||
|
||||
### Decorative Depth
|
||||
- Full-width swatch-colored sections create dramatic depth through color contrast
|
||||
- Dashed borders add visual texture alongside solid borders
|
||||
- Product illustrations with warm, organic art style
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
|
||||
- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
|
||||
- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
|
||||
- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
|
||||
- Use warm oat borders (`#dad4c8`) — not neutral gray
|
||||
- Mix solid and dashed borders for visual variety
|
||||
- Use generous radius: 24px for cards, 40px for sections
|
||||
- Use weight 600 exclusively for headings, 500 for UI, 400 for body
|
||||
|
||||
### Don't
|
||||
- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
|
||||
- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
|
||||
- Don't mix more than 2 swatch colors in the same section
|
||||
- Don't skip the OpenType stylistic sets — they define Roobert's character
|
||||
- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
|
||||
- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
|
||||
- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
|
||||
- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <479px | Single column, tight padding |
|
||||
| Mobile | 479–767px | Standard mobile, stacked layout |
|
||||
| Tablet | 768–991px | 2-column grids, condensed nav |
|
||||
| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
|
||||
- Nav links: 15px font with generous spacing
|
||||
- Mobile: full-width buttons for easy tapping
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 80px → 60px → smaller display text
|
||||
- Navigation: horizontal → hamburger at 767px
|
||||
- Feature sections: multi-column → stacked
|
||||
- Colorful sections: maintain full-width but compress padding
|
||||
- Card grids: 3-column → 2-column → single column
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale proportionally
|
||||
- Colorful section illustrations adapt to viewport width
|
||||
- Rounded corners maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Warm Cream (`#faf9f7`)
|
||||
- Text: Clay Black (`#000000`)
|
||||
- Secondary text: Warm Silver (`#9f9b93`)
|
||||
- Border: Oat Border (`#dad4c8`)
|
||||
- Green accent: Matcha 600 (`#078a52`)
|
||||
- Cyan accent: Slushie 500 (`#3bd3fd`)
|
||||
- Gold accent: Lemon 500 (`#fbbd41`)
|
||||
- Purple accent: Ube 800 (`#43089f`)
|
||||
- Pink accent: Pomegranate 400 (`#fc7981`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
|
||||
- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
|
||||
- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
|
||||
- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
|
||||
- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with warm cream (#faf9f7) — never cool white
|
||||
2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
|
||||
3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
|
||||
4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
|
||||
5. Hover animations are the signature — rotation + hard shadow, not subtle fades
|
||||
6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
|
||||
7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
|
||||
@@ -1,23 +1,3 @@
|
||||
# Clay Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [Clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/clay/design-md
|
||||
|
||||
@@ -1,316 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Clay</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #1a1815;
|
||||
--black: #f0ede8;
|
||||
--white: #242220;
|
||||
--oat: #3d3a35;
|
||||
--oat-light: #2e2b27;
|
||||
--silver: #7a766e;
|
||||
--charcoal: #a09c94;
|
||||
--matcha-300: #84e7a5;
|
||||
--matcha-600: #078a52;
|
||||
--matcha-800: #02492a;
|
||||
--slushie-500: #3bd3fd;
|
||||
--slushie-800: #0089ad;
|
||||
--lemon-400: #f8cc65;
|
||||
--lemon-500: #fbbd41;
|
||||
--ube-300: #c1b0ff;
|
||||
--ube-800: #43089f;
|
||||
--pomegranate-400: #fc7981;
|
||||
--blueberry-800: #01418d;
|
||||
--badge-bg: #f0f8ff;
|
||||
--badge-text: #3859f9;
|
||||
--focus: rgb(20,110,245);
|
||||
--font-sans: 'DM Sans', Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--black);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 32px;
|
||||
background: rgba(26,24,21,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--oat);
|
||||
}
|
||||
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--black); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }
|
||||
|
||||
.hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }
|
||||
.hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
|
||||
.btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }
|
||||
.section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }
|
||||
.color-swatch-block { height: 68px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px; }
|
||||
.color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }
|
||||
.card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }
|
||||
.card-colored { border-radius: 24px; padding: 24px; color: var(--white); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
|
||||
.card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 16px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
|
||||
.form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }
|
||||
.form-input:focus { outline: 2px solid var(--focus); }
|
||||
.form-input--focus { outline: 2px solid var(--focus); }
|
||||
.form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }
|
||||
.form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }
|
||||
.form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
.radius-context { font-size: 9px; color: var(--charcoal); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--matcha-600); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero h1 { font-size: 44px; letter-spacing: -1.32px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#fbbd41;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:11px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Clay</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-solid" href="#">Start Building</a>
|
||||
<a class="btn-outline" href="#">Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Clay Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Cards, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f7</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Swatch Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#84e7a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 300</div><div class="color-swatch-hex">#84e7a5</div><div class="color-swatch-role">Light green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#078a52"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 600</div><div class="color-swatch-hex">#078a52</div><div class="color-swatch-role">Mid green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#02492a"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 800</div><div class="color-swatch-hex">#02492a</div><div class="color-swatch-role">Deep green sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3bd3fd"></div><div class="color-swatch-info"><div class="color-swatch-name">Slushie 500</div><div class="color-swatch-hex">#3bd3fd</div><div class="color-swatch-role">Bright cyan</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fbbd41"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon 500</div><div class="color-swatch-hex">#fbbd41</div><div class="color-swatch-role">Primary gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1b0ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 300</div><div class="color-swatch-hex">#c1b0ff</div><div class="color-swatch-role">Soft lavender</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#43089f"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 800</div><div class="color-swatch-hex">#43089f</div><div class="color-swatch-role">Deep purple</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fc7981"></div><div class="color-swatch-info"><div class="color-swatch-name">Pomegranate 400</div><div class="color-swatch-hex">#fc7981</div><div class="color-swatch-role">Coral pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#01418d"></div><div class="color-swatch-info"><div class="color-swatch-name">Blueberry 800</div><div class="color-swatch-hex">#01418d</div><div class="color-swatch-role">Deep navy</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9f9b93"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#9f9b93</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#55534e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#55534e</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dad4c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dad4c8</div><div class="color-swatch-role">Primary border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eee9df"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Light</div><div class="color-swatch-hex">#eee9df</div><div class="color-swatch-role">Secondary border</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;">Display Hero</div><div class="type-meta">Display — 80px / 600 / 1.00 / -3.2px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;">Display Secondary</div><div class="type-meta">Secondary — 60px / 600 / 1.00 / -2.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;">Section Heading</div><div class="type-meta">Section — 44px / 600 / 1.10 / -1.32px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;">Card Heading</div><div class="type-meta">Card — 32px / 600 / 1.10 / -0.64px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.40 / -0.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.</div><div class="type-meta">Body — 18px / 400 / 1.60 / -0.36px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;">Button — Start your free trial</div><div class="type-meta">Button — 16px / 500 / 1.50 / -0.16px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Caption — Updated 3 minutes ago</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;">Uppercase Label</div><div class="type-meta">Label — 12px / 600 / uppercase / 1.08px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);">clay.people.enrich({ email: 'user@company.com' })</div><div class="type-meta">Code — 14px / 400 / Space Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-solid" href="#">Start Building</a><div class="button-label">Primary Solid</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Card</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">View Docs</a><div class="button-label">Ghost Outlined</div></div>
|
||||
<div class="button-item"><span class="card-badge" style="background:var(--badge-bg); color:var(--badge-text);">NEW FEATURE</span><div class="button-label">Badge</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--silver); margin-top:16px;">Hover over buttons to see the playful rotateZ + hard shadow animation.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(7,138,82,0.1); color:var(--matcha-600);">Data Enrichment</div>
|
||||
<h3>Turn data into action</h3>
|
||||
<p style="color:var(--charcoal);">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.</p>
|
||||
</div>
|
||||
<div class="card-dashed">
|
||||
<div class="card-badge" style="background:rgba(67,8,159,0.1); color:var(--ube-800);">Dashed Border</div>
|
||||
<h3>Flexible integrations</h3>
|
||||
<p style="color:var(--charcoal);">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.</p>
|
||||
</div>
|
||||
<div class="card-colored" style="background:var(--matcha-800);">
|
||||
<div class="card-badge" style="background:rgba(132,231,165,0.2); color:var(--matcha-300);">Colored Section</div>
|
||||
<h3>Growth on autopilot</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);">Full-width colored section using the Matcha 800 swatch background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Company Name</label><input class="form-input" type="text" placeholder="Acme Corp"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@clay.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (pomegranate ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Add enrichment notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">CTAs</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Cream canvas</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;"><div class="elevation-label">Level 1: Clay</div><div class="elevation-desc">Multi-layer + inset</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);"><div class="elevation-label">Level 2: Hover Hard</div><div class="elevation-desc">Hard offset shadow</div></div>
|
||||
<div class="elevation-card" style="outline: 2px solid rgb(20,110,245);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,315 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Clay</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #faf9f7;
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--oat: #dad4c8;
|
||||
--oat-light: #eee9df;
|
||||
--silver: #9f9b93;
|
||||
--charcoal: #55534e;
|
||||
--matcha-300: #84e7a5;
|
||||
--matcha-600: #078a52;
|
||||
--matcha-800: #02492a;
|
||||
--slushie-500: #3bd3fd;
|
||||
--slushie-800: #0089ad;
|
||||
--lemon-400: #f8cc65;
|
||||
--lemon-500: #fbbd41;
|
||||
--ube-300: #c1b0ff;
|
||||
--ube-800: #43089f;
|
||||
--pomegranate-400: #fc7981;
|
||||
--blueberry-800: #01418d;
|
||||
--badge-bg: #f0f8ff;
|
||||
--badge-text: #3859f9;
|
||||
--focus: rgb(20,110,245);
|
||||
--font-sans: 'DM Sans', Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--black);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 32px;
|
||||
background: rgba(250,249,247,0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--oat);
|
||||
}
|
||||
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--black); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }
|
||||
|
||||
.hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }
|
||||
.hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
|
||||
.btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }
|
||||
.section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }
|
||||
.color-swatch-block { height: 68px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px; }
|
||||
.color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }
|
||||
.card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }
|
||||
.card-colored { border-radius: 24px; padding: 24px; color: var(--white); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
|
||||
.card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 16px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
|
||||
.form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }
|
||||
.form-input:focus { outline: 2px solid var(--focus); }
|
||||
.form-input--focus { outline: 2px solid var(--focus); }
|
||||
.form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }
|
||||
.form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }
|
||||
.form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
.radius-context { font-size: 9px; color: var(--charcoal); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--matcha-600); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero h1 { font-size: 44px; letter-spacing: -1.32px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Clay</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-solid" href="#">Start Building</a>
|
||||
<a class="btn-outline" href="#">Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Clay Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Cards, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f7</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Swatch Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#84e7a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 300</div><div class="color-swatch-hex">#84e7a5</div><div class="color-swatch-role">Light green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#078a52"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 600</div><div class="color-swatch-hex">#078a52</div><div class="color-swatch-role">Mid green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#02492a"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 800</div><div class="color-swatch-hex">#02492a</div><div class="color-swatch-role">Deep green sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3bd3fd"></div><div class="color-swatch-info"><div class="color-swatch-name">Slushie 500</div><div class="color-swatch-hex">#3bd3fd</div><div class="color-swatch-role">Bright cyan</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fbbd41"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon 500</div><div class="color-swatch-hex">#fbbd41</div><div class="color-swatch-role">Primary gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1b0ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 300</div><div class="color-swatch-hex">#c1b0ff</div><div class="color-swatch-role">Soft lavender</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#43089f"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 800</div><div class="color-swatch-hex">#43089f</div><div class="color-swatch-role">Deep purple</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fc7981"></div><div class="color-swatch-info"><div class="color-swatch-name">Pomegranate 400</div><div class="color-swatch-hex">#fc7981</div><div class="color-swatch-role">Coral pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#01418d"></div><div class="color-swatch-info"><div class="color-swatch-name">Blueberry 800</div><div class="color-swatch-hex">#01418d</div><div class="color-swatch-role">Deep navy</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9f9b93"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#9f9b93</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#55534e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#55534e</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dad4c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dad4c8</div><div class="color-swatch-role">Primary border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eee9df"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Light</div><div class="color-swatch-hex">#eee9df</div><div class="color-swatch-role">Secondary border</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;">Display Hero</div><div class="type-meta">Display — 80px / 600 / 1.00 / -3.2px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;">Display Secondary</div><div class="type-meta">Secondary — 60px / 600 / 1.00 / -2.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;">Section Heading</div><div class="type-meta">Section — 44px / 600 / 1.10 / -1.32px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;">Card Heading</div><div class="type-meta">Card — 32px / 600 / 1.10 / -0.64px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.40 / -0.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.</div><div class="type-meta">Body — 18px / 400 / 1.60 / -0.36px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;">Button — Start your free trial</div><div class="type-meta">Button — 16px / 500 / 1.50 / -0.16px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Caption — Updated 3 minutes ago</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;">Uppercase Label</div><div class="type-meta">Label — 12px / 600 / uppercase / 1.08px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);">clay.people.enrich({ email: 'user@company.com' })</div><div class="type-meta">Code — 14px / 400 / Space Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-solid" href="#">Start Building</a><div class="button-label">Primary Solid</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Card</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">View Docs</a><div class="button-label">Ghost Outlined</div></div>
|
||||
<div class="button-item"><span class="card-badge" style="background:var(--badge-bg); color:var(--badge-text);">NEW FEATURE</span><div class="button-label">Badge</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--silver); margin-top:16px;">Hover over buttons to see the playful rotateZ + hard shadow animation.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(7,138,82,0.1); color:var(--matcha-600);">Data Enrichment</div>
|
||||
<h3>Turn data into action</h3>
|
||||
<p style="color:var(--charcoal);">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.</p>
|
||||
</div>
|
||||
<div class="card-dashed">
|
||||
<div class="card-badge" style="background:rgba(67,8,159,0.1); color:var(--ube-800);">Dashed Border</div>
|
||||
<h3>Flexible integrations</h3>
|
||||
<p style="color:var(--charcoal);">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.</p>
|
||||
</div>
|
||||
<div class="card-colored" style="background:var(--matcha-800);">
|
||||
<div class="card-badge" style="background:rgba(132,231,165,0.2); color:var(--matcha-300);">Colored Section</div>
|
||||
<h3>Growth on autopilot</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);">Full-width colored section using the Matcha 800 swatch background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Company Name</label><input class="form-input" type="text" placeholder="Acme Corp"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@clay.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (pomegranate ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Add enrichment notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">CTAs</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Cream canvas</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;"><div class="elevation-label">Level 1: Clay</div><div class="elevation-desc">Multi-layer + inset</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);"><div class="elevation-label">Level 2: Hover Hard</div><div class="elevation-desc">Hard offset shadow</div></div>
|
||||
<div class="elevation-card" style="outline: 2px solid rgb(20,110,245);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,281 +0,0 @@
|
||||
# Design System Inspiration of ClickHouse
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.
|
||||
|
||||
The typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.
|
||||
|
||||
What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast
|
||||
- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
|
||||
- Dark charcoal card system with #414141 borders at 80% opacity
|
||||
- Forest green (#166534) secondary CTA buttons
|
||||
- Performance stats as oversized display numbers
|
||||
- Uppercase labels with wide letter-spacing (1.4px) for navigation structure
|
||||
- Active/pressed state shifts text to pale yellow (#f4f692)
|
||||
- All links hover to neon yellow-green — unified interactive signal
|
||||
- Inset shadows on select elements creating "pressed into the surface" depth
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
|
||||
- **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
|
||||
- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Pale Yellow** (`#f4f692`): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.
|
||||
- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.
|
||||
- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.
|
||||
|
||||
### Surface & Background
|
||||
- **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.
|
||||
- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.
|
||||
- **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.
|
||||
- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.
|
||||
- **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Pure White** (`#ffffff`): Primary text on dark surfaces.
|
||||
- **Silver** (`#a0a0a0`): Secondary body text and muted content.
|
||||
- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.
|
||||
- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).
|
||||
|
||||
### Gradient System
|
||||
- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)
|
||||
- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`
|
||||
- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |
|
||||
| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |
|
||||
| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |
|
||||
| Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |
|
||||
| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |
|
||||
| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |
|
||||
| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |
|
||||
| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |
|
||||
| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |
|
||||
| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |
|
||||
| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |
|
||||
| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |
|
||||
|
||||
### Principles
|
||||
- **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
|
||||
- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.
|
||||
- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.
|
||||
- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Neon Primary**
|
||||
- Background: Neon Volt (`#faff69`)
|
||||
- Text: Near Black (`#151515`)
|
||||
- Padding: 0px 16px
|
||||
- Radius: sharp (4px)
|
||||
- Border: `1px solid #faff69`
|
||||
- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
|
||||
- Active: text shifts to Pale Yellow (`#f4f692`)
|
||||
- The eye-catching CTA — neon on black
|
||||
|
||||
**Dark Solid**
|
||||
- Background: Near Black (`#141414`)
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Padding: 12px 16px
|
||||
- Radius: 4px or 8px
|
||||
- Border: `1px solid #141414`
|
||||
- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
|
||||
- Active: text to Pale Yellow
|
||||
- The standard action button
|
||||
|
||||
**Forest Green**
|
||||
- Background: Forest Green (`#166534`)
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Padding: 12px 16px
|
||||
- Border: `1px solid #141414`
|
||||
- Hover: same dark shift
|
||||
- Active: Pale Yellow text
|
||||
- The "Get Started" / primary conversion button
|
||||
|
||||
**Ghost / Outlined**
|
||||
- Background: transparent
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Padding: 0px 32px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid #4f5100` (olive-tinted)
|
||||
- Hover: dark bg shift
|
||||
- Active: Pale Yellow text
|
||||
- Secondary actions with neon-tinted border
|
||||
|
||||
**Pill Toggle**
|
||||
- Background: transparent
|
||||
- Radius: pill (9999px)
|
||||
- Used for toggle/switch elements
|
||||
|
||||
### Cards & Containers
|
||||
- Background: transparent or Near Black
|
||||
- Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment
|
||||
- Radius: 4px (small elements) or 8px (cards, containers)
|
||||
- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
|
||||
- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
|
||||
- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the "pressed" effect
|
||||
- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent
|
||||
|
||||
### Navigation
|
||||
- Dark nav on black background
|
||||
- Logo: ClickHouse wordmark + icon in yellow/neon
|
||||
- Links: white text, hover to Neon Volt (#faff69)
|
||||
- CTA: Neon Volt button or Forest Green button
|
||||
- Uppercase labels for categories
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Performance Stats**
|
||||
- Oversized numbers (72px+, weight 700–900)
|
||||
- Brief descriptions beneath
|
||||
- High-contrast neon accents on key metrics
|
||||
- The primary visual proof of performance claims
|
||||
|
||||
**Neon-Highlighted Card**
|
||||
- Standard dark card with neon yellow-green border highlight
|
||||
- Creates "selected" or "featured" treatment
|
||||
- The accent border makes the card pop against the dark canvas
|
||||
|
||||
**Code Blocks**
|
||||
- Dark surface with Inconsolata at weight 600
|
||||
- Neon and white syntax highlighting
|
||||
- Terminal-like aesthetic
|
||||
|
||||
**Trust Bar**
|
||||
- Company logos on dark background
|
||||
- Monochrome/white logo treatment
|
||||
- Horizontal layout
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
|
||||
- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
|
||||
- Section vertical spacing: generous (48–64px)
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: up to 2200px (extra-wide) with responsive scaling
|
||||
- Hero: full-width dark with massive typography
|
||||
- Feature sections: multi-column card grids with dark borders
|
||||
- Stats: horizontal metric bar
|
||||
- Full-dark page — no light sections
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.
|
||||
- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.
|
||||
- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Buttons, badges, small elements, code blocks
|
||||
- Comfortable (8px): Cards, containers, dividers
|
||||
- Pill (9999px): Toggle buttons, status indicators
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Black background, text blocks |
|
||||
| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
|
||||
| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
|
||||
| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
|
||||
| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — "sunk into the surface" |
|
||||
| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |
|
||||
|
||||
**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black
|
||||
- Use Inter at weight 900 for hero display text — the extreme weight IS the personality
|
||||
- Keep everything on pure black (#000000) — never use dark gray as the page background
|
||||
- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
|
||||
- Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy
|
||||
- Show performance stats as oversized display numbers — it's the core visual argument
|
||||
- Use uppercase with wide letter-spacing (1.4px) for section labels
|
||||
- Apply Pale Yellow (#f4f692) for active/pressed text states
|
||||
- Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback
|
||||
|
||||
### Don't
|
||||
- Don't introduce additional colors — the palette is strictly black, neon, green, and gray
|
||||
- Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)
|
||||
- Don't reduce display weight below 700 — heavy weight is core to the personality
|
||||
- Don't use light/white backgrounds anywhere — the entire experience is dark
|
||||
- Don't round corners beyond 8px — the sharp geometry reflects database precision
|
||||
- Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead
|
||||
- Don't skip the inset shadow on active states — the "pressed" effect is distinctive
|
||||
- Don't use warm neutrals — all grays are perfectly neutral
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, stacked cards |
|
||||
| Small Tablet | 640–768px | Minor adjustments |
|
||||
| Tablet | 768–1024px | 2-column grids |
|
||||
| Desktop | 1024–1280px | Standard layout |
|
||||
| Large Desktop | 1280–1536px | Expanded content |
|
||||
| Ultra-wide | 1536–2200px | Maximum container width |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons with 12px 16px padding minimum
|
||||
- Card surfaces as touch targets
|
||||
- Adequate nav link spacing
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Hero text**: 96px → 72px → 48px → 36px
|
||||
- **Feature grids**: Multi-column → 2 → 1 column
|
||||
- **Stats**: Horizontal → stacked
|
||||
- **Navigation**: Full → hamburger
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots maintain aspect ratio
|
||||
- Code blocks use horizontal scroll on narrow screens
|
||||
- All images on dark backgrounds
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand Accent: "Neon Volt (#faff69)"
|
||||
- Page Background: "Pure Black (#000000)"
|
||||
- CTA Green: "Forest Green (#166534)"
|
||||
- Card Border: "Charcoal (rgba(65,65,65,0.8))"
|
||||
- Primary Text: "Pure White (#ffffff)"
|
||||
- Secondary Text: "Silver (#a0a0a0)"
|
||||
- Active State: "Pale Yellow (#f4f692)"
|
||||
- Button Surface: "Near Black (#141414)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
|
||||
- "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
|
||||
- "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
|
||||
- "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
|
||||
- "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."
|
||||
|
||||
### Iteration Guide
|
||||
1. Keep everything on pure black — no dark gray alternatives
|
||||
2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds
|
||||
3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body
|
||||
4. Active states use Pale Yellow (#f4f692) — not just opacity changes
|
||||
5. All links hover to Neon Volt — consistent interactive feedback
|
||||
6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism
|
||||
@@ -1,24 +1,3 @@
|
||||
# ClickHouse Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [ClickHouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/clickhouse/design-md
|
||||
|
||||
@@ -1,834 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by ClickHouse</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* ClickHouse brand tokens */
|
||||
--color-neon-volt: #faff69;
|
||||
--color-forest-green: #166534;
|
||||
--color-dark-forest: #14572f;
|
||||
--color-pale-yellow: #f4f692;
|
||||
--color-border-olive: #4f5100;
|
||||
--color-olive-dark: #161600;
|
||||
--color-pure-black: #000000;
|
||||
--color-near-black: #141414;
|
||||
--color-charcoal: #414141;
|
||||
--color-deep-charcoal: #343434;
|
||||
--color-hover-gray: #3a3a3a;
|
||||
--color-pure-white: #ffffff;
|
||||
--color-silver: #a0a0a0;
|
||||
--color-mid-gray: #585858;
|
||||
--color-border-gray: #e5e7eb;
|
||||
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Dark mode — ClickHouse native */
|
||||
--bg-page: #000000;
|
||||
--bg-card: transparent;
|
||||
--bg-nav: rgba(0,0,0,0.92);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-muted: #585858;
|
||||
--border-color: rgba(65,65,65,0.8);
|
||||
--border-subtle: rgba(65,65,65,0.4);
|
||||
--section-label-color: #faff69;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-brand .icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--color-neon-volt);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: var(--color-pure-black);
|
||||
}
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--color-neon-volt); }
|
||||
.nav-cta {
|
||||
background: var(--color-forest-green);
|
||||
color: var(--color-pure-white);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-near-black);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, rgba(250,255,105,0.02) 30%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
line-height: 1.0;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero h1 span { color: var(--color-neon-volt); }
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
line-height: 1.56;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
|
||||
/* BUTTONS */
|
||||
.btn-neon {
|
||||
background: var(--color-neon-volt);
|
||||
color: #151515;
|
||||
padding: 0px 16px;
|
||||
border: 1px solid var(--color-neon-volt);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
line-height: 44px;
|
||||
}
|
||||
.btn-neon:hover { background: rgb(29,29,29); color: var(--color-pure-white); }
|
||||
.btn-neon:active { color: var(--color-pale-yellow); }
|
||||
.btn-dark {
|
||||
background: var(--color-near-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-near-black);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark:hover { background: var(--color-hover-gray); color: rgba(255,255,255,0.8); }
|
||||
.btn-dark:active { color: var(--color-pale-yellow); }
|
||||
.btn-forest {
|
||||
background: var(--color-forest-green);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-near-black);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-forest:hover { background: var(--color-hover-gray); }
|
||||
.btn-forest:active { color: var(--color-pale-yellow); }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-pure-white);
|
||||
padding: 0px 32px;
|
||||
border: 1px solid var(--color-border-olive);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
line-height: 44px;
|
||||
}
|
||||
.btn-ghost:hover { background: rgb(29,29,29); }
|
||||
.btn-ghost:active { color: var(--color-pale-yellow); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.11;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 48px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--color-near-black);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
|
||||
.color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; color: var(--text-primary); }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* BUTTON DEMOS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-neon { border: 2px solid var(--color-neon-volt); }
|
||||
.card-inset {
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;
|
||||
}
|
||||
.card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; color: var(--text-primary); }
|
||||
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
|
||||
.card-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-neon-volt);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block {
|
||||
background: var(--color-near-black);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 20px 24px;
|
||||
margin-top: 24px;
|
||||
font-family: var(--font-code);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: var(--color-pure-white);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code-block .keyword { color: var(--color-neon-volt); }
|
||||
.code-block .string { color: #4ade80; }
|
||||
.code-block .comment { color: var(--color-silver); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(250,255,105,0.08);
|
||||
border: 1px solid rgba(250,255,105,0.25);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-bordered { border: 1px solid var(--border-color); }
|
||||
.elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }
|
||||
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
|
||||
.elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }
|
||||
.elevation-neon { border: 2px solid var(--color-neon-volt); }
|
||||
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--color-neon-volt);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* PERFORMANCE STATS (ClickHouse distinctive) */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 48px;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-number {
|
||||
font-family: var(--font-body);
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
line-height: 1.0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.stat-number .accent { color: var(--color-neon-volt); }
|
||||
.stat-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 48px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.stats-bar { flex-direction: column; gap: 32px; }
|
||||
.stat-number { font-size: 48px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ClickHouse</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md — Dark mode (native)</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-neon">Explore Tokens</button>
|
||||
<button class="btn-ghost">View Source</button>
|
||||
</div>
|
||||
|
||||
<!-- Performance Stats Bar (ClickHouse distinctive) -->
|
||||
<div class="stats-bar">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">1000<span class="accent">x</span></div>
|
||||
<div class="stat-desc">Faster than traditional databases</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number"><span class="accent">100</span>+</div>
|
||||
<div class="stat-desc">Data formats supported</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">0<span class="accent">.</span>1s</div>
|
||||
<div class="stat-desc">Average query response</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary — Neon Volt Family</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #faff69;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Neon Volt</div>
|
||||
<div class="color-swatch-hex">#faff69</div>
|
||||
<div class="color-swatch-role">Signature brand accent, CTAs, accent borders, link hovers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f4f692;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pale Yellow</div>
|
||||
<div class="color-swatch-hex">#f4f692</div>
|
||||
<div class="color-swatch-role">Active/pressed state text color</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #4f5100;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Olive</div>
|
||||
<div class="color-swatch-hex">#4f5100</div>
|
||||
<div class="color-swatch-role">Ghost button borders, muted neon sibling</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #161600; border-bottom: 1px solid rgba(65,65,65,0.8);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Olive Dark</div>
|
||||
<div class="color-swatch-hex">#161600</div>
|
||||
<div class="color-swatch-role">Darkest neon-tinted color for subtle brand text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">CTA Greens</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #166534;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Forest Green</div>
|
||||
<div class="color-swatch-hex">#166534</div>
|
||||
<div class="color-swatch-role">Secondary CTA buttons, Get Started actions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #14572f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Forest</div>
|
||||
<div class="color-swatch-hex">#14572f</div>
|
||||
<div class="color-swatch-role">Darker green for borders and secondary accents</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border: 1px solid rgba(65,65,65,0.8); border-bottom: none;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary page background, maximum contrast canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #141414; border-bottom: 1px solid rgba(65,65,65,0.8);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#141414</div>
|
||||
<div class="color-swatch-role">Button backgrounds, slightly elevated surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3a3a3a;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Hover Gray</div>
|
||||
<div class="color-swatch-hex">#3a3a3a</div>
|
||||
<div class="color-swatch-role">Button hover state background</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Borders</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary text on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #a0a0a0;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Silver</div>
|
||||
<div class="color-swatch-hex">#a0a0a0</div>
|
||||
<div class="color-swatch-role">Secondary body text, muted content</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #414141;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#414141</div>
|
||||
<div class="color-swatch-role">Primary border color at 80% opacity</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #343434;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Deep Charcoal</div>
|
||||
<div class="color-swatch-hex">#343434</div>
|
||||
<div class="color-swatch-role">Darker border variant for subtle division</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #585858;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Mid Gray</div>
|
||||
<div class="color-swatch-hex">#585858</div>
|
||||
<div class="color-swatch-role">Subtle gray overlay for depth effects (at 28%)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;">Display Mega</div>
|
||||
<div class="type-sample-label">Display Mega — 96px / 900 (Black) / 1.00 / normal — Inter — EXTREMELY heavy</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 72px / 700 / 1.00 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;">Feature Heading</div>
|
||||
<div class="type-sample-label">Feature Heading — 36px / 600 / 1.30 / normal — Inter (Basier in production)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;">Sub-heading Bold</div>
|
||||
<div class="type-sample-label">Sub-heading — 24px / 600-700 / 1.17-1.38 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div>
|
||||
<div class="type-sample-label">Feature Title — 20px / 600-700 / 1.40 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56; color: var(--text-secondary);">Body large for intro paragraphs and button text. Inter provides geometric precision across the full weight spectrum from 400 to 900.</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400-700 / 1.56 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary);">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400-700 / 1.50 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions and links</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400-700 / 1.43 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--color-neon-volt);">UPPERCASE SECTION LABEL</div>
|
||||
<div class="type-sample-label">Uppercase Label — 14px / 600 / 1.43 / 1.4px / uppercase — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;">SELECT count() FROM system.query_log</div>
|
||||
<div class="type-sample-label">Code — 16px / 600 / 1.50 / normal — Inconsolata</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;">Small supporting text</div>
|
||||
<div class="type-sample-label">Small — 12px / 500 / 1.33 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-secondary);">MICRO TAG LABEL</div>
|
||||
<div class="type-sample-label">Micro — 11.2px / 500 / 1.79 / normal — Inter</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-neon">Neon Primary</button>
|
||||
<div class="button-demo-label">Neon Volt CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-dark">Dark Solid</button>
|
||||
<div class="button-demo-label">Dark Solid</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-forest">Get Started</button>
|
||||
<div class="button-demo-label">Forest Green</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost">View Docs</button>
|
||||
<div class="button-demo-label">Ghost / Outlined</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: transparent; color: var(--color-pure-white); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;">Pill Toggle</button>
|
||||
<div class="button-demo-label">Pill Toggle</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-block" style="margin-top: 40px;">
|
||||
<span class="comment">-- ClickHouse query example</span><br>
|
||||
<span class="keyword">SELECT</span> count() <span class="keyword">FROM</span> system.query_log<br>
|
||||
<span class="keyword">WHERE</span> type = <span class="string">'QueryFinish'</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Charcoal Border</h3>
|
||||
<p>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content on the dark canvas.</p>
|
||||
</div>
|
||||
<div class="card card-neon">
|
||||
<div class="card-label">Neon Highlighted</div>
|
||||
<h3>Neon Volt Border</h3>
|
||||
<p>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against pure black with the signature acid yellow-green accent.</p>
|
||||
</div>
|
||||
<div class="card card-inset">
|
||||
<div class="card-label">Inset / Pressed</div>
|
||||
<h3>Inset Shadow</h3>
|
||||
<p>Card with inset shadow creating a "pressed into the surface" effect. Unique to ClickHouse's depth system for active or contained elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp — buttons, badges, code</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable — cards, containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill — toggles, indicators</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Pure black background, text blocks, inline content.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered">
|
||||
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid rgba(65,65,65,0.8). Standard cards and containers.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-subtle">
|
||||
<div><div class="elevation-name">Subtle</div><div class="elevation-desc">Subtle shadow (1px 3px). Barely visible on black canvas.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Medium shadow (10px 15px). Feature cards and hover states.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-pressed">
|
||||
<div><div class="elevation-name">Pressed / Inset</div><div class="elevation-desc">Inset shadow (4px 25px inset). "Sunk into the surface" — distinctive ClickHouse depth.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-neon">
|
||||
<div><div class="elevation-name">Neon Highlight</div><div class="elevation-desc">Neon Volt border (#faff69). Featured/selected cards, maximum emphasis.</div></div>
|
||||
<div class="elevation-level">Level 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,786 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by ClickHouse</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* ClickHouse brand tokens */
|
||||
--color-neon-volt: #faff69;
|
||||
--color-forest-green: #166534;
|
||||
--color-dark-forest: #14572f;
|
||||
--color-pale-yellow: #f4f692;
|
||||
--color-border-olive: #4f5100;
|
||||
--color-olive-dark: #161600;
|
||||
--color-pure-black: #000000;
|
||||
--color-near-black: #141414;
|
||||
--color-charcoal: #414141;
|
||||
--color-deep-charcoal: #343434;
|
||||
--color-hover-gray: #3a3a3a;
|
||||
--color-pure-white: #ffffff;
|
||||
--color-silver: #a0a0a0;
|
||||
--color-mid-gray: #585858;
|
||||
--color-border-gray: #e5e7eb;
|
||||
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Light mode overrides (inverted for catalog viewing) */
|
||||
--bg-page: #ffffff;
|
||||
--bg-card: #f8f8f8;
|
||||
--bg-nav: rgba(255,255,255,0.95);
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #414141;
|
||||
--text-muted: #a0a0a0;
|
||||
--border-color: #e5e7eb;
|
||||
--border-subtle: #f0f0f0;
|
||||
--section-label-color: #166534;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.nav-brand .icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--color-neon-volt);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: var(--color-pure-black);
|
||||
}
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--color-forest-green); }
|
||||
.nav-cta {
|
||||
background: var(--color-forest-green);
|
||||
color: var(--color-pure-white);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-forest-green);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(250,255,105,0.06) 0%, rgba(22,101,52,0.03) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 72px;
|
||||
font-weight: 900;
|
||||
line-height: 1.0;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero h1 span {
|
||||
background: linear-gradient(135deg, var(--color-forest-green), var(--color-neon-volt));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
line-height: 1.56;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
|
||||
/* BUTTONS */
|
||||
.btn-neon {
|
||||
background: var(--color-neon-volt);
|
||||
color: #151515;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-neon-volt);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark {
|
||||
background: var(--color-near-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-near-black);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-forest {
|
||||
background: var(--color-forest-green);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--color-near-black);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 32px;
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.11;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* BUTTON DEMOS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-neon { border: 2px solid var(--color-neon-volt); }
|
||||
.card-inset {
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;
|
||||
}
|
||||
.card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; }
|
||||
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
|
||||
.card-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-forest-green);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block {
|
||||
background: var(--color-near-black);
|
||||
border: 1px solid rgba(65,65,65,0.8);
|
||||
border-radius: 4px;
|
||||
padding: 20px 24px;
|
||||
margin-top: 24px;
|
||||
font-family: var(--font-code);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: var(--color-pure-white);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code-block .keyword { color: var(--color-neon-volt); }
|
||||
.code-block .string { color: var(--color-forest-green); }
|
||||
.code-block .comment { color: var(--color-silver); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(250,255,105,0.15);
|
||||
border: 1px solid rgba(250,255,105,0.4);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-bordered { border: 1px solid var(--border-color); }
|
||||
.elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }
|
||||
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
|
||||
.elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }
|
||||
.elevation-neon { border: 2px solid var(--color-neon-volt); }
|
||||
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-code);
|
||||
font-size: 11px;
|
||||
color: var(--color-forest-green);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 48px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ClickHouse</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md — Light mode (inverted)</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-neon">Explore Tokens</button>
|
||||
<button class="btn-ghost">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary — Neon Volt Family</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #faff69;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Neon Volt</div>
|
||||
<div class="color-swatch-hex">#faff69</div>
|
||||
<div class="color-swatch-role">Signature brand accent, CTAs, accent borders, link hovers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f4f692;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pale Yellow</div>
|
||||
<div class="color-swatch-hex">#f4f692</div>
|
||||
<div class="color-swatch-role">Active/pressed state text color</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #4f5100;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Olive</div>
|
||||
<div class="color-swatch-hex">#4f5100</div>
|
||||
<div class="color-swatch-role">Ghost button borders, muted neon sibling</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #161600; border-bottom: 1px solid #414141;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Olive Dark</div>
|
||||
<div class="color-swatch-hex">#161600</div>
|
||||
<div class="color-swatch-role">Darkest neon-tinted color for subtle brand text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">CTA Greens</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #166534;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Forest Green</div>
|
||||
<div class="color-swatch-hex">#166534</div>
|
||||
<div class="color-swatch-role">Secondary CTA buttons, Get Started actions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #14572f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Dark Forest</div>
|
||||
<div class="color-swatch-hex">#14572f</div>
|
||||
<div class="color-swatch-role">Darker green for borders and secondary accents</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #414141;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary page background, maximum contrast canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #141414; border-bottom: 1px solid #414141;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#141414</div>
|
||||
<div class="color-swatch-role">Button backgrounds, slightly elevated surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #3a3a3a;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Hover Gray</div>
|
||||
<div class="color-swatch-hex">#3a3a3a</div>
|
||||
<div class="color-swatch-role">Button hover state background</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Borders</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary text on dark surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #a0a0a0;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Silver</div>
|
||||
<div class="color-swatch-hex">#a0a0a0</div>
|
||||
<div class="color-swatch-role">Secondary body text, muted content</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #414141;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#414141</div>
|
||||
<div class="color-swatch-role">Primary border color at 80% opacity</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #343434;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Deep Charcoal</div>
|
||||
<div class="color-swatch-hex">#343434</div>
|
||||
<div class="color-swatch-role">Darker border variant for subtle division</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e5e7eb; border-bottom: 1px solid #ccc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Gray</div>
|
||||
<div class="color-swatch-hex">#e5e7eb</div>
|
||||
<div class="color-swatch-role">Light border variant for light contexts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;">Display Mega</div>
|
||||
<div class="type-sample-label">Display Mega — 96px / 900 (Black) / 1.00 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 72px / 700 / 1.00 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;">Feature Heading</div>
|
||||
<div class="type-sample-label">Feature Heading — 36px / 600 / 1.30 / normal — Inter (Basier in production)</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;">Sub-heading Bold</div>
|
||||
<div class="type-sample-label">Sub-heading — 24px / 600-700 / 1.17-1.38 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div>
|
||||
<div class="type-sample-label">Feature Title — 20px / 600-700 / 1.40 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56;">Body large for intro paragraphs and button text. Inter provides geometric precision across the entire weight spectrum from 400 to 900.</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400-700 / 1.56 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50;">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400-700 / 1.50 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions and links</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400-700 / 1.43 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-muted);">UPPERCASE SECTION LABEL</div>
|
||||
<div class="type-sample-label">Uppercase Label — 14px / 600 / 1.43 / 1.4px / uppercase — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;">SELECT count() FROM system.query_log</div>
|
||||
<div class="type-sample-label">Code — 16px / 600 / 1.50 / normal — Inconsolata</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;">Small supporting text</div>
|
||||
<div class="type-sample-label">Small — 12px / 500 / 1.33 / normal — Inter</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-muted);">MICRO TAG LABEL</div>
|
||||
<div class="type-sample-label">Micro — 11.2px / 500 / 1.79 / normal — Inter</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-neon">Neon Primary</button>
|
||||
<div class="button-demo-label">Neon Volt CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-dark">Dark Solid</button>
|
||||
<div class="button-demo-label">Dark Solid</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-forest">Get Started</button>
|
||||
<div class="button-demo-label">Forest Green</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost">View Docs</button>
|
||||
<div class="button-demo-label">Ghost / Outlined</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button style="background: transparent; color: var(--text-primary); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;">Pill Toggle</button>
|
||||
<div class="button-demo-label">Pill Toggle</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-block" style="margin-top: 40px;">
|
||||
<span class="comment">-- ClickHouse query example</span><br>
|
||||
<span class="keyword">SELECT</span> count() <span class="keyword">FROM</span> system.query_log<br>
|
||||
<span class="keyword">WHERE</span> type = <span class="string">'QueryFinish'</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Charcoal Border</h3>
|
||||
<p>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content sections.</p>
|
||||
</div>
|
||||
<div class="card card-neon">
|
||||
<div class="card-label" style="color: #9a9d00;">Neon Highlighted</div>
|
||||
<h3>Neon Volt Border</h3>
|
||||
<p>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against the dark canvas with the signature yellow-green accent.</p>
|
||||
</div>
|
||||
<div class="card card-inset">
|
||||
<div class="card-label">Inset / Pressed</div>
|
||||
<h3>Inset Shadow</h3>
|
||||
<p>Card with inset shadow creating a "pressed into the surface" effect. Unique to ClickHouse's depth system for active or contained elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp — buttons, badges, code</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable — cards, containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill — toggles, indicators</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Black background, text blocks, inline content.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered">
|
||||
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid charcoal at 80% opacity. Standard cards and containers.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-subtle">
|
||||
<div><div class="elevation-name">Subtle</div><div class="elevation-desc">Subtle shadow (1px 3px). Soft card lift on the dark canvas.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Medium shadow (10px 15px). Feature cards and hover states.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-pressed">
|
||||
<div><div class="elevation-name">Pressed / Inset</div><div class="elevation-desc">Inset shadow (4px 25px inset). "Sunk into the surface" effect, unique to ClickHouse.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-neon">
|
||||
<div><div class="elevation-name">Neon Highlight</div><div class="elevation-desc">Neon Volt border (#faff69). Featured/selected cards, maximum emphasis.</div></div>
|
||||
<div class="elevation-level">Level 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,266 +0,0 @@
|
||||
# Design System Inspiration of Cohere
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.
|
||||
|
||||
The design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a "confident authority meets engineering clarity" personality that perfectly reflects an enterprise AI platform.
|
||||
|
||||
Color is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Bright white canvas with cool gray containment borders
|
||||
- 22px signature border-radius — the distinctive "Cohere card" roundness
|
||||
- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)
|
||||
- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent
|
||||
- Deep purple/violet hero sections providing dramatic contrast
|
||||
- Ghost/transparent buttons that shift to blue on hover
|
||||
- Enterprise photography showing diverse real-world applications
|
||||
- CohereMono for code and technical labels with uppercase transforms
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.
|
||||
- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.
|
||||
- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.
|
||||
- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.
|
||||
- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): The primary page background and card surface.
|
||||
- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.
|
||||
- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.
|
||||
- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.
|
||||
- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.
|
||||
|
||||
### Gradient System
|
||||
- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.
|
||||
- **Dark Footer Gradient**: The page transitions through deep purple/charcoal to the black footer, creating a "dusk" effect.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||||
- **Body / UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`
|
||||
- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`
|
||||
- **Icons**: `CohereIconDefault` (custom icon font)
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |
|
||||
| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |
|
||||
| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |
|
||||
| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |
|
||||
| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |
|
||||
| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |
|
||||
| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
|
||||
| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |
|
||||
| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |
|
||||
| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |
|
||||
| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |
|
||||
| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
|
||||
|
||||
### Principles
|
||||
- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.
|
||||
- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.
|
||||
- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.
|
||||
- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Ghost / Transparent**
|
||||
- Background: transparent (`rgba(255, 255, 255, 0)`)
|
||||
- Text: Cohere Black (`#000000`)
|
||||
- No border visible
|
||||
- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8
|
||||
- Focus: solid 2px outline in Interaction Blue
|
||||
- The primary button style — invisible until interacted with
|
||||
|
||||
**Dark Solid**
|
||||
- Background: dark/black
|
||||
- Text: Pure White
|
||||
- For CTA on light surfaces
|
||||
- Pill-shaped or standard radius
|
||||
|
||||
**Outlined**
|
||||
- Border-based containment
|
||||
- Used in secondary actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized
|
||||
- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements
|
||||
- Shadow: minimal — Cohere relies on background color and borders rather than shadows
|
||||
- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers
|
||||
- Dialog: 8px radius for modal/dialog boxes
|
||||
|
||||
### Inputs & Forms
|
||||
- Text: white on dark input, black on light
|
||||
- Focus border: Focus Purple (`#9b60aa`) with `1px solid`
|
||||
- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication
|
||||
- Focus outline: Interaction Blue solid 2px
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white or dark background
|
||||
- Logo: Cohere wordmark (custom SVG)
|
||||
- Links: Dark text at 16px Unica77
|
||||
- CTA: Dark solid button
|
||||
- Mobile: hamburger collapse
|
||||
|
||||
### Image Treatment
|
||||
- Enterprise photography with diverse subjects and environments
|
||||
- Purple-tinted hero photography for dramatic sections
|
||||
- Product UI screenshots on dark surfaces
|
||||
- Images with 22px radius matching card system
|
||||
- Full-bleed purple gradient sections
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**22px Card System**
|
||||
- The 22px border-radius is Cohere's visual signature
|
||||
- All primary cards, images, and containers use this radius
|
||||
- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px
|
||||
|
||||
**Enterprise Trust Bar**
|
||||
- Company logos displayed in a horizontal strip
|
||||
- Demonstrates enterprise adoption
|
||||
- Clean, monochrome logo treatment
|
||||
|
||||
**Purple Hero Bands**
|
||||
- Full-width deep purple sections housing product showcases
|
||||
- Create dramatic visual breaks in the white page flow
|
||||
- Product screenshots float within the purple environment
|
||||
|
||||
**Uppercase Code Tags**
|
||||
- CohereMono in uppercase with letter-spacing
|
||||
- Used as section markers and categorization labels
|
||||
- Creates a technical, structured information hierarchy
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
|
||||
- Button padding varies by variant
|
||||
- Card internal padding: approximately 24–32px
|
||||
- Section vertical spacing: generous (56–60px between sections)
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: up to 2560px (very wide) with responsive scaling
|
||||
- Hero: centered with dramatic typography
|
||||
- Feature sections: multi-column card grids
|
||||
- Enterprise sections: full-width purple bands
|
||||
- 26 breakpoints detected — extremely granular responsive system
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.
|
||||
- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.
|
||||
- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Navigation elements, small tags, pagination
|
||||
- Comfortable (8px): Dialog boxes, secondary containers, small cards
|
||||
- Generous (16px): Featured containers, medium cards
|
||||
- Large (20px): Large feature cards
|
||||
- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius
|
||||
- Pill (9999px): Buttons, tags, status indicators
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
|
||||
| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |
|
||||
| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |
|
||||
|
||||
**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow), **border containment** (cool gray borders), and the dramatic **light-to-dark section alternation**. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use 22px border-radius on all primary cards and containers — it's the visual signature
|
||||
- Use CohereText for display headings (72px, 60px) with negative letter-spacing
|
||||
- Use Unica77 for all body and UI text at weight 400
|
||||
- Keep the palette black-and-white with cool gray borders
|
||||
- Use Interaction Blue (#1863dc) only for hover/focus interactive states
|
||||
- Use deep purple sections for dramatic visual breaks and product showcases
|
||||
- Apply uppercase + letter-spacing on CohereMono for section labels
|
||||
- Maintain enterprise-appropriate photography with diverse subjects
|
||||
|
||||
### Don't
|
||||
- Don't use border-radius other than 22px on primary cards — the signature radius matters
|
||||
- Don't introduce warm colors — the palette is strictly cool-toned
|
||||
- Don't use heavy shadows — depth comes from color contrast and borders
|
||||
- Don't use bold (700+) weight on body text — 400–500 is the range
|
||||
- Don't skip the serif/sans hierarchy — CohereText for headlines, Unica77 for body
|
||||
- Don't use purple as a surface color for cards — purple is reserved for full-width sections
|
||||
- Don't reduce section spacing below 40px — enterprise layouts need breathing room
|
||||
- Don't use decoration on buttons by default — ghost/transparent is the base state
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Small Mobile | <425px | Compact layout, minimal spacing |
|
||||
| Mobile | 425–640px | Single column, stacked cards |
|
||||
| Large Mobile | 640–768px | Minor spacing adjustments |
|
||||
| Tablet | 768–1024px | 2-column grids begin |
|
||||
| Desktop | 1024–1440px | Full multi-column layout |
|
||||
| Large Desktop | 1440–2560px | Maximum container width |
|
||||
|
||||
*26 breakpoints detected — one of the most granularly responsive sites in the dataset.*
|
||||
|
||||
### Touch Targets
|
||||
- Buttons adequately sized for touch interaction
|
||||
- Navigation links with comfortable spacing
|
||||
- Card surfaces as touch targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full nav collapses to hamburger
|
||||
- **Feature grids**: Multi-column → 2-column → single column
|
||||
- **Hero text**: 72px → 48px → 32px progressive scaling
|
||||
- **Purple sections**: Maintain full-width, content stacks
|
||||
- **Card grids**: 3 → 2 → 1 column
|
||||
|
||||
### Image Behavior
|
||||
- Photography scales proportionally within 22px-radius containers
|
||||
- Product screenshots maintain aspect ratio
|
||||
- Purple sections scale background proportionally
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary Text: "Cohere Black (#000000)"
|
||||
- Page Background: "Pure White (#ffffff)"
|
||||
- Secondary Text: "Near Black (#212121)"
|
||||
- Hover Accent: "Interaction Blue (#1863dc)"
|
||||
- Muted Text: "Muted Slate (#93939f)"
|
||||
- Card Borders: "Lightest Gray (#f2f2f2)"
|
||||
- Section Borders: "Border Cool (#d9d9dd)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
|
||||
- "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
|
||||
- "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
|
||||
- "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
|
||||
- "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."
|
||||
|
||||
### Iteration Guide
|
||||
1. Focus on ONE component at a time
|
||||
2. Always use 22px radius for primary cards — "the Cohere card roundness"
|
||||
3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels
|
||||
4. Interactive elements use Interaction Blue (#1863dc) on hover only
|
||||
5. Keep surfaces white with cool gray borders — no warm tones
|
||||
6. Purple is for full-width sections, never card backgrounds
|
||||
@@ -1,24 +1,3 @@
|
||||
# Cohere Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [Cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cohere/design-md
|
||||
|
||||
@@ -1,803 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cohere</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* Primary */
|
||||
--color-black: #000000;
|
||||
--color-near-black: #212121;
|
||||
--color-deep-dark: #17171c;
|
||||
/* Accent */
|
||||
--color-interaction-blue: #1863dc;
|
||||
--color-ring-blue: rgba(76, 110, 230, 0.5);
|
||||
--color-focus-purple: #9b60aa;
|
||||
/* Surface */
|
||||
--color-white: #ffffff;
|
||||
--color-snow: #fafafa;
|
||||
--color-lightest-gray: #f2f2f2;
|
||||
/* Neutrals */
|
||||
--color-muted-slate: #93939f;
|
||||
--color-border-cool: #d9d9dd;
|
||||
--color-border-light: #e5e7eb;
|
||||
/* Fonts */
|
||||
--font-display: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'Space Mono', Arial, ui-sans-serif, system-ui, monospace;
|
||||
/* Dark mode tokens */
|
||||
--bg-page: #17171c;
|
||||
--bg-card: #212121;
|
||||
--bg-nav: rgba(23, 23, 28, 0.95);
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #d9d9dd;
|
||||
--text-muted: #93939f;
|
||||
--border-color: #333333;
|
||||
--border-subtle: #2a2a2f;
|
||||
--section-label-color: #93939f;
|
||||
--accent: #1863dc;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-brand svg { width: 28px; height: 28px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font-body);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--accent); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 72px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.44px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.hero h1 span { color: var(--accent); }
|
||||
.hero p {
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; }
|
||||
.btn-ghost-primary {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, opacity 0.2s;
|
||||
}
|
||||
.btn-ghost-primary:hover { color: var(--accent); opacity: 0.8; }
|
||||
.btn-light-solid {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn-light-solid:hover { opacity: 0.85; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.48px;
|
||||
margin-bottom: 48px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* PURPLE BAND */
|
||||
.purple-band {
|
||||
background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 50%, #0d0a1a 100%);
|
||||
padding: 80px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.purple-band h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 60px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.2px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.purple-band p {
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; color: var(--text-primary); }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
}
|
||||
.btn-ghost-cohere {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, opacity 0.2s;
|
||||
}
|
||||
.btn-ghost-cohere:hover { color: var(--accent); opacity: 0.8; }
|
||||
.btn-light-cohere {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-light-pill {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-outlined {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
.btn-outlined:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
padding: 28px;
|
||||
}
|
||||
.card-signature {
|
||||
border-radius: 22px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.card-dialog {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.card-generous {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.card p { color: var(--text-muted); font-size: 16px; line-height: 1.5; font-weight: 400; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(24, 99, 220, 0.15);
|
||||
border: 1px solid rgba(24, 99, 220, 0.3);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 22px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-bordered-light { border: 1px solid var(--border-subtle); }
|
||||
.elevation-bordered-cool { border: 1px solid var(--border-color); }
|
||||
.elevation-purple-band {
|
||||
background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
.elevation-purple-band .elevation-name,
|
||||
.elevation-purple-band .elevation-desc { color: #ffffff; }
|
||||
.elevation-purple-band .elevation-level { color: rgba(255,255,255,0.6); }
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 42px; letter-spacing: -0.84px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 32px; letter-spacing: -0.32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.purple-band h2 { font-size: 36px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Cohere</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-light-solid">Explore Tokens</button>
|
||||
<button class="btn-ghost-primary">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Cohere Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary headline text, maximum emphasis</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #212121; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#212121</div>
|
||||
<div class="color-swatch-role">Standard body link color</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #17171c; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Deep Dark</div>
|
||||
<div class="color-swatch-hex">#17171c</div>
|
||||
<div class="color-swatch-role">Navigation and dark-section text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #1863dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Interaction Blue</div>
|
||||
<div class="color-swatch-hex">#1863dc</div>
|
||||
<div class="color-swatch-role">Hover, focus states, active links</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(76,110,230,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Blue</div>
|
||||
<div class="color-swatch-hex">#4c6ee6 @ 50%</div>
|
||||
<div class="color-swatch-role">Keyboard focus indicators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #9b60aa;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Focus Purple</div>
|
||||
<div class="color-swatch-hex">#9b60aa</div>
|
||||
<div class="color-swatch-role">Input focus border color</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary page background, card surface</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #fafafa; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Snow</div>
|
||||
<div class="color-swatch-hex">#fafafa</div>
|
||||
<div class="color-swatch-role">Subtle elevated surfaces, light sections</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f2f2f2; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Lightest Gray</div>
|
||||
<div class="color-swatch-hex">#f2f2f2</div>
|
||||
<div class="color-swatch-role">Card borders, softest containment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #93939f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Slate</div>
|
||||
<div class="color-swatch-hex">#93939f</div>
|
||||
<div class="color-swatch-role">Footer links, tertiary text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d9d9dd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Cool</div>
|
||||
<div class="color-swatch-hex">#d9d9dd</div>
|
||||
<div class="color-swatch-role">Section borders, list separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Light</div>
|
||||
<div class="color-swatch-hex">#e5e7eb</div>
|
||||
<div class="color-swatch-role">Lighter border variant (gray-200)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- PURPLE HERO BAND -->
|
||||
<div class="purple-band">
|
||||
<h2>Enterprise AI Platform</h2>
|
||||
<p>Deep purple hero sections create dramatic visual breaks in the dark page flow</p>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -1.44px;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — CohereText — 72px / 400 / 1.00 / -1.44px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;">Display Secondary</div>
|
||||
<div class="type-sample-label">Display Secondary — CohereText — 60px / 400 / 1.00 / -1.2px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.48px;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — Unica77 — 48px / 400 / 1.20 / -0.48px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — Unica77 — 32px / 400 / 1.20 / -0.32px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.3;">Feature Title</div>
|
||||
<div class="type-sample-label">Feature Title — Unica77 — 24px / 400 / 1.30 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.4;">Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.</div>
|
||||
<div class="type-sample-label">Body Large — Unica77 — 18px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;">Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.</div>
|
||||
<div class="type-sample-label">Body / Button — Unica77 — 16px / 400 / 1.50 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.71;">Button Medium Label</div>
|
||||
<div class="type-sample-label">Button Medium — Unica77 — 14px / 500 / 1.71 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-muted);">Caption and metadata text for descriptions</div>
|
||||
<div class="type-sample-label">Caption — Unica77 — 14px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.28px; color: var(--text-muted);">UPPERCASE SECTION LABEL</div>
|
||||
<div class="type-sample-label">Uppercase Label — CohereMono — 14px / 400 / 1.40 / 0.28px / uppercase</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted);">Smallest text for footer links and fine print</div>
|
||||
<div class="type-sample-label">Small — Unica77 — 12px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 8px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16px; color: var(--text-muted);">CODE MICRO LABEL</div>
|
||||
<div class="type-sample-label">Code Micro — CohereMono — 8px / 400 / 1.40 / 0.16px / uppercase</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-cohere">Ghost Button</button>
|
||||
<div class="button-demo-label">Ghost / Transparent</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-light-cohere">Light Solid</button>
|
||||
<div class="button-demo-label">Light Solid (22px)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-light-pill">Pill CTA</button>
|
||||
<div class="button-demo-label">Light Pill (9999px)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-outlined">Outlined</button>
|
||||
<div class="button-demo-label">Outlined (22px)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--text-muted); margin-top: 32px; font-size: 14px;">
|
||||
Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-signature">
|
||||
<div class="card-label">STANDARD CARD</div>
|
||||
<h3>Signature 22px Radius</h3>
|
||||
<p>The distinctive Cohere card with 22px border-radius and #333 border on dark surfaces. Creates cloud-like, organic softness on the dark canvas.</p>
|
||||
</div>
|
||||
<div class="card card-dialog">
|
||||
<div class="card-label">DIALOG CARD</div>
|
||||
<h3>Dialog 8px Radius</h3>
|
||||
<p>Modal and dialog containers use a tighter 8px radius with #333 border. Functional, secondary containment for transient UI.</p>
|
||||
</div>
|
||||
<div class="card card-generous">
|
||||
<div class="card-label">GENEROUS CARD</div>
|
||||
<h3>Featured 16px Radius</h3>
|
||||
<p>Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle border.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 60px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 30px; height: 30px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 36px; height: 36px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 60px; height: 60px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 66px; height: 66px;"></div><div class="spacing-label">22px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 72px; height: 72px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 84px; height: 84px;"></div><div class="spacing-label">28px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 120px; height: 120px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 168px; height: 168px;"></div><div class="spacing-label">56px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 180px; height: 180px;"></div><div class="spacing-label">60px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp — nav, tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable — dialogs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Generous — featured</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 20px;"></div><div class="radius-label">20px</div><div class="radius-context">Large — feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 22px; border-color: var(--accent); border-width: 2px;"></div><div class="radius-label">22px</div><div class="radius-context">Signature — THE radius</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill — buttons, tags</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background and text blocks.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered-light">
|
||||
<div><div class="elevation-name">Bordered (Subtle)</div><div class="elevation-desc">1px solid #2a2a2f. Subtle dark containment lines.</div></div>
|
||||
<div class="elevation-level">Level 1 — Subtle</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered-cool">
|
||||
<div><div class="elevation-name">Bordered (Standard)</div><div class="elevation-desc">1px solid #333. Standard dark-mode card borders.</div></div>
|
||||
<div class="elevation-level">Level 1 — Standard</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-purple-band">
|
||||
<div><div class="elevation-name">Purple Band</div><div class="elevation-desc">Full-width dark purple background. Hero sections, showcases.</div></div>
|
||||
<div class="elevation-level">Level 2 — Dramatic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--text-muted); margin-top: 32px; font-size: 14px; line-height: 1.6;">
|
||||
Cohere is nearly shadow-free. Depth is communicated through background color contrast (elevated cards on dark canvas), border containment, and dramatic light-to-dark section alternation.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,807 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cohere</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* Primary */
|
||||
--color-black: #000000;
|
||||
--color-near-black: #212121;
|
||||
--color-deep-dark: #17171c;
|
||||
/* Accent */
|
||||
--color-interaction-blue: #1863dc;
|
||||
--color-ring-blue: rgba(76, 110, 230, 0.5);
|
||||
--color-focus-purple: #9b60aa;
|
||||
/* Surface */
|
||||
--color-white: #ffffff;
|
||||
--color-snow: #fafafa;
|
||||
--color-lightest-gray: #f2f2f2;
|
||||
/* Neutrals */
|
||||
--color-muted-slate: #93939f;
|
||||
--color-border-cool: #d9d9dd;
|
||||
--color-border-light: #e5e7eb;
|
||||
/* Fonts */
|
||||
--font-display: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'Space Mono', Arial, ui-sans-serif, system-ui, monospace;
|
||||
/* Light mode tokens */
|
||||
--bg-page: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #212121;
|
||||
--text-muted: #93939f;
|
||||
--border-color: #d9d9dd;
|
||||
--border-subtle: #f2f2f2;
|
||||
--section-label-color: #93939f;
|
||||
--accent: #1863dc;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-brand svg { width: 28px; height: 28px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font-body);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--accent); }
|
||||
.nav-cta {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 72px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.44px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.hero h1 span { color: var(--accent); }
|
||||
.hero p {
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; }
|
||||
.btn-ghost-primary {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, opacity 0.2s;
|
||||
}
|
||||
.btn-ghost-primary:hover { color: var(--accent); opacity: 0.8; }
|
||||
.btn-dark-solid {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn-dark-solid:hover { opacity: 0.85; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.48px;
|
||||
margin-bottom: 48px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* PURPLE BAND */
|
||||
.purple-band {
|
||||
background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 50%, #17171c 100%);
|
||||
padding: 80px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.purple-band h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 60px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.2px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.purple-band p {
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
}
|
||||
.btn-ghost-cohere {
|
||||
background: transparent;
|
||||
color: var(--color-black);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, opacity 0.2s;
|
||||
}
|
||||
.btn-ghost-cohere:hover { color: var(--accent); opacity: 0.8; }
|
||||
.btn-dark-cohere {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark-pill {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-outlined {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
.btn-outlined:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.btn-ghost-focus:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
padding: 28px;
|
||||
}
|
||||
.card-signature {
|
||||
border-radius: 22px;
|
||||
border: 1px solid var(--color-lightest-gray);
|
||||
}
|
||||
.card-dialog {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.card-generous {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-lightest-gray);
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.card p { color: var(--text-muted); font-size: 16px; line-height: 1.5; font-weight: 400; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(24, 99, 220, 0.08);
|
||||
border: 1px solid rgba(24, 99, 220, 0.2);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--color-snow);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 22px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-bordered-light { border: 1px solid var(--color-lightest-gray); }
|
||||
.elevation-bordered-cool { border: 1px solid var(--border-color); }
|
||||
.elevation-purple-band {
|
||||
background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
.elevation-purple-band .elevation-name,
|
||||
.elevation-purple-band .elevation-desc { color: #ffffff; }
|
||||
.elevation-purple-band .elevation-level { color: rgba(255,255,255,0.6); }
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 42px; letter-spacing: -0.84px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 32px; letter-spacing: -0.32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.purple-band h2 { font-size: 36px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Cohere</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-dark-solid">Explore Tokens</button>
|
||||
<button class="btn-ghost-primary">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Cohere Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary headline text, maximum emphasis</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #212121; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#212121</div>
|
||||
<div class="color-swatch-role">Standard body link color</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #17171c; border-bottom: 1px solid #333;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Deep Dark</div>
|
||||
<div class="color-swatch-hex">#17171c</div>
|
||||
<div class="color-swatch-role">Navigation and dark-section text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #1863dc;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Interaction Blue</div>
|
||||
<div class="color-swatch-hex">#1863dc</div>
|
||||
<div class="color-swatch-role">Hover, focus states, active links</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(76,110,230,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ring Blue</div>
|
||||
<div class="color-swatch-hex">#4c6ee6 @ 50%</div>
|
||||
<div class="color-swatch-role">Keyboard focus indicators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #9b60aa;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Focus Purple</div>
|
||||
<div class="color-swatch-hex">#9b60aa</div>
|
||||
<div class="color-swatch-role">Input focus border color</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary page background, card surface</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #fafafa; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Snow</div>
|
||||
<div class="color-swatch-hex">#fafafa</div>
|
||||
<div class="color-swatch-role">Subtle elevated surfaces, light sections</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #f2f2f2; border-bottom: 1px solid #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Lightest Gray</div>
|
||||
<div class="color-swatch-hex">#f2f2f2</div>
|
||||
<div class="color-swatch-role">Card borders, softest containment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #93939f;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Slate</div>
|
||||
<div class="color-swatch-hex">#93939f</div>
|
||||
<div class="color-swatch-role">Footer links, tertiary text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #d9d9dd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Cool</div>
|
||||
<div class="color-swatch-hex">#d9d9dd</div>
|
||||
<div class="color-swatch-role">Section borders, list separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #e5e7eb;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Light</div>
|
||||
<div class="color-swatch-hex">#e5e7eb</div>
|
||||
<div class="color-swatch-role">Lighter border variant (gray-200)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- PURPLE HERO BAND -->
|
||||
<div class="purple-band">
|
||||
<h2>Enterprise AI Platform</h2>
|
||||
<p>Deep purple hero sections create dramatic visual breaks in the white page flow</p>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -1.44px;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — CohereText — 72px / 400 / 1.00 / -1.44px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;">Display Secondary</div>
|
||||
<div class="type-sample-label">Display Secondary — CohereText — 60px / 400 / 1.00 / -1.2px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.48px;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — Unica77 — 48px / 400 / 1.20 / -0.48px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — Unica77 — 32px / 400 / 1.20 / -0.32px</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.3;">Feature Title</div>
|
||||
<div class="type-sample-label">Feature Title — Unica77 — 24px / 400 / 1.30 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.4;">Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.</div>
|
||||
<div class="type-sample-label">Body Large — Unica77 — 18px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;">Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.</div>
|
||||
<div class="type-sample-label">Body / Button — Unica77 — 16px / 400 / 1.50 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.71;">Button Medium Label</div>
|
||||
<div class="type-sample-label">Button Medium — Unica77 — 14px / 500 / 1.71 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-muted);">Caption and metadata text for descriptions</div>
|
||||
<div class="type-sample-label">Caption — Unica77 — 14px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.28px; color: var(--text-muted);">UPPERCASE SECTION LABEL</div>
|
||||
<div class="type-sample-label">Uppercase Label — CohereMono — 14px / 400 / 1.40 / 0.28px / uppercase</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted);">Smallest text for footer links and fine print</div>
|
||||
<div class="type-sample-label">Small — Unica77 — 12px / 400 / 1.40 / normal</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 8px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16px; color: var(--text-muted);">CODE MICRO LABEL</div>
|
||||
<div class="type-sample-label">Code Micro — CohereMono — 8px / 400 / 1.40 / 0.16px / uppercase</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-cohere">Ghost Button</button>
|
||||
<div class="button-demo-label">Ghost / Transparent</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-dark-cohere">Dark Solid</button>
|
||||
<div class="button-demo-label">Dark Solid (22px)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-dark-pill">Pill CTA</button>
|
||||
<div class="button-demo-label">Dark Pill (9999px)</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-outlined">Outlined</button>
|
||||
<div class="button-demo-label">Outlined (22px)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--text-muted); margin-top: 32px; font-size: 14px;">
|
||||
Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-signature">
|
||||
<div class="card-label">STANDARD CARD</div>
|
||||
<h3>Signature 22px Radius</h3>
|
||||
<p>The distinctive Cohere card with 22px border-radius and 1px solid #f2f2f2 border. Creates cloud-like, organic softness on the white canvas.</p>
|
||||
</div>
|
||||
<div class="card card-dialog">
|
||||
<div class="card-label">DIALOG CARD</div>
|
||||
<h3>Dialog 8px Radius</h3>
|
||||
<p>Modal and dialog containers use a tighter 8px radius with #d9d9dd border. Functional, secondary containment for transient UI.</p>
|
||||
</div>
|
||||
<div class="card card-generous">
|
||||
<div class="card-label">GENEROUS CARD</div>
|
||||
<h3>Featured 16px Radius</h3>
|
||||
<p>Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle #f2f2f2 border.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 60px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 30px; height: 30px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 36px; height: 36px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 60px; height: 60px;"></div><div class="spacing-label">20px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 66px; height: 66px;"></div><div class="spacing-label">22px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 72px; height: 72px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 84px; height: 84px;"></div><div class="spacing-label">28px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 120px; height: 120px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 168px; height: 168px;"></div><div class="spacing-label">56px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 180px; height: 180px;"></div><div class="spacing-label">60px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp — nav, tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable — dialogs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Generous — featured</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 20px;"></div><div class="radius-label">20px</div><div class="radius-context">Large — feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 22px; border-color: var(--accent); border-width: 2px;"></div><div class="radius-label">22px</div><div class="radius-context">Signature — THE radius</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill — buttons, tags</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background and text blocks.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered-light">
|
||||
<div><div class="elevation-name">Bordered (Light)</div><div class="elevation-desc">1px solid #f2f2f2. Standard cards, subtle containment.</div></div>
|
||||
<div class="elevation-level">Level 1 — Lightest Gray</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-bordered-cool">
|
||||
<div><div class="elevation-name">Bordered (Cool)</div><div class="elevation-desc">1px solid #d9d9dd. Emphasized cards, list separators.</div></div>
|
||||
<div class="elevation-level">Level 1 — Border Cool</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-purple-band">
|
||||
<div><div class="elevation-name">Purple Band</div><div class="elevation-desc">Full-width dark purple background. Hero sections, showcases.</div></div>
|
||||
<div class="elevation-level">Level 2 — Dramatic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--text-muted); margin-top: 32px; font-size: 14px; line-height: 1.6;">
|
||||
Cohere is nearly shadow-free. Depth is communicated through background color contrast (white cards on purple bands), border containment (cool gray borders), and dramatic light-to-dark section alternation.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,129 +0,0 @@
|
||||
# Design System Inspiration of Coinbase
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
|
||||
|
||||
The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Coinbase Blue (`#0052ff`) as singular brand accent
|
||||
- Four-font proprietary family: Display, Sans, Text, Icons
|
||||
- 56px radius pill buttons with blue hover transition
|
||||
- Near-black (`#0a0b0d`) dark sections + white light sections
|
||||
- 1.00 line-height on display headings — ultra-tight
|
||||
- Cool gray secondary surface (`#eef0f3`) with blue tint
|
||||
- `text-transform: lowercase` on some button labels — unusual
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
|
||||
- **Pure White** (`#ffffff`): Primary light surface
|
||||
- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
|
||||
- **Cool Gray Surface** (`#eef0f3`): Secondary button background
|
||||
|
||||
### Interactive
|
||||
- **Hover Blue** (`#578bfa`): Button hover background
|
||||
- **Link Blue** (`#0667d0`): Secondary link color
|
||||
- **Muted Blue** (`#5b616e`): Border color at 20% opacity
|
||||
|
||||
### Surface
|
||||
- **Dark Card** (`#282b31`): Dark button/card backgrounds
|
||||
- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `CoinbaseDisplay` — hero headlines
|
||||
- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
|
||||
- **Body**: `CoinbaseText` — reading text
|
||||
- **Icons**: `CoinbaseIcons` — icon font
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
|
||||
| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
|
||||
| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
|
||||
| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
|
||||
| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
|
||||
| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
|
||||
| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
|
||||
| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
|
||||
| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
|
||||
| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
|
||||
| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
|
||||
| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
|
||||
| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Pill (56px radius)**
|
||||
- Background: `#eef0f3` or `#282b31`
|
||||
- Radius: 56px
|
||||
- Border: `1px solid` matching background
|
||||
- Hover: `#578bfa` (light blue)
|
||||
- Focus: `2px solid black` outline
|
||||
|
||||
**Full Pill (100000px radius)**
|
||||
- Used for maximum pill shape
|
||||
|
||||
**Blue Bordered**
|
||||
- Border: `1px solid #0052ff`
|
||||
- Background: transparent
|
||||
|
||||
### Cards & Containers
|
||||
- Radius: 8px–40px range
|
||||
- Borders: `1px solid rgba(91,97,110,0.2)`
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base: 8px
|
||||
- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
|
||||
|
||||
### Border Radius Scale
|
||||
- Small (4px–8px): Article links, small cards
|
||||
- Standard (12px–16px): Cards, menus
|
||||
- Large (24px–32px): Feature containers
|
||||
- XL (40px): Large buttons/containers
|
||||
- Pill (56px): Primary CTAs
|
||||
- Full (100000px): Maximum pill
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Minimal shadow system — depth from color contrast between dark/light sections.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Coinbase Blue (#0052ff) for primary interactive elements
|
||||
- Apply 56px radius for all CTA buttons
|
||||
- Use CoinbaseDisplay for hero headings only
|
||||
- Alternate dark (#0a0b0d) and white sections
|
||||
|
||||
### Don't
|
||||
- Don't use the blue decoratively — it's functional only
|
||||
- Don't use sharp corners on CTAs — 56px minimum
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Coinbase Blue (`#0052ff`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Dark surface: `#0a0b0d`
|
||||
- Secondary surface: `#eef0f3`
|
||||
- Hover: `#578bfa`
|
||||
- Text: `#0a0b0d`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
|
||||
- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."
|
||||
@@ -1,23 +1,3 @@
|
||||
# Coinbase Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [Coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/coinbase/design-md
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Coinbase</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#0a0b0d; --black:#eef0f3; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#1a1c20; --dark:#282b31; --muted:#8a8f99; --font:'Inter',system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #1a1c20; }
|
||||
.nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 24px; text-align:center; }
|
||||
.hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-blue:hover { background:var(--hover-blue); }
|
||||
.btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-gray:hover { background:var(--hover-blue); color:var(--black); }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #1a1c20; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--muted); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
|
||||
.footer a { color:var(--blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#0052ff;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:56px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
|
||||
</div></section>
|
||||
|
||||
<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
|
||||
<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
|
||||
</div></div></div>
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,163 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Coinbase</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#fff; --black:#0a0b0d; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#eef0f3; --dark:#282b31; --muted:#5b616e; --font:'Inter',system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--gray-surface); }
|
||||
.nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 24px; text-align:center; }
|
||||
.hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-blue:hover { background:var(--hover-blue); }
|
||||
.btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-gray:hover { background:var(--hover-blue); color:var(--black); }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--gray-surface); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--muted); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
|
||||
.footer a { color:var(--blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
|
||||
</div></section>
|
||||
|
||||
<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
|
||||
<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
|
||||
</div></div></div>
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,307 +0,0 @@
|
||||
# Design System Inspiration of Composio
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Composio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black canvas (`#0f0f0f`) where content floats within barely-visible containment borders, creating the feeling of a high-tech control panel rather than a traditional marketing page. It's a site that whispers authority to developers who live in dark terminals.
|
||||
|
||||
The visual language leans heavily into the aesthetic of code editors and terminal windows. JetBrains Mono appears alongside the geometric precision of abcDiatype, reinforcing the message that this is a tool built *by* developers *for* developers. Decorative elements are restrained but impactful — subtle cyan-blue gradient glows emanate from cards and sections like bioluminescent organisms in deep water, while hard-offset shadows (`4px 4px`) on select elements add a raw, brutalist edge that prevents the design from feeling sterile.
|
||||
|
||||
What makes Composio distinctive is its tension between extreme minimalism and strategic bursts of luminous color. The site never shouts — headings use tight line-heights (0.87) that compress text into dense, authoritative blocks. Color is rationed like a rare resource: white text for primary content, semi-transparent white (`rgba(255,255,255,0.5-0.6)`) for secondary, and brand blue (`#0007cd`) or electric cyan (`#00ffff`) reserved exclusively for interactive moments and accent glows.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pitch-black canvas with near-invisible white-border containment (4-12% opacity)
|
||||
- Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace (JetBrains Mono) for technical credibility
|
||||
- Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful text blocks
|
||||
- Bioluminescent accent strategy — cyan and blue glows that feel like they're emitting light from within
|
||||
- Hard-offset brutalist shadows (`4px 4px`) on select interactive elements
|
||||
- Monochrome hierarchy with color used only at the highest-signal moments
|
||||
- Developer-terminal aesthetic that bridges marketing and documentation
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Composio Cobalt** (`#0007cd`): The core brand color — a deep, saturated blue used sparingly for high-priority interactive elements and brand moments. It anchors the identity with quiet intensity.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Electric Cyan** (`#00ffff`): The attention-grabbing accent — used at low opacity (`rgba(0,255,255,0.12)`) for glowing button backgrounds and card highlights. At full saturation, it serves as the energetic counterpoint to the dark canvas.
|
||||
- **Signal Blue** (`#0089ff` / `rgb(0,137,255)`): Used for select button borders and interactive focus states, bridging the gap between Cobalt and Cyan.
|
||||
- **Ocean Blue** (`#0096ff` / `rgb(0,150,255)`): Accent border color on CTA buttons, slightly warmer than Signal Blue.
|
||||
|
||||
### Surface & Background
|
||||
- **Void Black** (`#0f0f0f`): The primary page background — not pure black, but a hair warmer, reducing eye strain on dark displays.
|
||||
- **Pure Black** (`#000000`): Used for card interiors and deep-nested containers, creating a subtle depth distinction from the page background.
|
||||
- **Charcoal** (`#2c2c2c` / `rgb(44,44,44)`): Used for secondary button borders and divider lines on dark surfaces.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Pure White** (`#ffffff`): Primary heading and high-emphasis text color on dark surfaces.
|
||||
- **Muted Smoke** (`#444444`): De-emphasized body text, metadata, and tertiary content.
|
||||
- **Ghost White** (`rgba(255,255,255,0.6)`): Secondary body text and link labels — visible but deliberately receded.
|
||||
- **Whisper White** (`rgba(255,255,255,0.5)`): Tertiary button text and placeholder content.
|
||||
- **Phantom White** (`rgba(255,255,255,0.2)`): Subtle button backgrounds and deeply receded UI chrome.
|
||||
|
||||
### Semantic & Accent
|
||||
- **Border Mist 12** (`rgba(255,255,255,0.12)`): Highest-opacity border treatment — used for prominent card edges and content separators.
|
||||
- **Border Mist 10** (`rgba(255,255,255,0.10)`): Standard container borders on dark surfaces.
|
||||
- **Border Mist 08** (`rgba(255,255,255,0.08)`): Subtle section dividers and secondary card edges.
|
||||
- **Border Mist 06** (`rgba(255,255,255,0.06)`): Near-invisible containment borders for background groupings.
|
||||
- **Border Mist 04** (`rgba(255,255,255,0.04)`): The faintest border — used for atmospheric separation only.
|
||||
- **Light Border** (`#e0e0e0` / `rgb(224,224,224)`): Reserved for light-surface contexts (rare on this site).
|
||||
|
||||
### Gradient System
|
||||
- **Cyan Glow**: Radial gradients using `#00ffff` at very low opacity, creating bioluminescent halos behind cards and feature sections.
|
||||
- **Blue-to-Black Fade**: Linear gradients from Composio Cobalt (`#0007cd`) fading into Void Black (`#0f0f0f`), used in hero backgrounds and section transitions.
|
||||
- **White Fog**: Bottom-of-page gradient transitioning from dark to a diffused white/gray, creating an atmospheric "horizon line" effect near the footer.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `abcDiatype`, with fallbacks: `abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
|
||||
- **Monospace**: `JetBrains Mono`, with fallbacks: `JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
|
||||
- **System Monospace** (fallback): `Menlo`, `monospace` for smallest inline code
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (ultra-tight) | normal | Massive, compressed headings |
|
||||
| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (tight) | normal | Major feature section titles |
|
||||
| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (tight) | normal | Secondary section markers |
|
||||
| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (tight) | normal | Card titles, feature names |
|
||||
| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (tight) | normal | Medium-emphasis card headings |
|
||||
| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (tight) | normal | Smaller card titles, labels |
|
||||
| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (tight) | normal | Intro paragraphs |
|
||||
| Body / Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | Standard body text, nav links, buttons |
|
||||
| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (relaxed) | normal | Longer-form body text |
|
||||
| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (relaxed) | normal | Descriptions, metadata |
|
||||
| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI labels, badges |
|
||||
| Tag / Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (tight) | 0.3px | Uppercase overline labels |
|
||||
| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (tight) | 0.3px | Smallest sans-serif text |
|
||||
| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | Inline code, terminal output |
|
||||
| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | Code snippets, technical labels |
|
||||
| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | Small code references |
|
||||
| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | Uppercase technical labels |
|
||||
| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | Tiny uppercase code tags |
|
||||
| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | Smallest monospace text |
|
||||
|
||||
### Principles
|
||||
- **Compression creates authority**: Heading line-heights are drastically tight (0.87-1.0), making large text feel dense and commanding rather than airy and decorative.
|
||||
- **Dual personality**: abcDiatype carries the marketing voice — geometric, precise, friendly. JetBrains Mono carries the technical voice — credible, functional, familiar to developers.
|
||||
- **Weight restraint**: Almost everything is weight 400 (regular). Weight 500 (medium) is reserved for small labels, badges, and select card titles. Weight 700 (bold) appears only in microscopic system-monospace contexts.
|
||||
- **Negative letter-spacing on code**: JetBrains Mono uses negative letter-spacing (-0.28px to -0.98px) for dense, compact code blocks that feel like a real IDE.
|
||||
- **Uppercase is earned**: The `uppercase` + `letter-spacing` treatment is reserved exclusively for tiny overline labels and technical tags — never for headings.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary CTA (White Fill)**
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`oklch(0.145 0 0)`)
|
||||
- Padding: comfortable (8px 24px)
|
||||
- Border: none
|
||||
- Radius: subtly rounded (likely 4px based on token scale)
|
||||
- Hover: likely subtle opacity reduction or slight gray shift
|
||||
|
||||
**Cyan Accent CTA**
|
||||
- Background: Electric Cyan at 12% opacity (`rgba(0,255,255,0.12)`)
|
||||
- Text: Near Black (`oklch(0.145 0 0)`)
|
||||
- Padding: comfortable (8px 24px)
|
||||
- Border: thin solid Ocean Blue (`1px solid rgb(0,150,255)`)
|
||||
- Radius: subtly rounded (4px)
|
||||
- Creates a "glowing from within" effect on dark backgrounds
|
||||
|
||||
**Ghost / Outline (Signal Blue)**
|
||||
- Background: transparent
|
||||
- Text: Near Black (`oklch(0.145 0 0)`)
|
||||
- Padding: balanced (10px)
|
||||
- Border: thin solid Signal Blue (`1px solid rgb(0,137,255)`)
|
||||
- Hover: likely fill or border color shift
|
||||
|
||||
**Ghost / Outline (Charcoal)**
|
||||
- Background: transparent
|
||||
- Text: Near Black (`oklch(0.145 0 0)`)
|
||||
- Padding: balanced (10px)
|
||||
- Border: thin solid Charcoal (`1px solid rgb(44,44,44)`)
|
||||
- For secondary/tertiary actions on dark surfaces
|
||||
|
||||
**Phantom Button**
|
||||
- Background: Phantom White (`rgba(255,255,255,0.2)`)
|
||||
- Text: Whisper White (`rgba(255,255,255,0.5)`)
|
||||
- No visible border
|
||||
- Used for deeply de-emphasized actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Pure Black (`#000000`) or transparent
|
||||
- Border: white at very low opacity, ranging from Border Mist 04 (`rgba(255,255,255,0.04)`) to Border Mist 12 (`rgba(255,255,255,0.12)`) depending on prominence
|
||||
- Radius: barely rounded corners (2px for inline elements, 4px for content cards)
|
||||
- Shadow: select cards use the hard-offset brutalist shadow (`rgba(0,0,0,0.15) 4px 4px 0px 0px`) — a distinctive design choice that adds raw depth
|
||||
- Elevation shadow: deeper containers use soft diffuse shadow (`rgba(0,0,0,0.5) 0px 8px 32px`)
|
||||
- Hover behavior: likely subtle border opacity increase or faint glow effect
|
||||
|
||||
### Inputs & Forms
|
||||
- No explicit input token data extracted — inputs likely follow the dark-surface pattern with:
|
||||
- Background: transparent or Pure Black
|
||||
- Border: Border Mist 10 (`rgba(255,255,255,0.10)`)
|
||||
- Focus: border shifts to Signal Blue (`#0089ff`) or Electric Cyan
|
||||
- Text: Pure White with Ghost White placeholder
|
||||
|
||||
### Navigation
|
||||
- Sticky top nav bar on dark/black background
|
||||
- Logo (white SVG): Composio wordmark on the left
|
||||
- Nav links: Pure White (`#ffffff`) at standard body size (16px, abcDiatype)
|
||||
- CTA button in the nav: White Fill Primary style
|
||||
- Mobile: collapses to hamburger menu, single-column layout
|
||||
- Subtle bottom border on nav (Border Mist 06-08)
|
||||
|
||||
### Image Treatment
|
||||
- Dark-themed product screenshots and UI mockups dominate
|
||||
- Images sit within bordered containers matching the card system
|
||||
- Blue/cyan gradient glows behind or beneath feature images
|
||||
- No visible border-radius on images beyond container rounding (4px)
|
||||
- Full-bleed within their card containers
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Stats/Metrics Display**
|
||||
- Large monospace numbers (JetBrains Mono) — "10k+" style
|
||||
- Tight layout with subtle label text beneath
|
||||
|
||||
**Code Blocks / Terminal Previews**
|
||||
- Dark containers with JetBrains Mono
|
||||
- Syntax-highlighted content
|
||||
- Subtle bordered containers (Border Mist 10)
|
||||
|
||||
**Integration/Partner Logos Grid**
|
||||
- Grid layout of tool logos on dark surface
|
||||
- Contained within bordered card
|
||||
- Demonstrates ecosystem breadth
|
||||
|
||||
**"COMPOSIO" Brand Display**
|
||||
- Oversized brand typography — likely the largest text on the page
|
||||
- Used as a section divider/brand statement
|
||||
- Stark white on black
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 32px, 40px
|
||||
- Component padding: typically 10px (buttons) to 24px (CTA buttons horizontal)
|
||||
- Section padding: generous vertical spacing (estimated 80-120px between major sections)
|
||||
- Card internal padding: approximately 24-32px
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: approximately 1200px, centered
|
||||
- Content sections use single-column or 2-3 column grids for feature cards
|
||||
- Hero: centered single-column with maximum impact
|
||||
- Feature sections: asymmetric layouts mixing text blocks with product screenshots
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Breathing room between sections**: Large vertical gaps create distinct "chapters" in the page scroll.
|
||||
- **Dense within components**: Cards and text blocks are internally compact (tight line-heights, minimal internal padding), creating focused information nodes.
|
||||
- **Contrast-driven separation**: Rather than relying solely on whitespace, Composio uses border opacity differences and subtle background shifts to delineate content zones.
|
||||
|
||||
### Border Radius Scale
|
||||
- Nearly squared (2px): Inline code spans, small tags, pre blocks — the sharpest treatment, conveying technical precision
|
||||
- Subtly rounded (4px): Content cards, images, standard containers — the workhorse radius
|
||||
- Pill-shaped (37px): Select buttons and badges — creates a softer, more approachable feel for key CTAs
|
||||
- Full round (9999px+): Circular elements, avatar-like containers, decorative dots
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, no border | Page background, inline text |
|
||||
| Contained (Level 1) | Border Mist 04-08, no shadow | Background groupings, subtle sections |
|
||||
| Card (Level 2) | Border Mist 10-12, no shadow | Standard content cards, code blocks |
|
||||
| Brutalist (Level 3) | Hard offset shadow (`4px 4px`, 15% black) | Select interactive cards, distinctive feature highlights |
|
||||
| Floating (Level 4) | Soft diffuse shadow (`0px 8px 32px`, 50% black) | Modals, overlays, deeply elevated content |
|
||||
|
||||
**Shadow Philosophy**: Composio uses shadows sparingly and with deliberate contrast. The hard-offset brutalist shadow is the signature — it breaks the sleek darkness with a raw, almost retro-computing feel. The soft diffuse shadow is reserved for truly floating elements. Most depth is communicated through border opacity gradations rather than shadows.
|
||||
|
||||
### Decorative Depth
|
||||
- **Cyan Glow Halos**: Radial gradient halos using Electric Cyan at low opacity behind feature cards and images. Creates a "screen glow" effect as if the UI elements are emitting light.
|
||||
- **Blue-Black Gradient Washes**: Linear gradients from Composio Cobalt to Void Black used as section backgrounds, adding subtle color temperature shifts.
|
||||
- **White Fog Horizon**: A gradient from dark to diffused white/gray at the bottom of the page, creating an atmospheric "dawn" effect before the footer.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Void Black (`#0f0f0f`) as the primary page background — never pure white for main surfaces
|
||||
- Keep heading line-heights ultra-tight (0.87-1.0) for compressed, authoritative text blocks
|
||||
- Use white-opacity borders (4-12%) for containment — they're more important than shadows here
|
||||
- Reserve Electric Cyan (`#00ffff`) for high-signal moments only — CTAs, glows, interactive accents
|
||||
- Pair abcDiatype with JetBrains Mono to reinforce the developer-tool identity
|
||||
- Use the hard-offset shadow (`4px 4px`) intentionally on select elements for brutalist personality
|
||||
- Keep button text dark (`oklch(0.145 0 0)`) even on the darkest backgrounds — buttons carry their own surface
|
||||
- Layer opacity-based borders to create subtle depth without shadows
|
||||
- Use uppercase + letter-spacing only for tiny overline labels (12px or smaller)
|
||||
|
||||
### Don't
|
||||
- Don't use bright backgrounds or light surfaces as primary containers
|
||||
- Don't apply heavy shadows everywhere — depth comes from border opacity, not box-shadow
|
||||
- Don't use Composio Cobalt (`#0007cd`) as a text color — it's too dark on dark and too saturated on light
|
||||
- Don't increase heading line-heights beyond 1.2 — the compressed feel is core to the identity
|
||||
- Don't use bold (700) weight for body or heading text — 400-500 is the ceiling
|
||||
- Don't mix warm colors — the palette is strictly cool (blue, cyan, white, black)
|
||||
- Don't use border-radius larger than 4px on content cards — the precision of near-square corners is intentional
|
||||
- Don't place Electric Cyan at full opacity on large surfaces — it's an accent, used at 12% max for backgrounds
|
||||
- Don't use decorative serif or handwritten fonts — the entire identity is geometric sans + monospace
|
||||
- Don't skip the monospace font for technical content — JetBrains Mono is not decorative, it's a credibility signal
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, hamburger nav, full-width cards, reduced section padding, hero text scales down to ~28-40px |
|
||||
| Tablet | 768-1024px | 2-column grid for cards, condensed nav, slightly reduced hero text |
|
||||
| Desktop | 1024-1440px | Full multi-column layout, expanded nav with all links visible, large hero typography (64px) |
|
||||
| Large Desktop | >1440px | Max-width container centered, generous horizontal margins |
|
||||
|
||||
### Touch Targets
|
||||
- Minimum touch target: 44x44px for all interactive elements
|
||||
- Buttons use comfortable padding (8px 24px minimum) ensuring adequate touch area
|
||||
- Nav links spaced with sufficient gap for thumb navigation
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav on desktop collapses to hamburger on mobile
|
||||
- **Feature grids**: 3-column → 2-column → single-column stacking
|
||||
- **Hero text**: 64px → 40px → 28px progressive scaling
|
||||
- **Section padding**: Reduces proportionally but maintains generous vertical rhythm
|
||||
- **Cards**: Stack vertically on mobile with full-width treatment
|
||||
- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale proportionally within their containers
|
||||
- Dark-themed images maintain contrast on the dark background at all sizes
|
||||
- Gradient glow effects scale with container size
|
||||
- No visible art direction changes between breakpoints — same crops, proportional scaling
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: "Pure White (#ffffff)"
|
||||
- Page Background: "Void Black (#0f0f0f)"
|
||||
- Brand Accent: "Composio Cobalt (#0007cd)"
|
||||
- Glow Accent: "Electric Cyan (#00ffff)"
|
||||
- Heading Text: "Pure White (#ffffff)"
|
||||
- Body Text: "Ghost White (rgba(255,255,255,0.6))"
|
||||
- Card Border: "Border Mist 10 (rgba(255,255,255,0.10))"
|
||||
- Button Border: "Signal Blue (#0089ff)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a feature card with a near-black background (#000000), barely visible white border at 10% opacity, subtly rounded corners (4px), and a hard-offset shadow (4px right, 4px down, 15% black). Use Pure White for the title in abcDiatype at 24px weight 500, and Ghost White (60% opacity) for the description at 16px."
|
||||
- "Design a primary CTA button with a solid white background, near-black text, comfortable padding (8px vertical, 24px horizontal), and subtly rounded corners. Place it next to a secondary button with transparent background, Signal Blue border, and matching padding."
|
||||
- "Build a hero section on Void Black (#0f0f0f) with a massive heading at 64px, line-height 0.87, in abcDiatype. Center the text. Add a subtle blue-to-black gradient glow behind the content. Include a white CTA button and a cyan-accented secondary button below."
|
||||
- "Create a code snippet display using JetBrains Mono at 14px with -0.28px letter-spacing on a black background. Add a Border Mist 10 border (rgba(255,255,255,0.10)) and 4px radius. Show syntax-highlighted content with white and cyan text."
|
||||
- "Design a navigation bar on Void Black with the Composio wordmark in white on the left, 4-5 nav links in white abcDiatype at 16px, and a white-fill CTA button on the right. Add a Border Mist 06 bottom border."
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference specific color names and hex codes from this document — "use Ghost White (rgba(255,255,255,0.6))" not "make it lighter"
|
||||
3. Use natural language descriptions — "make the border barely visible" = Border Mist 04-06
|
||||
4. Describe the desired "feel" alongside specific measurements — "compressed and authoritative heading at 48px with line-height 1.0"
|
||||
5. For glow effects, specify "Electric Cyan at 12% opacity as a radial gradient behind the element"
|
||||
6. Always specify which font — abcDiatype for marketing, JetBrains Mono for technical/code content
|
||||
@@ -1,24 +1,3 @@
|
||||
# Composio Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [Composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/composio/design-md
|
||||
|
||||
@@ -1,958 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Composio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-brand: #0007cd;
|
||||
--color-black: #000000;
|
||||
--color-void: #0f0f0f;
|
||||
--color-charcoal: #2c2c2c;
|
||||
--color-muted-smoke: #444444;
|
||||
--color-cyan: #00ffff;
|
||||
--color-signal-blue: #0089ff;
|
||||
--color-ocean-blue: #0096ff;
|
||||
--color-light-border: #e0e0e0;
|
||||
--ghost-white: rgba(255,255,255,0.6);
|
||||
--whisper-white: rgba(255,255,255,0.5);
|
||||
--phantom-white: rgba(255,255,255,0.2);
|
||||
--border-mist-12: rgba(255,255,255,0.12);
|
||||
--border-mist-10: rgba(255,255,255,0.10);
|
||||
--border-mist-08: rgba(255,255,255,0.08);
|
||||
--border-mist-06: rgba(255,255,255,0.06);
|
||||
--border-mist-04: rgba(255,255,255,0.04);
|
||||
--cyan-12: rgba(0,255,255,0.12);
|
||||
--font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Dark mode overrides */
|
||||
--page-bg: #000000;
|
||||
--surface: #0a0a0a;
|
||||
--card-bg: #050505;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--page-bg);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 200;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: rgba(0,0,0,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-mist-04);
|
||||
}
|
||||
.nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(0,7,205,0.3) 0%, rgba(0,255,255,0.1) 35%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 0.87;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--ghost-white);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 10px 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-cyan {
|
||||
background: var(--cyan-12);
|
||||
color: var(--color-white);
|
||||
padding: 10px 28px;
|
||||
border: 1px solid var(--color-ocean-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-mist-04);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--card-bg);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted-smoke);
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
.btn-ghost-blue {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-signal-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost-charcoal {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-charcoal);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-phantom {
|
||||
background: var(--phantom-white);
|
||||
color: var(--whisper-white);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 4px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-mist-08); }
|
||||
.card-brutalist {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);
|
||||
}
|
||||
.card-glow {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.7);
|
||||
position: relative;
|
||||
}
|
||||
.card-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 4px;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,255,0.05) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }
|
||||
.card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-mist-08);
|
||||
border-radius: 4px;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--whisper-white); }
|
||||
.form-input-focus { border-color: var(--color-signal-blue); }
|
||||
.form-input-error { border-color: #ff4444; }
|
||||
.form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }
|
||||
textarea.form-input { min-height: 100px; resize: vertical; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: var(--cyan-12);
|
||||
border: 1px solid rgba(0,255,255,0.2);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-mist-10);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; }
|
||||
.elevation-contained { border: 1px solid var(--border-mist-04); }
|
||||
.elevation-standard { border: 1px solid var(--border-mist-08); }
|
||||
.elevation-brutalist {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);
|
||||
}
|
||||
.elevation-floating {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.7);
|
||||
}
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-cyan);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.dark-badge { top: auto; bottom: 16px; right: 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- DARK MODE BADGE -->
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#forms">Forms</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Composio</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md — Dark Mode</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Explore Tokens</button>
|
||||
<button class="btn-cyan">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0007cd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Composio Cobalt</div>
|
||||
<div class="color-swatch-hex">#0007cd</div>
|
||||
<div class="color-swatch-role">Core brand color for high-priority interactive elements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #00ffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Electric Cyan</div>
|
||||
<div class="color-swatch-hex">#00ffff</div>
|
||||
<div class="color-swatch-role">Attention-grabbing accent for glows and highlights</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0089ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Signal Blue</div>
|
||||
<div class="color-swatch-hex">#0089ff</div>
|
||||
<div class="color-swatch-role">Button borders and interactive focus states</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0096ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ocean Blue</div>
|
||||
<div class="color-swatch-hex">#0096ff</div>
|
||||
<div class="color-swatch-role">CTA button accent borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid var(--border-mist-08);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Dark mode page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0f0f0f; border-bottom: 1px solid var(--border-mist-08);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#0f0f0f</div>
|
||||
<div class="color-swatch-role">Standard page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #2c2c2c;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#2c2c2c</div>
|
||||
<div class="color-swatch-role">Secondary button borders and dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary headings and high-emphasis text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #444444;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Smoke</div>
|
||||
<div class="color-swatch-hex">#444444</div>
|
||||
<div class="color-swatch-role">De-emphasized body text, metadata</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Secondary body text and link labels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Whisper White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.5)</div>
|
||||
<div class="color-swatch-role">Tertiary button text and placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.2);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Phantom White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.2)</div>
|
||||
<div class="color-swatch-role">Subtle button backgrounds and receded UI</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Border System</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 12</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
|
||||
<div class="color-swatch-role">Prominent card edges, content separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 10</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.10)</div>
|
||||
<div class="color-swatch-role">Standard container borders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 06</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.06)</div>
|
||||
<div class="color-swatch-role">Section dividers, subtle groupings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 04</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
|
||||
<div class="color-swatch-role">Faintest atmospheric separation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 64px; font-weight: 400; line-height: 0.87;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 48px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 28px; font-weight: 400; line-height: 1.2;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 24px; font-weight: 500; line-height: 1.2;">Card Title</div>
|
||||
<div class="type-sample-label">Card Title — 24px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 20px; font-weight: 500; line-height: 1.2;">Feature Label</div>
|
||||
<div class="type-sample-label">Feature Label — 20px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 18px; font-weight: 400; line-height: 1.2;">Body Large</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.5;">Body / Button Text</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 15px; font-weight: 400; line-height: 1.63;">Body Small — used for longer-form content blocks</div>
|
||||
<div class="type-sample-label">Body Small — 15px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);">Caption text for descriptions and metadata</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 13px; font-weight: 500; line-height: 1.5;">Label Text</div>
|
||||
<div class="type-sample-label">Label — 13px / 500 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;">TAG / OVERLINE</div>
|
||||
<div class="type-sample-label">Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;">const agent = composio.create({ tools: ["github", "slack"] })</div>
|
||||
<div class="type-sample-label">Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">npx composio-cli init --framework langchain</div>
|
||||
<div class="type-sample-label">Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">import { Composio } from "composio-core"</div>
|
||||
<div class="type-sample-label">Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;">CODE OVERLINE</div>
|
||||
<div class="type-sample-label">Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;">CODE MICRO TAG</div>
|
||||
<div class="type-sample-label">Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-primary">Get Started</button>
|
||||
<div class="button-demo-label">Primary / White Fill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-cyan">View Docs</button>
|
||||
<div class="button-demo-label">Cyan Accent CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-blue">Learn More</button>
|
||||
<div class="button-demo-label">Ghost / Signal Blue</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-charcoal">Secondary</button>
|
||||
<div class="button-demo-label">Ghost / Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-phantom">Dismiss</button>
|
||||
<div class="button-demo-label">Phantom</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Mist 08</h3>
|
||||
<p>Standard content card with subtle white border at 8% opacity on pure black surface. Deeper darkness for the dark mode variant.</p>
|
||||
</div>
|
||||
<div class="card card-brutalist">
|
||||
<div class="card-label">Brutalist Shadow</div>
|
||||
<h3>Hard Offset 4px</h3>
|
||||
<p>Hard-offset shadow intensified to 40% opacity on pure black. The brutalist personality cuts deeper against the absolute dark.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Floating + Glow</div>
|
||||
<h3>Cyan Glow Halo</h3>
|
||||
<p>Soft diffuse shadow at 70% opacity with restrained cyan glow. The deeper black makes the glow more pronounced.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<div class="section-title">05 / Form Elements</div>
|
||||
<h2 class="section-heading">Inputs & Forms</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Default Input</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your API key...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Focus State</label>
|
||||
<input type="text" class="form-input form-input-focus" value="composio-api-key-xxxxx">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Error State</label>
|
||||
<input type="text" class="form-input form-input-error" value="invalid-key">
|
||||
<div class="form-error-text">Invalid API key format</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-input" placeholder="Describe your agent's task..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">06 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--ghost-white); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 40px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 4px; height: 4px;"></div>
|
||||
<div class="spacing-label">1px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 8px; height: 8px;"></div>
|
||||
<div class="spacing-label">2px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 16px; height: 16px;"></div>
|
||||
<div class="spacing-label">4px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 24px; height: 24px;"></div>
|
||||
<div class="spacing-label">6px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 32px; height: 32px;"></div>
|
||||
<div class="spacing-label">8px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 40px; height: 40px;"></div>
|
||||
<div class="spacing-label">10px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 48px; height: 48px;"></div>
|
||||
<div class="spacing-label">12px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 56px; height: 56px;"></div>
|
||||
<div class="spacing-label">14px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 64px; height: 64px;"></div>
|
||||
<div class="spacing-label">16px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 72px; height: 72px;"></div>
|
||||
<div class="spacing-label">18px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 80px; height: 80px;"></div>
|
||||
<div class="spacing-label">20px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 96px; height: 96px;"></div>
|
||||
<div class="spacing-label">24px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 120px; height: 120px;"></div>
|
||||
<div class="spacing-label">30px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 128px; height: 128px;"></div>
|
||||
<div class="spacing-label">32px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 160px; height: 160px;"></div>
|
||||
<div class="spacing-label">40px</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">07 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 0px;"></div>
|
||||
<div class="radius-label">0px</div>
|
||||
<div class="radius-context">Sharp / None</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 2px;"></div>
|
||||
<div class="radius-label">2px</div>
|
||||
<div class="radius-context">Nearly squared</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 4px;"></div>
|
||||
<div class="radius-label">4px</div>
|
||||
<div class="radius-context">Subtly rounded</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 37px;"></div>
|
||||
<div class="radius-label">37px</div>
|
||||
<div class="radius-context">Pill-shaped</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 9999px;"></div>
|
||||
<div class="radius-label">9999px</div>
|
||||
<div class="radius-context">Full round</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">08 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div>
|
||||
<div class="elevation-name">Flat</div>
|
||||
<div class="elevation-desc">No shadow, no border. Page background and inline text.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div>
|
||||
<div class="elevation-name">Contained</div>
|
||||
<div class="elevation-desc">Border Mist 04. Background groupings, subtle sections.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-standard">
|
||||
<div>
|
||||
<div class="elevation-name">Card</div>
|
||||
<div class="elevation-desc">Border Mist 08. Standard content cards, code blocks.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-brutalist">
|
||||
<div>
|
||||
<div class="elevation-name">Brutalist</div>
|
||||
<div class="elevation-desc">Hard offset shadow (4px 4px, 40% black). Distinctive feature highlights.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-floating">
|
||||
<div>
|
||||
<div class="elevation-name">Floating</div>
|
||||
<div class="elevation-desc">Soft diffuse shadow (0px 8px 32px, 70% black). Modals, overlays.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,933 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Composio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-brand: #0007cd;
|
||||
--color-black: #000000;
|
||||
--color-void: #0f0f0f;
|
||||
--color-charcoal: #2c2c2c;
|
||||
--color-muted-smoke: #444444;
|
||||
--color-cyan: #00ffff;
|
||||
--color-signal-blue: #0089ff;
|
||||
--color-ocean-blue: #0096ff;
|
||||
--color-light-border: #e0e0e0;
|
||||
--ghost-white: rgba(255,255,255,0.6);
|
||||
--whisper-white: rgba(255,255,255,0.5);
|
||||
--phantom-white: rgba(255,255,255,0.2);
|
||||
--border-mist-12: rgba(255,255,255,0.12);
|
||||
--border-mist-10: rgba(255,255,255,0.10);
|
||||
--border-mist-08: rgba(255,255,255,0.08);
|
||||
--border-mist-06: rgba(255,255,255,0.06);
|
||||
--border-mist-04: rgba(255,255,255,0.04);
|
||||
--cyan-12: rgba(0,255,255,0.12);
|
||||
--font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--color-void);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: rgba(15,15,15,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-mist-06);
|
||||
}
|
||||
.nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-void);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(0,7,205,0.25) 0%, rgba(0,255,255,0.08) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 0.87;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--ghost-white);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-void);
|
||||
padding: 10px 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-cyan {
|
||||
background: var(--cyan-12);
|
||||
color: var(--color-white);
|
||||
padding: 10px 28px;
|
||||
border: 1px solid var(--color-ocean-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-mist-06);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted-smoke);
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
.btn-ghost-blue {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-signal-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost-charcoal {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-charcoal);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-phantom {
|
||||
background: var(--phantom-white);
|
||||
color: var(--whisper-white);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--color-black);
|
||||
border-radius: 4px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-mist-10); }
|
||||
.card-brutalist {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
.card-glow {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
}
|
||||
.card-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 4px;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,255,0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }
|
||||
.card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-mist-10);
|
||||
border-radius: 4px;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--whisper-white); }
|
||||
.form-input-focus { border-color: var(--color-signal-blue); }
|
||||
.form-input-error { border-color: #ff4444; }
|
||||
.form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }
|
||||
textarea.form-input { min-height: 100px; resize: vertical; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: var(--cyan-12);
|
||||
border: 1px solid rgba(0,255,255,0.3);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--color-black);
|
||||
border: 1px solid var(--border-mist-12);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--color-black);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; }
|
||||
.elevation-contained { border: 1px solid var(--border-mist-06); }
|
||||
.elevation-standard { border: 1px solid var(--border-mist-10); }
|
||||
.elevation-brutalist {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
.elevation-floating {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-cyan);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#forms">Forms</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Composio</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Explore Tokens</button>
|
||||
<button class="btn-cyan">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0007cd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Composio Cobalt</div>
|
||||
<div class="color-swatch-hex">#0007cd</div>
|
||||
<div class="color-swatch-role">Core brand color for high-priority interactive elements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #00ffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Electric Cyan</div>
|
||||
<div class="color-swatch-hex">#00ffff</div>
|
||||
<div class="color-swatch-role">Attention-grabbing accent for glows and highlights</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0089ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Signal Blue</div>
|
||||
<div class="color-swatch-hex">#0089ff</div>
|
||||
<div class="color-swatch-role">Button borders and interactive focus states</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0096ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ocean Blue</div>
|
||||
<div class="color-swatch-hex">#0096ff</div>
|
||||
<div class="color-swatch-role">CTA button accent borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0f0f0f; border-bottom: 1px solid var(--border-mist-10);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#0f0f0f</div>
|
||||
<div class="color-swatch-role">Primary page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid var(--border-mist-10);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Card interiors and deep-nested containers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #2c2c2c;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#2c2c2c</div>
|
||||
<div class="color-swatch-role">Secondary button borders and dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary headings and high-emphasis text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #444444;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Smoke</div>
|
||||
<div class="color-swatch-hex">#444444</div>
|
||||
<div class="color-swatch-role">De-emphasized body text, metadata</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Secondary body text and link labels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Whisper White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.5)</div>
|
||||
<div class="color-swatch-role">Tertiary button text and placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.2);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Phantom White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.2)</div>
|
||||
<div class="color-swatch-role">Subtle button backgrounds and receded UI</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Border System</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 12</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
|
||||
<div class="color-swatch-role">Prominent card edges, content separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 10</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.10)</div>
|
||||
<div class="color-swatch-role">Standard container borders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 06</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.06)</div>
|
||||
<div class="color-swatch-role">Section dividers, subtle groupings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 04</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
|
||||
<div class="color-swatch-role">Faintest atmospheric separation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 64px; font-weight: 400; line-height: 0.87;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 48px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 28px; font-weight: 400; line-height: 1.2;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 24px; font-weight: 500; line-height: 1.2;">Card Title</div>
|
||||
<div class="type-sample-label">Card Title — 24px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 20px; font-weight: 500; line-height: 1.2;">Feature Label</div>
|
||||
<div class="type-sample-label">Feature Label — 20px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 18px; font-weight: 400; line-height: 1.2;">Body Large</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.5;">Body / Button Text</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 15px; font-weight: 400; line-height: 1.63;">Body Small — used for longer-form content blocks</div>
|
||||
<div class="type-sample-label">Body Small — 15px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);">Caption text for descriptions and metadata</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 13px; font-weight: 500; line-height: 1.5;">Label Text</div>
|
||||
<div class="type-sample-label">Label — 13px / 500 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;">TAG / OVERLINE</div>
|
||||
<div class="type-sample-label">Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;">const agent = composio.create({ tools: ["github", "slack"] })</div>
|
||||
<div class="type-sample-label">Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">npx composio-cli init --framework langchain</div>
|
||||
<div class="type-sample-label">Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">import { Composio } from "composio-core"</div>
|
||||
<div class="type-sample-label">Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;">CODE OVERLINE</div>
|
||||
<div class="type-sample-label">Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;">CODE MICRO TAG</div>
|
||||
<div class="type-sample-label">Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-primary">Get Started</button>
|
||||
<div class="button-demo-label">Primary / White Fill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-cyan">View Docs</button>
|
||||
<div class="button-demo-label">Cyan Accent CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-blue">Learn More</button>
|
||||
<div class="button-demo-label">Ghost / Signal Blue</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-charcoal">Secondary</button>
|
||||
<div class="button-demo-label">Ghost / Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-phantom">Dismiss</button>
|
||||
<div class="button-demo-label">Phantom</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Mist 10</h3>
|
||||
<p>Standard content card with subtle white border at 10% opacity and 4px radius. The default container for most content blocks.</p>
|
||||
</div>
|
||||
<div class="card card-brutalist">
|
||||
<div class="card-label">Brutalist Shadow</div>
|
||||
<h3>Hard Offset 4px</h3>
|
||||
<p>Distinctive hard-offset shadow (4px right, 4px down) at 15% opacity. Adds a raw, retro-computing personality to select elements.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Floating + Glow</div>
|
||||
<h3>Cyan Glow Halo</h3>
|
||||
<p>Soft diffuse shadow (8px 32px) with a radial cyan gradient halo. Used for highest-emphasis elevated content and feature highlights.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<div class="section-title">05 / Form Elements</div>
|
||||
<h2 class="section-heading">Inputs & Forms</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Default Input</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your API key...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Focus State</label>
|
||||
<input type="text" class="form-input form-input-focus" value="composio-api-key-xxxxx">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Error State</label>
|
||||
<input type="text" class="form-input form-input-error" value="invalid-key">
|
||||
<div class="form-error-text">Invalid API key format</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-input" placeholder="Describe your agent's task..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">06 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--ghost-white); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 40px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 4px; height: 4px;"></div>
|
||||
<div class="spacing-label">1px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 8px; height: 8px;"></div>
|
||||
<div class="spacing-label">2px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 16px; height: 16px;"></div>
|
||||
<div class="spacing-label">4px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 24px; height: 24px;"></div>
|
||||
<div class="spacing-label">6px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 32px; height: 32px;"></div>
|
||||
<div class="spacing-label">8px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 40px; height: 40px;"></div>
|
||||
<div class="spacing-label">10px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 48px; height: 48px;"></div>
|
||||
<div class="spacing-label">12px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 56px; height: 56px;"></div>
|
||||
<div class="spacing-label">14px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 64px; height: 64px;"></div>
|
||||
<div class="spacing-label">16px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 72px; height: 72px;"></div>
|
||||
<div class="spacing-label">18px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 80px; height: 80px;"></div>
|
||||
<div class="spacing-label">20px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 96px; height: 96px;"></div>
|
||||
<div class="spacing-label">24px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 120px; height: 120px;"></div>
|
||||
<div class="spacing-label">30px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 128px; height: 128px;"></div>
|
||||
<div class="spacing-label">32px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 160px; height: 160px;"></div>
|
||||
<div class="spacing-label">40px</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">07 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 0px;"></div>
|
||||
<div class="radius-label">0px</div>
|
||||
<div class="radius-context">Sharp / None</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 2px;"></div>
|
||||
<div class="radius-label">2px</div>
|
||||
<div class="radius-context">Nearly squared</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 4px;"></div>
|
||||
<div class="radius-label">4px</div>
|
||||
<div class="radius-context">Subtly rounded</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 37px;"></div>
|
||||
<div class="radius-label">37px</div>
|
||||
<div class="radius-context">Pill-shaped</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 9999px;"></div>
|
||||
<div class="radius-label">9999px</div>
|
||||
<div class="radius-context">Full round</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">08 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div>
|
||||
<div class="elevation-name">Flat</div>
|
||||
<div class="elevation-desc">No shadow, no border. Page background and inline text.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div>
|
||||
<div class="elevation-name">Contained</div>
|
||||
<div class="elevation-desc">Border Mist 04-08. Background groupings, subtle sections.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-standard">
|
||||
<div>
|
||||
<div class="elevation-name">Card</div>
|
||||
<div class="elevation-desc">Border Mist 10-12. Standard content cards, code blocks.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-brutalist">
|
||||
<div>
|
||||
<div class="elevation-name">Brutalist</div>
|
||||
<div class="elevation-desc">Hard offset shadow (4px 4px, 15% black). Distinctive feature highlights.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-floating">
|
||||
<div>
|
||||
<div class="elevation-name">Floating</div>
|
||||
<div class="elevation-desc">Soft diffuse shadow (0px 8px 32px, 50% black). Modals, overlays.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,309 +0,0 @@
|
||||
# Design System Inspiration of Cursor
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.
|
||||
|
||||
The custom CursorGothic font is the typographic signature -- a gothic sans-serif with aggressive negative letter-spacing at display sizes (-2.16px at 72px) that creates a compressed, engineered feel. As a secondary voice, the jjannon serif font (with OpenType `"cswh"` contextual swash alternates) provides literary counterpoint for body copy and editorial passages. The monospace voice comes from berkeleyMono, a refined coding font that connects the marketing site to Cursor's core identity as a code editor. This three-font system (gothic display, serif body, mono code) gives Cursor one of the most typographically rich palettes in developer tooling.
|
||||
|
||||
The border system is particularly distinctive -- Cursor uses `oklab()` color space for border colors, applying warm brown at various alpha levels (0.1, 0.2, 0.55) to create borders that feel organic rather than mechanical. The signature border color `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` is not a simple rgba value but a perceptually uniform color that maintains visual consistency across different backgrounds.
|
||||
|
||||
**Key Characteristics:**
|
||||
- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings
|
||||
- jjannon serif for body text with OpenType `"cswh"` (contextual swash alternates)
|
||||
- berkeleyMono for code and technical labels
|
||||
- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
|
||||
- Primary text color `#26251e` (warm near-black with yellow undertone)
|
||||
- Accent orange `#f54e00` for brand highlight and links
|
||||
- oklab-space borders at various alpha levels for perceptually uniform edge treatment
|
||||
- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)
|
||||
- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cursor Dark** (`#26251e`): Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.
|
||||
- **Cursor Cream** (`#f2f1ed`): Page background, primary surface. Not white but a warm cream that sets the entire warm tone.
|
||||
- **Cursor Light** (`#e6e5e0`): Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.
|
||||
- **Pure White** (`#ffffff`): Used sparingly for maximum contrast elements and specific surface highlights.
|
||||
- **True Black** (`#000000`): Minimal use, specific code/console contexts.
|
||||
|
||||
### Accent
|
||||
- **Cursor Orange** (`#f54e00`): Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.
|
||||
- **Gold** (`#c08532`): Secondary accent, warm gold for premium or highlighted contexts.
|
||||
|
||||
### Semantic
|
||||
- **Error** (`#cf2d56`): `--color-error`. A warm crimson-rose rather than cold red.
|
||||
- **Success** (`#1f8a65`): `--color-success`. A muted teal-green, warm-shifted.
|
||||
|
||||
### Timeline / Feature Colors
|
||||
- **Thinking** (`#dfa88f`): Warm peach for "thinking" state in AI timeline.
|
||||
- **Grep** (`#9fc9a2`): Soft sage green for search/grep operations.
|
||||
- **Read** (`#9fbbe0`): Soft blue for file reading operations.
|
||||
- **Edit** (`#c0a8dd`): Soft lavender for editing operations.
|
||||
|
||||
### Surface Scale
|
||||
- **Surface 100** (`#f7f7f4`): Lightest button/card surface, barely tinted.
|
||||
- **Surface 200** (`#f2f1ed`): Primary page background.
|
||||
- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.
|
||||
- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.
|
||||
- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.
|
||||
|
||||
### Border Colors
|
||||
- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`): Standard border, 10% warm brown in oklab space.
|
||||
- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`): Emphasized border, 20% warm brown.
|
||||
- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.
|
||||
- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.
|
||||
- **Border Light** (`#f2f1ed`): Light border matching page background.
|
||||
|
||||
### Shadows & Depth
|
||||
- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.
|
||||
- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display/Headlines**: `CursorGothic`, with fallbacks: `CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`
|
||||
- **Body/Editorial**: `jjannon`, with fallbacks: `Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`
|
||||
- **Code/Technical**: `berkeleyMono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
|
||||
- **UI/System**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Helvetica Neue, Arial`
|
||||
- **Icons**: `CursorIcons16` (icon font at 14px and 12px)
|
||||
- **OpenType Features**: `"cswh"` on jjannon body text, `"ss09"` on CursorGothic buttons/captions
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | Maximum compression, hero statements |
|
||||
| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | Feature sections, CTA headlines |
|
||||
| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | Card headings, sub-sections |
|
||||
| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | Smaller titles, list headings |
|
||||
| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | Editorial body with `"cswh"` |
|
||||
| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | Standard body text, descriptions |
|
||||
| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI body text |
|
||||
| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |
|
||||
| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `"ss09"` |
|
||||
| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |
|
||||
| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |
|
||||
| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |
|
||||
| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |
|
||||
| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |
|
||||
| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |
|
||||
| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |
|
||||
| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |
|
||||
| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |
|
||||
|
||||
### Principles
|
||||
- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.
|
||||
- **Serif for soul**: jjannon provides literary warmth. The `"cswh"` feature adds contextual swash alternates that give body text a calligraphic quality.
|
||||
- **Three typographic voices**: Gothic (display/UI), serif (editorial/body), mono (code/technical). Each serves a distinct communication purpose.
|
||||
- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Warm Surface)**
|
||||
- Background: `#ebeae5` (Surface 300)
|
||||
- Text: `#26251e` (Cursor Dark)
|
||||
- Padding: 10px 12px 10px 14px
|
||||
- Radius: 8px
|
||||
- Outline: none
|
||||
- Hover: text shifts to `var(--color-error)` (`#cf2d56`)
|
||||
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Use: Primary actions, main CTAs
|
||||
|
||||
**Secondary Pill**
|
||||
- Background: `#e6e5e0` (Surface 400)
|
||||
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
|
||||
- Padding: 3px 8px
|
||||
- Radius: full pill (33.5M px)
|
||||
- Hover: text shifts to `var(--color-error)`
|
||||
- Use: Tags, filters, secondary actions
|
||||
|
||||
**Tertiary Pill**
|
||||
- Background: `#e1e0db` (Surface 500)
|
||||
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
|
||||
- Radius: full pill
|
||||
- Use: Active filter state, selected tags
|
||||
|
||||
**Ghost (Transparent)**
|
||||
- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)
|
||||
- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
|
||||
- Padding: 6px 12px
|
||||
- Use: Tertiary actions, dismiss buttons
|
||||
|
||||
**Light Surface**
|
||||
- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)
|
||||
- Text: `#26251e` or `oklab(0.263 / 0.9)` (90%)
|
||||
- Padding: 0px 8px 1px 12px
|
||||
- Use: Dropdown triggers, subtle interactive elements
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#e6e5e0` or `#f2f1ed`
|
||||
- Border: `1px solid oklab(0.263 / 0.1)` (warm brown at 10%)
|
||||
- Radius: 8px (standard), 4px (compact), 10px (featured)
|
||||
- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards
|
||||
- Hover: shadow intensification
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: transparent or surface
|
||||
- Text: `#26251e`
|
||||
- Padding: 8px 8px 6px (textarea)
|
||||
- Border: `1px solid oklab(0.263 / 0.1)`
|
||||
- Focus: border shifts to `oklab(0.263 / 0.2)` or accent orange
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on warm cream background
|
||||
- Cursor logotype left-aligned (~96x24px)
|
||||
- Links: 14px CursorGothic or system-ui, weight 500
|
||||
- CTA button: warm surface with Cursor Dark text
|
||||
- Tab navigation: bottom border `1px solid oklab(0.263 / 0.1)` with active tab differentiation
|
||||
|
||||
### Image Treatment
|
||||
- Code editor screenshots with `1px solid oklab(0.263 / 0.1)` border
|
||||
- Rounded corners: 8px standard
|
||||
- AI chat/timeline screenshots dominate feature sections
|
||||
- Warm gradient or solid cream backgrounds behind hero images
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**AI Timeline**
|
||||
- Vertical timeline showing AI operations: thinking (peach), grep (sage), read (blue), edit (lavender)
|
||||
- Each step uses its semantic color with matching text
|
||||
- Connected with vertical lines
|
||||
- Core visual metaphor for Cursor's AI-first coding experience
|
||||
|
||||
**Code Editor Previews**
|
||||
- Dark code editor screenshots with warm cream border frame
|
||||
- berkeleyMono for code text
|
||||
- Syntax highlighting using timeline colors
|
||||
|
||||
**Pricing Cards**
|
||||
- Warm surface backgrounds with bordered containers
|
||||
- Feature lists using jjannon serif for readability
|
||||
- CTA buttons with accent orange or primary dark styling
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)
|
||||
- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)
|
||||
- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px
|
||||
- Notable: fine-grained sub-8px increments for precise icon/text alignment
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous top padding (80-120px)
|
||||
- Feature sections: 2-3 column grids for cards and features
|
||||
- Full-width sections with warm cream or slightly darker backgrounds
|
||||
- Sidebar layouts for documentation and settings pages
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.
|
||||
- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.
|
||||
- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (1.5px): Fine detail elements
|
||||
- Small (2px): Inline elements, code spans
|
||||
- Medium (3px): Small containers, inline badges
|
||||
- Standard (4px): Cards, images, compact buttons
|
||||
- Comfortable (8px): Primary buttons, cards, menus
|
||||
- Featured (10px): Larger containers, featured cards
|
||||
- Full Pill (33.5M px / 9999px): Pill buttons, tags, badges
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Border Ring (Level 1) | `oklab(0.263 / 0.1) 0px 0px 0px 1px` | Standard card/container border (warm oklab) |
|
||||
| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |
|
||||
| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |
|
||||
| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |
|
||||
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |
|
||||
|
||||
**Shadow Philosophy**: Cursor's depth system is built around two ideas. First, borders use perceptually uniform oklab color space rather than rgba, ensuring warm brown borders look consistent across different background tones. Second, elevation shadows use dramatically large blur values (28px, 70px) with moderate opacity (0.14, 0.1), creating a diffused, atmospheric lift rather than hard-edged drop shadows. Cards don't feel like they float above the page -- they feel like the page has gently opened a space for them.
|
||||
|
||||
### Decorative Depth
|
||||
- Warm cream surface variations create subtle tonal depth without shadows
|
||||
- oklab borders at 10% and 20% create a spectrum of edge definition
|
||||
- No harsh divider lines -- section separation through background tone shifts and spacing
|
||||
|
||||
## 7. Interaction & Motion
|
||||
|
||||
### Hover States
|
||||
- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity
|
||||
- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`
|
||||
- Cards: shadow intensification on hover (ambient → elevated)
|
||||
|
||||
### Focus States
|
||||
- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication
|
||||
- Border focus: `oklab(0.263 / 0.2)` (20% border) for input/form focus
|
||||
- Consistent warm tone in all focus states -- no cold blue focus rings
|
||||
|
||||
### Transitions
|
||||
- Color transitions: 150ms ease for text/background color changes
|
||||
- Shadow transitions: 200ms ease for elevation changes
|
||||
- Transform: subtle scale or translate for interactive feedback
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <600px | Single column, reduced padding, stacked navigation |
|
||||
| Tablet Small | 600-768px | 2-column grids begin |
|
||||
| Tablet | 768-900px | Expanded card grids, sidebar appears |
|
||||
| Desktop Small | 900-1279px | Full layout forming |
|
||||
| Desktop | >1279px | Full layout, maximum content width |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)
|
||||
- Pill buttons maintain tap-friendly sizing with 3px-10px padding
|
||||
- Navigation links at 14px with adequate spacing for touch
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing
|
||||
- Navigation: horizontal links → hamburger menu on mobile
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved
|
||||
- Timeline visualization: horizontal → vertical stacking
|
||||
- Section spacing: 80px+ → 48px → 32px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Editor screenshots maintain warm border treatment at all sizes
|
||||
- AI timeline adapts from horizontal to vertical layout
|
||||
- Product screenshots use responsive images with consistent border radius
|
||||
- Full-width hero images scale proportionally
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA background: `#ebeae5` (warm cream button)
|
||||
- Page background: `#f2f1ed` (warm off-white)
|
||||
- Text color: `#26251e` (warm near-black)
|
||||
- Secondary text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
|
||||
- Accent: `#f54e00` (orange)
|
||||
- Error/hover: `#cf2d56` (warm crimson)
|
||||
- Success: `#1f8a65` (muted teal)
|
||||
- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`."
|
||||
- "Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents."
|
||||
- "Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400."
|
||||
- "Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`."
|
||||
- "Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white/black for primary surfaces
|
||||
2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px
|
||||
3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders
|
||||
4. Three fonts, three voices: CursorGothic (display/UI), jjannon (editorial), berkeleyMono (code)
|
||||
5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards
|
||||
6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction
|
||||
7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth
|
||||
8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon/text micro-alignment
|
||||
@@ -1,24 +1,3 @@
|
||||
# Cursor Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) extracted from the public [Cursor](https://cursor.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cursor design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cursor/design-md
|
||||
|
||||
@@ -1,393 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cursor</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cursor-dark: #e6e5e0;
|
||||
--cursor-cream: #1a1915;
|
||||
--cursor-light: #2a2922;
|
||||
--surface-100: #1e1d17;
|
||||
--surface-200: #1a1915;
|
||||
--surface-300: #2a2922;
|
||||
--surface-400: #33322a;
|
||||
--surface-500: #3d3c33;
|
||||
--white: #111110;
|
||||
--black: #f2f1ed;
|
||||
--accent: #f54e00;
|
||||
--error: #e04a6f;
|
||||
--success: #2fba8a;
|
||||
--gold: #d9a04a;
|
||||
--thinking: #a06b50;
|
||||
--grep: #5a9e5e;
|
||||
--read: #5a8ab8;
|
||||
--edit: #8a6fb8;
|
||||
--text-primary: #e6e5e0;
|
||||
--text-secondary: rgba(230, 229, 224, 0.55);
|
||||
--text-tertiary: rgba(230, 229, 224, 0.35);
|
||||
--border-default: rgba(230, 229, 224, 0.1);
|
||||
--border-medium: rgba(230, 229, 224, 0.2);
|
||||
--border-strong: rgba(230, 229, 224, 0.55);
|
||||
--shadow-card: rgba(0,0,0,0.4) 0px 28px 70px 0px, rgba(0,0,0,0.3) 0px 14px 32px 0px, rgba(230,229,224,0.08) 0px 0px 0px 1px;
|
||||
--shadow-ambient: rgba(0,0,0,0.1) 0px 0px 16px 0px, rgba(0,0,0,0.05) 0px 0px 8px 0px;
|
||||
--shadow-focus: rgba(245,78,0,0.3) 0px 4px 12px;
|
||||
--font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cursor-cream);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-gothic);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 12px; right: 12px; z-index: 200;
|
||||
background: var(--accent); color: #ffffff;
|
||||
padding: 4px 12px; border-radius: 9999px;
|
||||
font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(26, 25, 21, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--accent); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--surface-300); color: var(--text-primary);
|
||||
padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--surface-500); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 72px; font-weight: 400; line-height: 1.10;
|
||||
letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--surface-300); color: var(--text-primary);
|
||||
padding: 10px 14px 10px 14px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-primary:hover { color: var(--error); }
|
||||
.btn-dark {
|
||||
display: inline-block; background: var(--text-primary); color: var(--cursor-cream);
|
||||
padding: 10px 20px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.85; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: rgba(230,229,224,0.06); color: var(--text-secondary);
|
||||
padding: 6px 12px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: color 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { color: var(--error); }
|
||||
.btn-pill {
|
||||
display: inline-block; background: var(--surface-400); color: rgba(230,229,224,0.6);
|
||||
padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: color 0.15s;
|
||||
}
|
||||
.btn-pill:hover { color: var(--error); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-default); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--surface-300); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }
|
||||
.card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--surface-300); color: var(--text-primary);
|
||||
border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;
|
||||
font-family: var(--font-gothic); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); }
|
||||
.form-input--focus { border-color: var(--accent); }
|
||||
.form-input--error { border-color: var(--error); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--surface-300); color: var(--text-primary);
|
||||
border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;
|
||||
font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--text-primary); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--text-primary); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-tertiary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--surface-300); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.72px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Download Editor</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Cursor</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm dark tones.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Download Cursor</a>
|
||||
<a class="btn-primary" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#26251e"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Dark</div><div class="color-swatch-hex">#26251e</div><div class="color-swatch-role">Primary text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Cream</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Light</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent & Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f54e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Orange</div><div class="color-swatch-hex">#f54e00</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c08532"></div><div class="color-swatch-info"><div class="color-swatch-name">Gold</div><div class="color-swatch-hex">#c08532</div><div class="color-swatch-role">Secondary accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#cf2d56"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#cf2d56</div><div class="color-swatch-role">Error, hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f8a65"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#1f8a65</div><div class="color-swatch-role">Success state</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">AI Timeline Colors</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dfa88f"></div><div class="color-swatch-info"><div class="color-swatch-name">Thinking</div><div class="color-swatch-hex">#dfa88f</div><div class="color-swatch-role">AI thinking state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fc9a2"></div><div class="color-swatch-info"><div class="color-swatch-name">Grep</div><div class="color-swatch-hex">#9fc9a2</div><div class="color-swatch-role">Search operations</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fbbe0"></div><div class="color-swatch-info"><div class="color-swatch-name">Read</div><div class="color-swatch-hex">#9fbbe0</div><div class="color-swatch-role">File reading</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c0a8dd"></div><div class="color-swatch-info"><div class="color-swatch-name">Edit</div><div class="color-swatch-hex">#c0a8dd</div><div class="color-swatch-role">Code editing</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Surface Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f7f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 100</div><div class="color-swatch-hex">#f7f7f4</div><div class="color-swatch-role">Lightest surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 200</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ebeae5"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 300</div><div class="color-swatch-hex">#ebeae5</div><div class="color-swatch-role">Button default</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 400</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Card backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e1e0db"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 500</div><div class="color-swatch-hex">#e1e0db</div><div class="color-swatch-role">Active/pressed</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;">Display Hero</div><div class="type-meta">Display Hero -- 72px / 400 / 1.10 / -2.16px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;">Section Heading</div><div class="type-meta">Section Heading -- 36px / 400 / 1.20 / -0.72px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 400 / 1.25 / -0.325px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;">Title Small</div><div class="type-meta">Title Small -- 22px / 400 / 1.30 / -0.11px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.</div><div class="type-meta">Body Serif -- 19.2px / 500 / 1.50 / jjannon (with cswh)</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;">Body Serif Small -- Write code naturally with AI that understands your entire codebase.</div><div class="type-meta">Body Serif SM -- 17.28px / 400 / 1.35 / jjannon</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Sans -- Standard UI text for navigation and interface elements</div><div class="type-meta">Body Sans -- 16px / 400 / 1.50 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00;">Button Label</div><div class="type-meta">Button Label -- 14px / 400 / 1.00 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:11px; font-weight:500; line-height:1.50;">Caption -- Small metadata and labels</div><div class="type-meta">Caption -- 11px / 500 / 1.50 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;">const editor = await cursor.init({ ai: true });</div><div class="type-meta">Mono Body -- 12px / 400 / 1.67 / berkeleyMono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;">AI OPERATIONS</div><div class="type-meta">System Micro -- 11px / 500 / uppercase / system-ui</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Download Cursor</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-primary" href="#">Documentation</a><div class="button-label">Primary Surface</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><a class="btn-pill" href="#">AI-First</a><div class="button-label">Pill Tag</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--thinking); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Thinking</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--grep); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Grep</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--read); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Read</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--edit); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Edit</span><div class="button-label">Timeline Pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(245,78,0,0.15); color:var(--accent);">AI</div>
|
||||
<h3>Tab Autocomplete</h3>
|
||||
<p>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(90,138,184,0.2); color:#9fbbe0;">Elevated</div>
|
||||
<h3>Chat with Codebase</h3>
|
||||
<p>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(138,111,184,0.2); color:#c0a8dd;">Agent</div>
|
||||
<h3>Agentic Editing</h3>
|
||||
<p>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-cursor-project"><div class="form-state-label">Default (warm border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="cursor/editor"><div class="form-state-label">Focus (accent orange)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid-key"><div class="form-state-label">Error (warm crimson)</div></div>
|
||||
<div class="form-group"><label class="form-label">Instructions</label><textarea class="form-textarea" placeholder="Describe the changes you want..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:3px"></div><div class="spacing-value">3</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:5px"></div><div class="spacing-value">5</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1.5px"></div><div class="radius-label">1.5px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Inline</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:3px"></div><div class="radius-label">3px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Cards, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons, cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div><div class="radius-context">Featured</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-default);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(230,229,224,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Border Ring</div><div class="elevation-desc">oklab warm border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(230,229,224,0.2) 0px 0px 0px 1px;"><div class="elevation-label">Level 1b: Medium</div><div class="elevation-desc">Emphasized border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 2: Ambient</div><div class="elevation-desc">Subtle glow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-card);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Modal / popover</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-focus);"><div class="elevation-label">Focus</div><div class="elevation-desc">Interactive focus</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,383 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cursor</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cursor-dark: #26251e;
|
||||
--cursor-cream: #f2f1ed;
|
||||
--cursor-light: #e6e5e0;
|
||||
--surface-100: #f7f7f4;
|
||||
--surface-200: #f2f1ed;
|
||||
--surface-300: #ebeae5;
|
||||
--surface-400: #e6e5e0;
|
||||
--surface-500: #e1e0db;
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
--accent: #f54e00;
|
||||
--error: #cf2d56;
|
||||
--success: #1f8a65;
|
||||
--gold: #c08532;
|
||||
--thinking: #dfa88f;
|
||||
--grep: #9fc9a2;
|
||||
--read: #9fbbe0;
|
||||
--edit: #c0a8dd;
|
||||
--text-primary: #26251e;
|
||||
--text-secondary: rgba(38, 37, 30, 0.55);
|
||||
--text-tertiary: rgba(38, 37, 30, 0.4);
|
||||
--border-default: rgba(38, 37, 30, 0.1);
|
||||
--border-medium: rgba(38, 37, 30, 0.2);
|
||||
--border-strong: rgba(38, 37, 30, 0.55);
|
||||
--shadow-card: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;
|
||||
--shadow-ambient: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;
|
||||
--shadow-focus: rgba(0,0,0,0.1) 0px 4px 12px;
|
||||
--font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cursor-cream);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-gothic);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(242, 241, 237, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--accent); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--surface-300); color: var(--text-primary);
|
||||
padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--surface-500); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 72px; font-weight: 400; line-height: 1.10;
|
||||
letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--surface-300); color: var(--text-primary);
|
||||
padding: 10px 14px 10px 14px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-primary:hover { color: var(--error); }
|
||||
.btn-dark {
|
||||
display: inline-block; background: var(--cursor-dark); color: var(--cursor-cream);
|
||||
padding: 10px 20px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.85; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: rgba(38,37,30,0.06); color: var(--text-secondary);
|
||||
padding: 6px 12px; border-radius: 8px; border: none;
|
||||
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: color 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { color: var(--error); }
|
||||
.btn-pill {
|
||||
display: inline-block; background: var(--surface-400); color: rgba(38,37,30,0.6);
|
||||
padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: color 0.15s;
|
||||
}
|
||||
.btn-pill:hover { color: var(--error); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-default); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--white); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }
|
||||
.card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--white); color: var(--text-primary);
|
||||
border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;
|
||||
font-family: var(--font-gothic); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); }
|
||||
.form-input--focus { border-color: var(--accent); }
|
||||
.form-input--error { border-color: var(--error); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--white); color: var(--text-primary);
|
||||
border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;
|
||||
font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--cursor-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--cursor-dark); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-tertiary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.72px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Download Editor</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Cursor</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm cream tones.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Download Cursor</a>
|
||||
<a class="btn-primary" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#26251e"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Dark</div><div class="color-swatch-hex">#26251e</div><div class="color-swatch-role">Primary text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Cream</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Light</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid rgba(38,37,30,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent & Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f54e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Orange</div><div class="color-swatch-hex">#f54e00</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c08532"></div><div class="color-swatch-info"><div class="color-swatch-name">Gold</div><div class="color-swatch-hex">#c08532</div><div class="color-swatch-role">Secondary accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#cf2d56"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#cf2d56</div><div class="color-swatch-role">Error, hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f8a65"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#1f8a65</div><div class="color-swatch-role">Success state</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">AI Timeline Colors</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dfa88f"></div><div class="color-swatch-info"><div class="color-swatch-name">Thinking</div><div class="color-swatch-hex">#dfa88f</div><div class="color-swatch-role">AI thinking state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fc9a2"></div><div class="color-swatch-info"><div class="color-swatch-name">Grep</div><div class="color-swatch-hex">#9fc9a2</div><div class="color-swatch-role">Search operations</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fbbe0"></div><div class="color-swatch-info"><div class="color-swatch-name">Read</div><div class="color-swatch-hex">#9fbbe0</div><div class="color-swatch-role">File reading</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c0a8dd"></div><div class="color-swatch-info"><div class="color-swatch-name">Edit</div><div class="color-swatch-hex">#c0a8dd</div><div class="color-swatch-role">Code editing</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Surface Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f7f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 100</div><div class="color-swatch-hex">#f7f7f4</div><div class="color-swatch-role">Lightest surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 200</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ebeae5"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 300</div><div class="color-swatch-hex">#ebeae5</div><div class="color-swatch-role">Button default</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 400</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Card backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e1e0db"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 500</div><div class="color-swatch-hex">#e1e0db</div><div class="color-swatch-role">Active/pressed</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;">Display Hero</div><div class="type-meta">Display Hero -- 72px / 400 / 1.10 / -2.16px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;">Section Heading</div><div class="type-meta">Section Heading -- 36px / 400 / 1.20 / -0.72px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 400 / 1.25 / -0.325px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;">Title Small</div><div class="type-meta">Title Small -- 22px / 400 / 1.30 / -0.11px / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.</div><div class="type-meta">Body Serif -- 19.2px / 500 / 1.50 / jjannon (with cswh)</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;">Body Serif Small -- Write code naturally with AI that understands your entire codebase.</div><div class="type-meta">Body Serif SM -- 17.28px / 400 / 1.35 / jjannon</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Sans -- Standard UI text for navigation and interface elements</div><div class="type-meta">Body Sans -- 16px / 400 / 1.50 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00;">Button Label</div><div class="type-meta">Button Label -- 14px / 400 / 1.00 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-size:11px; font-weight:500; line-height:1.50;">Caption -- Small metadata and labels</div><div class="type-meta">Caption -- 11px / 500 / 1.50 / CursorGothic</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;">const editor = await cursor.init({ ai: true });</div><div class="type-meta">Mono Body -- 12px / 400 / 1.67 / berkeleyMono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;">AI OPERATIONS</div><div class="type-meta">System Micro -- 11px / 500 / uppercase / system-ui</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Download Cursor</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-primary" href="#">Documentation</a><div class="button-label">Primary Surface</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><a class="btn-pill" href="#">AI-First</a><div class="button-label">Pill Tag</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--thinking); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Thinking</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--grep); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Grep</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--read); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Read</span><div class="button-label">Timeline Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--edit); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Edit</span><div class="button-label">Timeline Pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(245,78,0,0.1); color:var(--accent);">AI</div>
|
||||
<h3>Tab Autocomplete</h3>
|
||||
<p>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(159,187,224,0.2); color:#4a7ab5;">Elevated</div>
|
||||
<h3>Chat with Codebase</h3>
|
||||
<p>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(192,168,221,0.2); color:#7b5fa8;">Agent</div>
|
||||
<h3>Agentic Editing</h3>
|
||||
<p>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-cursor-project"><div class="form-state-label">Default (warm border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="cursor/editor"><div class="form-state-label">Focus (accent orange)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid-key"><div class="form-state-label">Error (warm crimson)</div></div>
|
||||
<div class="form-group"><label class="form-label">Instructions</label><textarea class="form-textarea" placeholder="Describe the changes you want..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:3px"></div><div class="spacing-value">3</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:5px"></div><div class="spacing-value">5</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1.5px"></div><div class="radius-label">1.5px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Inline</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:3px"></div><div class="radius-label">3px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Cards, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons, cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div><div class="radius-context">Featured</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-default);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(38,37,30,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Border Ring</div><div class="elevation-desc">oklab warm border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(38,37,30,0.2) 0px 0px 0px 1px;"><div class="elevation-label">Level 1b: Medium</div><div class="elevation-desc">Emphasized border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;"><div class="elevation-label">Level 2: Ambient</div><div class="elevation-desc">Subtle glow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Modal / popover</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Interactive focus</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,265 +0,0 @@
|
||||
# Design System Inspiration of ElevenLabs
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
|
||||
|
||||
The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
|
||||
|
||||
What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
|
||||
- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
|
||||
- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
|
||||
- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
|
||||
- Pill buttons (9999px) with warm stone-tinted backgrounds
|
||||
- WaldenburgFH bold uppercase for specific CTA labels
|
||||
- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
|
||||
- Geist Mono / ui-monospace for code snippets
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
|
||||
- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
|
||||
- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
|
||||
- **Black** (`#000000`): Primary text, headings, dark buttons
|
||||
|
||||
### Neutral Scale
|
||||
- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
|
||||
- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
|
||||
- **Near White** (`#f6f6f6`): Alternate light surface
|
||||
|
||||
### Interactive
|
||||
- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
|
||||
- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
|
||||
- **Border Light** (`#e5e5e5`): Explicit borders
|
||||
- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
|
||||
|
||||
### Shadows
|
||||
- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
|
||||
- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
|
||||
- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
|
||||
- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
|
||||
- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
|
||||
- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
|
||||
- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
|
||||
- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
|
||||
- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
|
||||
- **Body / UI**: `Inter`, fallback: `Inter Fallback`
|
||||
- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
|
||||
| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
|
||||
| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
|
||||
| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
|
||||
| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
|
||||
| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
|
||||
| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
|
||||
| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
|
||||
| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
|
||||
| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
|
||||
| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
|
||||
| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
|
||||
| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
|
||||
| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
|
||||
| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
|
||||
|
||||
### Principles
|
||||
- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
|
||||
- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
|
||||
- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
|
||||
- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Black Pill**
|
||||
- Background: `#000000`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 14px
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Primary CTA
|
||||
|
||||
**White Pill (Shadow-bordered)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Radius: 9999px
|
||||
- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
|
||||
- Use: Secondary CTA on white
|
||||
|
||||
**Warm Stone Pill**
|
||||
- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
|
||||
- Text: `#000000`
|
||||
- Padding: 12px 20px 12px 14px (asymmetric)
|
||||
- Radius: 30px
|
||||
- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
|
||||
- Use: Featured CTA, hero action — the signature warm button
|
||||
|
||||
**Uppercase Waldenburg Button**
|
||||
- Font: WaldenburgFH 14px weight 700
|
||||
- Text-transform: uppercase
|
||||
- Letter-spacing: 0.7px
|
||||
- Use: Specific bold CTA labels
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid #e5e5e5` or shadow-as-border
|
||||
- Radius: 16px–24px
|
||||
- Shadow: multi-layer stack (inset + outline + elevation)
|
||||
- Content: product screenshots, code examples, audio waveform previews
|
||||
|
||||
### Inputs & Forms
|
||||
- Textarea: padding 12px 20px, transparent text at default
|
||||
- Select: white background, standard styling
|
||||
- Radio: standard with tw-ring focus
|
||||
- Focus: `var(--tw-ring-offset-shadow)` ring system
|
||||
|
||||
### Navigation
|
||||
- Clean white sticky header
|
||||
- Inter 15px weight 500 for nav links
|
||||
- Pill CTAs right-aligned (black primary, white secondary)
|
||||
- Mobile: hamburger collapse at 1024px
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots and audio waveform visualizations
|
||||
- Warm gradient backgrounds in feature sections
|
||||
- 20px–24px radius on image containers
|
||||
- Full-width sections alternating white and light gray
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Audio Waveform Sections**
|
||||
- Colorful gradient backgrounds showcasing voice AI capabilities
|
||||
- Warm amber, blue, and green gradients behind product demos
|
||||
- Screenshots of the ElevenLabs product interface
|
||||
|
||||
**Warm Stone CTA Block**
|
||||
- `rgba(245,242,239,0.8)` background with warm shadow
|
||||
- Asymmetric padding (more right padding)
|
||||
- Creates a physical, tactile quality unique to ElevenLabs
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
|
||||
|
||||
### Grid & Container
|
||||
- Centered content with generous max-width
|
||||
- Single-column hero, expanding to feature grids
|
||||
- Full-width gradient sections for product showcases
|
||||
- White card grids on light gray backgrounds
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
|
||||
- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
|
||||
- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Small links, inline elements
|
||||
- Subtle (4px): Nav items, tab panels, tags
|
||||
- Standard (8px): Small containers
|
||||
- Comfortable (10px–12px): Medium cards, dropdowns
|
||||
- Card (16px): Standard cards, articles
|
||||
- Large (18px–20px): Featured cards, code panels
|
||||
- Section (24px): Large panels, section containers
|
||||
- Warm Button (30px): Warm stone CTA
|
||||
- Pill (9999px): Primary buttons, navigation pills
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
|
||||
| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
|
||||
| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
|
||||
| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
|
||||
| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
|
||||
|
||||
**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
|
||||
- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
|
||||
- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
|
||||
- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
|
||||
- Use 9999px radius for primary buttons — pill shape is standard
|
||||
- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
|
||||
- Keep the page predominantly white with subtle gray section differentiation
|
||||
- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
|
||||
|
||||
### Don't
|
||||
- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
|
||||
- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
|
||||
- Don't use cool gray borders — the system is warm-tinted throughout
|
||||
- Don't skip the inset shadow component — half-pixel inset borders define edges
|
||||
- Don't apply negative letter-spacing to body text — Inter uses positive tracking
|
||||
- Don't use sharp corners (<8px) on cards — the generous radius is structural
|
||||
- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
|
||||
- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <1024px | Single column, hamburger nav, stacked sections |
|
||||
| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons with generous padding (12px–20px)
|
||||
- Navigation links at 15px with adequate spacing
|
||||
- Select dropdowns maintain comfortable sizing
|
||||
|
||||
### Collapsing Strategy
|
||||
- Navigation: horizontal → hamburger at 1024px
|
||||
- Feature grids: multi-column → stacked
|
||||
- Hero: maintains centered layout, font scales proportionally
|
||||
- Gradient sections: full-width maintained, content stacks
|
||||
- Spacing compresses proportionally
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale responsively
|
||||
- Gradient backgrounds simplify on mobile
|
||||
- Audio waveform previews maintain aspect ratio
|
||||
- Rounded corners maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
|
||||
- Text: Black (`#000000`)
|
||||
- Secondary text: Dark Gray (`#4e4e4e`)
|
||||
- Muted text: Warm Gray (`#777169`)
|
||||
- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
|
||||
- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
|
||||
- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
|
||||
- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
|
||||
- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
|
||||
- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
|
||||
2. Waldenburg 300 for headings — never bold, the lightness is the identity
|
||||
3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
|
||||
4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
|
||||
5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
|
||||
6. Pill (9999px) for buttons, generous radius (16px–24px) for cards
|
||||
@@ -1,23 +1,3 @@
|
||||
# Elevenlabs Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) extracted from the public [ElevenLabs](https://elevenlabs.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Elevenlabs design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/elevenlabs/design-md
|
||||
|
||||
@@ -1,252 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by ElevenLabs</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #0a0a0a; --light: #141414; --warm-stone: rgba(245,242,239,0.8);
|
||||
--black: #f0f0f0; --dark-gray: #a0a0a0; --warm-gray: #8a8580;
|
||||
--border: #2a2a2a; --border-subtle: rgba(255,255,255,0.08);
|
||||
--shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;
|
||||
--shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;
|
||||
--shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;
|
||||
--shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(10,10,10,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:100px 32px 80px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }
|
||||
.btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
|
||||
.card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }
|
||||
.form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
.radius-context { font-size:9px; color:var(--warm-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }
|
||||
.footer a { color:var(--black); text-decoration:underline; }
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.hero h1 { font-size:36px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#f0f0f0;color:#0a0a0a;font-size:11px;font-weight:500;padding:4px 10px;border-radius:9999px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ElevenLabs</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-black" href="#">Try for Free</a>
|
||||
<a class="btn-warm" href="#">Explore Voice AI</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Section background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(245,242,239,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Stone</div><div class="color-swatch-hex">rgba(245,242,239,0.8)</div><div class="color-swatch-role">Featured CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, buttons</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4e4e4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#4e4e4e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#777169"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#777169</div><div class="color-swatch-role">Muted text, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#292524"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#292524</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display — 48px / 300 / 1.08 / -0.96px / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:300; line-height:1.17;">Section Heading</div><div class="type-meta">Section — 36px / 300 / 1.17 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.13;">Card Heading</div><div class="type-meta">Card — 32px / 300 / 1.13 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.35;">Body Large — Bringing every conversation to life</div><div class="type-meta">Body Large — 20px / 400 / 1.35 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.</div><div class="type-meta">Body — 18px / 400 / 1.60 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;">Nav / Button</div><div class="type-meta">Nav — 15px / 500 / 1.47 / +0.15px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;">Uppercase CTA</div><div class="type-meta">CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;">Caption — Last updated 3 hours ago</div><div class="type-meta">Caption — 14px / 400 / 1.43 / +0.14px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);">const audio = await elevenlabs.generate({ text: "Hello" })</div><div class="type-meta">Code — 13px / 400 / 1.85 / Geist Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-black" href="#">Try for Free</a><div class="button-label">Black Pill</div></div>
|
||||
<div class="button-item"><a class="btn-warm" href="#">Explore Voice AI</a><div class="button-label">Warm Stone</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Shadow</div></div>
|
||||
<div class="button-item"><a class="btn-upper" href="#">Get Started</a><div class="button-label">Uppercase Bold</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Text to Speech</h3><p>Generate natural, expressive speech from text in any language with the most realistic AI voices.</p></div>
|
||||
<div class="card" style="box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;"><h3>Voice Cloning</h3><p>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.</p></div>
|
||||
<div class="card" style="background:var(--light);"><h3>Audio Native</h3><p>Turn any written content into engaging audio. Light gray background variant for section differentiation.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Voice Name</label><input class="form-input" type="text" placeholder="My Custom Voice"><div class="form-state-label">Default (inset border shadow)</div></div>
|
||||
<div class="form-group"><label class="form-label">Language</label><input class="form-input form-input--focus" type="text" value="English"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid_key"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Text Input</label><textarea class="form-textarea" placeholder="Enter text to convert to speech..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-inset);"><div class="elevation-label">Inset Edge</div><div class="elevation-desc">0.5px inset border</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Outline + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-btn);"><div class="elevation-label">Button</div><div class="elevation-desc">Strong outline + lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-warm);"><div class="elevation-label">Warm Lift</div><div class="elevation-desc">Warm-tinted shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px rgb(147,197,253);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,251 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by ElevenLabs</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --light: #f5f5f5; --warm-stone: rgba(245,242,239,0.8);
|
||||
--black: #000000; --dark-gray: #4e4e4e; --warm-gray: #777169;
|
||||
--border: #e5e5e5; --border-subtle: rgba(0,0,0,0.05);
|
||||
--shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;
|
||||
--shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;
|
||||
--shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;
|
||||
--shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:100px 32px 80px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }
|
||||
.btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
|
||||
.card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }
|
||||
.form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
.radius-context { font-size:9px; color:var(--warm-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }
|
||||
.footer a { color:var(--black); text-decoration:underline; }
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.hero h1 { font-size:36px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ElevenLabs</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-black" href="#">Try for Free</a>
|
||||
<a class="btn-warm" href="#">Explore Voice AI</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Section background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(245,242,239,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Stone</div><div class="color-swatch-hex">rgba(245,242,239,0.8)</div><div class="color-swatch-role">Featured CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, buttons</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4e4e4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#4e4e4e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#777169"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#777169</div><div class="color-swatch-role">Muted text, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#292524"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#292524</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display — 48px / 300 / 1.08 / -0.96px / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:300; line-height:1.17;">Section Heading</div><div class="type-meta">Section — 36px / 300 / 1.17 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.13;">Card Heading</div><div class="type-meta">Card — 32px / 300 / 1.13 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.35;">Body Large — Bringing every conversation to life</div><div class="type-meta">Body Large — 20px / 400 / 1.35 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.</div><div class="type-meta">Body — 18px / 400 / 1.60 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;">Nav / Button</div><div class="type-meta">Nav — 15px / 500 / 1.47 / +0.15px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;">Uppercase CTA</div><div class="type-meta">CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;">Caption — Last updated 3 hours ago</div><div class="type-meta">Caption — 14px / 400 / 1.43 / +0.14px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);">const audio = await elevenlabs.generate({ text: "Hello" })</div><div class="type-meta">Code — 13px / 400 / 1.85 / Geist Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-black" href="#">Try for Free</a><div class="button-label">Black Pill</div></div>
|
||||
<div class="button-item"><a class="btn-warm" href="#">Explore Voice AI</a><div class="button-label">Warm Stone</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Shadow</div></div>
|
||||
<div class="button-item"><a class="btn-upper" href="#">Get Started</a><div class="button-label">Uppercase Bold</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Text to Speech</h3><p>Generate natural, expressive speech from text in any language with the most realistic AI voices.</p></div>
|
||||
<div class="card" style="box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;"><h3>Voice Cloning</h3><p>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.</p></div>
|
||||
<div class="card" style="background:var(--light);"><h3>Audio Native</h3><p>Turn any written content into engaging audio. Light gray background variant for section differentiation.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Voice Name</label><input class="form-input" type="text" placeholder="My Custom Voice"><div class="form-state-label">Default (inset border shadow)</div></div>
|
||||
<div class="form-group"><label class="form-label">Language</label><input class="form-input form-input--focus" type="text" value="English"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid_key"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Text Input</label><textarea class="form-textarea" placeholder="Enter text to convert to speech..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-inset);"><div class="elevation-label">Inset Edge</div><div class="elevation-desc">0.5px inset border</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Outline + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-btn);"><div class="elevation-label">Button</div><div class="elevation-desc">Strong outline + lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-warm);"><div class="elevation-label">Warm Lift</div><div class="elevation-desc">Warm-tinted shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px rgb(147,197,253);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,281 +0,0 @@
|
||||
# Design System Inspiration of Expo
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."
|
||||
|
||||
The design language is decisively monochromatic — pure black (`#000000`) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (`#60646c`, `#b0b4ba`, `#555860`) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.
|
||||
|
||||
What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Luminous cool-white canvas (`#f0f0f3`) with gallery-like vertical spacing
|
||||
- Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color
|
||||
- Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)
|
||||
- Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)
|
||||
- Inter as the sole typeface, used at weights 400–900 for full expressive range
|
||||
- Whisper-soft shadows that barely lift elements from the surface
|
||||
- Product screenshots as the only source of color in the interface
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Expo Black** (`#000000`): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.
|
||||
- **Near Black** (`#1c2024`): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Link Cobalt** (`#0d74ce`): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.
|
||||
- **Legal Blue** (`#476cff`): A brighter, more saturated blue for legal/footer links — slightly more attention-grabbing than Link Cobalt.
|
||||
- **Widget Sky** (`#47c2ff`): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.
|
||||
- **Preview Purple** (`#8145b5`): A rich violet used for "preview" or beta feature indicators — creating clear visual distinction from standard content.
|
||||
|
||||
### Surface & Background
|
||||
- **Cloud Gray** (`#f0f0f3`): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.
|
||||
- **Pure White** (`#ffffff`): Card surfaces, button backgrounds, and elevated content containers. Creates a clear "lifted" distinction from Cloud Gray.
|
||||
- **Widget Dark** (`#1a1a1a`): Dark surface for dark-theme widgets and overlay elements.
|
||||
- **Banner Dark** (`#171717`): The darkest surface variant, used for promotional banners and high-contrast containers.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Slate Gray** (`#60646c`): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.
|
||||
- **Mid Slate** (`#555860`): Slightly darker than Slate, used for emphasized secondary text.
|
||||
- **Silver** (`#b0b4ba`): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.
|
||||
- **Pewter** (`#999999`): Accordion icons and deeply de-emphasized UI elements in dark contexts.
|
||||
- **Light Silver** (`#cccccc`): Arrow icons and decorative elements in dark contexts.
|
||||
- **Dark Slate** (`#363a3f`): Borders on dark surfaces, switch tracks, and emphasized containment.
|
||||
- **Charcoal** (`#333333`): Dark mode switch backgrounds and deep secondary surfaces.
|
||||
|
||||
### Semantic & Accent
|
||||
- **Warning Amber** (`#ab6400`): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.
|
||||
- **Destructive Rose** (`#eb8e90`): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.
|
||||
- **Border Lavender** (`#e0e1e6`): Standard card/container borders — a cool lavender-gray that's visible without being heavy.
|
||||
- **Input Border** (`#d9d9e0`): Button and form element borders — slightly warmer/darker than card borders for interactive elements.
|
||||
- **Dark Focus Ring** (`#2547d0`): Deep blue for keyboard focus indicators in dark theme contexts.
|
||||
|
||||
### Gradient System
|
||||
- The design is notably **gradient-free** in the interface layer. Visual richness comes from product screenshots, the React universe illustration, and careful shadow layering rather than color gradients. This absence IS the design decision — gradients would undermine the clinical precision.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter`, with fallbacks: `-apple-system, system-ui`
|
||||
- **Monospace**: `JetBrains Mono`, with fallback: `ui-monospace`
|
||||
- **System Fallback**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |
|
||||
| Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |
|
||||
| Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |
|
||||
| Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |
|
||||
| Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |
|
||||
| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |
|
||||
| Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |
|
||||
| Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |
|
||||
| Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |
|
||||
| Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |
|
||||
|
||||
### Principles
|
||||
- **One typeface, full expression**: Inter is the only sans-serif, used from weight 400 (regular) through 900 (black). This gives the design a unified voice while still achieving dramatic contrast between whisper-light body text and thundering display headlines.
|
||||
- **Extreme negative tracking at scale**: Headlines at 64px use -1.6px to -3px letter-spacing, creating ultra-dense text blocks that feel like logotypes. This aggressive compression is the signature typographic move.
|
||||
- **Weight as hierarchy**: 700–900 for display, 600 for headings, 500 for emphasis, 400 for body. The jumps are decisive — no ambiguous in-between weights.
|
||||
- **Consistent 1.40 body line-height**: Nearly all body and UI text shares 1.40 line-height, creating a rhythmic vertical consistency.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (White on border)**
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#1c2024`)
|
||||
- Padding: 0px 12px (compact, content-driven height)
|
||||
- Border: thin solid Input Border (`1px solid #d9d9e0`)
|
||||
- Radius: subtly rounded (6px)
|
||||
- Shadow: subtle combined shadow on hover
|
||||
- The understated default — clean, professional, unheroic
|
||||
|
||||
**Primary Pill**
|
||||
- Same as Primary but with pill-shaped radius (9999px)
|
||||
- Used for hero CTAs and high-emphasis actions
|
||||
- The extra roundness signals "start here"
|
||||
|
||||
**Dark Primary**
|
||||
- Background: Expo Black (`#000000`)
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Pill-shaped (9999px) or generously rounded (32–36px)
|
||||
- No border (black IS the border)
|
||||
- The maximum-emphasis CTA — reserved for primary conversion actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Pure White (`#ffffff`) — clearly lifted from Cloud Gray page
|
||||
- Border: thin solid Border Lavender (`1px solid #e0e1e6`) for standard cards
|
||||
- Radius: comfortably rounded (8px) for standard cards; generously rounded (16–24px) for featured containers
|
||||
- Shadow Level 1: Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`) — barely perceptible lift
|
||||
- Shadow Level 2: Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`) — clear floating elevation
|
||||
- Hover: likely subtle shadow deepening or background shift
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#1c2024`)
|
||||
- Border: thin solid Input Border (`1px solid #d9d9e0`)
|
||||
- Padding: 0px 12px (inline with button sizing)
|
||||
- Radius: subtly rounded (6px)
|
||||
- Focus: blue ring shadow via CSS custom property
|
||||
|
||||
### Navigation
|
||||
- Sticky top nav on transparent/blurred background
|
||||
- Logo: Expo wordmark in black
|
||||
- Links: Near Black (`#1c2024`) or Slate Gray (`#60646c`) at 14–16px Inter weight 500
|
||||
- CTA: Black pill button ("Sign Up") on the right
|
||||
- GitHub star badge as social proof
|
||||
- Status indicator ("All Systems Operational") with green dot
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots and device mockups are the visual heroes
|
||||
- Generously rounded corners (24px) on video and image containers
|
||||
- Screenshots shown in realistic device frames
|
||||
- Dark UI screenshots provide contrast against the light canvas
|
||||
- Full-bleed within rounded containers
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Universe React Logo**
|
||||
- Animated/illustrated React logo as the visual centerpiece
|
||||
- Connects Expo's identity to the React ecosystem
|
||||
- The only illustrative element on an otherwise photographic page
|
||||
|
||||
**Device Preview Grid**
|
||||
- Multiple device types (phone, tablet, web) shown simultaneously
|
||||
- Demonstrates cross-platform capability visually
|
||||
- Each device uses realistic device chrome
|
||||
|
||||
**Status Badge**
|
||||
- "All Systems Operational" pill in the nav
|
||||
- Green dot + text — compact trust signal
|
||||
- Pill-shaped (36px radius)
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px
|
||||
- Button padding: 0px 12px (unusually compact — height driven by line-height)
|
||||
- Card internal padding: approximately 24–32px
|
||||
- Section vertical spacing: enormous (estimated 96–144px between major sections)
|
||||
- Component gap: 16–24px between sibling elements
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: approximately 1200–1400px, centered
|
||||
- Hero: centered single-column with massive breathing room
|
||||
- Feature sections: alternating layouts (image left/right, full-width showcases)
|
||||
- Card grids: 2–3 column for feature highlights
|
||||
- Full-width sections with contained inner content
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Gallery-like pacing**: Each section feels like its own exhibit, surrounded by vast empty space. This creates a premium, unhurried browsing experience.
|
||||
- **Breathing room is the design**: The generous whitespace IS the primary design element — it communicates confidence, quality, and that each feature deserves individual attention.
|
||||
- **Content islands**: Sections float as isolated "islands" in the white space, connected by scrolling rather than visual continuation.
|
||||
|
||||
### Border Radius Scale
|
||||
- Nearly squared (4px): Small inline elements, tags
|
||||
- Subtly rounded (6px): Buttons, form inputs, combo boxes — the functional interactive radius
|
||||
- Comfortably rounded (8px): Standard content cards, containers
|
||||
- Generously rounded (16px): Feature tabs, content panels
|
||||
- Very rounded (24px): Buttons, video/image containers, tabpanels — the signature softness
|
||||
- Highly rounded (32–36px): Hero CTAs, status badges, nav buttons
|
||||
- Pill-shaped (9999px): Primary action buttons, tags, avatars — maximum friendliness
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Cloud Gray page background, inline text |
|
||||
| Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |
|
||||
| Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | Subtle card lift, hover states |
|
||||
| Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | Feature showcases, product screenshots |
|
||||
| Modal (Level 4) | Dark overlay (`--dialog-overlay-background-color`) + heavy shadow | Dialogs, overlays |
|
||||
|
||||
**Shadow Philosophy**: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is **background color contrast** — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Cloud Gray (`#f0f0f3`) as the page background and Pure White (`#ffffff`) for elevated cards — the two-tone light system is essential
|
||||
- Keep display headlines at extreme negative letter-spacing (-1.6px to -3px at 64px) for the signature compressed look
|
||||
- Use pill-shaped (9999px) radius for primary CTA buttons — the organic shape is core to the identity
|
||||
- Reserve black (`#000000`) for headlines and primary CTAs — it carries maximum authority on the light canvas
|
||||
- Use Slate Gray (`#60646c`) for secondary text — it's the precise balance between readable and receded
|
||||
- Maintain enormous vertical spacing between sections (96px+) — the gallery pacing defines the premium feel
|
||||
- Use product screenshots as the primary visual content — the interface stays monochrome, the products bring color
|
||||
- Apply Inter at the full weight range (400–900) — weight contrast IS the hierarchy
|
||||
|
||||
### Don't
|
||||
- Don't introduce decorative colors into the interface chrome — the monochromatic palette is intentional
|
||||
- Don't use sharp corners (border-radius < 6px) on interactive elements — the pill/rounded geometry is the signature
|
||||
- Don't reduce section spacing below 64px — the breathing room is the design
|
||||
- Don't use heavy drop shadows — depth comes from background contrast and whisper-soft shadows
|
||||
- Don't mix in additional typefaces — Inter handles everything from display to caption
|
||||
- Don't use letter-spacing wider than -0.25px on body text — extreme tracking is reserved for display only
|
||||
- Don't use borders heavier than 2px — containment is subtle, achieved through background color and gentle borders
|
||||
- Don't add gradients to the interface — visual richness comes from content, not decoration
|
||||
- Don't use saturated colors outside of semantic contexts — the palette is strictly grayscale + functional blue
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |
|
||||
| Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |
|
||||
| Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |
|
||||
|
||||
*Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()/clamp()-based responsive system rather than fixed breakpoint snapping.*
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use generous radius (24–36px) creating large, finger-friendly surfaces
|
||||
- Navigation links spaced with adequate gap
|
||||
- Status badge sized for touch (36px radius)
|
||||
- Minimum recommended: 44x44px
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav with CTA collapses to hamburger on mobile
|
||||
- **Feature sections**: Multi-column → stacked single column
|
||||
- **Hero text**: 64px → ~36px progressive scaling
|
||||
- **Device previews**: Grid → stacked/carousel
|
||||
- **Cards**: Side-by-side → vertical stacking
|
||||
- **Spacing**: Reduces proportionally but maintains generous rhythm
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale proportionally
|
||||
- Device mockups may simplify or show fewer devices on mobile
|
||||
- Rounded corners maintained at all sizes
|
||||
- Lazy loading for below-fold content
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA / Headlines: "Expo Black (#000000)"
|
||||
- Page Background: "Cloud Gray (#f0f0f3)"
|
||||
- Card Surface: "Pure White (#ffffff)"
|
||||
- Body Text: "Near Black (#1c2024)"
|
||||
- Secondary Text: "Slate Gray (#60646c)"
|
||||
- Borders: "Border Lavender (#e0e1e6)"
|
||||
- Links: "Link Cobalt (#0d74ce)"
|
||||
- Tertiary Text: "Silver (#b0b4ba)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath."
|
||||
- "Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px)."
|
||||
- "Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6)."
|
||||
- "Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce)."
|
||||
- "Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0)."
|
||||
|
||||
### Iteration Guide
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference specific color names and hex codes — "use Slate Gray (#60646c)" not "make it gray"
|
||||
3. Use radius values deliberately — 6px for buttons, 8px for cards, 24px for images, 9999px for pills
|
||||
4. Describe the "feel" alongside measurements — "enormous breathing room with 96px section spacing"
|
||||
5. Always specify Inter and the exact weight — weight contrast IS the hierarchy
|
||||
6. For shadows, specify "whisper shadow" or "standard elevation" from the elevation table
|
||||
7. Keep the interface monochrome — let product content be the color
|
||||
@@ -1,24 +1,3 @@
|
||||
# Expo Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) extracted from the public [Expo](https://expo.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Expo design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/expo/design-md
|
||||
|
||||
@@ -1,533 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Expo</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-expo-black: #000000;
|
||||
--color-near-black: #1c2024;
|
||||
--color-link-cobalt: #0d74ce;
|
||||
--color-legal-blue: #476cff;
|
||||
--color-widget-sky: #47c2ff;
|
||||
--color-preview-purple: #8145b5;
|
||||
--color-cloud-gray: #f0f0f3;
|
||||
--color-pure-white: #ffffff;
|
||||
--color-widget-dark: #1a1a1a;
|
||||
--color-banner-dark: #171717;
|
||||
--color-slate-gray: #60646c;
|
||||
--color-mid-slate: #555860;
|
||||
--color-silver: #b0b4ba;
|
||||
--color-pewter: #999999;
|
||||
--color-light-silver: #cccccc;
|
||||
--color-dark-slate: #363a3f;
|
||||
--color-charcoal: #333333;
|
||||
--color-warning: #ab6400;
|
||||
--color-destructive: #eb8e90;
|
||||
--color-border-lavender: #e0e1e6;
|
||||
--color-input-border: #d9d9e0;
|
||||
--color-focus-ring: #2547d0;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Dark mode */
|
||||
--bg-page: var(--color-banner-dark);
|
||||
--bg-card: var(--color-widget-dark);
|
||||
--bg-nav: rgba(23,23,23,0.92);
|
||||
--text-primary: var(--color-pure-white);
|
||||
--text-secondary: var(--color-silver);
|
||||
--text-muted: var(--color-pewter);
|
||||
--border-color: var(--color-dark-slate);
|
||||
--border-subtle: rgba(54,58,63,0.5);
|
||||
--section-label-color: var(--color-pure-white);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--color-pure-white); }
|
||||
.nav-brand svg { width: 24px; height: 24px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--color-silver); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-pure-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-expo-black);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--color-silver);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 9999px;
|
||||
padding: 4px 12px 4px 8px;
|
||||
}
|
||||
.nav-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
line-height: 1.10;
|
||||
letter-spacing: -3px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--color-pure-white);
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary-pill {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-expo-black);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-standard {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.52px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 48px;
|
||||
color: var(--color-pure-white);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
|
||||
.color-swatch-block { height: 80px; }
|
||||
.color-swatch-info { padding: 12px; background: var(--bg-card); }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }
|
||||
.btn-dark-pill {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-expo-black);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-white-standard {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark-rounded {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-expo-black);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 32px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card { background: var(--bg-card); border-radius: 8px; padding: 28px; }
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }
|
||||
.card-glow { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; border-radius: 16px; }
|
||||
.card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px; margin-bottom: 12px; color: var(--color-pure-white); }
|
||||
.card p { color: var(--text-secondary); font-size: 16px; line-height: 1.40; }
|
||||
.card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-pure-white); margin-bottom: 16px; }
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block {
|
||||
background: var(--color-expo-black);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-top: 24px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #f2f2f2;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code-block .keyword { color: var(--color-widget-sky); }
|
||||
.code-block .string { color: #22c55e; }
|
||||
.code-block .comment { color: var(--color-pewter); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 8px; }
|
||||
.spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
||||
.radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-surface { border: none; background: var(--bg-card); }
|
||||
.elevation-whisper { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }
|
||||
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; }
|
||||
.elevation-modal { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.5) 0px 20px 40px, rgba(0,0,0,0.3) 0px 8px 16px; }
|
||||
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-pure-white); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.nav-status { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; letter-spacing: -1.5px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; letter-spacing: -1px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<div class="nav-status"><span class="nav-status-dot"></span> All Systems Operational</div>
|
||||
<button class="nav-cta">Sign Up</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Expo</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary-pill">Explore Tokens</button>
|
||||
<button class="btn-standard">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Expo Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Primary headlines, CTA buttons, brand anchor</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #1c2024; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c2024</div><div class="color-swatch-role">Body text, softer than pure black for reading</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #0d74ce;"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Cobalt</div><div class="color-swatch-hex">#0d74ce</div><div class="color-swatch-role">Standard links, interactive signals</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #476cff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#476cff</div><div class="color-swatch-role">Footer/legal links, brighter accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #47c2ff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Sky</div><div class="color-swatch-hex">#47c2ff</div><div class="color-swatch-role">Widget branding, lightest accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #8145b5;"></div><div class="color-swatch-info"><div class="color-swatch-name">Preview Purple</div><div class="color-swatch-hex">#8145b5</div><div class="color-swatch-role">Beta/preview feature indicators</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #f0f0f3;"></div><div class="color-swatch-info"><div class="color-swatch-name">Cloud Gray</div><div class="color-swatch-hex">#f0f0f3</div><div class="color-swatch-role">Primary page background (light mode)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #ffffff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces, elevated containers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #1a1a1a; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Dark</div><div class="color-swatch-hex">#1a1a1a</div><div class="color-swatch-role">Dark theme card surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #171717; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Banner Dark</div><div class="color-swatch-hex">#171717</div><div class="color-swatch-role">Dark theme page background</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #60646c;"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate Gray</div><div class="color-swatch-hex">#60646c</div><div class="color-swatch-role">Secondary text (305 instances)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #555860;"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Slate</div><div class="color-swatch-hex">#555860</div><div class="color-swatch-role">Emphasized secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #b0b4ba;"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b0b4ba</div><div class="color-swatch-role">Tertiary text, placeholders, metadata</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#363a3f</div><div class="color-swatch-role">Borders on dark surfaces, switch tracks</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #ab6400;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning Amber</div><div class="color-swatch-hex">#ab6400</div><div class="color-swatch-role">Warning states, deep amber for seriousness</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #eb8e90;"></div><div class="color-swatch-info"><div class="color-swatch-name">Destructive Rose</div><div class="color-swatch-hex">#eb8e90</div><div class="color-swatch-role">Disabled destructive actions, gentle alarm</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #e0e1e6;"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Lavender</div><div class="color-swatch-hex">#e0e1e6</div><div class="color-swatch-role">Standard card/container borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #d9d9e0;"></div><div class="color-swatch-info"><div class="color-swatch-name">Input Border</div><div class="color-swatch-hex">#d9d9e0</div><div class="color-swatch-role">Buttons, form elements, interactive borders</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 60px; font-weight: 700; line-height: 1.10; letter-spacing: -3px;">Display Hero</div><div class="type-sample-label">Display / Hero — 64px / 700–900 / 1.10 / -3px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -2px;">Section Heading</div><div class="type-sample-label">Section Heading — 48px / 600 / 1.10 / -2px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px;">Sub-heading</div><div class="type-sample-label">Sub-heading — 20px / 600 / 1.20 / -0.25px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);">Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.</div><div class="type-sample-label">Body Large — 18px / 400–500 / 1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.40;">Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.</div><div class="type-sample-label">Body / Button — 16px / 400–700 / 1.25–1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.40; color: var(--text-secondary);">Caption text for descriptions and metadata labels</div><div class="type-sample-label">Caption / Label — 14px / 400–600 / 1.00–1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.00; color: var(--text-muted);">Tag / Small Badge</div><div class="type-sample-label">Tag / Small — 12px / 500 / 1.00–1.60 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.40;">npx create-expo-app@latest my-app</div><div class="type-sample-label">Code Body — 16px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.40;">import { Camera } from "expo-camera";</div><div class="type-sample-label">Code Caption — 14px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.60; text-transform: uppercase; color: var(--text-muted);">REACT NATIVE</div><div class="type-sample-label">Code Small / Tag — 12px / 400 / 1.60 / uppercase — JetBrains Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo"><button class="btn-dark-pill">Get Started</button><div class="button-demo-label">Primary Pill (Light)</div></div>
|
||||
<div class="button-demo"><button class="btn-white-standard">View Docs</button><div class="button-demo-label">Standard (Surface)</div></div>
|
||||
<div class="button-demo"><button class="btn-dark-rounded">Sign Up Free</button><div class="button-demo-label">Rounded (32px)</div></div>
|
||||
</div>
|
||||
|
||||
<div class="code-block" style="margin-top: 40px;">
|
||||
<span class="comment">// Get started with Expo</span><br>
|
||||
<span class="keyword">$</span> npx create-expo-app@latest my-app
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Dark Slate Border</h3>
|
||||
<p>Standard content card with 1px Dark Slate border and 8px radius. Widget Dark surface on Banner Dark background.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-label">Elevated (Whisper)</div>
|
||||
<h3>Whisper Shadow Lift</h3>
|
||||
<p>Subtle card elevation with soft shadow. Barely perceptible lift for hover states and highlighted content.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Featured (Glow)</div>
|
||||
<h3>Standard Elevation</h3>
|
||||
<p>Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 144px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Nearly squared</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Standard cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Feature panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 24px;"></div><div class="radius-label">24px</div><div class="radius-context">Images, videos</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 32px;"></div><div class="radius-label">32px</div><div class="radius-context">Hero CTAs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill-shaped</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Banner Dark page background, inline text.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-surface">
|
||||
<div><div class="elevation-name">Surface</div><div class="elevation-desc">Widget Dark bg, no shadow. Standard cards on Banner Dark.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-whisper">
|
||||
<div><div class="elevation-name">Whisper</div><div class="elevation-desc">Soft shadow. Subtle card lift, hover states.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Standard floating shadow. Feature showcases, screenshots.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-modal">
|
||||
<div><div class="elevation-name">Modal</div><div class="elevation-desc">Heavy shadow with dark overlay. Dialogs, overlays.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,533 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Expo</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-expo-black: #000000;
|
||||
--color-near-black: #1c2024;
|
||||
--color-link-cobalt: #0d74ce;
|
||||
--color-legal-blue: #476cff;
|
||||
--color-widget-sky: #47c2ff;
|
||||
--color-preview-purple: #8145b5;
|
||||
--color-cloud-gray: #f0f0f3;
|
||||
--color-pure-white: #ffffff;
|
||||
--color-widget-dark: #1a1a1a;
|
||||
--color-banner-dark: #171717;
|
||||
--color-slate-gray: #60646c;
|
||||
--color-mid-slate: #555860;
|
||||
--color-silver: #b0b4ba;
|
||||
--color-pewter: #999999;
|
||||
--color-light-silver: #cccccc;
|
||||
--color-dark-slate: #363a3f;
|
||||
--color-charcoal: #333333;
|
||||
--color-warning: #ab6400;
|
||||
--color-destructive: #eb8e90;
|
||||
--color-border-lavender: #e0e1e6;
|
||||
--color-input-border: #d9d9e0;
|
||||
--color-focus-ring: #2547d0;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Light mode */
|
||||
--bg-page: var(--color-cloud-gray);
|
||||
--bg-card: var(--color-pure-white);
|
||||
--bg-nav: rgba(240,240,243,0.92);
|
||||
--text-primary: var(--color-near-black);
|
||||
--text-secondary: var(--color-slate-gray);
|
||||
--text-muted: var(--color-silver);
|
||||
--border-color: var(--color-border-lavender);
|
||||
--border-subtle: rgba(224,225,230,0.5);
|
||||
--section-label-color: var(--color-expo-black);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--color-expo-black); }
|
||||
.nav-brand svg { width: 24px; height: 24px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-near-black); }
|
||||
.nav-cta {
|
||||
background: var(--color-expo-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
background: var(--color-pure-white);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 9999px;
|
||||
padding: 4px 12px 4px 8px;
|
||||
}
|
||||
.nav-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-body);
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
line-height: 1.10;
|
||||
letter-spacing: -3px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--color-expo-black);
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary-pill {
|
||||
background: var(--color-expo-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-standard {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-near-black);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.52px;
|
||||
color: var(--section-label-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-body);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 48px;
|
||||
color: var(--color-expo-black);
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
|
||||
.color-swatch-block { height: 80px; }
|
||||
.color-swatch-info { padding: 12px; background: var(--bg-card); }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }
|
||||
.btn-dark-pill {
|
||||
background: var(--color-expo-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-white-standard {
|
||||
background: var(--color-pure-white);
|
||||
color: var(--color-near-black);
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark-rounded {
|
||||
background: var(--color-expo-black);
|
||||
color: var(--color-pure-white);
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 32px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card { background: var(--bg-card); border-radius: 8px; padding: 28px; }
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px; }
|
||||
.card-glow { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px; border-radius: 16px; }
|
||||
.card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px; margin-bottom: 12px; color: var(--color-near-black); }
|
||||
.card p { color: var(--text-secondary); font-size: 16px; line-height: 1.40; }
|
||||
.card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-expo-black); margin-bottom: 16px; }
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block {
|
||||
background: var(--color-near-black);
|
||||
border: 1px solid var(--color-dark-slate);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-top: 24px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #f2f2f2;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code-block .keyword { color: var(--color-link-cobalt); }
|
||||
.code-block .string { color: #22c55e; }
|
||||
.code-block .comment { color: var(--color-pewter); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); border-radius: 2px; margin-bottom: 8px; }
|
||||
.spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
||||
.radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-surface { border: none; background: var(--bg-card); }
|
||||
.elevation-whisper { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px; }
|
||||
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px; }
|
||||
.elevation-modal { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.15) 0px 20px 40px, rgba(0,0,0,0.08) 0px 8px 16px; }
|
||||
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
||||
.elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-expo-black); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.nav-status { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; letter-spacing: -1.5px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; letter-spacing: -1px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<div class="nav-status"><span class="nav-status-dot"></span> All Systems Operational</div>
|
||||
<button class="nav-cta">Sign Up</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Expo</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary-pill">Explore Tokens</button>
|
||||
<button class="btn-standard">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #000000;"></div><div class="color-swatch-info"><div class="color-swatch-name">Expo Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Primary headlines, CTA buttons, brand anchor</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #1c2024;"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c2024</div><div class="color-swatch-role">Body text, softer than pure black for reading</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #0d74ce;"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Cobalt</div><div class="color-swatch-hex">#0d74ce</div><div class="color-swatch-role">Standard links, interactive signals</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #476cff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#476cff</div><div class="color-swatch-role">Footer/legal links, brighter accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #47c2ff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Sky</div><div class="color-swatch-hex">#47c2ff</div><div class="color-swatch-role">Widget branding, lightest accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #8145b5;"></div><div class="color-swatch-info"><div class="color-swatch-name">Preview Purple</div><div class="color-swatch-hex">#8145b5</div><div class="color-swatch-role">Beta/preview feature indicators</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #f0f0f3; border-bottom: 1px solid #e0e1e6;"></div><div class="color-swatch-info"><div class="color-swatch-name">Cloud Gray</div><div class="color-swatch-hex">#f0f0f3</div><div class="color-swatch-role">Primary page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #e0e1e6;"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces, elevated containers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #1a1a1a;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Dark</div><div class="color-swatch-hex">#1a1a1a</div><div class="color-swatch-role">Dark theme widgets, overlays</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #171717;"></div><div class="color-swatch-info"><div class="color-swatch-name">Banner Dark</div><div class="color-swatch-hex">#171717</div><div class="color-swatch-role">Promo banners, high-contrast surfaces</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #60646c;"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate Gray</div><div class="color-swatch-hex">#60646c</div><div class="color-swatch-role">Secondary text (305 instances)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #555860;"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Slate</div><div class="color-swatch-hex">#555860</div><div class="color-swatch-role">Emphasized secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #b0b4ba;"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b0b4ba</div><div class="color-swatch-role">Tertiary text, placeholders, metadata</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#363a3f</div><div class="color-swatch-role">Borders on dark surfaces, switch tracks</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #ab6400;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning Amber</div><div class="color-swatch-hex">#ab6400</div><div class="color-swatch-role">Warning states, deep amber for seriousness</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #eb8e90;"></div><div class="color-swatch-info"><div class="color-swatch-name">Destructive Rose</div><div class="color-swatch-hex">#eb8e90</div><div class="color-swatch-role">Disabled destructive actions, gentle alarm</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #e0e1e6;"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Lavender</div><div class="color-swatch-hex">#e0e1e6</div><div class="color-swatch-role">Standard card/container borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: #d9d9e0;"></div><div class="color-swatch-info"><div class="color-swatch-name">Input Border</div><div class="color-swatch-hex">#d9d9e0</div><div class="color-swatch-role">Buttons, form elements, interactive borders</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 60px; font-weight: 700; line-height: 1.10; letter-spacing: -3px; color: var(--color-expo-black);">Display Hero</div><div class="type-sample-label">Display / Hero — 64px / 700–900 / 1.10 / -3px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -2px; color: var(--color-expo-black);">Section Heading</div><div class="type-sample-label">Section Heading — 48px / 600 / 1.10 / -2px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px;">Sub-heading</div><div class="type-sample-label">Sub-heading — 20px / 600 / 1.20 / -0.25px — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);">Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.</div><div class="type-sample-label">Body Large — 18px / 400–500 / 1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.40;">Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.</div><div class="type-sample-label">Body / Button — 16px / 400–700 / 1.25–1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.40; color: var(--text-secondary);">Caption text for descriptions and metadata labels</div><div class="type-sample-label">Caption / Label — 14px / 400–600 / 1.00–1.40 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.00; color: var(--text-muted);">Tag / Small Badge</div><div class="type-sample-label">Tag / Small — 12px / 500 / 1.00–1.60 / normal — Inter</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.40;">npx create-expo-app@latest my-app</div><div class="type-sample-label">Code Body — 16px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.40;">import { Camera } from "expo-camera";</div><div class="type-sample-label">Code Caption — 14px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
||||
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.60; text-transform: uppercase; color: var(--text-muted);">REACT NATIVE</div><div class="type-sample-label">Code Small / Tag — 12px / 400 / 1.60 / uppercase — JetBrains Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo"><button class="btn-dark-pill">Get Started</button><div class="button-demo-label">Primary Pill (Dark)</div></div>
|
||||
<div class="button-demo"><button class="btn-white-standard">View Docs</button><div class="button-demo-label">Standard (White)</div></div>
|
||||
<div class="button-demo"><button class="btn-dark-rounded">Sign Up Free</button><div class="button-demo-label">Dark Rounded (32px)</div></div>
|
||||
</div>
|
||||
|
||||
<div class="code-block" style="margin-top: 40px;">
|
||||
<span class="comment">// Get started with Expo</span><br>
|
||||
<span class="keyword">$</span> npx create-expo-app@latest my-app
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Lavender Container</h3>
|
||||
<p>Standard content card with 1px Border Lavender border and 8px radius. White surface clearly lifted from Cloud Gray page background.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-label">Elevated (Whisper)</div>
|
||||
<h3>Whisper Shadow Lift</h3>
|
||||
<p>Subtle card elevation with whisper-soft shadow. Barely perceptible lift for hover states and highlighted content.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Featured (Glow)</div>
|
||||
<h3>Standard Elevation</h3>
|
||||
<p>Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 144px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Nearly squared</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Standard cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Feature panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 24px;"></div><div class="radius-label">24px</div><div class="radius-context">Images, videos</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 32px;"></div><div class="radius-label">32px</div><div class="radius-context">Hero CTAs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill-shaped</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Cloud Gray page background, inline text.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-surface">
|
||||
<div><div class="elevation-name">Surface</div><div class="elevation-desc">White bg, no shadow. Standard white cards on Cloud Gray.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-whisper">
|
||||
<div><div class="elevation-name">Whisper</div><div class="elevation-desc">Whisper-soft shadow. Subtle card lift, hover states.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Standard floating shadow. Feature showcases, screenshots.</div></div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-modal">
|
||||
<div><div class="elevation-name">Modal</div><div class="elevation-desc">Heavy shadow with dark overlay. Dialogs, overlays.</div></div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,314 +0,0 @@
|
||||
# Design System Inspiration of Ferrari
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens onto an expanse of absolute black, broken only by the iconic Prancing Horse emblem floating alone in its own atmosphere. Below, the content unfolds in dramatic alternations between inky-dark cinematic sections and crisp white editorial panels. This chiaroscuro rhythm — darkness yielding to light, machinery yielding to human story — feels more like paging through a Ferrari yearbook than scrolling a commercial website. Every section is a curated vignette: a concept car dissolving from shadow, two F1 drivers posed with sculptural stillness, a lineup of production models arranged in a jewel-toned parade.
|
||||
|
||||
The color language is monastically restrained for a brand built on speed and emotion. Ferrari Red (`#DA291C`) appears with almost surgical sparseness — reserved for the Subscribe CTA and accent moments that need to command immediate attention. The vast majority of the interface lives in black, white, and a carefully calibrated gray scale (from `#303030` dark surfaces through `#8F8F8F` mid-tones to `#D2D2D2` light borders). Two yellows — Racing Yellow (`#FFF200`) and the deeper Modena Yellow (`#F6E500`) — exist in the token system as heritage accents for special contexts, honoring Ferrari's racing provenance. The restraint means that when red does appear, it carries the weight of the entire brand.
|
||||
|
||||
Typography relies on FerrariSans — a proprietary sans-serif family with medium-weight headings (500–700) and compact proportions. Display text runs at 24–26px for section titles, while the UI chrome lives at 12–16px in weights ranging from regular to bold. A secondary "Body-Font" custom typeface handles captions and utility text, rendered in uppercase with wide letter-spacing (1px) to create a label-like editorial quality. This two-font system — FerrariSans for narrative authority, Body-Font for structural annotation — gives the site a print-magazine hierarchy. No text decoration is gratuitous. Letter-spacing is tight for headlines and deliberately expanded for labels, creating a visual rhythm that alternates between urgency and composure.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Chiaroscuro layout alternating between deep black sections and clean white editorial panels
|
||||
- Ferrari Red (`#DA291C`) used with extreme sparseness — accent, not atmosphere
|
||||
- Prancing Horse emblem as isolated hero element on a void-black field
|
||||
- FerrariSans proprietary typeface with compact proportions and medium weights
|
||||
- Photo-journalism imagery: concept renders, driver portraits, lineup parades — each section is a story
|
||||
- Uppercase Body-Font labels with wide letter-spacing (1px) for editorial annotation
|
||||
- Nearly zero border-radius (2px default) reflecting precision engineering aesthetics
|
||||
- Dual-framework architecture (PrimeReact + Element Plus) powering 32+ interactive components
|
||||
- Carousel-driven hero with editorial slides and arrow/dot navigation
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Ferrari Red** (`#DA291C`): The iconic Rosso Corsa — primary accent and CTA color. Used for the Subscribe button, key action triggers, and brand moments where maximum visual authority is needed. The single most important color in the system (--f-color-accent-100)
|
||||
- **Pure White** (`#FFFFFF`): Primary surface for editorial content panels, navigation text on dark backgrounds, and button fills. The canvas that provides breathing room between dark cinematic sections (--f-color-ui-0)
|
||||
|
||||
### Secondary & Accent
|
||||
- **Dark Red** (`#B01E0A`): Deeper variant of Ferrari Red for hover/pressed states and high-contrast contexts — adds dimensionality to the brand color without introducing a new hue (--f-color-accent-90)
|
||||
- **Deep Red** (`#9D2211`): The most saturated dark red — used for active states and extra emphasis where even Dark Red needs more weight (--f-color-accent-80)
|
||||
- **Racing Yellow** (`#FFF200`): Heritage accent from Ferrari's racing livery — reserved for special highlights and motorsport-related contexts (--f-color-yellow-hypersail)
|
||||
- **Modena Yellow** (`#F6E500`): Slightly warmer and more golden than Racing Yellow — used for secondary heritage accents and category markers (--f-color-yellow)
|
||||
|
||||
### Surface & Background
|
||||
- **Absolute Black** (`#000000`): Hero sections, cinematic backgrounds, and the dominant dark surface — the void that makes imagery and the Prancing Horse emblem float
|
||||
- **Dark Surface** (`#303030`): Secondary dark surface for footer regions, newsletter sections, and layered dark panels — slightly lifted from pure black for depth differentiation (--f-color-ui-90)
|
||||
- **Light Gray Surface** (`#D2D2D2`): Subtle alternate surface for dividers and border treatments on white panels (--f-color-ui-20)
|
||||
- **Overlay Dark** (`hsla(0, 0%, 7%, 0.8)`): Semi-transparent near-black for modal overlays and image caption backgrounds (--f-color-overlay-darker)
|
||||
|
||||
### Neutrals & Text
|
||||
- **Near Black** (`#181818`): Primary body text color on light surfaces — slightly softened from absolute black for better readability (link default color)
|
||||
- **Dark Gray** (`#666666`): Secondary text and subdued UI labels — used where text needs to recede from the primary hierarchy (--f-color-black-60)
|
||||
- **Mid Gray** (`#8F8F8F`): Tertiary text for metadata, timestamps, and supportive content (--f-color-black-50)
|
||||
- **Silver Gray** (`#969696`): Placeholder text and disabled state indicators (--f-color-black-55)
|
||||
|
||||
### Semantic & Accent
|
||||
- **Warning Red** (`#F13A2C`): Accessible warning state — brighter and more orange-shifted than Ferrari Red to differentiate semantic alerts from brand expression (--f-color-accessible-warning)
|
||||
- **Success Green** (`#03904A`): Confirmation and positive status indicators (--f-color-accessible-success)
|
||||
- **Info Blue** (`#4C98B9`): Informational callouts, tooltips, and neutral status messaging (--f-color-accessible-info)
|
||||
- **Link Hover Blue** (`#3860BE`): Interactive hover state for text links — a dignified navy-blue that signals interactivity without competing with Ferrari Red
|
||||
|
||||
### Gradient System
|
||||
- No explicit gradients in the token system
|
||||
- Depth is achieved through photography and the binary contrast between black and white surfaces
|
||||
- The overlay darker color (`hsla(0, 0%, 7%, 0.8)`) creates depth through transparency layering over imagery
|
||||
- Occasional photographic gradients (light falloff in studio shots) provide atmospheric depth within image content
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **FerrariSans**: Primary typeface for headings, navigation, buttons, and editorial content. A proprietary sans-serif with medium weight as the default (500), compact x-height, and precise letter-spacing control. Fallbacks: Arial, Helvetica, sans-serif
|
||||
- **Body-Font**: Secondary typeface for captions, labels, and utility text. Frequently rendered in uppercase with expanded letter-spacing (1px) for an editorial label aesthetic. Used for category tags and small annotation text
|
||||
- **Arial / Helvetica**: System fallback fonts used in cookie consent modals, form elements, and third-party component frameworks
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| Section Title | 26px (1.63rem) | 500 | 1.20 | normal | FerrariSans, primary editorial headings on white backgrounds |
|
||||
| Card Heading | 24px (1.50rem) | 400 | normal | normal | FerrariSans, content card titles |
|
||||
| Subheading | 18px (1.13rem) | 700 | 1.20 (tight) | normal | FerrariSans, bold subsection labels |
|
||||
| UI Heading | 16px (1.00rem) | 500 | 1.40 | 0.08px | FerrariSans, component headings and nav items |
|
||||
| Body Bold | 16px (1.00rem) | 700 | 1.30 (tight) | normal | FerrariSans, emphasized inline text |
|
||||
| Button Label | 16px (1.00rem) | 400 | normal | 1.28px | FerrariSans, primary button text with wide tracking |
|
||||
| Small Button | 14.4px (0.90rem) | 700 | 1.00 (tight) | normal | FerrariSans, compact action buttons |
|
||||
| Nav Link | 13px (0.81rem) | 600 | 1.20 (tight) | 0.13px | FerrariSans, navigation and footer links |
|
||||
| Caption | 13px (0.81rem) | 400 | 1.50 | 0.195px | FerrariSans/Body-Font, metadata and descriptions |
|
||||
| Micro Button | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | FerrariSans, small CTA with wide tracking |
|
||||
| Label Upper | 12px (0.75rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase labels and category tags |
|
||||
| Micro Label | 11px (0.69rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase smallest annotation text |
|
||||
| Cookie Text | 45px (2.81rem) | 400 | 1.50 | 0.195px | Arial, consent dialog oversized button text |
|
||||
|
||||
### Principles
|
||||
- **Proprietary identity**: FerrariSans is exclusive to Ferrari — it cannot be substituted without losing brand recognition. The font's compact proportions and medium weight default (500) convey engineering precision
|
||||
- **Two-register system**: FerrariSans handles narrative voice (headings, content, buttons) while Body-Font handles structural annotation (labels, tags, micro-captions) — this mirrors print magazine conventions of editorial text vs. technical labels
|
||||
- **Uppercase as emphasis tool**: Body-Font captions use `text-transform: uppercase` with expanded letter-spacing (1px) to create a visually distinct label layer that reads as "informational overlay" rather than primary content
|
||||
- **Compact line-heights**: Headlines use tight line-heights (1.00–1.30) creating dense, impactful text blocks, while body text opens to 1.50 for comfortable reading — the contrast between compressed headers and relaxed body text creates visual tension
|
||||
- **Weight range 400–700**: Four weights active in the system (400, 500, 600, 700) — significantly more range than Tesla but still controlled. 500 is the default "voice," 700 is for emphasis, 400 for body, 600 for navigation
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
Ferrari's buttons are minimal white rectangles with near-zero radius — the CTA philosophy is "architecture, not decoration."
|
||||
|
||||
**Primary CTA (White)** — The default action button:
|
||||
- Default: bg `#FFFFFF`, text `#000000`, fontSize 16px (FerrariSans), letterSpacing 1.28px, padding 12px 10px, borderRadius 2px, border 1px solid `#000000`
|
||||
- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9
|
||||
- Focus: bg `#1EAEDB`, text `#FFFFFF`, border 1px solid `#FFFFFF`, outline 2px solid `#000000`, opacity 0.9
|
||||
- Used for: "Configure" actions, secondary calls to action on light backgrounds
|
||||
|
||||
**Subscribe CTA (Red)** — The high-emphasis action button:
|
||||
- Default: bg `#DA291C` (Ferrari Red), text `#FFFFFF`, borderRadius 2px, padding 12px 10px
|
||||
- Used for: Newsletter subscribe, primary conversion actions on dark backgrounds
|
||||
- The only button that uses Ferrari Red — reserved for maximum visual priority
|
||||
|
||||
**Ghost Button (White Border)** — For dark backgrounds:
|
||||
- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, borderRadius 2px, padding 12px 10px
|
||||
- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9
|
||||
- Focus: same as Primary CTA focus state
|
||||
- Used for: Actions overlaid on dark imagery and cinematic sections
|
||||
|
||||
**Text Link** — Inline navigation:
|
||||
- Default: text `#181818` (on light surfaces) or `#FFFFFF` (on dark), no border, no background
|
||||
- Hover: color shifts to `#3860BE` (Link Hover Blue), decoration removes underline
|
||||
- White variant on dark surfaces uses underline decoration by default
|
||||
- FerrariSans or Body-Font depending on context (Body-Font for uppercase label links)
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**Editorial Card** (Content sections):
|
||||
- Background: white
|
||||
- Border: none
|
||||
- Shadow: none
|
||||
- Layout: image above, heading + caption below
|
||||
- Image treatment: full-width within card, no rounded corners on image
|
||||
- Text: FerrariSans heading (16–24px) + Body-Font caption (12–13px uppercase)
|
||||
|
||||
**Dark Cinematic Card** (Hero/feature sections):
|
||||
- Background: `#000000` (Absolute Black)
|
||||
- Full-bleed imagery with text overlay
|
||||
- No border, no shadow — the darkness IS the container
|
||||
- Text: white, positioned with careful negative space
|
||||
|
||||
**Vehicle Lineup** (Model carousel):
|
||||
- Horizontal scrollable row of vehicle thumbnails
|
||||
- Each vehicle on a neutral/white background
|
||||
- Navigation: arrow buttons + dot indicators
|
||||
- Background shifts to showcase the selected model's color context
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Newsletter Input** (Footer section):
|
||||
- Background: transparent on dark surface
|
||||
- Text: white
|
||||
- Border: 1px solid `#CCCCCC`
|
||||
- Placeholder: `#969696` (Silver Gray)
|
||||
- Focus: border color transitions (standard browser focus ring)
|
||||
- Label: Body-Font uppercase, 12px, 1px letter-spacing
|
||||
|
||||
**Cookie Consent** (Modal):
|
||||
- Background: white
|
||||
- Border radius: 8px (dialog)
|
||||
- Shadow: `rgb(153, 153, 153) 1px 1px 1px 0px`
|
||||
- Buttons: oversized (45px Arial), white bg with black border
|
||||
- Uses standard PrimeReact/Element Plus modal framework
|
||||
|
||||
### Navigation
|
||||
- **Desktop**: Prancing Horse logo centered at top of page, primary navigation below — not a traditional horizontal nav bar but a full-width header block on black background
|
||||
- **Logo**: Centered Prancing Horse emblem (44×42px) on absolute black — the single most prominent UI element
|
||||
- **Links**: FerrariSans, 13px, weight 600, white text on dark backgrounds
|
||||
- **Mobile**: Hamburger collapse to vertical navigation drawer
|
||||
- **Footer**: Multi-column layout on `#303030` (Dark Surface) with category links in Body-Font uppercase
|
||||
- **No sticky nav behavior** observed — the page scrolls naturally with the header moving off-screen
|
||||
|
||||
### Image Treatment
|
||||
- **Hero**: Full-width editorial photography on black backgrounds — concept cars in atmospheric studio lighting, editorial portraits with cinematic composition
|
||||
- **Aspect ratios**: Mixed — landscape (16:9) for hero sections, near-square for portrait/driver imagery, wide panoramic for vehicle lineups
|
||||
- **Full-bleed vs padded**: Hero images are full-bleed edge-to-edge; editorial content images are padded within white containers
|
||||
- **Lazy loading**: Below-fold sections use progressive loading (PrimeReact framework handles this)
|
||||
- **Image quality**: High-resolution photography with studio lighting — no user-generated or lifestyle imagery. Every image is art-directed
|
||||
|
||||
### Carousel Component
|
||||
- Editorial carousel with multiple slides
|
||||
- Dot indicators for slide position
|
||||
- Arrow navigation (left/right) at slide edges
|
||||
- Auto-advancing with manual override
|
||||
- Content: mixed editorial — event recaps, model launches, racing highlights
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px (detected system base)
|
||||
- **Scale**: 1px, 2px, 4px, 5px, 6px, 9px, 10px, 11.2px, 12px, 13px, 15px, 16px, 19px, 20px, 25px
|
||||
- **Button padding**: 12px vertical, 10px horizontal — compact and precise
|
||||
- **Section padding**: Generous vertical spacing (40–80px estimated) between major content blocks
|
||||
- **Card gaps**: 16–20px between grid items
|
||||
- **Footer padding**: 25px horizontal sections within the dark footer block
|
||||
|
||||
### Grid & Container
|
||||
- **Max width**: 1920px (largest breakpoint) with content constraining at narrower widths
|
||||
- **Hero**: Full-bleed on black, content centered
|
||||
- **Editorial sections**: 2-column layouts with image + text, alternating sides
|
||||
- **Vehicle lineup**: Horizontal scroll/carousel, 5–6 models visible at desktop width
|
||||
- **Footer**: 4-column grid for link categories
|
||||
|
||||
### Whitespace Philosophy
|
||||
Ferrari treats white space as a gallery wall. Each section — whether a concept car render on black void or a pair of F1 drivers on neutral gray — is given its own "room" of breathing space. The alternating black/white sections create a pacing rhythm: dark = immersive moment, white = editorial content, dark = immersive moment. This cadence makes scrolling feel like turning pages in a luxury publication. White space between editorial cards is moderate (not Tesla-extreme) because Ferrari is telling stories, not exhibiting single objects.
|
||||
|
||||
### Border Radius Scale
|
||||
| Value | Context |
|
||||
|-------|---------|
|
||||
| 1px | Subtle softening on small inline elements (spans) |
|
||||
| 2px | Default for buttons, inputs, and interactive elements — barely perceptible, razor-precision |
|
||||
| 8px | Modal dialogs and overlay containers — the "softest" structural radius |
|
||||
| 50% | Circular elements: carousel dots, avatar thumbnails, slider handles |
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Flat) | No shadow, no border | Default state for all content sections and cards |
|
||||
| Level 1 (Subtle) | `rgb(153, 153, 153) 1px 1px 1px 0px` | Rare — cookie consent dialogs and dropdown menus |
|
||||
| Level 2 (Overlay) | `hsla(0, 0%, 7%, 0.8)` backdrop | Modal overlays and image caption backgrounds |
|
||||
| Level 3 (Border) | `1px solid #CCCCCC` | Input fields, form containers — depth through delineation not shadow |
|
||||
|
||||
### Shadow Philosophy
|
||||
Ferrari's approach to elevation is nearly as flat as Tesla's, but with a different rationale. Where Tesla avoids shadows for minimalism, Ferrari avoids them because the editorial photography provides all the visual depth needed. The single shadow token (`rgb(153, 153, 153) 1px 1px 1px 0px`) is extremely subtle — a 1-pixel whisper used only in utilitarian contexts like consent dialogs. The site communicates hierarchy through three strategies:
|
||||
1. **Surface color contrast**: Black sections vs. white sections create unmistakable layering
|
||||
2. **Overlay transparency**: The `--f-color-overlay-darker` at 80% opacity creates depth without shadow
|
||||
3. **Photographic depth**: Studio-lit car imagery with reflections, ground shadows, and atmospheric haze provides all the visual dimensionality
|
||||
|
||||
### Decorative Depth
|
||||
- No UI gradients, no glows, no blur effects on interface elements
|
||||
- The Prancing Horse logo on black creates a "floating in void" effect through pure contrast — no glow or shadow needed
|
||||
- Dark-to-light section transitions are hard cuts, not gradient blends — reinforcing the editorial page-turn metaphor
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Ferrari Red (`#DA291C`) sparingly — only for primary CTAs and brand-critical moments. Its power comes from restraint
|
||||
- Alternate between black cinematic sections and white editorial sections to create the signature chiaroscuro rhythm
|
||||
- Use FerrariSans at weight 500 as the default heading voice — it's the typographic equivalent of the engine note
|
||||
- Apply Body-Font in uppercase with 1px letter-spacing for all labels, category tags, and structural annotations
|
||||
- Keep border-radius at 2px for all interactive elements — razor precision, not rounded friendliness
|
||||
- Let photography carry the emotional weight — every image should be art-directed studio quality
|
||||
- Use the Prancing Horse emblem as a standalone hero element on black — never crowd it with adjacent content
|
||||
- Maintain the 12px/10px button padding ratio — compact, purposeful, no excess
|
||||
- Use `#181818` (Near Black) for body text instead of pure `#000000` — the subtle warmth improves readability
|
||||
- Reserve the yellow accents (`#FFF200`, `#F6E500`) strictly for motorsport and racing heritage contexts
|
||||
|
||||
### Don't
|
||||
- Scatter Ferrari Red across the interface as decoration — it's a CTA signal, not a theme color
|
||||
- Use rounded-pill buttons or large border-radii — the 2px precision is non-negotiable
|
||||
- Add box-shadows to cards or content containers — depth comes from surface color contrast and photography
|
||||
- Mix FerrariSans and Body-Font within the same text block — they serve separate hierarchical functions
|
||||
- Use colorful backgrounds (blue, green, etc.) for sections — the palette is exclusively black/white/gray with red and yellow accents
|
||||
- Apply text transforms to FerrariSans headings — uppercase is reserved for Body-Font labels only
|
||||
- Display low-quality or user-generated imagery — every photograph must meet editorial standards
|
||||
- Use the Link Hover Blue (`#3860BE`) for anything other than interactive hover states — it's not a brand color
|
||||
- Create busy layouts with multiple competing focal points — each section should have one clear story
|
||||
- Override the semantic color system (warning, success, info) with brand colors — `#F13A2C` warning is deliberately different from `#DA291C` brand red
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | ≤375px | Single-column, minimal padding (12px), stacked navigation, hero text scales to ~18px, full-width CTAs |
|
||||
| Mobile | 376–600px | Single-column, slightly larger padding (16px), hamburger nav, body text at 13px |
|
||||
| Tablet Small | 601–768px | 2-column editorial grid begins, hero images maintain full-width, footer switches to 2-column |
|
||||
| Tablet | 769–960px | Full 2-column layout, carousel shows 3 vehicles, padding increases to 20px |
|
||||
| Desktop | 961–1280px | Full navigation, 2-column editorial with larger imagery, vehicle lineup shows 5 models |
|
||||
| Large Desktop | 1281–1920px | Maximum content width, generous whitespace, hero photography at full cinematic scale |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA buttons: minimum 44px height with 12px vertical padding (meets WCAG AAA 44×44px target)
|
||||
- Navigation links: 13px text with 1.50 line-height and adequate spacing between items
|
||||
- Carousel arrows: 44px+ touch targets at viewport edges
|
||||
- Footer links: grouped with sufficient vertical spacing (16–20px) for touch accuracy
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav collapses to centered Prancing Horse logo + hamburger menu on mobile
|
||||
- **Editorial sections**: 2-column image+text layouts collapse to single-column with image stacking above text
|
||||
- **Vehicle lineup**: Horizontal carousel maintains scroll behavior but reduces visible models from 5 to 2–3
|
||||
- **Footer**: 4-column link grid collapses to 2-column on tablet, single-column accordion on mobile
|
||||
- **Hero carousel**: Full-width at all breakpoints, dot indicators and arrows scale proportionally
|
||||
- **Spacing reduction**: Section padding reduces from 40–80px (desktop) to 20–40px (mobile), maintaining proportional breathing room
|
||||
|
||||
### Image Behavior
|
||||
- Hero images: full-bleed at all breakpoints, using `object-fit: cover` to maintain cinematic composition
|
||||
- Editorial images: responsive within their containers, maintaining aspect ratio
|
||||
- Vehicle lineup: thumbnail size scales but maintains consistent car-to-frame proportions
|
||||
- Art direction: mobile crops may tighten on vehicle subjects, reducing environmental context
|
||||
- Lazy loading: PrimeReact handles progressive image loading for below-fold content
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: "Ferrari Red (#DA291C)"
|
||||
- Background Light: "Pure White (#FFFFFF)"
|
||||
- Background Dark: "Absolute Black (#000000)"
|
||||
- Secondary Dark Surface: "Dark Surface (#303030)"
|
||||
- Heading text (light bg): "Near Black (#181818)"
|
||||
- Body text: "Dark Gray (#666666)"
|
||||
- Tertiary text: "Mid Gray (#8F8F8F)"
|
||||
- Border: "Border Gray (#CCCCCC)"
|
||||
- Button Hover: "Teal (#1EAEDB)"
|
||||
- Link Hover: "Link Blue (#3860BE)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Absolute Black (#000000) background with a centered logo emblem at the top, generous vertical spacing (80px+), and a single editorial headline in FerrariSans at 26px weight 500 in white, with a small Body-Font uppercase caption (12px, 1px letter-spacing) in Silver Gray (#969696) below"
|
||||
- "Design a Subscribe section on Dark Surface (#303030) with a left-aligned headline in white FerrariSans (24px/500), a subtitle in Mid Gray (#8F8F8F, 13px), an email input with transparent background and 1px #CCCCCC border, and a Ferrari Red (#DA291C) Subscribe button with white text, 2px border-radius, and 12px 10px padding"
|
||||
- "Build an editorial card on white background with a full-width image (16:9 ratio) above, a FerrariSans heading (16px/700, Near Black #181818) below, and a Body-Font uppercase label (11px, 1px letter-spacing, Mid Gray #8F8F8F) as the category tag — no border, no shadow, no border-radius"
|
||||
- "Create a vehicle lineup carousel showing 5 car thumbnails in a horizontal scroll on white background, with left/right arrow navigation, dot indicators below, and a FerrariSans model name (16px/500) beneath each vehicle"
|
||||
- "Design a dark cinematic section with full-bleed studio photography of a concept car on Absolute Black, a white FerrariSans headline (26px/500) positioned in the lower-left with generous padding (40px), and a Ghost Button (transparent bg, 1px white border, white text, 2px radius) as the CTA"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time — Ferrari's editorial rhythm means each section is a self-contained vignette
|
||||
2. Reference specific color names and hex codes from this document — the palette is small but each color has a precise role
|
||||
3. Use natural language descriptions, not CSS values — "razor-sharp 2px corners" conveys intent better than "border-radius: 2px"
|
||||
4. Describe the desired "feel" alongside specific measurements — "editorial magazine page-turn between sections" communicates the layout philosophy better than "margin-bottom: 80px"
|
||||
5. Always maintain the chiaroscuro contrast — if a section feels flat, check whether it needs to be on black or white to maintain the alternating rhythm
|
||||
6. Reserve Ferrari Red for ONE element per screen — if red appears in more than one place, it loses its authority
|
||||
@@ -1,23 +1,3 @@
|
||||
# Ferrari Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ferrari/DESIGN.md) extracted from the public [Ferrari](https://ferrari.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ferrari/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Ferrari design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/ferrari/design-md
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,220 +0,0 @@
|
||||
# Design System Inspiration of Figma
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Figma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of "regular vs bold."
|
||||
|
||||
The page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only `#000000` and `#ffffff` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.
|
||||
|
||||
What makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (`dashed 2px`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700
|
||||
- Strictly black-and-white interface chrome — color exists only in product content
|
||||
- figmaMono for uppercase technical labels with wide letter-spacing
|
||||
- Pill (50px) and circular (50%) button geometry
|
||||
- Dashed focus outlines echoing Figma's editor selection handles
|
||||
- Vibrant multi-color hero gradients (green, yellow, purple, pink)
|
||||
- OpenType `"kern"` feature enabled globally
|
||||
- Negative letter-spacing throughout — even body text at -0.14px to -0.26px
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure Black** (`#000000`): All text, all solid buttons, all borders. The sole "color" of the interface.
|
||||
- **Pure White** (`#ffffff`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.
|
||||
|
||||
*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): Primary page background and card surfaces.
|
||||
- **Glass Black** (`rgba(0, 0, 0, 0.08)`): Subtle dark overlay for secondary circular buttons and glass effects.
|
||||
- **Glass White** (`rgba(255, 255, 255, 0.16)`): Frosted glass overlay for buttons on dark/colored surfaces.
|
||||
|
||||
### Gradient System
|
||||
- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.
|
||||
- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `figmaSans`, with fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
|
||||
- **Monospace / Labels**: `figmaMono`, with fallbacks: `figmaMono Fallback, SF Mono, menlo`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |
|
||||
| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |
|
||||
| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |
|
||||
| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |
|
||||
| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |
|
||||
| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |
|
||||
| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |
|
||||
| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |
|
||||
| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |
|
||||
| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |
|
||||
|
||||
### Principles
|
||||
- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.
|
||||
- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 "regular"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.
|
||||
- **Kern everywhere**: Every text element enables OpenType `"kern"` feature — kerning is not optional, it's structural.
|
||||
- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.
|
||||
- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Black Solid (Pill)**
|
||||
- Background: Pure Black (`#000000`)
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Radius: circle (50%) for icon buttons
|
||||
- Focus: dashed 2px outline
|
||||
- Maximum emphasis
|
||||
|
||||
**White Pill**
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Pure Black (`#000000`)
|
||||
- Padding: 8px 18px 10px (asymmetric vertical)
|
||||
- Radius: pill (50px)
|
||||
- Focus: dashed 2px outline
|
||||
- Standard CTA on dark/colored surfaces
|
||||
|
||||
**Glass Dark**
|
||||
- Background: `rgba(0, 0, 0, 0.08)` (subtle dark overlay)
|
||||
- Text: Pure Black
|
||||
- Radius: circle (50%)
|
||||
- Focus: dashed 2px outline
|
||||
- Secondary action on light surfaces
|
||||
|
||||
**Glass Light**
|
||||
- Background: `rgba(255, 255, 255, 0.16)` (frosted glass)
|
||||
- Text: Pure White
|
||||
- Radius: circle (50%)
|
||||
- Focus: dashed 2px outline
|
||||
- Secondary action on dark/colored surfaces
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Pure White
|
||||
- Border: none or minimal
|
||||
- Radius: 6px (small containers), 8px (images, cards, dialogs)
|
||||
- Shadow: subtle to medium elevation effects
|
||||
- Product screenshots as card content
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white
|
||||
- Logo: Figma wordmark in black
|
||||
- Product tabs: pill-shaped (50px) tab navigation
|
||||
- Links: black text, underline 1px decoration
|
||||
- CTA: Black pill button
|
||||
- Hover: text color via CSS variable
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Product Tab Bar**
|
||||
- Horizontal pill-shaped tabs (50px radius)
|
||||
- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)
|
||||
- Active tab highlighted
|
||||
|
||||
**Hero Gradient Section**
|
||||
- Full-width vibrant multi-color gradient background
|
||||
- White text overlay with 86px display heading
|
||||
- Product screenshots floating within the gradient
|
||||
|
||||
**Dashed Focus Indicators**
|
||||
- All interactive elements use `dashed 2px` outline on focus
|
||||
- References the selection handles in the Figma editor
|
||||
- A meta-design choice connecting website and product
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: up to 1920px
|
||||
- Hero: full-width gradient with centered content
|
||||
- Product sections: alternating showcases
|
||||
- Footer: dark full-width section
|
||||
- Responsive from 559px to 1920px
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.
|
||||
- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Small link elements
|
||||
- Subtle (6px): Small containers, dividers
|
||||
- Comfortable (8px): Cards, images, dialogs
|
||||
- Pill (50px): Tab buttons, CTAs
|
||||
- Circle (50%): Icon buttons, circular elements
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, most text |
|
||||
| Surface (Level 1) | White card on gradient/dark section | Cards, product showcases |
|
||||
| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |
|
||||
|
||||
**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful/dark sections) and the inherent dimensionality of the product screenshots themselves.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design
|
||||
- Keep the interface strictly black-and-white — color comes from product content only
|
||||
- Use pill (50px) and circular (50%) geometry for all interactive elements
|
||||
- Apply dashed 2px focus outlines — the signature accessibility pattern
|
||||
- Enable `"kern"` feature on all text
|
||||
- Use figmaMono in uppercase with positive letter-spacing for labels
|
||||
- Apply negative letter-spacing throughout (-0.1px to -1.72px)
|
||||
|
||||
### Don't
|
||||
- Don't add interface colors — the monochrome palette is absolute
|
||||
- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)
|
||||
- Don't use sharp corners on buttons — pill and circular geometry only
|
||||
- Don't use solid focus outlines — dashed is the signature
|
||||
- Don't increase body font weight above 450 — the light-weight aesthetic is core
|
||||
- Don't use positive letter-spacing on body text — it's always negative
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Small Mobile | <560px | Compact layout, stacked |
|
||||
| Tablet | 560–768px | Minor adjustments |
|
||||
| Small Desktop | 768–960px | 2-column layouts |
|
||||
| Desktop | 960–1280px | Standard layout |
|
||||
| Large Desktop | 1280–1440px | Expanded |
|
||||
| Ultra-wide | 1440–1920px | Maximum width |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero text: 86px → 64px → 48px
|
||||
- Product tabs: horizontal scroll on mobile
|
||||
- Feature sections: stacked single column
|
||||
- Footer: multi-column → stacked
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Everything: "Pure Black (#000000)" and "Pure White (#ffffff)"
|
||||
- Glass Dark: "rgba(0, 0, 0, 0.08)"
|
||||
- Glass Light: "rgba(255, 255, 255, 0.16)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
|
||||
- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
|
||||
- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
|
||||
- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."
|
||||
|
||||
### Iteration Guide
|
||||
1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700
|
||||
2. Interface is always black + white — never add colors to chrome
|
||||
3. Dashed focus outlines, not solid
|
||||
4. Letter-spacing is always negative on body, always positive on mono labels
|
||||
5. Pill (50px) for buttons/tabs, circle (50%) for icon buttons
|
||||
@@ -1,24 +1,3 @@
|
||||
# Figma Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) extracted from the public [Figma](https://figma.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Figma design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/figma/design-md
|
||||
|
||||
@@ -1,822 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Figma</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
--glass-dark: rgba(0, 0, 0, 0.08);
|
||||
--glass-light: rgba(255, 255, 255, 0.16);
|
||||
--font-sans: system-ui, -apple-system, 'Segoe UI', 'SF Pro Display', Helvetica, Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;
|
||||
/* Dark mode tokens */
|
||||
--bg-page: #000000;
|
||||
--bg-card: #000000;
|
||||
--bg-nav: rgba(0, 0, 0, 0.92);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #ffffff;
|
||||
--text-muted: rgba(255, 255, 255, 0.5);
|
||||
--border-color: rgba(255, 255, 255, 0.12);
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--section-label-color: #ffffff;
|
||||
--glass-surface: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
font-weight: 340;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.14px;
|
||||
font-feature-settings: "kern" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.nav-brand svg { width: 24px; height: 24px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.14px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-links a:hover { opacity: 0.6; }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-cta:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 86px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.72px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--color-white);
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 20px;
|
||||
font-weight: 330;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.14px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-hero-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-hero-primary:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-hero-glass {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.btn-hero-glass:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
|
||||
/* PRODUCT TABS */
|
||||
.product-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.product-tab {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.product-tab.active {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.54px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.96px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 26px;
|
||||
font-weight: 540;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.26px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.6px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 340; }
|
||||
|
||||
/* GRADIENT PREVIEW */
|
||||
.gradient-preview {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.gradient-block {
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.gradient-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; font-feature-settings: "kern" 1; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* WEIGHT SPECTRUM */
|
||||
.weight-spectrum { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding: 24px; background: var(--glass-surface); border-radius: 8px; }
|
||||
.weight-sample { display: flex; align-items: baseline; gap: 16px; }
|
||||
.weight-sample-text { font-family: var(--font-sans); font-size: 24px; letter-spacing: -0.26px; line-height: 1.35; flex: 1; }
|
||||
.weight-sample-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; min-width: 80px; text-align: right; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.btn-white-pill-solid {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-white-pill-solid:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-dark-pill-outline {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-dark-pill-outline:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-white-circle {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-white-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-glass-light-circle {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-glass-light-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-glass-dark-circle {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
color: var(--color-white);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.btn-glass-dark-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
|
||||
/* FOCUS DEMO */
|
||||
.focus-demo-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
padding: 24px;
|
||||
background: var(--glass-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.focus-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn-focus-visible {
|
||||
outline: 2px dashed var(--color-white);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-elevated {
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 4px 24px rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.card-glass {
|
||||
background: var(--glass-surface);
|
||||
border: none;
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card p { color: var(--text-muted); font-size: 16px; line-height: 1.45; font-weight: 330; letter-spacing: -0.14px; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--glass-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
font-weight: 340;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-surface { background: var(--glass-surface); border: 1px solid var(--border-color); }
|
||||
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0 4px 24px rgba(255, 255, 255, 0.04); }
|
||||
.elevation-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: normal; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; font-weight: 340; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 48px; letter-spacing: -0.96px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 36px; letter-spacing: -0.72px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.product-tabs { flex-wrap: wrap; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="product-tabs">
|
||||
<button class="product-tab active">Design</button>
|
||||
<button class="product-tab">Dev Mode</button>
|
||||
<button class="product-tab">Prototyping</button>
|
||||
<button class="product-tab">Slides</button>
|
||||
</div>
|
||||
<h1>Design System<br>Inspired by Figma</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-hero-primary">Explore Tokens</button>
|
||||
<button class="btn-hero-glass">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / COLOR PALETTE</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid rgba(255,255,255,0.12);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Page background, dark surface. The foundation of the dark theme.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">All text, solid buttons, primary interface color on dark.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Glass</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.16);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Glass White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
|
||||
<div class="color-swatch-role">Frosted glass overlays, secondary buttons on dark surfaces.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.08);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Glass Subtle</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.08)</div>
|
||||
<div class="color-swatch-role">Card surfaces, grouped content areas on dark background.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Gradient System</h3>
|
||||
<div class="gradient-preview">
|
||||
<div class="gradient-block" style="background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);"></div>
|
||||
</div>
|
||||
<div class="gradient-label">Hero Gradient -- Electric Green, Purple, Orange, Pink, Cyan</div>
|
||||
<p style="color: var(--text-muted); font-size: 14px; margin-top: 8px; font-weight: 340;">Color exists only in hero gradients and product showcases. The interface layer remains strictly monochrome.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / TYPOGRAPHY SCALE</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="weight-spectrum">
|
||||
<div style="font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px;">Variable Weight Spectrum</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 320;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 320</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 330;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 330</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 340;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 340</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 400;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 400</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 450;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 450</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 480;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 480</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 540;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 540</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 700;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 700</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 86px; font-weight: 400; line-height: 1.0; letter-spacing: -1.72px;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero -- 86px / wt 400 / lh 1.00 / ls -1.72px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 64px; font-weight: 400; line-height: 1.1; letter-spacing: -0.96px;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading -- 64px / wt 400 / lh 1.10 / ls -0.96px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 26px; font-weight: 540; line-height: 1.35; letter-spacing: -0.26px;">Sub-heading Medium</div>
|
||||
<div class="type-sample-label">Sub-heading -- 26px / wt 540 / lh 1.35 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 26px; font-weight: 340; line-height: 1.35; letter-spacing: -0.26px;">Sub-heading Light</div>
|
||||
<div class="type-sample-label">Sub-heading Light -- 26px / wt 340 / lh 1.35 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: normal;">Feature Title Bold</div>
|
||||
<div class="type-sample-label">Feature Title -- 24px / wt 700 / lh 1.45 / ls normal -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 20px; font-weight: 330; line-height: 1.4; letter-spacing: -0.14px;">Body large text for descriptions and introductions. The light weight creates an airy, ethereal reading experience that matches the design-tool aesthetic.</div>
|
||||
<div class="type-sample-label">Body Large -- 20px / wt 330 / lh 1.40 / ls -0.14px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 18px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px;">Body light text at the lightest variable weight. Nearly imperceptible thinness for secondary content and delicate UI copy.</div>
|
||||
<div class="type-sample-label">Body Light -- 18px / wt 320 / lh 1.45 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.14px;">Standard body text for paragraphs, navigation links, and button labels. The default reading weight for all UI copy.</div>
|
||||
<div class="type-sample-label">Body / Button -- 16px / wt 400 / lh 1.45 / ls -0.14px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: 0.54px; text-transform: uppercase;">MONO SECTION LABEL</div>
|
||||
<div class="type-sample-label">Mono Label -- 18px / wt 400 / lh 1.30 / ls 0.54px / uppercase -- figmaMono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.6px; text-transform: uppercase;">MONO SMALL TAG</div>
|
||||
<div class="type-sample-label">Mono Small -- 12px / wt 400 / lh 1.00 / ls 0.6px / uppercase -- figmaMono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / BUTTON VARIANTS</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-white-pill-solid">Get started</button>
|
||||
<div class="button-demo-label">White Pill CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-dark-pill-outline">Learn more</button>
|
||||
<div class="button-demo-label">Outline Pill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-white-circle" aria-label="Menu">☰</button>
|
||||
<div class="button-demo-label">White Circle</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-glass-light-circle" aria-label="Play">▶</button>
|
||||
<div class="button-demo-label">Glass Light</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-glass-dark-circle" aria-label="Close">×</button>
|
||||
<div class="button-demo-label">Glass Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="focus-demo-row">
|
||||
<div>
|
||||
<div class="focus-demo-label">Dashed Focus Indicator</div>
|
||||
<p style="font-size: 14px; color: var(--text-muted); font-weight: 340; margin-bottom: 16px;">All interactive elements use <code style="font-family: var(--font-mono); font-size: 12px; background: var(--glass-surface); padding: 2px 6px; border-radius: 4px;">dashed 2px</code> outline on focus, echoing the selection handles in the Figma editor.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 16px; align-items: center;">
|
||||
<button class="btn-white-pill-solid btn-focus-visible">Focused Pill</button>
|
||||
<button class="btn-white-circle btn-focus-visible" aria-label="Focused">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / CARD EXAMPLES</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">STANDARD CARD</div>
|
||||
<h3>Border Contained</h3>
|
||||
<p>Standard content card with subtle white-alpha border and 8px radius. The default container on the black surface.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-label">ELEVATED CARD</div>
|
||||
<h3>Subtle Glow</h3>
|
||||
<p>Floating card with subtle luminous shadow. Used for product showcases and hover states that lift off the dark surface.</p>
|
||||
</div>
|
||||
<div class="card card-glass">
|
||||
<div class="card-label">GLASS SURFACE</div>
|
||||
<h3>Glass Overlay</h3>
|
||||
<p>Glass-effect card using rgba(255,255,255,0.08) background. Secondary containers with a translucent frosted feel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / SPACING SCALE</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 32px; font-weight: 340; font-size: 18px; letter-spacing: -0.26px;">Base unit: 8px. Scale from 1px to 50px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 72px; height: 72px;"></div><div class="spacing-label">18px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 200px; height: 200px;"></div><div class="spacing-label">50px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / BORDER RADIUS SCALE</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 2px;"></div><div class="radius-label">2px</div><div class="radius-context">Small links</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Small containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Cards, images</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 120px;"></div><div class="radius-label">50px</div><div class="radius-context">Pill buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 50%;"></div><div class="radius-label">50%</div><div class="radius-context">Circle / Icon</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / ELEVATION & DEPTH</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Pure black page background and most text. The default dark surface.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-surface">
|
||||
<div><div class="elevation-name">Surface</div><div class="elevation-desc">Glass white card on black background. Primary depth through translucent layering.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Subtle luminous shadow for floating cards and hover states on dark surfaces.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,832 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Figma</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
--glass-dark: rgba(0, 0, 0, 0.08);
|
||||
--glass-light: rgba(255, 255, 255, 0.16);
|
||||
--font-sans: system-ui, -apple-system, 'Segoe UI', 'SF Pro Display', Helvetica, Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;
|
||||
/* Light mode tokens */
|
||||
--bg-page: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-nav: rgba(255, 255, 255, 0.92);
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #000000;
|
||||
--text-muted: rgba(0, 0, 0, 0.5);
|
||||
--border-color: rgba(0, 0, 0, 0.12);
|
||||
--border-subtle: rgba(0, 0, 0, 0.06);
|
||||
--section-label-color: #000000;
|
||||
--glass-surface: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
font-weight: 340;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.14px;
|
||||
font-feature-settings: "kern" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--bg-nav);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-brand svg { width: 24px; height: 24px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.14px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-links a:hover { opacity: 0.6; }
|
||||
.nav-cta {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-cta:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 86px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1.72px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--color-white);
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 20px;
|
||||
font-weight: 330;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.14px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-hero-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-hero-primary:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
.btn-hero-glass {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.btn-hero-glass:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }
|
||||
|
||||
/* PRODUCT TABS */
|
||||
.product-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.product-tab {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.product-tab.active {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.54px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.section-heading {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.96px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 26px;
|
||||
font-weight: 540;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.26px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.color-swatch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.6px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 340; }
|
||||
|
||||
/* GRADIENT PREVIEW */
|
||||
.gradient-preview {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.gradient-block {
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.gradient-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; font-feature-settings: "kern" 1; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* WEIGHT SPECTRUM */
|
||||
.weight-spectrum { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding: 24px; background: var(--glass-surface); border-radius: 8px; }
|
||||
.weight-sample { display: flex; align-items: baseline; gap: 16px; }
|
||||
.weight-sample-text { font-family: var(--font-sans); font-size: 24px; letter-spacing: -0.26px; line-height: 1.35; flex: 1; }
|
||||
.weight-sample-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; min-width: 80px; text-align: right; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.btn-black-pill {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 8px 18px 10px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-black-pill:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }
|
||||
.btn-white-pill {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 18px 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 480;
|
||||
letter-spacing: -0.14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-white-pill:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }
|
||||
.btn-black-circle {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-black-circle:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }
|
||||
.btn-glass-dark {
|
||||
background: var(--glass-dark);
|
||||
color: var(--color-black);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-glass-dark:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }
|
||||
.btn-glass-light-demo {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: var(--color-white);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.glass-light-wrapper {
|
||||
background: var(--color-black);
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* FOCUS DEMO */
|
||||
.focus-demo-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
padding: 24px;
|
||||
background: var(--glass-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.focus-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn-focus-visible {
|
||||
outline: 2px dashed var(--color-black);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-color); }
|
||||
.card-elevated {
|
||||
border: none;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.card-glass {
|
||||
background: var(--glass-surface);
|
||||
border: none;
|
||||
}
|
||||
.card h3 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card p { color: var(--text-muted); font-size: 16px; line-height: 1.45; font-weight: 330; letter-spacing: -0.14px; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--glass-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
font-weight: 340;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; background: var(--bg-page); }
|
||||
.elevation-surface { background: var(--bg-card); border: 1px solid var(--border-color); }
|
||||
.elevation-elevated { border: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); }
|
||||
.elevation-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: normal; }
|
||||
.elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; font-weight: 340; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 48px; letter-spacing: -0.96px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 36px; letter-spacing: -0.72px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.product-tabs { flex-wrap: wrap; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="product-tabs">
|
||||
<button class="product-tab active">Design</button>
|
||||
<button class="product-tab">Dev Mode</button>
|
||||
<button class="product-tab">Prototyping</button>
|
||||
<button class="product-tab">Slides</button>
|
||||
</div>
|
||||
<h1>Design System<br>Inspired by Figma</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-hero-primary">Explore Tokens</button>
|
||||
<button class="btn-hero-glass">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / COLOR PALETTE</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">All text, solid buttons, all borders. The sole interface color.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff; border: 1px solid rgba(0,0,0,0.12);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">All backgrounds, white buttons, text on dark surfaces.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Glass</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.12);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Glass Black</div>
|
||||
<div class="color-swatch-hex">rgba(0,0,0,0.08)</div>
|
||||
<div class="color-swatch-role">Secondary circular buttons, glass overlays on light surfaces.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.16); border: 1px solid rgba(0,0,0,0.12); position: relative;">
|
||||
<div style="position: absolute; inset: 0; background: #000; z-index: 0;"></div>
|
||||
<div style="position: absolute; inset: 0; background: rgba(255,255,255,0.16); z-index: 1;"></div>
|
||||
</div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Glass White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
|
||||
<div class="color-swatch-role">Frosted glass overlay for buttons on dark or colored surfaces.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Gradient System</h3>
|
||||
<div class="gradient-preview">
|
||||
<div class="gradient-block" style="background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);"></div>
|
||||
</div>
|
||||
<div class="gradient-label">Hero Gradient -- Electric Green, Purple, Orange, Pink, Cyan</div>
|
||||
<p style="color: var(--text-muted); font-size: 14px; margin-top: 8px; font-weight: 340;">Color exists only in hero gradients and product showcases. The interface layer remains strictly monochrome.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / TYPOGRAPHY SCALE</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="weight-spectrum">
|
||||
<div style="font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px;">Variable Weight Spectrum</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 320;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 320</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 330;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 330</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 340;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 340</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 400;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 400</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 450;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 450</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 480;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 480</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 540;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 540</span>
|
||||
</div>
|
||||
<div class="weight-sample">
|
||||
<span class="weight-sample-text" style="font-weight: 700;">The quick brown fox jumps</span>
|
||||
<span class="weight-sample-label">Weight 700</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 86px; font-weight: 400; line-height: 1.0; letter-spacing: -1.72px;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero -- 86px / wt 400 / lh 1.00 / ls -1.72px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 64px; font-weight: 400; line-height: 1.1; letter-spacing: -0.96px;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading -- 64px / wt 400 / lh 1.10 / ls -0.96px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 26px; font-weight: 540; line-height: 1.35; letter-spacing: -0.26px;">Sub-heading Medium</div>
|
||||
<div class="type-sample-label">Sub-heading -- 26px / wt 540 / lh 1.35 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 26px; font-weight: 340; line-height: 1.35; letter-spacing: -0.26px;">Sub-heading Light</div>
|
||||
<div class="type-sample-label">Sub-heading Light -- 26px / wt 340 / lh 1.35 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: normal;">Feature Title Bold</div>
|
||||
<div class="type-sample-label">Feature Title -- 24px / wt 700 / lh 1.45 / ls normal -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 20px; font-weight: 330; line-height: 1.4; letter-spacing: -0.14px;">Body large text for descriptions and introductions. The light weight creates an airy, ethereal reading experience that matches the design-tool aesthetic.</div>
|
||||
<div class="type-sample-label">Body Large -- 20px / wt 330 / lh 1.40 / ls -0.14px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 18px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px;">Body light text at the lightest variable weight. Nearly imperceptible thinness for secondary content and delicate UI copy.</div>
|
||||
<div class="type-sample-label">Body Light -- 18px / wt 320 / lh 1.45 / ls -0.26px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.14px;">Standard body text for paragraphs, navigation links, and button labels. The default reading weight for all UI copy.</div>
|
||||
<div class="type-sample-label">Body / Button -- 16px / wt 400 / lh 1.45 / ls -0.14px -- figmaSans</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: 0.54px; text-transform: uppercase;">MONO SECTION LABEL</div>
|
||||
<div class="type-sample-label">Mono Label -- 18px / wt 400 / lh 1.30 / ls 0.54px / uppercase -- figmaMono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.6px; text-transform: uppercase;">MONO SMALL TAG</div>
|
||||
<div class="type-sample-label">Mono Small -- 12px / wt 400 / lh 1.00 / ls 0.6px / uppercase -- figmaMono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / BUTTON VARIANTS</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-black-pill">Get started</button>
|
||||
<div class="button-demo-label">Black Pill CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-white-pill">Learn more</button>
|
||||
<div class="button-demo-label">White Pill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-black-circle" aria-label="Menu">☰</button>
|
||||
<div class="button-demo-label">Black Circle</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-glass-dark" aria-label="Play">▶</button>
|
||||
<div class="button-demo-label">Glass Dark</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<div class="glass-light-wrapper">
|
||||
<button class="btn-glass-light-demo" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="button-demo-label">Glass Light</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="focus-demo-row">
|
||||
<div>
|
||||
<div class="focus-demo-label">Dashed Focus Indicator</div>
|
||||
<p style="font-size: 14px; color: var(--text-muted); font-weight: 340; margin-bottom: 16px;">All interactive elements use <code style="font-family: var(--font-mono); font-size: 12px; background: var(--glass-surface); padding: 2px 6px; border-radius: 4px;">dashed 2px</code> outline on focus, echoing the selection handles in the Figma editor.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 16px; align-items: center;">
|
||||
<button class="btn-black-pill btn-focus-visible">Focused Pill</button>
|
||||
<button class="btn-black-circle btn-focus-visible" aria-label="Focused">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / CARD EXAMPLES</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">STANDARD CARD</div>
|
||||
<h3>Minimal Border</h3>
|
||||
<p>Standard content card with subtle border and 8px radius. The default container for features and content sections on the white gallery surface.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-label">ELEVATED CARD</div>
|
||||
<h3>Subtle Shadow</h3>
|
||||
<p>Floating card with subtle shadow elevation. Used for product showcases and hover states where the card lifts off the surface.</p>
|
||||
</div>
|
||||
<div class="card card-glass">
|
||||
<div class="card-label">GLASS SURFACE</div>
|
||||
<h3>Glass Overlay</h3>
|
||||
<p>Glass-effect card using rgba(0,0,0,0.08) background. Secondary containers and grouped content areas with a translucent feel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">05 / SPACING SCALE</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 32px; font-weight: 340; font-size: 18px; letter-spacing: -0.26px;">Base unit: 8px. Scale from 1px to 50px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 72px; height: 72px;"></div><div class="spacing-label">18px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width: 200px; height: 200px;"></div><div class="spacing-label">50px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">06 / BORDER RADIUS SCALE</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 2px;"></div><div class="radius-label">2px</div><div class="radius-context">Small links</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Small containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Cards, images</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 120px;"></div><div class="radius-label">50px</div><div class="radius-context">Pill buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius: 50%;"></div><div class="radius-label">50%</div><div class="radius-context">Circle / Icon</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">07 / ELEVATION & DEPTH</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Page background and most text. The default surface.</div></div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-surface">
|
||||
<div><div class="elevation-name">Surface</div><div class="elevation-desc">White card on gradient or dark section. Primary depth through background contrast.</div></div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-elevated">
|
||||
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Subtle shadow for floating cards and hover states. Sparingly applied.</div></div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,246 +0,0 @@
|
||||
# Design System Inspiration of Framer
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.
|
||||
|
||||
The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.
|
||||
|
||||
The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted
|
||||
- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
|
||||
- Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise
|
||||
- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements
|
||||
- Product screenshots as hero art — the tool IS the marketing
|
||||
- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces
|
||||
- Extensive OpenType feature usage across Inter for refined micro-typography
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity
|
||||
- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds
|
||||
- **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights
|
||||
|
||||
### Secondary & Accent
|
||||
- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
|
||||
- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation
|
||||
|
||||
### Surface & Background
|
||||
- **Void Black** (`#000000`): Page background, primary canvas
|
||||
- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark
|
||||
- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states
|
||||
|
||||
### Neutrals & Text
|
||||
- **Pure White** (`#ffffff`): Heading text, high-emphasis body text
|
||||
- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information
|
||||
- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces
|
||||
|
||||
### Semantic & Accent
|
||||
- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings
|
||||
- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements
|
||||
- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)
|
||||
|
||||
### Gradient System
|
||||
- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
|
||||
- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
|
||||
- **Body/UI**: `Inter Variable` / `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
|
||||
- **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)
|
||||
- **Monospace**: `Azeret Mono` — companion mono for code and technical labels
|
||||
- **Rounded**: `Open Runde` — small rounded companion font for micro-labels
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
|
||||
| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
|
||||
| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
|
||||
| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
|
||||
| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
|
||||
| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
|
||||
| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
|
||||
| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
|
||||
| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
|
||||
| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
|
||||
| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
|
||||
| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
|
||||
| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
|
||||
| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
|
||||
| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
|
||||
| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
|
||||
| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
|
||||
| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
|
||||
|
||||
### Principles
|
||||
- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless
|
||||
- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes
|
||||
- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone
|
||||
- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle
|
||||
- **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA — clean, high-contrast on dark, unmissable
|
||||
- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
|
||||
- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
|
||||
|
||||
### Cards & Containers
|
||||
- **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px–15px radius)
|
||||
- **Elevated Card**: Multi-layer shadow — `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)
|
||||
- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews
|
||||
- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
|
||||
|
||||
### Inputs & Forms
|
||||
- Minimal form presence on the marketing site
|
||||
- Input fields follow dark theme: dark background, subtle border, white text
|
||||
- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`
|
||||
- Placeholder text in `rgba(255, 255, 255, 0.4)`
|
||||
|
||||
### Navigation
|
||||
- **Dark floating nav bar**: Black background with frosted glass effect, white text links
|
||||
- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
|
||||
- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
|
||||
- **Mobile**: Collapses to hamburger menu, maintains dark theme
|
||||
- **Sticky behavior**: Nav remains fixed at top on scroll
|
||||
|
||||
### Image Treatment
|
||||
- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)
|
||||
- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
|
||||
- **16:9 and custom aspect ratios**: Product demos fill their containers
|
||||
- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow
|
||||
|
||||
### Trust & Social Proof
|
||||
- Customer logos and testimonials in muted gray on dark surfaces
|
||||
- Minimal ornamentation — the product screenshots serve as the trust signal
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
|
||||
- **Section padding**: Large vertical spacing (80px–120px between sections)
|
||||
- **Card padding**: 15px–30px internal padding
|
||||
- **Component gaps**: 8px–20px between related elements
|
||||
|
||||
### Grid & Container
|
||||
- **Max width**: ~1200px container, centered
|
||||
- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
|
||||
- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks
|
||||
- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
|
||||
- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
|
||||
|
||||
### Border Radius Scale
|
||||
- **1px**: Micro-elements, nearly squared precision edges
|
||||
- **5px–7px**: Small UI elements, image thumbnails — subtly softened
|
||||
- **8px**: Standard component radius — code blocks, buttons, interactive elements
|
||||
- **10px–12px**: Cards, product screenshots — comfortably rounded
|
||||
- **15px–20px**: Large containers, feature cards — generously rounded
|
||||
- **30px–40px**: Navigation pills, pagination — noticeably rounded
|
||||
- **100px**: Full pill shape — primary CTAs, tag elements
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
|
||||
| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |
|
||||
| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |
|
||||
| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |
|
||||
|
||||
### Shadow Philosophy
|
||||
Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
|
||||
- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element
|
||||
- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface
|
||||
- **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)
|
||||
|
||||
### Decorative Depth
|
||||
- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas
|
||||
- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use pure black (`#000000`) as the primary background — not dark gray, not charcoal
|
||||
- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
|
||||
- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons
|
||||
- Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states
|
||||
- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds
|
||||
- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand
|
||||
- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
|
||||
- Let product screenshots be the visual centerpiece — the tool markets itself
|
||||
- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment
|
||||
|
||||
### Don't
|
||||
- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)
|
||||
- Apply bold (700+) weight to GT Walsheim display text — medium 500 only
|
||||
- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system
|
||||
- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)
|
||||
- Add decorative imagery, illustrations, or icons — the product IS the illustration
|
||||
- Use positive letter-spacing on headlines — everything is compressed, negative tracking
|
||||
- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients
|
||||
- Place light/white backgrounds behind content sections — the void is sacred
|
||||
- Use serif or display-weight fonts — the system is geometric sans-serif only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |
|
||||
| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |
|
||||
| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum
|
||||
- Nav links: 15px text with generous padding for touch accessibility
|
||||
- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint
|
||||
- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally
|
||||
- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile
|
||||
- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
|
||||
- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots are responsive, scaling within their container boundaries
|
||||
- No art direction changes — same crops across breakpoints
|
||||
- Dark background ensures screenshots maintain visual impact at any size
|
||||
- Screenshots lazy-load as user scrolls into view
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary Background: Void Black (`#000000`)
|
||||
- Primary Text: Pure White (`#ffffff`)
|
||||
- Accent/CTA: Framer Blue (`#0099ff`)
|
||||
- Secondary Text: Muted Silver (`#a6a6a6`)
|
||||
- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
|
||||
- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
|
||||
- "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
|
||||
- "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
|
||||
- "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
|
||||
- "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time — the dark canvas makes each element precious
|
||||
2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable
|
||||
3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links
|
||||
4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic
|
||||
5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears
|
||||
@@ -1,23 +1,3 @@
|
||||
# Framer Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/framer/DESIGN.md) extracted from the public [Framer](https://framer.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/framer/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Framer design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/framer/design-md
|
||||
|
||||
@@ -1,902 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Framer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
--color-blue: #0099ff;
|
||||
--color-silver: #a6a6a6;
|
||||
--color-near-black: #090909;
|
||||
--color-frosted: rgba(255, 255, 255, 0.1);
|
||||
--color-frosted-hover: rgba(255, 255, 255, 0.15);
|
||||
--color-blue-glow: rgba(0, 153, 255, 0.15);
|
||||
--color-ghost: rgba(255, 255, 255, 0.6);
|
||||
--color-placeholder: rgba(255, 255, 255, 0.4);
|
||||
--shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;
|
||||
--shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;
|
||||
--shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'Azeret Mono', monospace;
|
||||
--radius-xs: 1px;
|
||||
--radius-sm: 5px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 15px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-pill: 100px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: #050508;
|
||||
color: var(--color-white);
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 200;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 5px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.11px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(5, 5, 8, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-white);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--color-silver);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black) !important;
|
||||
padding: 8px 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.9; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 120px 32px 100px;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: radial-gradient(ellipse at 50% 80%, rgba(0, 153, 255, 0.06) 0%, transparent 60%);
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 96px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -5px;
|
||||
line-height: 0.88;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--color-silver);
|
||||
letter-spacing: -0.01px;
|
||||
line-height: 1.5;
|
||||
max-width: 560px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--color-frosted);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--color-frosted-hover); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 32px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -2.5px;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: var(--color-silver);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.01px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
margin: 0 32px;
|
||||
max-width: 1136px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-silver);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: #0a0a0d;
|
||||
box-shadow: var(--shadow-ring);
|
||||
}
|
||||
.color-swatch-preview {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
}
|
||||
.color-swatch-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
.color-swatch-hex {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.color-swatch-role {
|
||||
font-size: 11px;
|
||||
color: var(--color-ghost);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--color-blue);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.type-spec {
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
margin-top: 8px;
|
||||
letter-spacing: -0.12px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-showcase {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--color-frosted);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.btn-blue {
|
||||
background: var(--color-blue);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.btn-blue:hover { opacity: 0.85; }
|
||||
.btn-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.btn-item { text-align: center; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
background: #0a0a0d;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px;
|
||||
box-shadow: var(--shadow-ring);
|
||||
transition: box-shadow 0.3s, transform 0.3s;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 40px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-elevated {
|
||||
box-shadow: var(--shadow-floating);
|
||||
}
|
||||
.card-elevated:hover {
|
||||
box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.45) 0px 14px 44px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
color: var(--color-silver);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.card-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 153, 255, 0.1);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--color-blue);
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.11px;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-silver);
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
.form-input {
|
||||
background: #0a0a0d;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 14px;
|
||||
color: var(--color-white);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--color-placeholder); }
|
||||
.form-input:focus {
|
||||
border-color: var(--color-blue);
|
||||
box-shadow: var(--shadow-ring);
|
||||
}
|
||||
.form-input-error {
|
||||
border-color: #ff4444;
|
||||
box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;
|
||||
}
|
||||
.form-error-text {
|
||||
font-size: 12px;
|
||||
color: #ff4444;
|
||||
}
|
||||
textarea.form-input {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.spacing-box {
|
||||
height: 32px;
|
||||
background: var(--color-blue);
|
||||
border-radius: 4px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 10px;
|
||||
color: var(--color-ghost);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.elevation-card {
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #0a0a0d;
|
||||
min-height: 120px;
|
||||
}
|
||||
.elevation-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.elevation-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 48px 32px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
margin-top: 40px;
|
||||
}
|
||||
.footer p {
|
||||
font-size: 13px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.footer a {
|
||||
color: var(--color-blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 52px; letter-spacing: -2.5px; }
|
||||
.hero .subtitle { font-size: 16px; }
|
||||
.section-title { font-size: 36px; letter-spacing: -1.5px; }
|
||||
.nav-links { display: none; }
|
||||
.color-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- DARK MODE BADGE -->
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
<li><a href="#" class="nav-cta">Get Started</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Framer</h1>
|
||||
<p class="subtitle">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#colors" class="btn-primary">Explore Tokens</a>
|
||||
<a href="#buttons" class="btn-secondary">View Components</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 1. COLOR PALETTE -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-desc">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.</p>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #000000; border-bottom: 1px solid rgba(255,255,255,0.04);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary background, void canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary text, button fill</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #0099ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Framer Blue</div>
|
||||
<div class="color-swatch-hex">#0099ff</div>
|
||||
<div class="color-swatch-role">Accent — links, borders, focus rings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #a6a6a6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Silver</div>
|
||||
<div class="color-swatch-hex">#a6a6a6</div>
|
||||
<div class="color-swatch-role">Secondary text, descriptions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #090909; border: 1px solid rgba(255,255,255,0.04);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#090909</div>
|
||||
<div class="color-swatch-role">Elevated dark surface, card background</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.04);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Frosted White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.1)</div>
|
||||
<div class="color-swatch-role">Glass-effect buttons, translucent surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Tertiary text, placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.15);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Blue Glow</div>
|
||||
<div class="color-swatch-hex">rgba(0,153,255,0.15)</div>
|
||||
<div class="color-swatch-role">Focus ring shadow, blue halo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #0000ee;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Default Link Blue</div>
|
||||
<div class="color-swatch-hex">#0000ee</div>
|
||||
<div class="color-swatch-role">Browser default links (rare)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-desc">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Display Hero — 110px / 500 / 0.85 / -5.5px</div>
|
||||
<div style="font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;">Build better sites</div>
|
||||
<div class="type-spec">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Section Display — 85px / 500 / 0.95 / -4.25px</div>
|
||||
<div style="font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;">Scale without limits</div>
|
||||
<div class="type-spec">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Section Heading — 62px / 500 / 1.00 / -3.1px</div>
|
||||
<div style="font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;">Create, collaborate</div>
|
||||
<div class="type-spec">GT Walsheim Medium — OpenType: ss02</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Feature Heading — 32px / 500 / 1.13 / -1px</div>
|
||||
<div style="font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;">Powering ambitious sites</div>
|
||||
<div class="type-spec">GT Walsheim Medium — tightest of the smaller headings</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Card Title — 24px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;">Interactive components that respond</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Feature Title — 22px / 700 / 1.20 / -0.8px</div>
|
||||
<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;">Visual canvas meets code precision</div>
|
||||
<div class="type-spec">Inter — OpenType: cv05</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Body Large — 18px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 18px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);">Framer brings together the power of a visual canvas with the flexibility of code to create stunning, production-ready websites.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Body — 15px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 15px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);">Design and publish performant sites. Framer handles layout, interactions, and responsive behavior so you can focus on creativity.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv11</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Caption — 14px / 400 / 1.40</div>
|
||||
<div style="font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);">Responsive breakpoints with automatic layout adjustments across all devices.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Label — 13px / 500 / 1.60</div>
|
||||
<div style="font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);">Component interaction settings</div>
|
||||
<div class="type-spec">Inter — OpenType: cv06, cv11, ss03</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Micro Code — 10.4px / 400 / 1.60</div>
|
||||
<div style="font-family: var(--font-mono); font-size: 10.4px; font-weight: 400; line-height: 1.6; color: var(--color-blue);">npx framer-motion@latest</div>
|
||||
<div class="type-spec">Azeret Mono — OpenType: cv06, cv11, ss03</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-desc">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.</p>
|
||||
|
||||
<div class="button-showcase">
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-primary">Start for Free</a>
|
||||
<span class="btn-label">Primary / White Pill</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-secondary">Learn More</a>
|
||||
<span class="btn-label">Frosted / Glass</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<button class="btn-ghost">View Docs</button>
|
||||
<span class="btn-label">Ghost / Outline</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<button class="btn-blue">Upgrade Plan</button>
|
||||
<span class="btn-label">Blue / Accent</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-primary" style="padding: 8px 18px; font-size: 13px;">Sign Up</a>
|
||||
<span class="btn-label">Small / Nav CTA</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-desc">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-tag">Visual Canvas</div>
|
||||
<h3 class="card-title">Design Freedom</h3>
|
||||
<p class="card-text">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-tag">Interactive</div>
|
||||
<h3 class="card-title">Smart Components</h3>
|
||||
<p class="card-text">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag">Performance</div>
|
||||
<h3 class="card-title">Lightning Fast</h3>
|
||||
<p class="card-text">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-desc">Dark inputs with Framer Blue focus rings and minimal chrome.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email Address (Focus State)</label>
|
||||
<input type="email" class="form-input" placeholder="you@example.com" style="border-color: var(--color-blue); box-shadow: var(--shadow-ring);">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Project URL (Error State)</label>
|
||||
<input type="url" class="form-input form-input-error" placeholder="https://yoursite.framer.app" value="invalid-url">
|
||||
<span class="form-error-text">Please enter a valid URL</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-input" placeholder="Describe your project..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-desc">8px base unit system with fine-grained sub-8px values for micro-adjustments.</p>
|
||||
|
||||
<div>
|
||||
<div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">6px</span><div class="spacing-box" style="width: 24px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">10px</span><div class="spacing-box" style="width: 56px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 72px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">15px</span><div class="spacing-box" style="width: 96px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 140px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">30px</span><div class="spacing-box" style="width: 220px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">35px</span><div class="spacing-box" style="width: 260px;"></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 7. BORDER RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-desc">From nearly-squared micro edges to full pill shapes — radius grows with element importance.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 1px;"></div>
|
||||
<div class="radius-value">1px</div>
|
||||
<div class="radius-context">Micro</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 5px;"></div>
|
||||
<div class="radius-value">5px</div>
|
||||
<div class="radius-context">Thumbnails</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 8px;"></div>
|
||||
<div class="radius-value">8px</div>
|
||||
<div class="radius-context">Components</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 12px;"></div>
|
||||
<div class="radius-value">12px</div>
|
||||
<div class="radius-context">Cards</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 15px;"></div>
|
||||
<div class="radius-value">15px</div>
|
||||
<div class="radius-context">Large cards</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 20px;"></div>
|
||||
<div class="radius-value">20px</div>
|
||||
<div class="radius-context">Containers</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 40px;"></div>
|
||||
<div class="radius-value">40px</div>
|
||||
<div class="radius-context">Nav pills</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 100px; width: 72px; height: 44px;"></div>
|
||||
<div class="radius-value">100px</div>
|
||||
<div class="radius-context">Full pill</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-desc">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.</p>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow: none; border: 1px solid rgba(255,255,255,0.03);">
|
||||
<div class="elevation-label">Level 0 — Flat</div>
|
||||
<div class="elevation-desc">No shadow. Pure black surface. The void baseline that everything else rises from.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-ring);">
|
||||
<div class="elevation-label">Level 1 — Ring</div>
|
||||
<div class="elevation-desc">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-contained);">
|
||||
<div class="elevation-label">Level 2 — Contained</div>
|
||||
<div class="elevation-desc">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-floating);">
|
||||
<div class="elevation-label">Level 3 — Floating</div>
|
||||
<div class="elevation-desc">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,883 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Framer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
--color-blue: #0099ff;
|
||||
--color-silver: #a6a6a6;
|
||||
--color-near-black: #090909;
|
||||
--color-frosted: rgba(255, 255, 255, 0.1);
|
||||
--color-frosted-hover: rgba(255, 255, 255, 0.15);
|
||||
--color-blue-glow: rgba(0, 153, 255, 0.15);
|
||||
--color-ghost: rgba(255, 255, 255, 0.6);
|
||||
--color-placeholder: rgba(255, 255, 255, 0.4);
|
||||
--shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;
|
||||
--shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;
|
||||
--shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'Azeret Mono', monospace;
|
||||
--radius-xs: 1px;
|
||||
--radius-sm: 5px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 15px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-pill: 100px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-white);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--color-silver);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black) !important;
|
||||
padding: 8px 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.9; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 120px 32px 100px;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 96px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -5px;
|
||||
line-height: 0.88;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--color-silver);
|
||||
letter-spacing: -0.01px;
|
||||
line-height: 1.5;
|
||||
max-width: 560px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--color-frosted);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--color-frosted-hover); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 32px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -2.5px;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: var(--color-silver);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.01px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin: 0 32px;
|
||||
max-width: 1136px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-silver);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--color-near-black);
|
||||
box-shadow: var(--shadow-ring);
|
||||
}
|
||||
.color-swatch-preview {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
}
|
||||
.color-swatch-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
.color-swatch-hex {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.color-swatch-role {
|
||||
font-size: 11px;
|
||||
color: var(--color-ghost);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--color-blue);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.type-spec {
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
margin-top: 8px;
|
||||
letter-spacing: -0.12px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-showcase {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--color-frosted);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.btn-blue {
|
||||
background: var(--color-blue);
|
||||
color: var(--color-white);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
letter-spacing: -0.15px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.btn-blue:hover { opacity: 0.85; }
|
||||
.btn-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.btn-item { text-align: center; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
background: var(--color-near-black);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px;
|
||||
box-shadow: var(--shadow-ring);
|
||||
transition: box-shadow 0.3s, transform 0.3s;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 12px 40px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-elevated {
|
||||
box-shadow: var(--shadow-floating);
|
||||
}
|
||||
.card-elevated:hover {
|
||||
box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.35) 0px 14px 44px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
color: var(--color-silver);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.card-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-frosted);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--color-blue);
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.11px;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-silver);
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
.form-input {
|
||||
background: var(--color-near-black);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 14px;
|
||||
color: var(--color-white);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-body);
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--color-placeholder); }
|
||||
.form-input:focus {
|
||||
border-color: var(--color-blue);
|
||||
box-shadow: var(--shadow-ring);
|
||||
}
|
||||
.form-input-error {
|
||||
border-color: #ff4444;
|
||||
box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;
|
||||
}
|
||||
.form-error-text {
|
||||
font-size: 12px;
|
||||
color: #ff4444;
|
||||
}
|
||||
textarea.form-input {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.spacing-box {
|
||||
height: 32px;
|
||||
background: var(--color-blue);
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: var(--color-frosted);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 10px;
|
||||
color: var(--color-ghost);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.elevation-card {
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-near-black);
|
||||
min-height: 120px;
|
||||
}
|
||||
.elevation-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.elevation-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-silver);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 48px 32px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
margin-top: 40px;
|
||||
}
|
||||
.footer p {
|
||||
font-size: 13px;
|
||||
color: var(--color-silver);
|
||||
}
|
||||
.footer a {
|
||||
color: var(--color-blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 52px; letter-spacing: -2.5px; }
|
||||
.hero .subtitle { font-size: 16px; }
|
||||
.section-title { font-size: 36px; letter-spacing: -1.5px; }
|
||||
.nav-links { display: none; }
|
||||
.color-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
<li><a href="#" class="nav-cta">Get Started</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Framer</h1>
|
||||
<p class="subtitle">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#colors" class="btn-primary">Explore Tokens</a>
|
||||
<a href="#buttons" class="btn-secondary">View Components</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 1. COLOR PALETTE -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-desc">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.</p>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #000000; border-bottom: 1px solid rgba(255,255,255,0.06);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Primary background, void canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary text, button fill</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #0099ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Framer Blue</div>
|
||||
<div class="color-swatch-hex">#0099ff</div>
|
||||
<div class="color-swatch-role">Accent — links, borders, focus rings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #a6a6a6;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Silver</div>
|
||||
<div class="color-swatch-hex">#a6a6a6</div>
|
||||
<div class="color-swatch-role">Secondary text, descriptions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #090909; border: 1px solid rgba(255,255,255,0.06);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Near Black</div>
|
||||
<div class="color-swatch-hex">#090909</div>
|
||||
<div class="color-swatch-role">Elevated dark surface, card background</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.06);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Frosted White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.1)</div>
|
||||
<div class="color-swatch-role">Glass-effect buttons, translucent surfaces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Tertiary text, placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Semantic</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.2);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Blue Glow</div>
|
||||
<div class="color-swatch-hex">rgba(0,153,255,0.15)</div>
|
||||
<div class="color-swatch-role">Focus ring shadow, blue halo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-preview" style="background: #0000ee;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Default Link Blue</div>
|
||||
<div class="color-swatch-hex">#0000ee</div>
|
||||
<div class="color-swatch-role">Browser default links (rare)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-desc">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Display Hero — 110px / 500 / 0.85 / -5.5px</div>
|
||||
<div style="font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;">Build better sites</div>
|
||||
<div class="type-spec">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Section Display — 85px / 500 / 0.95 / -4.25px</div>
|
||||
<div style="font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;">Scale without limits</div>
|
||||
<div class="type-spec">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Section Heading — 62px / 500 / 1.00 / -3.1px</div>
|
||||
<div style="font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;">Create, collaborate</div>
|
||||
<div class="type-spec">GT Walsheim Medium — OpenType: ss02</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Feature Heading — 32px / 500 / 1.13 / -1px</div>
|
||||
<div style="font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;">Powering ambitious sites</div>
|
||||
<div class="type-spec">GT Walsheim Medium — tightest of the smaller headings</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Card Title — 24px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;">Interactive components that respond</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Feature Title — 22px / 700 / 1.20 / -0.8px</div>
|
||||
<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;">Visual canvas meets code precision</div>
|
||||
<div class="type-spec">Inter — OpenType: cv05</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Body Large — 18px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 18px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);">Framer brings together the power of a visual canvas with the flexibility of code to create stunning, production-ready websites.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Body — 15px / 400 / 1.30 / -0.01px</div>
|
||||
<div style="font-size: 15px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);">Design and publish performant sites. Framer handles layout, interactions, and responsive behavior so you can focus on creativity.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv11</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Caption — 14px / 400 / 1.40</div>
|
||||
<div style="font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);">Responsive breakpoints with automatic layout adjustments across all devices.</div>
|
||||
<div class="type-spec">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Label — 13px / 500 / 1.60</div>
|
||||
<div style="font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);">Component interaction settings</div>
|
||||
<div class="type-spec">Inter — OpenType: cv06, cv11, ss03</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-label">Micro Code — 10.4px / 400 / 1.60</div>
|
||||
<div style="font-family: var(--font-mono); font-size: 10.4px; font-weight: 400; line-height: 1.6; color: var(--color-blue);">npx framer-motion@latest</div>
|
||||
<div class="type-spec">Azeret Mono — OpenType: cv06, cv11, ss03</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-desc">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.</p>
|
||||
|
||||
<div class="button-showcase">
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-primary">Start for Free</a>
|
||||
<span class="btn-label">Primary / White Pill</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-secondary">Learn More</a>
|
||||
<span class="btn-label">Frosted / Glass</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<button class="btn-ghost">View Docs</button>
|
||||
<span class="btn-label">Ghost / Outline</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<button class="btn-blue">Upgrade Plan</button>
|
||||
<span class="btn-label">Blue / Accent</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<a href="#" class="btn-primary" style="padding: 8px 18px; font-size: 13px;">Sign Up</a>
|
||||
<span class="btn-label">Small / Nav CTA</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-desc">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-tag">Visual Canvas</div>
|
||||
<h3 class="card-title">Design Freedom</h3>
|
||||
<p class="card-text">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.</p>
|
||||
</div>
|
||||
<div class="card card-elevated">
|
||||
<div class="card-tag">Interactive</div>
|
||||
<h3 class="card-title">Smart Components</h3>
|
||||
<p class="card-text">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag">Performance</div>
|
||||
<h3 class="card-title">Lightning Fast</h3>
|
||||
<p class="card-text">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-desc">Dark inputs with Framer Blue focus rings and minimal chrome.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email Address (Focus State)</label>
|
||||
<input type="email" class="form-input" placeholder="you@example.com" style="border-color: var(--color-blue); box-shadow: var(--shadow-ring);">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Project URL (Error State)</label>
|
||||
<input type="url" class="form-input form-input-error" placeholder="https://yoursite.framer.app" value="invalid-url">
|
||||
<span class="form-error-text">Please enter a valid URL</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-input" placeholder="Describe your project..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-desc">8px base unit system with fine-grained sub-8px values for micro-adjustments.</p>
|
||||
|
||||
<div>
|
||||
<div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">6px</span><div class="spacing-box" style="width: 24px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">10px</span><div class="spacing-box" style="width: 56px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 72px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">15px</span><div class="spacing-box" style="width: 96px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 140px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">30px</span><div class="spacing-box" style="width: 220px;"></div></div>
|
||||
<div class="spacing-row"><span class="spacing-label">35px</span><div class="spacing-box" style="width: 260px;"></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 7. BORDER RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-desc">From nearly-squared micro edges to full pill shapes — radius grows with element importance.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 1px;"></div>
|
||||
<div class="radius-value">1px</div>
|
||||
<div class="radius-context">Micro</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 5px;"></div>
|
||||
<div class="radius-value">5px</div>
|
||||
<div class="radius-context">Thumbnails</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 8px;"></div>
|
||||
<div class="radius-value">8px</div>
|
||||
<div class="radius-context">Components</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 12px;"></div>
|
||||
<div class="radius-value">12px</div>
|
||||
<div class="radius-context">Cards</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 15px;"></div>
|
||||
<div class="radius-value">15px</div>
|
||||
<div class="radius-context">Large cards</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 20px;"></div>
|
||||
<div class="radius-value">20px</div>
|
||||
<div class="radius-context">Containers</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 40px;"></div>
|
||||
<div class="radius-value">40px</div>
|
||||
<div class="radius-context">Nav pills</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 100px; width: 72px; height: 44px;"></div>
|
||||
<div class="radius-value">100px</div>
|
||||
<div class="radius-context">Full pill</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-desc">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.</p>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow: none; border: 1px solid rgba(255,255,255,0.04);">
|
||||
<div class="elevation-label">Level 0 — Flat</div>
|
||||
<div class="elevation-desc">No shadow. Pure black surface. The void baseline that everything else rises from.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-ring);">
|
||||
<div class="elevation-label">Level 1 — Ring</div>
|
||||
<div class="elevation-desc">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-contained);">
|
||||
<div class="elevation-label">Level 2 — Contained</div>
|
||||
<div class="elevation-desc">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.</div>
|
||||
</div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-floating);">
|
||||
<div class="elevation-label">Level 3 — Floating</div>
|
||||
<div class="elevation-desc">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,278 +0,0 @@
|
||||
# Design System Inspiration of HashiCorp
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
HashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (`#15181e`, `#0d0e12`) for hero areas and product showcases, creating a day/night duality that mirrors the "build in light, deploy in dark" developer workflow.
|
||||
|
||||
The typography is anchored by a custom brand font (HashiCorp Sans, loaded as `__hashicorpSans_96f0ca`) that carries substantial weight — literally. Headings use 600–700 weights with tight line-heights (1.17–1.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType `"kern"` enabled is not decorative — it's infrastructure-grade typography.
|
||||
|
||||
What distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color — Terraform purple (`#7b42bc`), Vault yellow (`#ffcf25`), Waypoint teal (`#14c6cb`), Vagrant blue (`#1868f2`) — and these colors appear throughout as accent tokens via a CSS custom property system (`--mds-color-*`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.
|
||||
|
||||
The component system uses the `mds` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle — dual-layer micro-shadows using `rgba(97, 104, 117, 0.05)` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dual-mode: clean white sections + dramatic dark (`#15181e`) hero/product areas
|
||||
- Custom HashiCorp Sans font with 600–700 weights and `"kern"` feature
|
||||
- Multi-product color system via `--mds-color-*` CSS custom properties
|
||||
- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue
|
||||
- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)
|
||||
- Micro-shadows: dual-layer at 0.05 opacity — depth through whisper, not shout
|
||||
- Token-driven `mds` component system with semantic variable names
|
||||
- Tight border radius: 2px–8px, nothing pill-shaped or circular
|
||||
- System-ui fallback stack for secondary text
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Brand Primary
|
||||
- **Black** (`#000000`): Primary brand color, text on light surfaces, `--mds-color-hcp-brand`
|
||||
- **Dark Charcoal** (`#15181e`): Dark mode backgrounds, hero sections
|
||||
- **Near Black** (`#0d0e12`): Deepest dark mode surface, form inputs on dark
|
||||
|
||||
### Neutral Scale
|
||||
- **Light Gray** (`#f1f2f3`): Light backgrounds, subtle surfaces
|
||||
- **Mid Gray** (`#d5d7db`): Borders, button text on dark
|
||||
- **Cool Gray** (`#b2b6bd`): Border accents (at 0.1–0.4 opacity)
|
||||
- **Dark Gray** (`#656a76`): Helper text, secondary labels, `--mds-form-helper-text-color`
|
||||
- **Charcoal** (`#3b3d45`): Secondary text on light, button borders
|
||||
- **Near White** (`#efeff1`): Primary text on dark surfaces
|
||||
|
||||
### Product Brand Colors
|
||||
- **Terraform Purple** (`#7b42bc`): `--mds-color-terraform-button-background`
|
||||
- **Vault Yellow** (`#ffcf25`): `--mds-color-vault-button-background`
|
||||
- **Waypoint Teal** (`#14c6cb`): `--mds-color-waypoint-button-background-focus`
|
||||
- **Waypoint Teal Hover** (`#12b6bb`): `--mds-color-waypoint-button-background-hover`
|
||||
- **Vagrant Blue** (`#1868f2`): `--mds-color-vagrant-brand`
|
||||
- **Purple Accent** (`#911ced`): `--mds-color-palette-purple-300`
|
||||
- **Visited Purple** (`#a737ff`): `--mds-color-foreground-action-visited`
|
||||
|
||||
### Semantic Colors
|
||||
- **Action Blue** (`#1060ff`): Primary action links on dark
|
||||
- **Link Blue** (`#2264d6`): Primary links on light
|
||||
- **Bright Blue** (`#2b89ff`): Active links, hover accent
|
||||
- **Amber** (`#bb5a00`): `--mds-color-palette-amber-200`, warning states
|
||||
- **Amber Light** (`#fbeabf`): `--mds-color-palette-amber-100`, warning backgrounds
|
||||
- **Vault Faint Yellow** (`#fff9cf`): `--mds-color-vault-radar-gradient-faint-stop`
|
||||
- **Orange** (`#a9722e`): `--mds-color-unified-core-orange-6`
|
||||
- **Red** (`#731e25`): `--mds-color-unified-core-red-7`, error states
|
||||
- **Navy** (`#101a59`): `--mds-color-unified-core-blue-7`
|
||||
|
||||
### Shadows
|
||||
- **Micro Shadow** (`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`): Default card/button elevation
|
||||
- **Focus Outline**: `3px solid var(--mds-color-focus-action-external)` — systematic focus ring
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary Brand**: `__hashicorpSans_96f0ca` (HashiCorp Sans), with fallback: `__hashicorpSans_Fallback_96f0ca`
|
||||
- **System UI**: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | `"kern"` enabled |
|
||||
| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | `"kern"` enabled |
|
||||
| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |
|
||||
| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (tight) | normal | Feature blocks |
|
||||
| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |
|
||||
| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |
|
||||
| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | Bold body text |
|
||||
| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | Hero descriptions |
|
||||
| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (relaxed) | normal | Standard body text |
|
||||
| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |
|
||||
| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | Secondary content |
|
||||
| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | Metadata, footer links |
|
||||
| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | `text-transform: uppercase` |
|
||||
|
||||
### Principles
|
||||
- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.
|
||||
- **Kern always on**: All HashiCorp Sans text enables OpenType `"kern"` — letterfitting is non-negotiable.
|
||||
- **Tight headings**: Every heading uses 1.17–1.21 line-height, creating dense, stacked text blocks that feel infrastructural — solid, load-bearing.
|
||||
- **Relaxed body**: Body text uses 1.50–1.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.
|
||||
- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker — always HashiCorp Sans weight 600.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark**
|
||||
- Background: `#15181e`
|
||||
- Text: `#d5d7db`
|
||||
- Padding: 9px 9px 9px 15px (asymmetric, more left padding)
|
||||
- Radius: 5px
|
||||
- Border: `1px solid rgba(178, 182, 189, 0.4)`
|
||||
- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
|
||||
- Focus: `3px solid var(--mds-color-focus-action-external)`
|
||||
- Hover: uses `--mds-color-surface-interactive` token
|
||||
|
||||
**Secondary White**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#3b3d45`
|
||||
- Padding: 8px 12px
|
||||
- Radius: 4px
|
||||
- Hover: `--mds-color-surface-interactive` + low-shadow elevation
|
||||
- Focus: `3px solid transparent` outline
|
||||
- Clean, minimal appearance
|
||||
|
||||
**Product-Colored Buttons**
|
||||
- Terraform: background `#7b42bc`
|
||||
- Vault: background `#ffcf25` (dark text)
|
||||
- Waypoint: background `#14c6cb`, hover `#12b6bb`
|
||||
- Each product button follows the same structural pattern but uses its brand color
|
||||
|
||||
### Badges / Pills
|
||||
- Background: `#42225b` (deep purple)
|
||||
- Text: `#efeff1`
|
||||
- Padding: 3px 7px
|
||||
- Radius: 5px
|
||||
- Border: `1px solid rgb(180, 87, 255)`
|
||||
- Font: 16px
|
||||
|
||||
### Inputs
|
||||
|
||||
**Text Input (Dark Mode)**
|
||||
- Background: `#0d0e12`
|
||||
- Text: `#efeff1`
|
||||
- Border: `1px solid rgb(97, 104, 117)`
|
||||
- Padding: 11px
|
||||
- Radius: 5px
|
||||
- Focus: `3px solid var(--mds-color-focus-action-external)` outline
|
||||
|
||||
**Checkbox**
|
||||
- Background: `#0d0e12`
|
||||
- Border: `1px solid rgb(97, 104, 117)`
|
||||
- Radius: 3px
|
||||
|
||||
### Links
|
||||
- **Action Blue on Light**: `#2264d6`, hover → blue-600 variable, underline on hover
|
||||
- **Action Blue on Dark**: `#1060ff` or `#2b89ff`, underline on hover
|
||||
- **White on Dark**: `#ffffff`, transparent underline → visible underline on hover
|
||||
- **Neutral on Light**: `#3b3d45`, transparent underline → visible underline on hover
|
||||
- **Light on Dark**: `#efeff1`, similar hover pattern
|
||||
- All links use `var(--wpl-blue-600)` as hover color
|
||||
|
||||
### Cards & Containers
|
||||
- Light mode: white background, micro-shadow elevation
|
||||
- Dark mode: `#15181e` or darker surfaces
|
||||
- Radius: 8px for cards and containers
|
||||
- Product showcase cards with gradient borders or accent lighting
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav with mega-menu dropdowns
|
||||
- HashiCorp logo left-aligned
|
||||
- system-ui 15px weight 500 for links
|
||||
- Product categories organized by lifecycle management group
|
||||
- "Get started" and "Contact us" CTAs in header
|
||||
- Dark mode variant for hero sections
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1150px (xl breakpoint)
|
||||
- Full-width dark hero sections with contained content
|
||||
- Card grids: 2–3 column layouts
|
||||
- Generous horizontal padding at desktop scale
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <375px | Tight single column |
|
||||
| Mobile | 375–480px | Standard mobile |
|
||||
| Small Tablet | 480–600px | Minor adjustments |
|
||||
| Tablet | 600–768px | 2-column grids begin |
|
||||
| Small Desktop | 768–992px | Full nav visible |
|
||||
| Desktop | 992–1120px | Standard layout |
|
||||
| Large Desktop | 1120–1440px | Max-width content |
|
||||
| Ultra-wide | >1440px | Centered, generous margins |
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Enterprise breathing room**: Generous vertical spacing between sections (48px–80px+) communicates stability and seriousness.
|
||||
- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual "weight at the top" of each section.
|
||||
- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Links, small inline elements
|
||||
- Subtle (3px): Checkboxes, small inputs
|
||||
- Standard (4px): Secondary buttons
|
||||
- Comfortable (5px): Primary buttons, badges, inputs
|
||||
- Card (8px): Cards, containers, images
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Default surfaces, text blocks |
|
||||
| Whisper (Level 1) | `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px` | Cards, buttons, interactive surfaces |
|
||||
| Focus (Level 2) | `3px solid var(--mds-color-focus-action-external)` outline | Focus rings — color-matched to context |
|
||||
|
||||
**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible — they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability — nothing floats, nothing is uncertain.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text
|
||||
- Enable `"kern"` on all HashiCorp Sans text
|
||||
- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)
|
||||
- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers
|
||||
- Keep shadows at the "whisper" level (0.05 opacity dual-layer)
|
||||
- Use the `--mds-color-*` token system for consistent color application
|
||||
- Maintain the tight-heading / relaxed-body rhythm (1.17–1.21 vs 1.50–1.69 line-heights)
|
||||
- Use `3px solid` focus outlines for accessibility
|
||||
|
||||
### Don't
|
||||
- Don't use product brand colors outside their product context (no Terraform purple on Vault content)
|
||||
- Don't increase shadow opacity above 0.1 — the whisper level is intentional
|
||||
- Don't use pill-shaped buttons (>8px radius) — the sharp, minimal radius is structural
|
||||
- Don't skip the `"kern"` feature on headings — the font requires it
|
||||
- Don't use HashiCorp Sans for small body text — it's designed for 17px+ heading use
|
||||
- Don't mix product colors in the same component — each product has one color
|
||||
- Don't use pure black (`#000000`) for dark backgrounds — use `#15181e` or `#0d0e12`
|
||||
- Don't forget the asymmetric button padding — 9px 9px 9px 15px is intentional
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, hamburger nav, stacked CTAs |
|
||||
| Tablet | 768–992px | 2-column grids, nav begins expanding |
|
||||
| Desktop | 992–1150px | Full layout, mega-menu nav |
|
||||
| Large | >1150px | Max-width centered, generous margins |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 82px → 52px → 42px heading sizes
|
||||
- Navigation: mega-menu → hamburger
|
||||
- Product cards: 3-column → 2-column → stacked
|
||||
- Dark sections maintain full-width but compress padding
|
||||
- Buttons: inline → full-width stacked on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Light bg: `#ffffff`, `#f1f2f3`
|
||||
- Dark bg: `#15181e`, `#0d0e12`
|
||||
- Text light: `#000000`, `#3b3d45`
|
||||
- Text dark: `#efeff1`, `#d5d7db`
|
||||
- Links: `#2264d6` (light), `#1060ff` (dark), `#2b89ff` (active)
|
||||
- Helper text: `#656a76`
|
||||
- Borders: `rgba(178, 182, 189, 0.4)`, `rgb(97, 104, 117)`
|
||||
- Focus: `3px solid` product-appropriate color
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding)."
|
||||
- "Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63."
|
||||
- "Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color."
|
||||
- "Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui."
|
||||
- "Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product
|
||||
2. HashiCorp Sans for headings only (17px+), system-ui for everything else
|
||||
3. Shadows are at whisper level (0.05 opacity) — if visible, reduce
|
||||
4. Product colors are sacred — each product owns exactly one color
|
||||
5. Focus rings are always 3px solid, color-matched to product context
|
||||
6. Uppercase labels are the systematic wayfinding pattern — 13px, 600, 1.3px tracking
|
||||
@@ -1,24 +1,3 @@
|
||||
# HashiCorp Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) extracted from the public [HashiCorp](https://hashicorp.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the HashiCorp design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/hashicorp/design-md
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,332 +0,0 @@
|
||||
# Design System Inspiration of IBM
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (`#ffffff`) canvas with near-black (`#161616`) text, punctuated by a single, unwavering accent — IBM Blue 60 (`#0f62fe`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.
|
||||
|
||||
The IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.
|
||||
|
||||
What defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with `--cds-` (Carbon Design System). Buttons don't have hardcoded colors; they reference `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.
|
||||
|
||||
**Key Characteristics:**
|
||||
- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint
|
||||
- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes
|
||||
- Single accent color: IBM Blue 60 (`#0f62fe`) — every interactive element, every CTA, every link
|
||||
- Carbon token system (`--cds-*`) driving all semantic colors, enabling theme-switching at the variable level
|
||||
- 8px spacing grid with strict adherence — no arbitrary values, everything aligns
|
||||
- Flat, borderless cards on `#f4f4f4` Gray 10 surface — depth through background-color layering, not shadows
|
||||
- Bottom-border inputs (not boxed) — the signature Carbon form pattern
|
||||
- 0px border-radius on primary buttons — unapologetically rectangular, no softening
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **IBM Blue 60** (`#0f62fe`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.
|
||||
- **White** (`#ffffff`): Page background, card surfaces, button text on blue, `--cds-background`.
|
||||
- **Gray 100** (`#161616`): Primary text, headings, dark surface backgrounds, nav bar, footer. `--cds-text-primary`.
|
||||
|
||||
### Neutral Scale (Gray Family)
|
||||
- **Gray 100** (`#161616`): Primary text, headings, dark UI chrome, footer background.
|
||||
- **Gray 90** (`#262626`): Secondary dark surfaces, hover states on dark backgrounds.
|
||||
- **Gray 80** (`#393939`): Tertiary dark, active states.
|
||||
- **Gray 70** (`#525252`): Secondary text, helper text, descriptions. `--cds-text-secondary`.
|
||||
- **Gray 60** (`#6f6f6f`): Placeholder text, disabled text.
|
||||
- **Gray 50** (`#8d8d8d`): Disabled icons, muted labels.
|
||||
- **Gray 30** (`#c6c6c6`): Borders, divider lines, input bottom-borders. `--cds-border-subtle`.
|
||||
- **Gray 20** (`#e0e0e0`): Subtle borders, card outlines.
|
||||
- **Gray 10** (`#f4f4f4`): Secondary surface background, card fills, alternating rows. `--cds-layer-01`.
|
||||
- **Gray 10 Hover** (`#e8e8e8`): Hover state for Gray 10 surfaces.
|
||||
|
||||
### Interactive
|
||||
- **Blue 60** (`#0f62fe`): Primary interactive — buttons, links, focus. `--cds-link-primary`, `--cds-button-primary`.
|
||||
- **Blue 70** (`#0043ce`): Link hover state. `--cds-link-primary-hover`.
|
||||
- **Blue 80** (`#002d9c`): Active/pressed state for blue elements.
|
||||
- **Blue 10** (`#edf5ff`): Blue tint surface, selected row background.
|
||||
- **Focus Blue** (`#0f62fe`): `--cds-focus` — 2px inset border on focused elements.
|
||||
- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — white inner ring for focus on dark backgrounds.
|
||||
|
||||
### Support & Status
|
||||
- **Red 60** (`#da1e28`): Error, danger. `--cds-support-error`.
|
||||
- **Green 50** (`#24a148`): Success. `--cds-support-success`.
|
||||
- **Yellow 30** (`#f1c21b`): Warning. `--cds-support-warning`.
|
||||
- **Blue 60** (`#0f62fe`): Informational. `--cds-support-info`.
|
||||
|
||||
### Dark Theme (Gray 100 Theme)
|
||||
- **Background**: Gray 100 (`#161616`). `--cds-background`.
|
||||
- **Layer 01**: Gray 90 (`#262626`). Card and container surfaces.
|
||||
- **Layer 02**: Gray 80 (`#393939`). Elevated surfaces.
|
||||
- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
|
||||
- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
|
||||
- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
|
||||
- **Interactive**: Blue 40 (`#78a9ff`). Links and interactive elements shift lighter for contrast.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `IBM Plex Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
|
||||
- **Monospace**: `IBM Plex Mono`, with fallbacks: `Menlo, Courier, monospace`
|
||||
- **Serif** (limited use): `IBM Plex Serif`, for editorial/expressive contexts
|
||||
- **Icon Font**: `ibm_icons` — proprietary icon glyphs at 20px
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |
|
||||
| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |
|
||||
| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |
|
||||
| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |
|
||||
| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |
|
||||
| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |
|
||||
| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |
|
||||
| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |
|
||||
| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |
|
||||
| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |
|
||||
| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |
|
||||
| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |
|
||||
| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |
|
||||
| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |
|
||||
| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |
|
||||
|
||||
### Principles
|
||||
- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.
|
||||
- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.
|
||||
- **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.
|
||||
- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Button (Blue)**
|
||||
- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
|
||||
- Text: `#ffffff` (White)
|
||||
- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)
|
||||
- Border: 1px solid transparent
|
||||
- Border-radius: 0px (sharp rectangle — the Carbon signature)
|
||||
- Height: 48px (default), 40px (compact), 64px (expressive)
|
||||
- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
|
||||
- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
|
||||
- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
|
||||
|
||||
**Secondary Button (Gray)**
|
||||
- Background: `#393939` (Gray 80)
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#4c4c4c` (Gray 70)
|
||||
- Active: `#6f6f6f` (Gray 60)
|
||||
- Same padding/radius as primary
|
||||
|
||||
**Tertiary Button (Ghost Blue)**
|
||||
- Background: transparent
|
||||
- Text: `#0f62fe` (Blue 60)
|
||||
- Border: 1px solid `#0f62fe`
|
||||
- Hover: `#0353e9` text + Blue 10 background tint
|
||||
- Border-radius: 0px
|
||||
|
||||
**Ghost Button**
|
||||
- Background: transparent
|
||||
- Text: `#0f62fe` (Blue 60)
|
||||
- Padding: 14px 16px
|
||||
- Border: none
|
||||
- Hover: `#e8e8e8` background tint
|
||||
|
||||
**Danger Button**
|
||||
- Background: `#da1e28` (Red 60)
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#b81921` (Red 70)
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff` on white theme, `#f4f4f4` (Gray 10) for elevated cards
|
||||
- Border: none (flat design — no border or shadow on most cards)
|
||||
- Border-radius: 0px (matching the rectangular button aesthetic)
|
||||
- Hover: background shifts to `#e8e8e8` (Gray 10 Hover) for clickable cards
|
||||
- Content padding: 16px
|
||||
- Separation: background-color layering (white → gray 10 → white) rather than shadows
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: `#f4f4f4` (Gray 10) — `--cds-field`
|
||||
- Text: `#161616` (Gray 100)
|
||||
- Padding: 0px 16px (horizontal only)
|
||||
- Height: 40px (default), 48px (large)
|
||||
- Border: none on sides/top — `2px solid transparent` bottom
|
||||
- Bottom-border active: `2px solid #161616` (Gray 100)
|
||||
- Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`
|
||||
- Error: `2px solid #da1e28` (Red 60) bottom-border
|
||||
- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70
|
||||
- Helper text: 12px, Gray 60
|
||||
- Placeholder: Gray 60 (`#6f6f6f`)
|
||||
- Border-radius: 0px (top) — inputs are sharp-cornered
|
||||
|
||||
### Navigation
|
||||
- Background: `#161616` (Gray 100) — full-width dark masthead
|
||||
- Height: 48px
|
||||
- Logo: IBM 8-bar logo, white on dark, left-aligned
|
||||
- Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default
|
||||
- Link hover: `#ffffff` text
|
||||
- Active link: `#ffffff` with bottom-border indicator
|
||||
- Platform switcher: left-aligned horizontal tabs
|
||||
- Search: icon-triggered slide-out search field
|
||||
- Mobile: hamburger with left-sliding panel
|
||||
|
||||
### Links
|
||||
- Default: `#0f62fe` (Blue 60) with no underline
|
||||
- Hover: `#0043ce` (Blue 70) with underline
|
||||
- Visited: remains Blue 60 (no visited state change)
|
||||
- Inline links: underlined by default in body copy
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Content Block (Hero/Feature)**
|
||||
- Full-width alternating white/gray-10 background bands
|
||||
- Headline left-aligned with 60px or 48px display type
|
||||
- CTA as blue primary button with arrow icon
|
||||
- Image/illustration right-aligned or below on mobile
|
||||
|
||||
**Tile (Clickable Card)**
|
||||
- Background: `#f4f4f4` or `#ffffff`
|
||||
- Full-width bottom-border or background-shift hover
|
||||
- Arrow icon bottom-right on hover
|
||||
- No shadow — flatness is the identity
|
||||
|
||||
**Tag / Label**
|
||||
- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)
|
||||
- Text: corresponding 60-grade color
|
||||
- Padding: 4px 8px
|
||||
- Border-radius: 24px (pill — exception to the 0px rule)
|
||||
- Font: 12px weight 400
|
||||
|
||||
**Notification Banner**
|
||||
- Full-width bar, typically Blue 60 or Gray 100 background
|
||||
- White text, 14px
|
||||
- Close/dismiss icon right-aligned
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px (Carbon 2x grid)
|
||||
- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
|
||||
- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
|
||||
- Mini unit: 8px (smallest usable spacing)
|
||||
- Padding within components: typically 16px
|
||||
- Gap between cards/tiles: 1px (hairline) or 16px (standard)
|
||||
|
||||
### Grid & Container
|
||||
- 16-column grid (Carbon's 2x grid system)
|
||||
- Max content width: 1584px (max breakpoint)
|
||||
- Column gutters: 32px (16px on mobile)
|
||||
- Margin: 16px (mobile), 32px (tablet+)
|
||||
- Content typically spans 8-12 columns for readable line lengths
|
||||
- Full-bleed sections alternate with contained content
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.
|
||||
- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.
|
||||
- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.
|
||||
|
||||
### Border Radius Scale
|
||||
- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.
|
||||
- **2px**: Occasionally on small interactive elements (tags)
|
||||
- **24px**: Tags/labels (pill shape — the sole rounded exception)
|
||||
- **50%**: Avatar circles, icon containers
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, `#ffffff` background | Default page surface |
|
||||
| Layer 01 | No shadow, `#f4f4f4` background | Cards, tiles, alternating sections |
|
||||
| Layer 02 | No shadow, `#e0e0e0` background | Elevated panels within Layer 01 |
|
||||
| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Dropdowns, tooltips, overflow menus |
|
||||
| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + dark scrim | Modal dialogs, side panels |
|
||||
| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Keyboard focus ring |
|
||||
| Bottom-border | `2px solid #161616` on bottom edge | Active input, active tab indicator |
|
||||
|
||||
**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional
|
||||
- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions
|
||||
- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system
|
||||
- Reference `--cds-*` token names when implementing (e.g., `--cds-button-primary`, `--cds-text-primary`)
|
||||
- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows
|
||||
- Use bottom-border (not box) for input field indicators
|
||||
- Maintain the 48px default button height and asymmetric padding for icon accommodation
|
||||
- Apply Blue 60 (`#0f62fe`) as the sole accent — one blue to rule them all
|
||||
|
||||
### Don't
|
||||
- Don't round button corners — 0px radius is the Carbon identity
|
||||
- Don't use shadows on cards or tiles — flatness is the point
|
||||
- Don't introduce additional accent colors — IBM's system is monochromatic + blue
|
||||
- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)
|
||||
- Don't add letter-spacing to display-size text — tracking is only for 14px and below
|
||||
- Don't box inputs with full borders — Carbon inputs use bottom-border only
|
||||
- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors
|
||||
- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Small (sm) | 320px | Single column, hamburger nav, 16px margins |
|
||||
| Medium (md) | 672px | 2-column grids begin, expanded content |
|
||||
| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |
|
||||
| X-Large (xlg) | 1312px | Maximum content density, wide layouts |
|
||||
| Max | 1584px | Maximum content width, centered with margins |
|
||||
|
||||
### Touch Targets
|
||||
- Button height: 48px default, minimum 40px (compact)
|
||||
- Navigation links: 48px row height for touch
|
||||
- Input height: 40px default, 48px large
|
||||
- Icon buttons: 48px square touch target
|
||||
- Mobile menu items: full-width 48px rows
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 60px display → 42px → 32px heading as viewport narrows
|
||||
- Navigation: full horizontal masthead → hamburger with slide-out panel
|
||||
- Grid: 4-column → 2-column → single column
|
||||
- Tiles/cards: horizontal grid → vertical stack
|
||||
- Images: maintain aspect ratio, max-width 100%
|
||||
- Footer: multi-column link groups → stacked single column
|
||||
- Section padding: 48px → 32px → 16px
|
||||
|
||||
### Image Behavior
|
||||
- Responsive images with `max-width: 100%`
|
||||
- Product illustrations scale proportionally
|
||||
- Hero images may shift from side-by-side to stacked below
|
||||
- Data visualizations maintain aspect ratio with horizontal scroll on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: IBM Blue 60 (`#0f62fe`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Heading text: Gray 100 (`#161616`)
|
||||
- Body text: Gray 100 (`#161616`)
|
||||
- Secondary text: Gray 70 (`#525252`)
|
||||
- Surface/Card: Gray 10 (`#f4f4f4`)
|
||||
- Border: Gray 30 (`#c6c6c6`)
|
||||
- Link: Blue 60 (`#0f62fe`)
|
||||
- Link hover: Blue 70 (`#0043ce`)
|
||||
- Focus ring: Blue 60 (`#0f62fe`)
|
||||
- Error: Red 60 (`#da1e28`)
|
||||
- Success: Green 50 (`#24a148`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding)."
|
||||
- "Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8."
|
||||
- "Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f."
|
||||
- "Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border."
|
||||
- "Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon
|
||||
2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text
|
||||
3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold
|
||||
4. Blue 60 is the only accent color — do not introduce secondary accent hues
|
||||
5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows
|
||||
6. Inputs have bottom-border only, never fully boxed
|
||||
7. Use `--cds-` prefix for token naming to stay Carbon-compatible
|
||||
8. 48px is the universal interactive element height
|
||||
+1
-22
@@ -1,24 +1,3 @@
|
||||
# IBM Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) extracted from the public [IBM](https://ibm.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the IBM design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/ibm/design-md
|
||||
|
||||
@@ -1,443 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by IBM</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #161616;
|
||||
--gray-10: #262626;
|
||||
--gray-10-hover: #333333;
|
||||
--gray-20: #393939;
|
||||
--gray-30: #525252;
|
||||
--gray-50: #8d8d8d;
|
||||
--gray-60: #a8a8a8;
|
||||
--gray-70: #c6c6c6;
|
||||
--gray-80: #e0e0e0;
|
||||
--gray-90: #f4f4f4;
|
||||
--gray-100: #f4f4f4;
|
||||
--text-primary: #f4f4f4;
|
||||
--text-secondary: #c6c6c6;
|
||||
--blue-10: #001d6c;
|
||||
--blue-40: #78a9ff;
|
||||
--blue-60: #0f62fe;
|
||||
--blue-hover: #4589ff;
|
||||
--blue-70: #0043ce;
|
||||
--blue-80: #002d9c;
|
||||
--red-40: #ff8389;
|
||||
--red-60: #da1e28;
|
||||
--green-40: #42be65;
|
||||
--green-50: #24a148;
|
||||
--yellow-30: #f1c21b;
|
||||
--font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--text-primary); color: var(--white);
|
||||
font-size: 11px; font-weight: 600; padding: 4px 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 32px;
|
||||
height: 48px;
|
||||
background: #262626;
|
||||
border-bottom: 1px solid var(--gray-20);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--gray-60); text-decoration: none; letter-spacing: 0.16px; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
display: inline-flex; align-items: center; background: var(--blue-60); color: #ffffff;
|
||||
padding: 0 16px; height: 32px; border-radius: 0; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; letter-spacing: 0.16px; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--blue-hover); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 80px 32px 64px; background: var(--white); }
|
||||
.hero-inner { max-width: 1200px; margin: 0 auto; }
|
||||
.hero h1 {
|
||||
font-size: 60px; font-weight: 300; line-height: 1.17;
|
||||
color: var(--text-primary); margin-bottom: 16px; max-width: 800px;
|
||||
}
|
||||
.hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 640px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 1px; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-flex; align-items: center; justify-content: space-between;
|
||||
background: var(--blue-60); color: #ffffff;
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:hover { background: var(--blue-hover); }
|
||||
.btn-secondary {
|
||||
display: inline-flex; align-items: center; justify-content: space-between;
|
||||
background: #6f6f6f; color: #ffffff;
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-secondary:hover { background: #8d8d8d; }
|
||||
.btn-tertiary {
|
||||
display: inline-flex; align-items: center;
|
||||
background: transparent; color: var(--blue-40);
|
||||
padding: 14px 16px; height: 48px;
|
||||
border-radius: 0; border: 1px solid var(--blue-40);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-tertiary:hover { background: var(--blue-hover); color: #ffffff; border-color: var(--blue-hover); }
|
||||
.btn-ghost {
|
||||
display: inline-flex; align-items: center;
|
||||
background: transparent; color: var(--blue-40);
|
||||
padding: 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { background: var(--gray-10-hover); }
|
||||
.btn-danger {
|
||||
display: inline-flex; align-items: center;
|
||||
background: var(--red-60); color: #ffffff;
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-danger:hover { background: #b81921; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 48px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-alt { background: var(--gray-10); }
|
||||
.section-alt .section { max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-60); letter-spacing: 0.32px; margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin-bottom: 32px; color: var(--text-primary); }
|
||||
.section-divider { border: none; border-top: 1px solid var(--gray-20); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--gray-20); }
|
||||
.color-swatch { background: var(--white); overflow: hidden; }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-60); font-family: var(--font-mono); letter-spacing: 0.32px; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-50); margin-top: 3px; letter-spacing: 0.16px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 24px 0 10px; letter-spacing: 0.16px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--gray-20); }
|
||||
.card { background: var(--gray-10); padding: 16px; transition: background 0.15s; cursor: pointer; }
|
||||
.card:hover { background: var(--gray-10-hover); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; line-height: 1.40; margin-bottom: 8px; color: var(--text-primary); }
|
||||
.card p { font-size: 14px; color: var(--text-secondary); line-height: 1.29; letter-spacing: 0.16px; }
|
||||
.card-tag { display: inline-block; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: 24px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 24px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: 0.32px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--gray-10); color: var(--text-primary);
|
||||
border: none; border-bottom: 2px solid transparent;
|
||||
padding: 0 16px; height: 40px;
|
||||
font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;
|
||||
outline: none; border-radius: 0;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-bottom-color: var(--blue-40); }
|
||||
.form-input--active { border-bottom-color: var(--text-primary); }
|
||||
.form-input--focus { border-bottom-color: var(--blue-40); }
|
||||
.form-input--error { border-bottom-color: var(--red-40); }
|
||||
.form-helper { font-size: 12px; color: var(--gray-60); margin-top: 4px; letter-spacing: 0.32px; }
|
||||
.form-helper--error { color: var(--red-40); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--gray-10); color: var(--text-primary);
|
||||
border: none; border-bottom: 2px solid transparent;
|
||||
padding: 11px 16px; border-radius: 0;
|
||||
font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;
|
||||
resize: vertical; outline: none;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--blue-40); margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--blue-60); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
.radius-context { font-size: 10px; color: var(--gray-50); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; background: #000000; color: var(--gray-60); font-size: 12px; letter-spacing: 0.32px; }
|
||||
.footer a { color: var(--blue-40); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 42px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 32px 16px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<h1>Design System Inspired by IBM</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value from the Carbon Design System — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-primary" href="#">Explore tokens</a>
|
||||
<a class="btn-secondary" href="#">View documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary (Dark Theme)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#78a9ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 40</div><div class="color-swatch-hex">#78a9ff</div><div class="color-swatch-role">Interactive (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f62fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 60</div><div class="color-swatch-hex">#0f62fe</div><div class="color-swatch-role">Primary button</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#161616"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 100</div><div class="color-swatch-hex">#161616</div><div class="color-swatch-role">Background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Blue Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#001d6c"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 90</div><div class="color-swatch-hex">#001d6c</div><div class="color-swatch-role">Tint surface (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f62fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 60</div><div class="color-swatch-hex">#0f62fe</div><div class="color-swatch-role">Primary action</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#78a9ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 40</div><div class="color-swatch-hex">#78a9ff</div><div class="color-swatch-role">Links (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4589ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 50</div><div class="color-swatch-hex">#4589ff</div><div class="color-swatch-role">Hover (dark)</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale (Dark Theme)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#161616; border:1px solid #393939"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 100</div><div class="color-swatch-hex">#161616</div><div class="color-swatch-role">Background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 90</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Layer 01</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#393939"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 80</div><div class="color-swatch-hex">#393939</div><div class="color-swatch-role">Layer 02 / Border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#525252"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 70</div><div class="color-swatch-hex">#525252</div><div class="color-swatch-role">Subtle border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6f6f6f"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#6f6f6f</div><div class="color-swatch-role">Placeholder</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d8d8d"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#8d8d8d</div><div class="color-swatch-role">Disabled</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c6c6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 30</div><div class="color-swatch-hex">#c6c6c6</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 10</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Support & Status (Dark)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff8389"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 40</div><div class="color-swatch-hex">#ff8389</div><div class="color-swatch-role">Error (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#42be65"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 40</div><div class="color-swatch-hex">#42be65</div><div class="color-swatch-role">Success (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f1c21b"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 30</div><div class="color-swatch-hex">#f1c21b</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4589ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 50</div><div class="color-swatch-hex">#4589ff</div><div class="color-swatch-role">Info (dark)</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:60px; font-weight:300; line-height:1.17;">Display 01</div><div class="type-meta">Display 01 — 60px / 300 / 1.17 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.17;">Display 02</div><div class="type-meta">Display 02 — 48px / 300 / 1.17 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:42px; font-weight:300; line-height:1.19;">Heading 01</div><div class="type-meta">Heading 01 — 42px / 300 / 1.19 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.25;">Heading 02</div><div class="type-meta">Heading 02 — 32px / 400 / 1.25 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33;">Heading 03</div><div class="type-meta">Heading 03 — 24px / 400 / 1.33 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40;">Heading 04 — Semibold</div><div class="type-meta">Heading 04 — 20px / 600 / 1.40 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Long 01 — Build smarter business workflows with AI and hybrid cloud solutions that scale.</div><div class="type-meta">Body Long 01 — 16px / 400 / 1.50 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.29; letter-spacing:0.16px;">Body Short 01 — Compact text for UI elements and captions with micro-tracking.</div><div class="type-meta">Body Short 01 — 14px / 400 / 1.29 / 0.16px / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.33; letter-spacing:0.32px;">Caption 01 — Metadata, timestamps, helper text</div><div class="type-meta">Caption 01 — 12px / 400 / 1.33 / 0.32px / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.16px;">const config = { theme: 'g100', prefix: 'cds' };</div><div class="type-meta">Code 01 — 14px / 400 / 1.43 / 0.16px / IBM Plex Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:42px; font-weight:400; line-height:1.19;">Mono Display</div><div class="type-meta">Mono Display — 42px / 400 / 1.19 / IBM Plex Mono</div></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row" style="margin-bottom: 24px;">
|
||||
<div class="button-item"><a class="btn-primary" href="#">Primary button</a><div class="button-label">Primary (Blue 60)</div></div>
|
||||
<div class="button-item"><a class="btn-secondary" href="#">Secondary button</a><div class="button-label">Secondary</div></div>
|
||||
<div class="button-item"><a class="btn-tertiary" href="#">Tertiary button</a><div class="button-label">Tertiary (Blue 40)</div></div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Ghost button</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><a class="btn-danger" href="#">Delete resource</a><div class="button-label">Danger (Red 60)</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:#001d6c; color:#78a9ff; font-size:12px; font-weight:400; padding:4px 8px; border-radius:24px;">AI Ready</span><div class="button-label">Tag / Label</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card & Tile Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:#001d6c; color:#78a9ff;">Hybrid Cloud</div>
|
||||
<h3>IBM Cloud Pak</h3>
|
||||
<p>Modernize and build cloud-native applications anywhere with an open, faster, and more secure foundation.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:#3a1111; color:#ff8389;">AI Platform</div>
|
||||
<h3>watsonx</h3>
|
||||
<p>Scale and accelerate the impact of AI across your business with a next-generation enterprise studio.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:#0e2218; color:#42be65;">Automation</div>
|
||||
<h3>Business Automation</h3>
|
||||
<p>Automate business and IT operations with AI-powered decision-making and intelligent workflows.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Project name</label>
|
||||
<input class="form-input" type="text" placeholder="e.g. my-cloud-project">
|
||||
<div class="form-helper">Default state (bottom-border)</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">API endpoint</label>
|
||||
<input class="form-input form-input--focus" type="text" value="https://api.ibm.com/v1">
|
||||
<div class="form-helper">Focus state (Blue 40 bottom-border)</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Region</label>
|
||||
<input class="form-input form-input--error" type="text" value="invalid-region">
|
||||
<div class="form-helper form-helper--error">Error: Region not found</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-textarea" placeholder="Describe your workload..."></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
</div>
|
||||
<p style="font-size:14px; color:var(--gray-60); letter-spacing:0.16px; line-height:1.29;">Layout spacing: 16, 24, 32, 48, 64, 80, 96, 160px. Base unit: 8px (Carbon 2x grid).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div><div class="radius-context">Buttons, inputs, cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Small elements</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Tags / Labels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Avatars, icons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="background:#161616; border:1px solid var(--gray-20);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Gray 100 background</div></div>
|
||||
<div class="elevation-card" style="background:#262626;"><div class="elevation-label">Layer 01</div><div class="elevation-desc">Gray 90 (#262626)</div></div>
|
||||
<div class="elevation-card" style="background:#393939;"><div class="elevation-label">Layer 02</div><div class="elevation-desc">Gray 80 (#393939)</div></div>
|
||||
<div class="elevation-card" style="background:#262626; box-shadow: 0 2px 6px rgba(0,0,0,0.6);"><div class="elevation-label">Raised</div><div class="elevation-desc">Dropdowns, tooltips</div></div>
|
||||
<div class="elevation-card" style="background:#262626; box-shadow: 0 0 0 2px #78a9ff;"><div class="elevation-label">Focus</div><div class="elevation-desc">2px Blue 40 ring</div></div>
|
||||
<div class="elevation-card" style="background:#262626; border-bottom: 2px solid var(--text-primary);"><div class="elevation-label">Bottom-border</div><div class="elevation-desc">Active input / tab</div></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,428 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by IBM</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff;
|
||||
--gray-10: #f4f4f4;
|
||||
--gray-10-hover: #e8e8e8;
|
||||
--gray-20: #e0e0e0;
|
||||
--gray-30: #c6c6c6;
|
||||
--gray-50: #8d8d8d;
|
||||
--gray-60: #6f6f6f;
|
||||
--gray-70: #525252;
|
||||
--gray-80: #393939;
|
||||
--gray-90: #262626;
|
||||
--gray-100: #161616;
|
||||
--blue-10: #edf5ff;
|
||||
--blue-60: #0f62fe;
|
||||
--blue-70: #0043ce;
|
||||
--blue-80: #002d9c;
|
||||
--red-60: #da1e28;
|
||||
--green-50: #24a148;
|
||||
--yellow-30: #f1c21b;
|
||||
--font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--gray-100);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 32px;
|
||||
height: 48px;
|
||||
background: var(--gray-100);
|
||||
color: var(--white);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--gray-30); text-decoration: none; letter-spacing: 0.16px; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--white); }
|
||||
.nav-cta {
|
||||
display: inline-flex; align-items: center; background: var(--blue-60); color: var(--white);
|
||||
padding: 0 16px; height: 32px; border-radius: 0; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; letter-spacing: 0.16px; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: #0353e9; }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 80px 32px 64px; background: var(--white); }
|
||||
.hero-inner { max-width: 1200px; margin: 0 auto; }
|
||||
.hero h1 {
|
||||
font-size: 60px; font-weight: 300; line-height: 1.17;
|
||||
color: var(--gray-100); margin-bottom: 16px; max-width: 800px;
|
||||
}
|
||||
.hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--gray-70); max-width: 640px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 1px; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-flex; align-items: center; justify-content: space-between;
|
||||
background: var(--blue-60); color: var(--white);
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:hover { background: #0353e9; }
|
||||
.btn-secondary {
|
||||
display: inline-flex; align-items: center; justify-content: space-between;
|
||||
background: var(--gray-80); color: var(--white);
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-secondary:hover { background: #4c4c4c; }
|
||||
.btn-tertiary {
|
||||
display: inline-flex; align-items: center;
|
||||
background: transparent; color: var(--blue-60);
|
||||
padding: 14px 16px; height: 48px;
|
||||
border-radius: 0; border: 1px solid var(--blue-60);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-tertiary:hover { background: #0353e9; color: var(--white); border-color: #0353e9; }
|
||||
.btn-ghost {
|
||||
display: inline-flex; align-items: center;
|
||||
background: transparent; color: var(--blue-60);
|
||||
padding: 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { background: var(--gray-10-hover); }
|
||||
.btn-danger {
|
||||
display: inline-flex; align-items: center;
|
||||
background: var(--red-60); color: var(--white);
|
||||
padding: 14px 63px 14px 16px; height: 48px;
|
||||
border-radius: 0; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
|
||||
letter-spacing: 0.16px;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-danger:hover { background: #b81921; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 48px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-alt { background: var(--gray-10); }
|
||||
.section-alt .section { max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-60); letter-spacing: 0.32px; margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--gray-20); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--gray-20); }
|
||||
.color-swatch { background: var(--white); overflow: hidden; }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-60); font-family: var(--font-mono); letter-spacing: 0.32px; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-50); margin-top: 3px; letter-spacing: 0.16px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-70); margin: 24px 0 10px; letter-spacing: 0.16px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--gray-20); }
|
||||
.card { background: var(--gray-10); padding: 16px; transition: background 0.15s; cursor: pointer; }
|
||||
.card:hover { background: var(--gray-10-hover); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; line-height: 1.40; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--gray-70); line-height: 1.29; letter-spacing: 0.16px; }
|
||||
.card-tag { display: inline-block; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: 24px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 24px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 12px; font-weight: 400; color: var(--gray-70); margin-bottom: 8px; letter-spacing: 0.32px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--gray-10); color: var(--gray-100);
|
||||
border: none; border-bottom: 2px solid transparent;
|
||||
padding: 0 16px; height: 40px;
|
||||
font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;
|
||||
outline: none; border-radius: 0;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-bottom-color: var(--blue-60); }
|
||||
.form-input--active { border-bottom-color: var(--gray-100); }
|
||||
.form-input--focus { border-bottom-color: var(--blue-60); }
|
||||
.form-input--error { border-bottom-color: var(--red-60); }
|
||||
.form-helper { font-size: 12px; color: var(--gray-60); margin-top: 4px; letter-spacing: 0.32px; }
|
||||
.form-helper--error { color: var(--red-60); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--gray-10); color: var(--gray-100);
|
||||
border: none; border-bottom: 2px solid transparent;
|
||||
padding: 11px 16px; border-radius: 0;
|
||||
font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;
|
||||
resize: vertical; outline: none;
|
||||
}
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--blue-60); margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--blue-60); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
.radius-context { font-size: 10px; color: var(--gray-50); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: var(--white); padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-50); letter-spacing: 0.32px; }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; background: var(--gray-100); color: var(--gray-30); font-size: 12px; letter-spacing: 0.32px; }
|
||||
.footer a { color: var(--blue-60); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 42px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 32px 16px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<h1>Design System Inspired by IBM</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value from the Carbon Design System — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-primary" href="#">Explore tokens</a>
|
||||
<a class="btn-secondary" href="#">View documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f62fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 60</div><div class="color-swatch-hex">#0f62fe</div><div class="color-swatch-role">Primary interactive</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e0e0"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#161616"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 100</div><div class="color-swatch-hex">#161616</div><div class="color-swatch-role">Primary text, nav</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Blue Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#edf5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 10</div><div class="color-swatch-hex">#edf5ff</div><div class="color-swatch-role">Tint surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f62fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 60</div><div class="color-swatch-hex">#0f62fe</div><div class="color-swatch-role">Primary action</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0043ce"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 70</div><div class="color-swatch-hex">#0043ce</div><div class="color-swatch-role">Link hover</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#002d9c"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 80</div><div class="color-swatch-hex">#002d9c</div><div class="color-swatch-role">Active/pressed</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 10</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Layer 01 surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e0e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 20</div><div class="color-swatch-hex">#e0e0e0</div><div class="color-swatch-role">Subtle borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c6c6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 30</div><div class="color-swatch-hex">#c6c6c6</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d8d8d"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#8d8d8d</div><div class="color-swatch-role">Disabled icons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6f6f6f"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#6f6f6f</div><div class="color-swatch-role">Placeholder text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#525252"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 70</div><div class="color-swatch-hex">#525252</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#393939"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 80</div><div class="color-swatch-hex">#393939</div><div class="color-swatch-role">Secondary button</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 90</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Dark surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#161616"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 100</div><div class="color-swatch-hex">#161616</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Support & Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#da1e28"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 60</div><div class="color-swatch-hex">#da1e28</div><div class="color-swatch-role">Error / Danger</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#24a148"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 50</div><div class="color-swatch-hex">#24a148</div><div class="color-swatch-role">Success</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f1c21b"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 30</div><div class="color-swatch-hex">#f1c21b</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f62fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 60</div><div class="color-swatch-hex">#0f62fe</div><div class="color-swatch-role">Informational</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:60px; font-weight:300; line-height:1.17;">Display 01</div><div class="type-meta">Display 01 — 60px / 300 / 1.17 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.17;">Display 02</div><div class="type-meta">Display 02 — 48px / 300 / 1.17 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:42px; font-weight:300; line-height:1.19;">Heading 01</div><div class="type-meta">Heading 01 — 42px / 300 / 1.19 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.25;">Heading 02</div><div class="type-meta">Heading 02 — 32px / 400 / 1.25 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33;">Heading 03</div><div class="type-meta">Heading 03 — 24px / 400 / 1.33 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40;">Heading 04 — Semibold</div><div class="type-meta">Heading 04 — 20px / 600 / 1.40 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Long 01 — Build smarter business workflows with AI and hybrid cloud solutions that scale.</div><div class="type-meta">Body Long 01 — 16px / 400 / 1.50 / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.29; letter-spacing:0.16px;">Body Short 01 — Compact text for UI elements and captions with micro-tracking.</div><div class="type-meta">Body Short 01 — 14px / 400 / 1.29 / 0.16px / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.33; letter-spacing:0.32px;">Caption 01 — Metadata, timestamps, helper text</div><div class="type-meta">Caption 01 — 12px / 400 / 1.33 / 0.32px / IBM Plex Sans</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.16px;">const config = { theme: 'g100', prefix: 'cds' };</div><div class="type-meta">Code 01 — 14px / 400 / 1.43 / 0.16px / IBM Plex Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:42px; font-weight:400; line-height:1.19;">Mono Display</div><div class="type-meta">Mono Display — 42px / 400 / 1.19 / IBM Plex Mono</div></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row" style="margin-bottom: 24px;">
|
||||
<div class="button-item"><a class="btn-primary" href="#">Primary button</a><div class="button-label">Primary (Blue 60)</div></div>
|
||||
<div class="button-item"><a class="btn-secondary" href="#">Secondary button</a><div class="button-label">Secondary (Gray 80)</div></div>
|
||||
<div class="button-item"><a class="btn-tertiary" href="#">Tertiary button</a><div class="button-label">Tertiary (Ghost Blue)</div></div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Ghost button</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><a class="btn-danger" href="#">Delete resource</a><div class="button-label">Danger (Red 60)</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--blue-10); color:var(--blue-60); font-size:12px; font-weight:400; padding:4px 8px; border-radius:24px;">AI Ready</span><div class="button-label">Tag / Label</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card & Tile Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:var(--blue-10); color:var(--blue-60);">Hybrid Cloud</div>
|
||||
<h3>IBM Cloud Pak</h3>
|
||||
<p>Modernize and build cloud-native applications anywhere with an open, faster, and more secure foundation.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:#fff1f1; color:var(--red-60);">AI Platform</div>
|
||||
<h3>watsonx</h3>
|
||||
<p>Scale and accelerate the impact of AI across your business with a next-generation enterprise studio.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-tag" style="background:#defbe6; color:var(--green-50);">Automation</div>
|
||||
<h3>Business Automation</h3>
|
||||
<p>Automate business and IT operations with AI-powered decision-making and intelligent workflows.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Project name</label>
|
||||
<input class="form-input" type="text" placeholder="e.g. my-cloud-project">
|
||||
<div class="form-helper">Default state (bottom-border)</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">API endpoint</label>
|
||||
<input class="form-input form-input--focus" type="text" value="https://api.ibm.com/v1">
|
||||
<div class="form-helper">Focus state (Blue 60 bottom-border)</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Region</label>
|
||||
<input class="form-input form-input--error" type="text" value="invalid-region">
|
||||
<div class="form-helper form-helper--error">Error: Region not found</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-textarea" placeholder="Describe your workload..."></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
</div>
|
||||
<p style="font-size:14px; color:var(--gray-60); letter-spacing:0.16px; line-height:1.29;">Layout spacing: 16, 24, 32, 48, 64, 80, 96, 160px. Base unit: 8px (Carbon 2x grid).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div><div class="radius-context">Buttons, inputs, cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Small elements</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Tags / Labels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Avatars, icons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<div class="section-alt">
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="background:var(--white); border:1px solid var(--gray-20);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">White surface, no shadow</div></div>
|
||||
<div class="elevation-card" style="background:var(--gray-10);"><div class="elevation-label">Layer 01</div><div class="elevation-desc">Gray 10 (#f4f4f4)</div></div>
|
||||
<div class="elevation-card" style="background:var(--gray-20);"><div class="elevation-label">Layer 02</div><div class="elevation-desc">Gray 20 (#e0e0e0)</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 2px 6px rgba(0,0,0,0.3);"><div class="elevation-label">Raised</div><div class="elevation-desc">Dropdowns, tooltips</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 2px 6px rgba(0,0,0,0.3); border:2px solid var(--blue-60);"><div class="elevation-label">Focus</div><div class="elevation-desc">2px inset Blue 60</div></div>
|
||||
<div class="elevation-card" style="border-bottom: 2px solid var(--gray-100);"><div class="elevation-label">Bottom-border</div><div class="elevation-desc">Active input / tab</div></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,146 +0,0 @@
|
||||
# Design System Inspiration of Intercom
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Intercom's website is a warm, confident customer service platform that communicates "AI-first helpdesk" through a clean, editorial design language. The page operates on a warm off-white canvas (`#faf9f6`) with off-black (`#111111`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (`#ff5600`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.
|
||||
|
||||
The typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.
|
||||
|
||||
What distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use `scale(1.1)` expansion, creating a physical "growing" interaction. The border system uses warm oat tones (`#dedbd6`) and oklab-based opacity values for sophisticated color management.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm off-white canvas (`#faf9f6`) with oat-toned borders (`#dedbd6`)
|
||||
- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height
|
||||
- Fin Orange (`#ff5600`) as singular brand accent
|
||||
- Sharp 4px border-radius — near-rectangular buttons and elements
|
||||
- Scale(1.1) hover with scale(0.85) active — physical button interaction
|
||||
- SaansMono uppercase labels with wide tracking (0.6px–1.2px)
|
||||
- Rich multi-color report palette (blue, green, red, pink, lime, orange)
|
||||
- oklab color values for sophisticated opacity management
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Off Black** (`#111111`): `--color-off-black`, primary text, button backgrounds
|
||||
- **Pure White** (`#ffffff`): `--wsc-color-content-primary`, primary surface
|
||||
- **Warm Cream** (`#faf9f6`): Button backgrounds, card surfaces
|
||||
- **Fin Orange** (`#ff5600`): `--color-fin`, primary brand accent
|
||||
- **Report Orange** (`#fe4c02`): `--color-report-orange`, data visualization
|
||||
|
||||
### Report Palette
|
||||
- **Report Blue** (`#65b5ff`): `--color-report-blue`
|
||||
- **Report Green** (`#0bdf50`): `--color-report-green`
|
||||
- **Report Red** (`#c41c1c`): `--color-report-red`
|
||||
- **Report Pink** (`#ff2067`): `--color-report-pink`
|
||||
- **Report Lime** (`#b3e01c`): `--color-report-lime-300`
|
||||
- **Green** (`#00da00`): `--color-green`
|
||||
- **Deep Blue** (`#0007cb`): Deep blue accent
|
||||
|
||||
### Neutral Scale (Warm)
|
||||
- **Black 80** (`#313130`): `--wsc-color-black-80`, dark neutral
|
||||
- **Black 60** (`#626260`): `--wsc-color-black-60`, mid neutral
|
||||
- **Black 50** (`#7b7b78`): `--wsc-color-black-50`, muted text
|
||||
- **Content Tertiary** (`#9c9fa5`): `--wsc-color-content-tertiary`
|
||||
- **Oat Border** (`#dedbd6`): Warm border color
|
||||
- **Warm Sand** (`#d3cec6`): Light warm neutral
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary**: `Saans`, fallbacks: `Saans Fallback, ui-sans-serif, system-ui`
|
||||
- **Serif**: `Serrif`, fallbacks: `Serrif Fallback, ui-serif, Georgia`
|
||||
- **Monospace**: `SaansMono`, fallbacks: `SaansMono Fallback, ui-monospace`
|
||||
- **UI**: `MediumLL` / `LLMedium`, fallbacks: `system-ui, -apple-system`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|
||||
|------|------|------|--------|-------------|----------------|
|
||||
| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |
|
||||
| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |
|
||||
| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |
|
||||
| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |
|
||||
| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |
|
||||
| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |
|
||||
| Nav / UI | Saans | 18px | 400 | 1.00 | normal |
|
||||
| Body | Saans | 16px | 400 | 1.50 | normal |
|
||||
| Body Light | Saans | 14px | 300 | 1.40 | normal |
|
||||
| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |
|
||||
| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |
|
||||
| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |
|
||||
| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark**
|
||||
- Background: `#111111`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 14px
|
||||
- Radius: 4px
|
||||
- Hover: white background, dark text, scale(1.1)
|
||||
- Active: green background (`#2c6415`), scale(0.85)
|
||||
|
||||
**Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#111111`
|
||||
- Border: `1px solid #111111`
|
||||
- Radius: 4px
|
||||
- Same scale hover/active behavior
|
||||
|
||||
**Warm Card Button**
|
||||
- Background: `#faf9f6`
|
||||
- Text: `#111111`
|
||||
- Padding: 16px
|
||||
- Border: `1px solid oklab(... / 0.1)`
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#faf9f6` (warm cream)
|
||||
- Border: `1px solid #dedbd6` (warm oat)
|
||||
- Radius: 8px
|
||||
- No visible shadows
|
||||
|
||||
### Navigation
|
||||
- Saans 16px for links
|
||||
- Off-black text on white
|
||||
- Small 4px–6px radius buttons
|
||||
- Orange Fin accent for AI features
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px
|
||||
### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)
|
||||
|
||||
## 6. Depth & Elevation
|
||||
Minimal shadows. Depth through warm border colors and surface tints.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Saans with 1.00 line-height and negative tracking on all headings
|
||||
- Apply 4px radius on buttons — sharp geometry is the identity
|
||||
- Use Fin Orange (#ff5600) for AI/brand accent only
|
||||
- Apply scale(1.1) hover on buttons
|
||||
- Use warm neutrals (#faf9f6, #dedbd6)
|
||||
|
||||
### Don't
|
||||
- Don't round buttons beyond 4px
|
||||
- Don't use Fin Orange decoratively
|
||||
- Don't use cool gray borders — always warm oat tones
|
||||
- Don't skip the negative tracking on headings
|
||||
|
||||
## 8. Responsive Behavior
|
||||
Breakpoints: 425px, 530px, 600px, 640px, 768px, 896px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Text: Off Black (`#111111`)
|
||||
- Background: Warm Cream (`#faf9f6`)
|
||||
- Accent: Fin Orange (`#ff5600`)
|
||||
- Border: Oat (`#dedbd6`)
|
||||
- Muted: `#7b7b78`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg."
|
||||
@@ -1,23 +1,3 @@
|
||||
# Intercom Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/intercom/DESIGN.md) extracted from the public [Intercom](https://intercom.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/intercom/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Intercom design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/intercom/design-md
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Intercom</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --cream:#111111; --black:#faf9f6; --white:#1a1a1a; --orange:#ff5600; --oat:#313130; --gray50:#9c9c98; --gray60:#9c9c98; --gray80:#313130; --sand:#3a3835; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }
|
||||
.nav-cta:hover { transform:scale(1.05); }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
|
||||
.hero h1 span { color:var(--orange); }
|
||||
.hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
|
||||
.btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
|
||||
.btn-dark:active { transform:scale(0.85); }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }
|
||||
.btn-outline:hover { transform:scale(1.1); }
|
||||
.btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
|
||||
.card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--gray60); line-height:1.43; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--black); }
|
||||
.form-input--focus { border-color:var(--black); }
|
||||
.form-input--error { border-color:var(--orange); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
|
||||
.spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
|
||||
.radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
|
||||
.footer a { color:var(--orange); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff5600;color:#ffffff;font-size:10px;font-weight:400;padding:4px 10px;border-radius:4px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Report Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
|
||||
<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
|
||||
<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--gray50); margin-top:12px;">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
|
||||
<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
|
||||
<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
|
||||
<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Intercom</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --cream:#faf9f6; --black:#111111; --white:#ffffff; --orange:#ff5600; --oat:#dedbd6; --gray50:#7b7b78; --gray60:#626260; --gray80:#313130; --sand:#d3cec6; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }
|
||||
.nav-cta:hover { transform:scale(1.05); }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
|
||||
.hero h1 span { color:var(--orange); }
|
||||
.hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
|
||||
.btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
|
||||
.btn-dark:active { transform:scale(0.85); }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }
|
||||
.btn-outline:hover { transform:scale(1.1); }
|
||||
.btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
|
||||
.card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--gray60); line-height:1.43; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--black); }
|
||||
.form-input--focus { border-color:var(--black); }
|
||||
.form-input--error { border-color:var(--orange); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
|
||||
.spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
|
||||
.radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
|
||||
.footer a { color:var(--orange); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Report Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
|
||||
<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
|
||||
<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--gray50); margin-top:12px;">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
|
||||
<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
|
||||
<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
|
||||
<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,125 +0,0 @@
|
||||
# Design System Inspiration of Kraken
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
|
||||
- Kraken-Brand (display) + Kraken-Product (UI) dual font system
|
||||
- Near-black (`#101114`) text with cool blue-gray neutral scale
|
||||
- 12px radius buttons (rounded but not pill)
|
||||
- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
|
||||
- Green accent (`#149e61`) for positive/success states
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
|
||||
- **Purple Dark** (`#5741d8`): Button borders, outlined variants
|
||||
- **Purple Deep** (`#5b1ecf`): Deepest purple
|
||||
- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
|
||||
- **Near Black** (`#101114`): Primary text
|
||||
|
||||
### Neutral
|
||||
- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
|
||||
- **Silver Blue** (`#9497a9`): Secondary text, muted elements
|
||||
- **White** (`#ffffff`): Primary surface
|
||||
- **Border Gray** (`#dedee5`): Divider borders
|
||||
|
||||
### Semantic
|
||||
- **Green** (`#149e61`): Success/positive at 16% opacity for badges
|
||||
- **Green Dark** (`#026b3f`): Badge text
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
|
||||
- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|
||||
|------|------|------|--------|-------------|----------------|
|
||||
| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
|
||||
| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
|
||||
| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
|
||||
| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
|
||||
| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
|
||||
| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
|
||||
| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
|
||||
| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
|
||||
| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
|
||||
| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Purple**
|
||||
- Background: `#7132f5`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 13px 16px
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Outlined**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#5741d8`
|
||||
- Border: `1px solid #5741d8`
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Subtle**
|
||||
- Background: `rgba(133,91,251,0.16)`
|
||||
- Text: `#7132f5`
|
||||
- Padding: 8px
|
||||
- Radius: 12px
|
||||
|
||||
**White Button**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#101114`
|
||||
- Radius: 10px
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
|
||||
**Secondary Gray**
|
||||
- Background: `rgba(148,151,169,0.08)`
|
||||
- Text: `#101114`
|
||||
- Radius: 12px
|
||||
|
||||
### Badges
|
||||
- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
|
||||
- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
|
||||
### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
|
||||
|
||||
## 6. Depth & Elevation
|
||||
- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Kraken Purple (#7132f5) for CTAs and links
|
||||
- Apply 12px radius on all buttons
|
||||
- Use Kraken-Brand for headings, Kraken-Product for body
|
||||
|
||||
### Don't
|
||||
- Don't use pill buttons — 12px is the max radius for buttons
|
||||
- Don't use other purples outside the defined scale
|
||||
|
||||
## 8. Responsive Behavior
|
||||
Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Kraken Purple (`#7132f5`)
|
||||
- Dark variant: `#5741d8`
|
||||
- Text: Near Black (`#101114`)
|
||||
- Secondary text: `#9497a9`
|
||||
- Background: White (`#ffffff`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."
|
||||
@@ -1,23 +1,3 @@
|
||||
# Kraken Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) extracted from the public [Kraken](https://kraken.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Kraken design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/kraken/design-md
|
||||
|
||||
@@ -1,169 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Kraken</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#101114; --black:#e8e8ec; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#9497a9; --silver:#686b82; --border:#2a2c34; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--purple); }
|
||||
.nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--purple); }
|
||||
.hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
|
||||
.btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
|
||||
.footer a { color:var(--purple); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
|
||||
<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,168 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Kraken</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#fff; --black:#101114; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#686b82; --silver:#9497a9; --border:#dedee5; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--purple); }
|
||||
.nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--purple); }
|
||||
.hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
|
||||
.btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
|
||||
.footer a { color:var(--purple); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
|
||||
<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,288 +0,0 @@
|
||||
# Design System Inspiration of Lamborghini
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.
|
||||
|
||||
The hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a "MENU" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.
|
||||
|
||||
Typography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.
|
||||
|
||||
**Key Characteristics:**
|
||||
- True black (`#000000`) dominant surfaces with white and gold as the only relief colors
|
||||
- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines
|
||||
- Lamborghini Gold (`#FFC000`) as the sole accent color — used exclusively for primary CTA buttons
|
||||
- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights
|
||||
- Full-viewport video heroes with cinematic event/vehicle content
|
||||
- Zero border-radius on buttons — sharp, angular, uncompromising rectangles
|
||||
- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry
|
||||
- Bootstrap grid system + Element Plus/UI 68 components underneath
|
||||
- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Lamborghini Gold** (`#FFC000`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons ("Discover More", "Tickets", "Start Configuration"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night
|
||||
- **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness
|
||||
|
||||
### Secondary & Accent
|
||||
- **Dark Gold** (`#917300`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction
|
||||
- **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels
|
||||
- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight
|
||||
- **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors
|
||||
|
||||
### Surface & Background
|
||||
- **Absolute Black** (`#000000`): The dominant surface color — used for page background, hero sections, header, footer, and most containers
|
||||
- **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) — the primary "dark gray" for cards, panels, and text containers sitting above the black canvas
|
||||
- **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections
|
||||
- **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming
|
||||
- **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections
|
||||
- **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers
|
||||
|
||||
### Neutrals & Text
|
||||
- **Pure White** (`#FFFFFF`): Primary text on dark backgrounds — headlines, body, nav labels
|
||||
- **Smoke** (`#F5F5F5`): Secondary text on dark surfaces — slightly softer than pure white
|
||||
- **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)
|
||||
- **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)
|
||||
- **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)
|
||||
- **Slate** (`#666666`): Alternative mid-gray for secondary content
|
||||
- **Iron** (`#555555`): Dark mid-gray for body text variants
|
||||
- **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong
|
||||
|
||||
### Semantic & Accent
|
||||
- **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback
|
||||
- **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks
|
||||
- **Teal Action** (`#1EAEDB`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)
|
||||
|
||||
### Gradient System
|
||||
- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: `#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`
|
||||
- Video heroes use natural atmospheric gradients from the content itself
|
||||
- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek
|
||||
- **Fallback/UI**: `Open Sans` — used for some button/form contexts as system fallback
|
||||
- **No italic variants** observed on the marketing site — the brand voice is always upright
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
|
||||
| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
|
||||
| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
|
||||
| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
|
||||
| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
|
||||
| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |
|
||||
| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
|
||||
| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
|
||||
| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
|
||||
| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |
|
||||
| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |
|
||||
| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |
|
||||
| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
|
||||
| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |
|
||||
|
||||
### Principles
|
||||
- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression
|
||||
- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy
|
||||
- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset
|
||||
- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation
|
||||
- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic
|
||||
- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes
|
||||
- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
All buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.
|
||||
|
||||
**Gold Accent CTA** — The primary action:
|
||||
- Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border
|
||||
- Hover: bg `#917300` (Dark Gold), darkens significantly
|
||||
- Class: `btn-accent btn-large`
|
||||
- Used for: "Discover More", "Tickets", "Start Configuration"
|
||||
|
||||
**Transparent Ghost** — The secondary action on dark backgrounds:
|
||||
- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5
|
||||
- Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7
|
||||
- Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`
|
||||
- Used for: secondary CTAs on hero sections and dark panels
|
||||
|
||||
**White Filled** — Light-mode primary:
|
||||
- Default: bg `#FFFFFF`, text `#202020`, no border
|
||||
- Used for: CTAs on dark sections where gold isn't appropriate
|
||||
|
||||
**Black Filled** — Dark filled variant:
|
||||
- Default: bg `#000000`, text `#202020`
|
||||
- Used for: Inverted CTA on light sections
|
||||
|
||||
**Gray Neutral** — Subtle action:
|
||||
- Default: bg `#969696`, text `#202020`
|
||||
- Used for: secondary/tertiary actions, badge-like buttons
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections
|
||||
- Border: `0px 1px solid #202020` bottom borders for section dividers
|
||||
- Border-radius: 0px (completely sharp corners)
|
||||
- Shadow: minimal, uses overlay opacity for depth
|
||||
- Content: full-bleed photography + overlaid text in white
|
||||
|
||||
### Inputs & Forms
|
||||
- Minimal form presence on the marketing site
|
||||
- Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`
|
||||
- Cookie banner input style: white text on black with `#7D7D7D` borders
|
||||
|
||||
### Navigation
|
||||
- **Desktop**: Centered bull logo, "MENU" hamburger with icon on left, search icon + bookmarks icon on right
|
||||
- **Background**: Transparent (inherits black page background)
|
||||
- **Sticky**: Fixed to top, floats above content
|
||||
- **No visible borders or shadows** — elements float in the darkness
|
||||
- **"MENU" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon
|
||||
- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape
|
||||
|
||||
### Image Treatment
|
||||
- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage
|
||||
- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events
|
||||
- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width
|
||||
- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel
|
||||
- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility
|
||||
|
||||
### Distinctive Components
|
||||
- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections
|
||||
- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress
|
||||
- **Badge/Tag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
|
||||
- **Button padding**: 16px (ghost), 24px (gold accent)
|
||||
- **Section padding**: 48–56px vertical, 40px horizontal
|
||||
- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)
|
||||
|
||||
### Grid & Container
|
||||
- **Framework**: Bootstrap grid system (container + row + col)
|
||||
- **Max width**: 1440px (largest breakpoint)
|
||||
- **Columns**: Standard 12-column Bootstrap grid
|
||||
- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge
|
||||
- **Content areas**: Centered within 1200px max-width containers
|
||||
|
||||
### Whitespace Philosophy
|
||||
Lamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.
|
||||
|
||||
### Border Radius Scale
|
||||
| Value | Context |
|
||||
|-------|---------|
|
||||
| 0px | Default for everything — buttons, cards, containers, images |
|
||||
| 1px | Subtle span elements |
|
||||
| 2px | Badges, close buttons, cookie elements — barely perceptible |
|
||||
| 20px | Toggle switches only — the sole rounded element |
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |
|
||||
| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |
|
||||
| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |
|
||||
| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |
|
||||
| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |
|
||||
|
||||
### Shadow Philosophy
|
||||
Lamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This "darkness gradient" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.
|
||||
|
||||
### Decorative Depth
|
||||
- Full-bleed video provides atmospheric depth through cinematic lighting
|
||||
- The hexagonal pause button floats with a thin white outline stroke
|
||||
- Progress bars at hero section bottoms create a subtle horizon line
|
||||
- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use absolute black (`#000000`) as the primary background — never dark gray as a substitute
|
||||
- Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons — never for decorative purposes
|
||||
- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING
|
||||
- Use zero border-radius on buttons and cards — sharp angles are non-negotiable
|
||||
- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks
|
||||
- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds
|
||||
- Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration
|
||||
- Reserve hexagonal geometry for UI icons and the video control button
|
||||
- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis
|
||||
- Keep the gray palette achromatic — all neutrals are pure gray without color tinting
|
||||
|
||||
### Don't
|
||||
- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred
|
||||
- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic
|
||||
- Use LamboType in italic or decorative styles — the brand is always upright and direct
|
||||
- Add gradients to buttons or surfaces — depth comes from surface layering, not blending
|
||||
- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception
|
||||
- Mix lowercase into display headings — the uppercase convention communicates authority and power
|
||||
- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)
|
||||
- Use Open Sans for display text — LamboType must handle all visible typography
|
||||
- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements
|
||||
- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |
|
||||
| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |
|
||||
| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |
|
||||
| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |
|
||||
| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |
|
||||
| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |
|
||||
| Wide | >1440px | Content centered, margins expand, hero fills viewport |
|
||||
|
||||
### Touch Targets
|
||||
- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)
|
||||
- Ghost buttons: 48px+ with 16px padding
|
||||
- Hamburger menu: large touch target (~48px square)
|
||||
- Hexagonal pause button: approximately 48px diameter
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Always hamburger-based ("MENU" + icon) — no horizontal nav expansion on any breakpoint
|
||||
- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit
|
||||
- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)
|
||||
- **Button layout**: Side-by-side on desktop, stacks vertically on mobile
|
||||
- **Grid columns**: 3-column → 2-column → 1-column progression
|
||||
- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding
|
||||
|
||||
### Image Behavior
|
||||
- Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes
|
||||
- Vehicle images scale within their containers with maintained aspect ratios
|
||||
- Event photography crops to viewport width on narrow screens
|
||||
- Background images darken at edges to maintain text contrast on all viewports
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: "Lamborghini Gold (#FFC000)"
|
||||
- Background: "Absolute Black (#000000)"
|
||||
- Surface: "Charcoal (#202020)"
|
||||
- Heading text: "Pure White (#FFFFFF)"
|
||||
- Body text: "Ash (#7D7D7D)"
|
||||
- Link hover: "Link Blue (#3860BE)"
|
||||
- Accent: "Cyan Pulse (#29ABE2)"
|
||||
- Border: "Pure White (#FFFFFF) at 50% opacity"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text"
|
||||
- "Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity"
|
||||
- "Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position"
|
||||
- "Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover"
|
||||
- "Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive
|
||||
2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors
|
||||
3. Use natural language descriptions, not CSS values — "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"
|
||||
4. Describe the desired "feel" alongside specific measurements — "floating in total darkness" communicates the black canvas better than "background: #000000"
|
||||
5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be
|
||||
@@ -1,23 +1,3 @@
|
||||
# Lamborghini Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lamborghini/DESIGN.md) extracted from the public [Lamborghini](https://lamborghini.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lamborghini/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lamborghini design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/lamborghini/design-md
|
||||
|
||||
@@ -1,303 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Lamborghini</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--lambo-gold: #FFC000;
|
||||
--dark-gold: #917300;
|
||||
--gold-text: #FFCE3E;
|
||||
--pure-white: #FFFFFF;
|
||||
--absolute-black: #000000;
|
||||
--charcoal: #202020;
|
||||
--dark-iron: #181818;
|
||||
--graphite: #494949;
|
||||
--ash: #7D7D7D;
|
||||
--steel: #969696;
|
||||
--mist: #E6E6E6;
|
||||
--near-white: #F8F8F8;
|
||||
--cyan-pulse: #29ABE2;
|
||||
--link-blue: #3860BE;
|
||||
--teal-action: #1EAEDB;
|
||||
--surface-deep: #0A0A0A;
|
||||
--surface-mid: #141414;
|
||||
--text-primary: #F0F0F0;
|
||||
--text-muted: #888888;
|
||||
--border-dark: #1A1A1A;
|
||||
--font-primary: 'Roboto', Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
background: var(--surface-deep);
|
||||
color: var(--text-primary);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--lambo-gold); color: var(--absolute-black);
|
||||
padding: 6px 14px; border-radius: 0; font-size: 11px; font-weight: 500;
|
||||
letter-spacing: 1px; text-transform: uppercase;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px 40px; background: var(--surface-deep);
|
||||
border-bottom: 1px solid var(--border-dark);
|
||||
}
|
||||
.nav-brand { font-size: 13px; font-weight: 500; color: var(--text-primary); text-decoration: none; letter-spacing: 2px; text-transform: uppercase; }
|
||||
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--link-blue); }
|
||||
.nav-cta { background: var(--lambo-gold); color: var(--absolute-black); padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: background 0.3s; }
|
||||
.nav-cta:hover { background: var(--dark-gold); }
|
||||
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; padding: 80px 40px;
|
||||
background: var(--absolute-black); text-align: center; position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(255,192,0,0.04) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 { font-size: 80px; font-weight: 400; line-height: 0.92; color: var(--text-primary); text-transform: uppercase; margin-bottom: 16px; position: relative; }
|
||||
.hero .subtitle { font-size: 16px; font-weight: 300; color: var(--text-muted); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.2px; }
|
||||
.hero-buttons { display: flex; gap: 16px; position: relative; }
|
||||
.btn-gold { background: var(--lambo-gold); color: var(--absolute-black); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 16px; font-weight: 400; cursor: pointer; text-decoration: none; text-transform: uppercase; transition: background 0.3s; }
|
||||
.btn-gold:hover { background: var(--dark-gold); }
|
||||
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 300; opacity: 0.5; cursor: pointer; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: background 0.3s, opacity 0.3s; }
|
||||
.btn-ghost:hover { background: var(--teal-action); opacity: 0.7; }
|
||||
|
||||
.section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-title { font-size: 40px; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; text-transform: uppercase; line-height: 1.15; }
|
||||
.section-desc { font-size: 16px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.50; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-dark); max-width: 1200px; margin: 0 auto; }
|
||||
|
||||
.color-group-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 16px; margin-top: 24px; text-transform: uppercase; letter-spacing: 0.96px; }
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
|
||||
.color-swatch { overflow: hidden; }
|
||||
.color-swatch .swatch-block { height: 80px; }
|
||||
.color-swatch .swatch-info { padding: 12px; background: var(--surface-mid); border: 1px solid var(--border-dark); border-top: none; }
|
||||
.color-swatch .swatch-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
|
||||
.color-swatch .swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-family: monospace; }
|
||||
.color-swatch .swatch-role { font-size: 11px; color: var(--ash); line-height: 1.3; }
|
||||
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border-dark); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-family: monospace; text-transform: none; }
|
||||
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
|
||||
.btn-white { background: var(--pure-white); color: var(--charcoal); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }
|
||||
.btn-black { background: var(--absolute-black); color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }
|
||||
.btn-gray { background: var(--steel); color: var(--charcoal); border: none; border-radius: 0; padding: 12px 24px; font-family: var(--font-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-transform: uppercase; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; }
|
||||
.card { background: var(--surface-mid); overflow: hidden; border: 1px solid var(--border-dark); }
|
||||
.card-image { height: 200px; background: var(--absolute-black); display: flex; align-items: center; justify-content: center; }
|
||||
.card-image-placeholder { font-size: 48px; font-weight: 400; color: var(--charcoal); text-transform: uppercase; }
|
||||
.card-body { padding: 24px; }
|
||||
.card-title { font-size: 27px; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; text-transform: uppercase; line-height: 1.37; }
|
||||
.card-desc { font-size: 16px; color: var(--text-muted); line-height: 1.50; margin-bottom: 16px; }
|
||||
.card-link { font-size: 14px; color: var(--text-primary); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }
|
||||
.card-link:hover { color: var(--link-blue); }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.96px; }
|
||||
.form-input { font-family: var(--font-primary); font-size: 16px; color: var(--text-primary); background: var(--absolute-black); border: 1px solid var(--charcoal); border-radius: 0; padding: 12px 16px; min-height: 48px; outline: none; transition: border-color 0.3s; }
|
||||
.form-input::placeholder { color: var(--ash); }
|
||||
.form-input:focus { border-color: var(--lambo-gold); }
|
||||
.form-input.error { border-color: #E74C3C; }
|
||||
.form-textarea { font-family: var(--font-primary); font-size: 16px; color: var(--text-primary); background: var(--absolute-black); border: 1px solid var(--charcoal); border-radius: 0; padding: 12px 16px; min-height: 100px; outline: none; resize: vertical; transition: border-color 0.3s; }
|
||||
.form-textarea::placeholder { color: var(--ash); }
|
||||
.form-textarea:focus { border-color: var(--lambo-gold); }
|
||||
|
||||
.spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
|
||||
.spacing-box { height: 32px; background: var(--lambo-gold); opacity: 0.5; }
|
||||
.spacing-label { font-size: 12px; color: var(--text-muted); font-family: monospace; min-width: 80px; }
|
||||
|
||||
.radius-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--surface-mid); border: 2px solid var(--charcoal); margin-bottom: 8px; }
|
||||
.radius-value { font-size: 12px; font-weight: 500; color: var(--text-primary); font-family: monospace; }
|
||||
.radius-context { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
.elevation-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
|
||||
.elevation-card { width: 200px; padding: 24px; text-align: center; }
|
||||
.elevation-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
|
||||
.elevation-desc { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
footer { padding: 40px; text-align: center; border-top: 1px solid var(--border-dark); }
|
||||
footer p { font-size: 12px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.96px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.color-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
nav { padding: 12px 20px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.nav-links { display: none; }
|
||||
.section-title { font-size: 27px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Models</a></li>
|
||||
<li><a href="#">Motorsport</a></li>
|
||||
<li><a href="#">Ownership</a></li>
|
||||
<li><a href="#">Discover</a></li>
|
||||
<li><a href="#" class="nav-cta">Configure</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Lamborghini</h1>
|
||||
<p class="subtitle">A visual catalog generated from DESIGN.md — darkness, gold, and uncompromising angles.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#" class="btn-gold">Discover More</a>
|
||||
<a href="#" class="btn-ghost">View Models</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-desc">Monochrome darkness punctuated by Lamborghini Gold.</p>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#FFC000;"></div><div class="swatch-info"><div class="swatch-name">Lamborghini Gold</div><div class="swatch-hex">#FFC000</div><div class="swatch-role">Primary CTA accent</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#FFFFFF;"></div><div class="swatch-info"><div class="swatch-name">Pure White</div><div class="swatch-hex">#FFFFFF</div><div class="swatch-role">Text, logo, nav</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#917300;"></div><div class="swatch-info"><div class="swatch-name">Dark Gold</div><div class="swatch-hex">#917300</div><div class="swatch-role">Gold hover state</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Surface & Background</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#000000;border:1px solid #1A1A1A;"></div><div class="swatch-info"><div class="swatch-name">Absolute Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#181818;"></div><div class="swatch-info"><div class="swatch-name">Dark Iron</div><div class="swatch-hex">#181818</div><div class="swatch-role">Deep sections</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#202020;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#202020</div><div class="swatch-role">Cards, panels</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutrals</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#494949;"></div><div class="swatch-info"><div class="swatch-name">Graphite</div><div class="swatch-hex">#494949</div><div class="swatch-role">Text on light</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#7D7D7D;"></div><div class="swatch-info"><div class="swatch-name">Ash</div><div class="swatch-hex">#7D7D7D</div><div class="swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#969696;"></div><div class="swatch-info"><div class="swatch-name">Steel</div><div class="swatch-hex">#969696</div><div class="swatch-role">Disabled, badges</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#29ABE2;"></div><div class="swatch-info"><div class="swatch-name">Cyan Pulse</div><div class="swatch-hex">#29ABE2</div><div class="swatch-role">Informational</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#3860BE;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#3860BE</div><div class="swatch-role">Link hover</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#1EAEDB;"></div><div class="swatch-info"><div class="swatch-name">Teal Action</div><div class="swatch-hex">#1EAEDB</div><div class="swatch-role">Ghost btn hover</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-desc">LamboType — shown with Roboto fallback. All display text uppercase.</p>
|
||||
<div class="type-sample"><div style="font-size:80px;font-weight:400;line-height:0.92;text-transform:uppercase;color:var(--text-primary);">TEMERARIO</div><div class="type-label">Hero Display — 120px→80px / 400 / 0.92 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:54px;font-weight:400;line-height:1.19;text-transform:uppercase;color:var(--text-primary);">YOU CAN'T HIDE</div><div class="type-label">Section Title — 54px / 400 / 1.19 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:27px;font-weight:400;line-height:1.37;text-transform:uppercase;color:var(--text-primary);">NEWS LAMBORGHINI WORLD</div><div class="type-label">Feature Heading — 27px / 400 / 1.37 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px;font-weight:400;line-height:1.56;color:var(--text-primary);">The arena of emotions. Power meets precision, every detail tells a story.</div><div class="type-label">Body Large — 18px / 400 / 1.56 LH</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px;font-weight:500;line-height:1.83;text-transform:uppercase;letter-spacing:0.96px;color:var(--text-muted);">LABEL BADGE MICRO</div><div class="type-label">Label — 12px / 500 / uppercase / +0.96px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-desc">Zero radius. Sharp angles. Gold primary, ghost secondary.</p>
|
||||
<div class="button-row"><a href="#" class="btn-gold">Discover More</a><span style="font-size:12px;color:var(--text-muted);font-family:monospace;">Gold Accent — #FFC000, 0px radius</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-ghost">View Models</a><span style="font-size:12px;color:var(--text-muted);font-family:monospace;">Ghost — transparent, white border, 50% opacity</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-white">Configure</a><span style="font-size:12px;color:var(--text-muted);font-family:monospace;">White Filled</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-black">Explore</a><span style="font-size:12px;color:var(--text-muted);font-family:monospace;">Black with border</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-gray">Details</a><span style="font-size:12px;color:var(--text-muted);font-family:monospace;">Gray neutral</span></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-desc">Sharp-edged cards on deep dark surfaces.</p>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">T</span></div><div class="card-body"><div class="card-title">Temerario</div><div class="card-desc">The new V8 hybrid super sports car.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">R</span></div><div class="card-body"><div class="card-title">Revuelto</div><div class="card-desc">First V12 hybrid plug-in HPEV.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">U</span></div><div class="card-body"><div class="card-title">Urus SE</div><div class="card-desc">The world's first Super SUV.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-desc">Sharp inputs on black. Gold focus border.</p>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">Default</label><input class="form-input" type="text" placeholder="Enter name"></div>
|
||||
<div class="form-group"><label class="form-label">Focus</label><input class="form-input" type="text" placeholder="Focused" style="border-color:var(--lambo-gold);"></div>
|
||||
<div class="form-group"><label class="form-label">Error</label><input class="form-input error" type="text" value="Invalid"></div>
|
||||
<div class="form-group"><label class="form-label">Textarea</label><textarea class="form-textarea" placeholder="Message..."></textarea></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-desc">8px base. From fine 4px to section 56px.</p>
|
||||
<div class="spacing-row"><div class="spacing-label">4px</div><div class="spacing-box" style="width:16px;"></div><span style="font-size:11px;color:var(--text-muted);">Fine</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">8px</div><div class="spacing-box" style="width:32px;"></div><span style="font-size:11px;color:var(--text-muted);">Base</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">16px</div><div class="spacing-box" style="width:64px;"></div><span style="font-size:11px;color:var(--text-muted);">Button pad</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">24px</div><div class="spacing-box" style="width:96px;"></div><span style="font-size:11px;color:var(--text-muted);">Gold CTA pad</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">40px</div><div class="spacing-box" style="width:160px;"></div><span style="font-size:11px;color:var(--text-muted);">Section H-pad</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">56px</div><div class="spacing-box" style="width:224px;"></div><span style="font-size:11px;color:var(--text-muted);">Section V-pad</span></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Border Radius</h2>
|
||||
<p class="section-desc">Zero is default. Sharp angles are the Lamborghini DNA.</p>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px;"></div><div class="radius-value">0px</div><div class="radius-context">Default</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><div class="radius-value">2px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px;"></div><div class="radius-value">20px</div><div class="radius-context">Switches</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" style="background:var(--absolute-black);max-width:100%;padding:80px 40px;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-desc">No shadows. Surface color layering only.</p>
|
||||
<div class="elevation-row">
|
||||
<div class="elevation-card" style="background:var(--absolute-black);border:1px solid var(--border-dark);"><div class="elevation-name">Level 0 — Abyss</div><div class="elevation-desc">#000000</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark-iron);border:1px solid var(--charcoal);"><div class="elevation-name">Level 1 — Surface</div><div class="elevation-desc">#181818</div></div>
|
||||
<div class="elevation-card" style="background:var(--charcoal);border:1px solid var(--graphite);"><div class="elevation-name">Level 2 — Panel</div><div class="elevation-desc">#202020</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.7);border:1px solid var(--border-dark);"><div class="elevation-name">Level 3 — Overlay</div><div class="elevation-desc">rgba(0,0,0,0.7)</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,381 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Lamborghini</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--lambo-gold: #FFC000;
|
||||
--dark-gold: #917300;
|
||||
--gold-text: #FFCE3E;
|
||||
--pure-white: #FFFFFF;
|
||||
--absolute-black: #000000;
|
||||
--charcoal: #202020;
|
||||
--dark-iron: #181818;
|
||||
--graphite: #494949;
|
||||
--ash: #7D7D7D;
|
||||
--steel: #969696;
|
||||
--slate: #666666;
|
||||
--mist: #E6E6E6;
|
||||
--near-white: #F8F8F8;
|
||||
--cyan-pulse: #29ABE2;
|
||||
--link-blue: #3860BE;
|
||||
--teal-action: #1EAEDB;
|
||||
--font-primary: 'Roboto', Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
background: var(--absolute-black);
|
||||
color: var(--pure-white);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: var(--absolute-black);
|
||||
border-bottom: 1px solid var(--charcoal);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 13px; font-weight: 500; color: var(--pure-white);
|
||||
text-decoration: none; letter-spacing: 2px; text-transform: uppercase;
|
||||
}
|
||||
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
|
||||
.nav-links a {
|
||||
font-size: 14px; font-weight: 400; color: var(--pure-white);
|
||||
text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--link-blue); }
|
||||
.nav-cta {
|
||||
background: var(--lambo-gold); color: var(--absolute-black);
|
||||
padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--dark-gold); }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; padding: 80px 40px;
|
||||
background: var(--absolute-black); text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(255,192,0,0.03) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 80px; font-weight: 400; line-height: 0.92;
|
||||
letter-spacing: normal; color: var(--pure-white); text-transform: uppercase;
|
||||
margin-bottom: 16px; position: relative;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 16px; font-weight: 300; color: var(--ash);
|
||||
margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.2px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; position: relative; }
|
||||
.btn-gold {
|
||||
background: var(--lambo-gold); color: var(--absolute-black);
|
||||
border: none; border-radius: 0; padding: 16px 32px;
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
cursor: pointer; text-decoration: none; text-transform: uppercase;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.btn-gold:hover { background: var(--dark-gold); }
|
||||
.btn-ghost {
|
||||
background: transparent; color: var(--pure-white);
|
||||
border: 1px solid var(--pure-white); border-radius: 0;
|
||||
padding: 16px 32px; font-family: var(--font-primary);
|
||||
font-size: 14.4px; font-weight: 300; opacity: 0.5;
|
||||
cursor: pointer; text-decoration: none; text-transform: uppercase;
|
||||
letter-spacing: 0.2px; transition: background 0.3s, opacity 0.3s;
|
||||
}
|
||||
.btn-ghost:hover { background: var(--teal-action); opacity: 0.7; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
padding: 80px 40px; max-width: 1200px; margin: 0 auto;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 40px; font-weight: 400; color: var(--pure-white);
|
||||
margin-bottom: 8px; text-transform: uppercase; line-height: 1.15;
|
||||
}
|
||||
.section-desc {
|
||||
font-size: 16px; color: var(--ash); margin-bottom: 40px; line-height: 1.50;
|
||||
}
|
||||
.section-divider {
|
||||
border: none; border-top: 1px solid var(--charcoal);
|
||||
max-width: 1200px; margin: 0 auto;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.color-group-label {
|
||||
font-size: 12px; font-weight: 500; color: var(--steel);
|
||||
margin-bottom: 16px; margin-top: 24px; text-transform: uppercase;
|
||||
letter-spacing: 0.96px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 16px; margin-bottom: 32px;
|
||||
}
|
||||
.color-swatch { overflow: hidden; }
|
||||
.color-swatch .swatch-block { height: 80px; }
|
||||
.color-swatch .swatch-info {
|
||||
padding: 12px; background: var(--charcoal);
|
||||
border: 1px solid var(--graphite); border-top: none;
|
||||
}
|
||||
.color-swatch .swatch-name { font-size: 13px; font-weight: 500; color: var(--pure-white); margin-bottom: 2px; }
|
||||
.color-swatch .swatch-hex { font-size: 12px; color: var(--ash); margin-bottom: 4px; font-family: monospace; }
|
||||
.color-swatch .swatch-role { font-size: 11px; color: var(--steel); line-height: 1.3; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--charcoal); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-label { font-size: 12px; color: var(--ash); margin-top: 8px; font-family: monospace; text-transform: none; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
|
||||
.btn-white { background: var(--pure-white); color: var(--charcoal); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }
|
||||
.btn-black { background: var(--absolute-black); color: var(--pure-white); border: 1px solid var(--pure-white); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }
|
||||
.btn-gray { background: var(--steel); color: var(--charcoal); border: none; border-radius: 0; padding: 12px 24px; font-family: var(--font-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-transform: uppercase; letter-spacing: 0.13px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; }
|
||||
.card { background: var(--charcoal); overflow: hidden; }
|
||||
.card-image { height: 200px; background: var(--dark-iron); display: flex; align-items: center; justify-content: center; }
|
||||
.card-image-placeholder { font-size: 48px; font-weight: 400; color: var(--graphite); text-transform: uppercase; }
|
||||
.card-body { padding: 24px; }
|
||||
.card-title { font-size: 27px; font-weight: 400; color: var(--pure-white); margin-bottom: 8px; text-transform: uppercase; line-height: 1.37; }
|
||||
.card-desc { font-size: 16px; color: var(--ash); line-height: 1.50; margin-bottom: 16px; }
|
||||
.card-link { font-size: 14px; color: var(--pure-white); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }
|
||||
.card-link:hover { color: var(--link-blue); }
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-label { font-size: 12px; font-weight: 500; color: var(--steel); text-transform: uppercase; letter-spacing: 0.96px; }
|
||||
.form-input {
|
||||
font-family: var(--font-primary); font-size: 16px; color: var(--pure-white);
|
||||
background: var(--dark-iron); border: 1px solid var(--graphite);
|
||||
border-radius: 0; padding: 12px 16px; min-height: 48px; outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--ash); }
|
||||
.form-input:focus { border-color: var(--lambo-gold); }
|
||||
.form-input.error { border-color: #E74C3C; }
|
||||
.form-textarea {
|
||||
font-family: var(--font-primary); font-size: 16px; color: var(--pure-white);
|
||||
background: var(--dark-iron); border: 1px solid var(--graphite);
|
||||
border-radius: 0; padding: 12px 16px; min-height: 100px; outline: none;
|
||||
resize: vertical; transition: border-color 0.3s;
|
||||
}
|
||||
.form-textarea::placeholder { color: var(--ash); }
|
||||
.form-textarea:focus { border-color: var(--lambo-gold); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
|
||||
.spacing-box { height: 32px; background: var(--lambo-gold); opacity: 0.6; }
|
||||
.spacing-label { font-size: 12px; color: var(--ash); font-family: monospace; min-width: 80px; }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--charcoal); border: 2px solid var(--graphite); margin-bottom: 8px; }
|
||||
.radius-value { font-size: 12px; font-weight: 500; color: var(--pure-white); font-family: monospace; }
|
||||
.radius-context { font-size: 11px; color: var(--ash); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
|
||||
.elevation-card { width: 200px; padding: 24px; text-align: center; }
|
||||
.elevation-name { font-size: 13px; font-weight: 500; color: var(--pure-white); margin-bottom: 4px; }
|
||||
.elevation-desc { font-size: 11px; color: var(--ash); }
|
||||
|
||||
footer { padding: 40px; text-align: center; border-top: 1px solid var(--charcoal); }
|
||||
footer p { font-size: 12px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.96px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.color-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
nav { padding: 12px 20px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.nav-links { display: none; }
|
||||
.section-title { font-size: 27px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Models</a></li>
|
||||
<li><a href="#">Motorsport</a></li>
|
||||
<li><a href="#">Ownership</a></li>
|
||||
<li><a href="#">Discover</a></li>
|
||||
<li><a href="#" class="nav-cta">Configure</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Lamborghini</h1>
|
||||
<p class="subtitle">A visual catalog generated from DESIGN.md — darkness, gold, and uncompromising angles.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#" class="btn-gold">Discover More</a>
|
||||
<a href="#" class="btn-ghost">View Models</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-desc">Monochrome darkness punctuated by Lamborghini Gold. The only chromatic color in the system.</p>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#FFC000;"></div><div class="swatch-info"><div class="swatch-name">Lamborghini Gold</div><div class="swatch-hex">#FFC000</div><div class="swatch-role">Primary CTA accent</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#FFFFFF;"></div><div class="swatch-info"><div class="swatch-name">Pure White</div><div class="swatch-hex">#FFFFFF</div><div class="swatch-role">Text, logo, nav elements</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#917300;"></div><div class="swatch-info"><div class="swatch-name">Dark Gold</div><div class="swatch-hex">#917300</div><div class="swatch-role">Gold hover/pressed state</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Surface & Background</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#000000; border:1px solid #202020;"></div><div class="swatch-info"><div class="swatch-name">Absolute Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">Page background, deepest layer</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#181818;"></div><div class="swatch-info"><div class="swatch-name">Dark Iron</div><div class="swatch-hex">#181818</div><div class="swatch-role">Footer, deep sections</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#202020;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#202020</div><div class="swatch-role">Cards, elevated panels</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#F8F8F8;"></div><div class="swatch-info"><div class="swatch-name">Near White</div><div class="swatch-hex">#F8F8F8</div><div class="swatch-role">Rare light-mode surface</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutrals & Text</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#494949;"></div><div class="swatch-info"><div class="swatch-name">Graphite</div><div class="swatch-hex">#494949</div><div class="swatch-role">Text on light surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#7D7D7D;"></div><div class="swatch-info"><div class="swatch-name">Ash</div><div class="swatch-hex">#7D7D7D</div><div class="swatch-role">Muted text, metadata</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#969696;"></div><div class="swatch-info"><div class="swatch-name">Steel</div><div class="swatch-hex">#969696</div><div class="swatch-role">Disabled text, badges</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#E6E6E6;"></div><div class="swatch-info"><div class="swatch-name">Mist</div><div class="swatch-hex">#E6E6E6</div><div class="swatch-role">Light gray containers</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Semantic & Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#29ABE2;"></div><div class="swatch-info"><div class="swatch-name">Cyan Pulse</div><div class="swatch-hex">#29ABE2</div><div class="swatch-role">Informational accent</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#3860BE;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#3860BE</div><div class="swatch-role">Link hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-block" style="background:#1EAEDB;"></div><div class="swatch-info"><div class="swatch-name">Teal Action</div><div class="swatch-hex">#1EAEDB</div><div class="swatch-role">Ghost button hover</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-desc">LamboType for everything — shown with Roboto as the closest available fallback. All display text is uppercase.</p>
|
||||
|
||||
<div class="type-sample"><div style="font-size:80px;font-weight:400;line-height:0.92;text-transform:uppercase;color:var(--pure-white);">TEMERARIO</div><div class="type-label">Hero Display — 120px→80px / 400 / 0.92 LH / uppercase / LamboType</div></div>
|
||||
<div class="type-sample"><div style="font-size:54px;font-weight:400;line-height:1.19;text-transform:uppercase;color:var(--pure-white);">YOU CAN'T HIDE</div><div class="type-label">Section Title — 54px / 400 / 1.19 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px;font-weight:400;line-height:1.15;text-transform:uppercase;color:var(--pure-white);">DEALER LOCATOR</div><div class="type-label">Sub-section — 40px / 400 / 1.15 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:27px;font-weight:400;line-height:1.37;text-transform:uppercase;color:var(--pure-white);">NEWS LAMBORGHINI WORLD</div><div class="type-label">Feature Heading — 27px / 400 / 1.37 LH / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px;font-weight:400;line-height:1.56;color:var(--pure-white);">The arena of emotions. Where power meets precision, and every detail tells a story of relentless innovation.</div><div class="type-label">Body Large — 18px / 400 / 1.56 LH / mixed case</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px;font-weight:400;line-height:1.50;color:var(--ash);">Standard paragraph text for descriptions, captions, and secondary content throughout the interface.</div><div class="type-label">Body — 16px / 400 / 1.50 LH</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px;font-weight:500;line-height:1.83;text-transform:uppercase;letter-spacing:0.96px;color:var(--steel);">LABEL BADGE MICRO</div><div class="type-label">Label — 12px / 500 / 1.83 LH / uppercase / +0.96px tracking</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-desc">Zero border-radius. Sharp, angular rectangles. Gold for primary, ghost for secondary.</p>
|
||||
|
||||
<div class="button-row"><a href="#" class="btn-gold">Discover More</a><span style="font-size:12px;color:var(--ash);font-family:monospace;">Gold Accent — bg #FFC000, 0px radius, 24px padding</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-ghost">View Models</a><span style="font-size:12px;color:var(--ash);font-family:monospace;">Ghost — transparent, white border, 50% opacity</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-white">Configure</a><span style="font-size:12px;color:var(--ash);font-family:monospace;">White Filled — bg #FFFFFF, text #202020</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-black">Explore</a><span style="font-size:12px;color:var(--ash);font-family:monospace;">Black — bg #000000, white border</span></div>
|
||||
<div class="button-row"><a href="#" class="btn-gray">Details</a><span style="font-size:12px;color:var(--ash);font-family:monospace;">Gray — bg #969696, 13px, compact</span></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-desc">Sharp-edged cards on charcoal surfaces. No radius, no shadow — just surface color shifts.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">T</span></div><div class="card-body"><div class="card-title">Temerario</div><div class="card-desc">The new V8 hybrid super sports car. Uncompromising power meets visionary design.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">R</span></div><div class="card-body"><div class="card-title">Revuelto</div><div class="card-desc">The first V12 hybrid plug-in HPEV. A new era of Lamborghini performance.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
<div class="card"><div class="card-image"><span class="card-image-placeholder">U</span></div><div class="card-body"><div class="card-title">Urus SE</div><div class="card-desc">The world's first Super SUV. Beyond the concept of luxury.</div><a href="#" class="card-link">Discover</a></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-desc">Sharp-edged inputs on dark backgrounds. Focus triggers gold border.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">Default Input</label><input class="form-input" type="text" placeholder="Enter your name"></div>
|
||||
<div class="form-group"><label class="form-label">Focus Input</label><input class="form-input" type="text" placeholder="Focused" style="border-color:var(--lambo-gold);"></div>
|
||||
<div class="form-group"><label class="form-label">Error Input</label><input class="form-input error" type="text" value="Invalid entry"></div>
|
||||
<div class="form-group"><label class="form-label">Textarea</label><textarea class="form-textarea" placeholder="Your message..."></textarea></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-desc">8px base unit with a comprehensive scale from 2px to 56px.</p>
|
||||
|
||||
<div class="spacing-row"><div class="spacing-label">4px</div><div class="spacing-box" style="width:16px;"></div><span style="font-size:11px;color:var(--ash);">Fine adjustments</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">8px</div><div class="spacing-box" style="width:32px;"></div><span style="font-size:11px;color:var(--ash);">Base unit</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">16px</div><div class="spacing-box" style="width:64px;"></div><span style="font-size:11px;color:var(--ash);">Ghost button padding, card gap</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">24px</div><div class="spacing-box" style="width:96px;"></div><span style="font-size:11px;color:var(--ash);">Gold CTA padding, card body</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">40px</div><div class="spacing-box" style="width:160px;"></div><span style="font-size:11px;color:var(--ash);">Section horizontal padding</span></div>
|
||||
<div class="spacing-row"><div class="spacing-label">56px</div><div class="spacing-box" style="width:224px;"></div><span style="font-size:11px;color:var(--ash);">Section vertical padding</span></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-desc">Almost entirely zero. Sharp angles are fundamental to the Lamborghini DNA.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px;"></div><div class="radius-value">0px</div><div class="radius-context">Everything (default)</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><div class="radius-value">2px</div><div class="radius-context">Badges, close buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px;"></div><div class="radius-value">20px</div><div class="radius-context">Toggle switches only</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" style="background:var(--dark-iron);max-width:100%;padding:80px 40px;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-desc">No shadows — depth through surface color layering. Lighter = closer.</p>
|
||||
<div class="elevation-row">
|
||||
<div class="elevation-card" style="background:var(--absolute-black);border:1px solid var(--charcoal);"><div class="elevation-name">Level 0 — Abyss</div><div class="elevation-desc">#000000 flat black</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark-iron);border:1px solid var(--graphite);"><div class="elevation-name">Level 1 — Surface</div><div class="elevation-desc">#181818 elevated</div></div>
|
||||
<div class="elevation-card" style="background:var(--charcoal);border:1px solid var(--graphite);"><div class="elevation-name">Level 2 — Panel</div><div class="elevation-desc">#202020 cards/panels</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.7);border:1px solid var(--charcoal);"><div class="elevation-name">Level 3 — Overlay</div><div class="elevation-desc">rgba(0,0,0,0.7)</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,367 +0,0 @@
|
||||
# Design System Inspiration of Linear
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.
|
||||
|
||||
The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.
|
||||
|
||||
The color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces
|
||||
- Inter Variable with `"cv01", "ss03"` globally — geometric alternates for a cleaner aesthetic
|
||||
- Signature weight 510 (between regular and medium) for most UI text
|
||||
- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) — the only chromatic color in the system
|
||||
- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`
|
||||
- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Multi-layered shadows with inset variants for depth on dark surfaces
|
||||
- Radix UI primitives as the component foundation (6 detected primitives)
|
||||
- Success green (`#27a644`, `#10b981`) used only for status indicators
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Background Surfaces
|
||||
- **Marketing Black** (`#010102` / `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
|
||||
- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.
|
||||
- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.
|
||||
- **Secondary Surface** (`#28282c`): The lightest dark surface — used for hover states and slightly elevated components.
|
||||
|
||||
### Text & Content
|
||||
- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
|
||||
- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.
|
||||
- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.
|
||||
- **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.
|
||||
|
||||
### Brand & Accent
|
||||
- **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
|
||||
- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.
|
||||
- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.
|
||||
- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.
|
||||
|
||||
### Status Colors
|
||||
- **Green** (`#27a644`): Primary success/active status. Used for "in progress" indicators.
|
||||
- **Emerald** (`#10b981`): Secondary success — pill badges, completion states.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Primary** (`#23252a`): Solid dark border for prominent separations.
|
||||
- **Border Secondary** (`#34343a`): Slightly lighter solid border.
|
||||
- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.
|
||||
- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.
|
||||
- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.
|
||||
- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.
|
||||
- **Line Tertiary** (`#18191a`): Slightly more visible divider line.
|
||||
|
||||
### Light Mode Neutrals (for light theme contexts)
|
||||
- **Light Background** (`#f7f8f8`): Page background in light mode.
|
||||
- **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.
|
||||
- **Light Border** (`#d0d6e0`): Visible border in light contexts.
|
||||
- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.
|
||||
- **Pure White** (`#ffffff`): Card surfaces, highlights.
|
||||
|
||||
### Overlay
|
||||
- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop — extremely dark for focus isolation.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
|
||||
- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`
|
||||
- **OpenType Features**: `"cv01", "ss03"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |
|
||||
| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |
|
||||
| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |
|
||||
| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |
|
||||
| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |
|
||||
| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |
|
||||
| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |
|
||||
| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |
|
||||
| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |
|
||||
| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |
|
||||
| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |
|
||||
| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |
|
||||
| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |
|
||||
| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |
|
||||
| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |
|
||||
| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |
|
||||
| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |
|
||||
| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |
|
||||
| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |
|
||||
| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |
|
||||
| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |
|
||||
| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |
|
||||
| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |
|
||||
| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |
|
||||
| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |
|
||||
|
||||
### Principles
|
||||
- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.
|
||||
- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
|
||||
- **OpenType as identity**: `"cv01", "ss03"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.
|
||||
- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Ghost Button (Default)**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#e2e4e7` (near-white)
|
||||
- Padding: comfortable
|
||||
- Radius: 6px
|
||||
- Border: `1px solid rgb(36, 40, 44)`
|
||||
- Outline: none
|
||||
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Use: Standard actions, secondary CTAs
|
||||
|
||||
**Subtle Button**
|
||||
- Background: `rgba(255,255,255,0.04)`
|
||||
- Text: `#d0d6e0` (silver-gray)
|
||||
- Padding: 0px 6px
|
||||
- Radius: 6px
|
||||
- Use: Toolbar actions, contextual buttons
|
||||
|
||||
**Primary Brand Button (Inferred)**
|
||||
- Background: `#5e6ad2` (brand indigo)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Hover: `#828fff` shift
|
||||
- Use: Primary CTAs ("Start building", "Sign up")
|
||||
|
||||
**Icon Button (Circle)**
|
||||
- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8` or `#ffffff`
|
||||
- Radius: 50%
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Use: Close, menu toggle, icon-only actions
|
||||
|
||||
**Pill Button**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Use: Filter chips, tags, status indicators
|
||||
|
||||
**Small Toolbar Button**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#62666d` (muted)
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`
|
||||
- Font: 12px weight 510
|
||||
- Use: Toolbar actions, quick-access controls
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid — always translucent)
|
||||
- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)
|
||||
- Radius: 8px (standard), 12px (featured), 22px (large panels)
|
||||
- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks
|
||||
- Hover: subtle background opacity increase
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Text Area**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#d0d6e0`
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Padding: 12px 14px
|
||||
- Radius: 6px
|
||||
|
||||
**Search Input**
|
||||
- Background: transparent
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 1px 32px (icon-aware)
|
||||
|
||||
**Button-style Input**
|
||||
- Text: `#8a8f98`
|
||||
- Padding: 1px 6px
|
||||
- Radius: 5px
|
||||
- Focus shadow: multi-layer stack
|
||||
|
||||
### Badges & Pills
|
||||
|
||||
**Success Pill**
|
||||
- Background: `#10b981`
|
||||
- Text: `#f7f8f8`
|
||||
- Radius: 50% (circular)
|
||||
- Font: 10px weight 510
|
||||
- Use: Status dots, completion indicators
|
||||
|
||||
**Neutral Pill**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Font: 12px weight 510
|
||||
- Use: Tags, filter chips, category labels
|
||||
|
||||
**Subtle Badge**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 0px 8px 0px 2px
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Font: 10px weight 510
|
||||
- Use: Inline labels, version tags
|
||||
|
||||
### Navigation
|
||||
- Dark sticky header on near-black background
|
||||
- Linear logomark left-aligned (SVG icon)
|
||||
- Links: Inter Variable 13–14px weight 510, `#d0d6e0` text
|
||||
- Active/hover: text lightens to `#f7f8f8`
|
||||
- CTA: Brand indigo button or ghost button
|
||||
- Mobile: hamburger collapse
|
||||
- Search: command palette trigger (`/` or `Cmd+K`)
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)
|
||||
- Top-rounded images: `12px 12px 0px 0px` radius
|
||||
- Dashboard/issue previews dominate feature sections
|
||||
- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
|
||||
- The 7px and 11px values suggest micro-adjustments for optical alignment
|
||||
- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous vertical padding
|
||||
- Feature sections: 2–3 column grids for feature cards
|
||||
- Full-width dark sections with internal max-width constraints
|
||||
- Changelog: single-column timeline layout
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.
|
||||
- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.
|
||||
- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (2px): Inline badges, toolbar buttons, subtle tags
|
||||
- Standard (4px): Small containers, list items
|
||||
- Comfortable (6px): Buttons, inputs, functional elements
|
||||
- Card (8px): Cards, dropdowns, popovers
|
||||
- Panel (12px): Panels, featured cards, section containers
|
||||
- Large (22px): Large panel elements
|
||||
- Full Pill (9999px): Chips, filter pills, status tags
|
||||
- Circle (50%): Icon buttons, avatars, status dots
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |
|
||||
| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |
|
||||
| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |
|
||||
| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |
|
||||
| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |
|
||||
| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |
|
||||
| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |
|
||||
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |
|
||||
|
||||
**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique "sunken" effect for recessed panels, adding dimensional depth that traditional dark themes lack.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Inter Variable with `"cv01", "ss03"` on ALL text — these features are fundamental to Linear's typeface identity
|
||||
- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight
|
||||
- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces
|
||||
- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders
|
||||
- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only
|
||||
- Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh
|
||||
- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg
|
||||
|
||||
### Don't
|
||||
- Don't use pure white (`#ffffff`) as primary text — `#f7f8f8` prevents eye strain
|
||||
- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)
|
||||
- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only
|
||||
- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative
|
||||
- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white
|
||||
- Don't skip the OpenType features (`"cv01", "ss03"`) — without them, it's generic Inter, not Linear's Inter
|
||||
- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse
|
||||
- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only
|
||||
- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <600px | Single column, compact padding |
|
||||
| Mobile | 600–640px | Standard mobile layout |
|
||||
| Tablet | 640–768px | Two-column grids begin |
|
||||
| Desktop Small | 768–1024px | Full card grids, expanded padding |
|
||||
| Desktop | 1024–1280px | Standard desktop, full navigation |
|
||||
| Large Desktop | >1280px | Full layout, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding with 6px radius minimum
|
||||
- Navigation links at 13–14px with adequate spacing
|
||||
- Pill tags have 10px horizontal padding for touch accessibility
|
||||
- Icon buttons at 50% radius ensure circular, easy-to-tap targets
|
||||
- Search trigger is prominently placed with generous hit area
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally
|
||||
- Navigation: horizontal links + CTAs → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Product screenshots: maintain aspect ratio, may reduce padding
|
||||
- Changelog: timeline maintains single-column through all sizes
|
||||
- Footer: multi-column → stacked single column
|
||||
- Section spacing: 80px+ → 48px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard screenshots maintain border treatment at all sizes
|
||||
- Hero visuals simplify on mobile (fewer floating UI elements)
|
||||
- Product screenshots use responsive sizing with consistent radius
|
||||
- Dark background ensures screenshots blend naturally at any viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Brand Indigo (`#5e6ad2`)
|
||||
- Page Background: Marketing Black (`#08090a`)
|
||||
- Panel Background: Panel Dark (`#0f1011`)
|
||||
- Surface: Level 3 (`#191a1b`)
|
||||
- Heading text: Primary White (`#f7f8f8`)
|
||||
- Body text: Silver Gray (`#d0d6e0`)
|
||||
- Muted text: Tertiary Gray (`#8a8f98`)
|
||||
- Subtle text: Quaternary Gray (`#62666d`)
|
||||
- Accent: Violet (`#7170ff`)
|
||||
- Accent Hover: Light Violet (`#828fff`)
|
||||
- Border (default): `rgba(255,255,255,0.08)`
|
||||
- Border (subtle): `rgba(255,255,255,0.05)`
|
||||
- Focus ring: Multi-layer shadow stack
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius)."
|
||||
- "Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px."
|
||||
- "Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510."
|
||||
- "Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`."
|
||||
- "Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always set font-feature-settings `"cv01", "ss03"` on all Inter text — this is non-negotiable for Linear's look
|
||||
2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px
|
||||
3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)
|
||||
4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark
|
||||
5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color — everything else is grayscale
|
||||
6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds
|
||||
7. Berkeley Mono for any code or technical content, Inter Variable for everything else
|
||||
@@ -1,24 +1,3 @@
|
||||
# Linear Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) extracted from the public [Linear](https://linear.app/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Linear design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/linear.app/design-md
|
||||
|
||||
@@ -1,383 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Linear</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #08090a;
|
||||
--bg-surface: #0f1011;
|
||||
--bg-elevated: #191a1b;
|
||||
--bg-hover: #28282c;
|
||||
--text-primary: #f7f8f8;
|
||||
--text-secondary: #d0d6e0;
|
||||
--text-tertiary: #8a8f98;
|
||||
--text-quaternary: #62666d;
|
||||
--brand: #5e6ad2;
|
||||
--accent: #7170ff;
|
||||
--accent-hover: #828fff;
|
||||
--success: #27a644;
|
||||
--emerald: #10b981;
|
||||
--border-primary: #23252a;
|
||||
--border-secondary: #34343a;
|
||||
--border-subtle: rgba(255,255,255,0.05);
|
||||
--border-standard: rgba(255,255,255,0.08);
|
||||
--shadow-ring: rgba(0,0,0,0.2) 0px 0px 0px 1px;
|
||||
--shadow-subtle: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;
|
||||
--shadow-card: rgba(0,0,0,0.2) 0px 0px 0px 1px, rgba(0,0,0,0.3) 0px 2px 4px 0px;
|
||||
--shadow-elevated: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.2) 0px 0px 0px 1px;
|
||||
--shadow-dialog: rgba(0,0,0,0) 0px 8px 2px 0px, rgba(0,0,0,0.01) 0px 5px 2px 0px, rgba(0,0,0,0.04) 0px 3px 2px 0px, rgba(0,0,0,0.07) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 0px 1px 0px;
|
||||
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--text-primary); color: var(--bg-page);
|
||||
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(8,9,10,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--accent); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 510; line-height: 1.00;
|
||||
letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-brand:hover { background: var(--accent); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 24px; border: 1px solid var(--border-standard); transition: border-color 0.2s, background 0.2s; }
|
||||
.card:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }
|
||||
.card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: -0.182px; }
|
||||
.form-input {
|
||||
width: 100%; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
border: 1px solid var(--border-standard); padding: 10px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }
|
||||
.form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }
|
||||
.form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.25); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
border: 1px solid var(--border-standard); padding: 12px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-quaternary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--bg-elevated); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.8px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Linear</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-brand" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Background Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#08090a"></div><div class="color-swatch-info"><div class="color-swatch-name">Marketing Black</div><div class="color-swatch-hex">#08090a</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f1011"></div><div class="color-swatch-info"><div class="color-swatch-name">Panel Dark</div><div class="color-swatch-hex">#0f1011</div><div class="color-swatch-role">Sidebar, panels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191a1b"></div><div class="color-swatch-info"><div class="color-swatch-name">Level 3</div><div class="color-swatch-hex">#191a1b</div><div class="color-swatch-role">Elevated surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282c"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#28282c</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Content</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8"></div><div class="color-swatch-info"><div class="color-swatch-name">Primary Text</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Headings, primary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary Text</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8a8f98"></div><div class="color-swatch-info"><div class="color-swatch-name">Tertiary Text</div><div class="color-swatch-hex">#8a8f98</div><div class="color-swatch-role">Placeholders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62666d"></div><div class="color-swatch-info"><div class="color-swatch-name">Quaternary Text</div><div class="color-swatch-hex">#62666d</div><div class="color-swatch-role">Disabled, timestamps</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5e6ad2"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Indigo</div><div class="color-swatch-hex">#5e6ad2</div><div class="color-swatch-role">CTA backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7170ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Violet</div><div class="color-swatch-hex">#7170ff</div><div class="color-swatch-role">Links, active states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#828fff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#828fff</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7a7fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Security Lavender</div><div class="color-swatch-hex">#7a7fad</div><div class="color-swatch-role">Security UI</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#27a644"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#27a644</div><div class="color-swatch-role">Success, active</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#10b981"></div><div class="color-swatch-info"><div class="color-swatch-name">Emerald</div><div class="color-swatch-hex">#10b981</div><div class="color-swatch-role">Badges, completion</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Dividers</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#23252a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Primary</div><div class="color-swatch-hex">#23252a</div><div class="color-swatch-role">Strong borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#34343a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Secondary</div><div class="color-swatch-hex">#34343a</div><div class="color-swatch-role">Medium borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3e3e44"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Tertiary</div><div class="color-swatch-hex">#3e3e44</div><div class="color-swatch-role">Lighter borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#141516"></div><div class="color-swatch-info"><div class="color-swatch-name">Line Tint</div><div class="color-swatch-hex">#141516</div><div class="color-swatch-role">Subtle dividers</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Semi-transparent Borders</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Subtle Border</div><div class="color-swatch-hex">rgba(255,255,255,0.05)</div><div class="color-swatch-role">Default borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Standard Border</div><div class="color-swatch-hex">rgba(255,255,255,0.08)</div><div class="color-swatch-role">Cards, inputs</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;">Display Headline</div><div class="type-meta">Display — 48px / 510 / 1.00 / -1.056px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;">Heading One</div><div class="type-meta">Heading 1 — 32px / 400 / 1.13 / -0.704px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;">Heading Two</div><div class="type-meta">Heading 2 — 24px / 400 / 1.33 / -0.288px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;">Heading Three</div><div class="type-meta">Heading 3 — 20px / 590 / 1.33 / -0.24px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.</div><div class="type-meta">Body Large — 18px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:510; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 510 / 1.50 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);">Small — Secondary body content and descriptions</div><div class="type-meta">Small — 15px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;">Caption — Sub-labels and category headers</div><div class="type-meta">Caption — 14px / 510 / 1.50 / -0.182px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px; color:var(--text-secondary);">Meta — Timestamps and metadata</div><div class="type-meta">Meta — 13px / 510 / 1.50 / -0.13px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:510; line-height:1.40;">Label — Small button text and tags</div><div class="type-meta">Label — 12px / 510 / 1.40 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);">const issue = await linear.createIssue({title});</div><div class="type-meta">Mono Body — 14px / 400 / 1.50 / Berkeley Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase; color:var(--text-quaternary);">ISSUE STATUS</div><div class="type-meta">Mono Label — 12px / 400 / uppercase / Berkeley Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-brand" href="#">Start Building</a><div class="button-label">Primary Brand</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(94,106,210,0.15); color:var(--accent); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">In Progress</span><div class="button-label">Status Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(16,185,129,0.15); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">Done</span><div class="button-label">Success Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(255,255,255,0.05); color:var(--text-primary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid rgba(255,255,255,0.05);">v2.4</span><div class="button-label">Subtle Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);">Filter</span><div class="button-label">Pill Chip</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(94,106,210,0.15); color:var(--accent);">Issues</div>
|
||||
<h3>Issue Tracking</h3>
|
||||
<p>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: var(--border-secondary); background: rgba(255,255,255,0.04);">
|
||||
<div class="card-badge" style="background:rgba(16,185,129,0.15); color:var(--emerald);">Cycles</div>
|
||||
<h3>Sprint Cycles</h3>
|
||||
<p>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(113,112,255,0.15); color:var(--accent);">Roadmaps</div>
|
||||
<h3>Product Roadmaps</h3>
|
||||
<p>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Issue Title</label><input class="form-input" type="text" placeholder="Enter issue title..."><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Assignee</label><input class="form-input form-input--focus" type="text" value="@alice"><div class="form-state-label">Focus (accent ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Priority</label><input class="form-input form-input--error" type="text" value="invalid priority"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe the issue..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">35</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:22px"></div><div class="radius-label">22px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Circles</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Micro-elevation</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-standard);"><div class="elevation-label">Level 2: Surface</div><div class="elevation-desc">Border-defined depth</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-elevated);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Floating elements</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--accent);"><div class="elevation-label">Focus</div><div class="elevation-desc">Accent ring</div></div>
|
||||
<div class="elevation-card" style="box-shadow: inset rgba(0,0,0,0.2) 0px 0px 12px 0px;"><div class="elevation-label">Inset</div><div class="elevation-desc">Sunken panel</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,373 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Linear</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #f7f8f8;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-panel: #f3f4f5;
|
||||
--text-primary: #1a1a1e;
|
||||
--text-secondary: #3c3c43;
|
||||
--text-tertiary: #62666d;
|
||||
--text-quaternary: #8a8f98;
|
||||
--brand: #5e6ad2;
|
||||
--accent: #7170ff;
|
||||
--accent-hover: #828fff;
|
||||
--success: #27a644;
|
||||
--emerald: #10b981;
|
||||
--border-primary: #d0d6e0;
|
||||
--border-subtle: #e6e6e6;
|
||||
--border-light: rgba(0,0,0,0.08);
|
||||
--shadow-ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;
|
||||
--shadow-subtle: rgba(0,0,0,0.04) 0px 2px 4px 0px;
|
||||
--shadow-card: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px 0px;
|
||||
--shadow-elevated: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 4px 12px 0px;
|
||||
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(247,248,248,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--accent); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 510; line-height: 1.00;
|
||||
letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-brand:hover { background: var(--accent); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: var(--bg-surface); color: var(--text-primary);
|
||||
padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--text-quaternary); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-ring); background: var(--bg-surface); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--bg-surface); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }
|
||||
.card:hover { box-shadow: var(--shadow-elevated); }
|
||||
.card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.182px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--bg-surface); color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary); padding: 10px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }
|
||||
.form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }
|
||||
.form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.2); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--bg-surface); color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary); padding: 12px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-quaternary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--bg-surface); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.8px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Linear</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-brand" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Background Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#08090a"></div><div class="color-swatch-info"><div class="color-swatch-name">Marketing Black</div><div class="color-swatch-hex">#08090a</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f1011"></div><div class="color-swatch-info"><div class="color-swatch-name">Panel Dark</div><div class="color-swatch-hex">#0f1011</div><div class="color-swatch-role">Sidebar, panels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191a1b"></div><div class="color-swatch-info"><div class="color-swatch-name">Level 3</div><div class="color-swatch-hex">#191a1b</div><div class="color-swatch-role">Elevated surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282c"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#28282c</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Content</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8"></div><div class="color-swatch-info"><div class="color-swatch-name">Primary Text</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Headings, primary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary Text</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8a8f98"></div><div class="color-swatch-info"><div class="color-swatch-name">Tertiary Text</div><div class="color-swatch-hex">#8a8f98</div><div class="color-swatch-role">Placeholders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62666d"></div><div class="color-swatch-info"><div class="color-swatch-name">Quaternary Text</div><div class="color-swatch-hex">#62666d</div><div class="color-swatch-role">Disabled, timestamps</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5e6ad2"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Indigo</div><div class="color-swatch-hex">#5e6ad2</div><div class="color-swatch-role">CTA backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7170ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Violet</div><div class="color-swatch-hex">#7170ff</div><div class="color-swatch-role">Links, active states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#828fff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#828fff</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7a7fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Security Lavender</div><div class="color-swatch-hex">#7a7fad</div><div class="color-swatch-role">Security UI</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#27a644"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#27a644</div><div class="color-swatch-role">Success, active</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#10b981"></div><div class="color-swatch-info"><div class="color-swatch-name">Emerald</div><div class="color-swatch-hex">#10b981</div><div class="color-swatch-role">Badges, completion</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Dividers</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#23252a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Primary</div><div class="color-swatch-hex">#23252a</div><div class="color-swatch-role">Strong borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#34343a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Secondary</div><div class="color-swatch-hex">#34343a</div><div class="color-swatch-role">Medium borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3e3e44"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Tertiary</div><div class="color-swatch-hex">#3e3e44</div><div class="color-swatch-role">Lighter borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Border</div><div class="color-swatch-hex">#e6e6e6</div><div class="color-swatch-role">Light mode borders</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Light Mode Neutrals</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Bg</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Light page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3f4f5; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Surface</div><div class="color-swatch-hex">#f3f4f5</div><div class="color-swatch-role">Surface tint</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Border</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Light mode dividers</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;">Display Headline</div><div class="type-meta">Display — 48px / 510 / 1.00 / -1.056px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;">Heading One</div><div class="type-meta">Heading 1 — 32px / 400 / 1.13 / -0.704px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;">Heading Two</div><div class="type-meta">Heading 2 — 24px / 400 / 1.33 / -0.288px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;">Heading Three</div><div class="type-meta">Heading 3 — 20px / 590 / 1.33 / -0.24px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.</div><div class="type-meta">Body Large — 18px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:510; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 510 / 1.50 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;">Small — Secondary body content and descriptions</div><div class="type-meta">Small — 15px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;">Caption — Sub-labels and category headers</div><div class="type-meta">Caption — 14px / 510 / 1.50 / -0.182px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px;">Meta — Timestamps and metadata</div><div class="type-meta">Meta — 13px / 510 / 1.50 / -0.13px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:510; line-height:1.40;">Label — Small button text and tags</div><div class="type-meta">Label — 12px / 510 / 1.40 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50;">const issue = await linear.createIssue({title});</div><div class="type-meta">Mono Body — 14px / 400 / 1.50 / Berkeley Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase;">ISSUE STATUS</div><div class="type-meta">Mono Label — 12px / 400 / uppercase / Berkeley Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-brand" href="#">Start Building</a><div class="button-label">Primary Brand</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(94,106,210,0.1); color:var(--brand); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">In Progress</span><div class="button-label">Status Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(16,185,129,0.1); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">Done</span><div class="button-label">Success Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--bg-panel); color:var(--text-tertiary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid var(--border-subtle);">v2.4</span><div class="button-label">Subtle Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);">Filter</span><div class="button-label">Pill Chip</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(94,106,210,0.1); color:var(--brand);">Issues</div>
|
||||
<h3>Issue Tracking</h3>
|
||||
<p>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-elevated);">
|
||||
<div class="card-badge" style="background:rgba(16,185,129,0.1); color:var(--emerald);">Cycles</div>
|
||||
<h3>Sprint Cycles</h3>
|
||||
<p>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(113,112,255,0.1); color:var(--accent);">Roadmaps</div>
|
||||
<h3>Product Roadmaps</h3>
|
||||
<p>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Issue Title</label><input class="form-input" type="text" placeholder="Enter issue title..."><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Assignee</label><input class="form-input form-input--focus" type="text" value="@alice"><div class="form-state-label">Focus (accent ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Priority</label><input class="form-input form-input--error" type="text" value="invalid priority"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe the issue..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">35</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:22px"></div><div class="radius-label">22px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Circles</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Micro-elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-card);"><div class="elevation-label">Level 2: Card</div><div class="elevation-desc">Ring + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-elevated);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Ring + deeper shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--accent);"><div class="elevation-label">Focus</div><div class="elevation-desc">Accent ring</div></div>
|
||||
<div class="elevation-card" style="box-shadow: inset rgba(0,0,0,0.1) 0px 0px 12px 0px;"><div class="elevation-label">Inset</div><div class="elevation-desc">Sunken panel</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,298 +0,0 @@
|
||||
# Design System Inspiration of Lovable
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.
|
||||
|
||||
The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses `ui-sans-serif, system-ui` as fallbacks, acknowledging that the custom typeface carries the brand personality.
|
||||
|
||||
What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm parchment background (`#f7f4ed`) — not white, not beige, a deliberate cream that feels hand-selected
|
||||
- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
|
||||
- Opacity-driven color system: all grays derived from `#1c1c1c` at varying transparency levels
|
||||
- Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`
|
||||
- Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements
|
||||
- Full-pill radius (`9999px`) used extensively for action buttons and icon containers
|
||||
- Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis
|
||||
- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cream** (`#f7f4ed`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
|
||||
- **Charcoal** (`#1c1c1c`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
|
||||
- **Off-White** (`#fcfbf8`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
|
||||
|
||||
### Neutral Scale (Opacity-Based)
|
||||
- **Charcoal 100%** (`#1c1c1c`): Primary text, headings, dark surfaces.
|
||||
- **Charcoal 83%** (`rgba(28,28,28,0.83)`): Strong secondary text.
|
||||
- **Charcoal 82%** (`rgba(28,28,28,0.82)`): Body copy.
|
||||
- **Muted Gray** (`#5f5f5d`): Secondary text, descriptions, captions.
|
||||
- **Charcoal 40%** (`rgba(28,28,28,0.4)`): Interactive borders, button outlines.
|
||||
- **Charcoal 4%** (`rgba(28,28,28,0.04)`): Subtle hover backgrounds, micro-tints.
|
||||
- **Charcoal 3%** (`rgba(28,28,28,0.03)`): Barely-visible overlays, background depth.
|
||||
|
||||
### Surface & Border
|
||||
- **Light Cream** (`#eceae4`): Card borders, dividers, image outlines. The warm divider line.
|
||||
- **Cream Surface** (`#f7f4ed`): Card backgrounds, section fills — same as page background for seamless integration.
|
||||
|
||||
### Interactive
|
||||
- **Ring Blue** (`#3b82f6` at 50% opacity): `--tw-ring-color`, Tailwind focus ring.
|
||||
- **Focus Shadow** (`rgba(0,0,0,0.1) 0px 4px 12px`): Focus and active state shadow — soft, warm, diffused.
|
||||
|
||||
### Inset Shadows
|
||||
- **Button Inset** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Camera Plain Variable`, with fallbacks: `ui-sans-serif, system-ui`
|
||||
- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
|
||||
- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |
|
||||
| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |
|
||||
| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |
|
||||
| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |
|
||||
| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |
|
||||
| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |
|
||||
| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |
|
||||
| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |
|
||||
| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |
|
||||
| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |
|
||||
| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |
|
||||
|
||||
### Principles
|
||||
- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
|
||||
- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
|
||||
- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
|
||||
- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark (Inset Shadow)**
|
||||
- Background: `#1c1c1c`
|
||||
- Text: `#fcfbf8`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
|
||||
- Active: opacity 0.8
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
|
||||
- Use: Primary CTA ("Start Building", "Get Started")
|
||||
|
||||
**Ghost / Outline**
|
||||
- Background: transparent
|
||||
- Text: `#1c1c1c`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Border: `1px solid rgba(28,28,28,0.4)`
|
||||
- Active: opacity 0.8
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
|
||||
- Use: Secondary actions ("Log In", "Documentation")
|
||||
|
||||
**Cream Surface**
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- No border
|
||||
- Active: opacity 0.8
|
||||
- Use: Tertiary actions, toolbar buttons
|
||||
|
||||
**Pill / Icon Button**
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Radius: 9999px (full pill)
|
||||
- Shadow: same inset pattern as primary dark
|
||||
- Opacity: 0.5 (default), 0.8 (active)
|
||||
- Use: Additional actions, plan mode toggle, voice recording
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#f7f4ed` (matches page)
|
||||
- Border: `1px solid #eceae4`
|
||||
- Radius: 12px (standard), 16px (featured), 8px (compact)
|
||||
- No box-shadow by default — borders define boundaries
|
||||
- Image cards: `1px solid #eceae4` with 12px radius
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Border: `1px solid #eceae4`
|
||||
- Radius: 6px
|
||||
- Focus: ring blue (`rgba(59,130,246,0.5)`) outline
|
||||
- Placeholder: `#5f5f5d`
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on cream background, fixed
|
||||
- Logo/wordmark left-aligned (128.75 x 22px)
|
||||
- Links: Camera Plain 14–16px weight 400, `#1c1c1c` text
|
||||
- CTA: dark button with inset shadow, 6px radius
|
||||
- Mobile: hamburger menu with 6px radius button
|
||||
- Subtle border or no border on scroll
|
||||
|
||||
### Links
|
||||
- Color: `#1c1c1c`
|
||||
- Decoration: underline (default)
|
||||
- Hover: primary accent (via CSS variable `hsl(var(--primary))`)
|
||||
- No color change on hover — decoration carries the interactive signal
|
||||
|
||||
### Image Treatment
|
||||
- Showcase/portfolio images with `1px solid #eceae4` border
|
||||
- Consistent 12px border radius on all image containers
|
||||
- Soft gradient backgrounds behind hero content (warm multi-color wash)
|
||||
- Gallery-style presentation for template/project showcases
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**AI Chat Input**
|
||||
- Large prompt input area with soft borders
|
||||
- Suggestion pills with `#eceae4` borders
|
||||
- Voice recording / plan mode toggle buttons as pill shapes (9999px)
|
||||
- Warm, inviting input area — not clinical
|
||||
|
||||
**Template Gallery**
|
||||
- Card grid showing project templates
|
||||
- Each card: image + title, `1px solid #eceae4` border, 12px radius
|
||||
- Hover: subtle shadow or border darkening
|
||||
- Category labels as text links
|
||||
|
||||
**Stats Bar**
|
||||
- Large metrics: "0M+" pattern in 48px+ weight 600
|
||||
- Descriptive text below in muted gray
|
||||
- Horizontal layout with generous spacing
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
|
||||
- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px (centered)
|
||||
- Hero: centered single-column with massive vertical padding (96px+)
|
||||
- Feature sections: 2–3 column grids
|
||||
- Full-width footer with multi-column link layout
|
||||
- Showcase sections with centered card grids
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.
|
||||
- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
|
||||
- **Section separation**: Footer uses `1px solid #eceae4` border and 16px radius container. Sections defined by generous spacing rather than border lines.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (4px): Small buttons, interactive elements
|
||||
- Standard (6px): Buttons, inputs, navigation menu
|
||||
- Comfortable (8px): Compact cards, divs
|
||||
- Card (12px): Standard cards, image containers, templates
|
||||
- Container (16px): Large containers, footer sections
|
||||
- Full Pill (9999px): Action pills, icon buttons, toggles
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, cream background | Page surface, most content |
|
||||
| Bordered (Level 1) | `1px solid #eceae4` | Cards, images, dividers |
|
||||
| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |
|
||||
| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active/focus states |
|
||||
| Ring (Accessibility) | `rgba(59,130,246,0.5)` 2px ring | Keyboard focus on inputs |
|
||||
|
||||
**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (`#eceae4`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (`rgba(0,0,0,0.1) 0px 4px 12px`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.
|
||||
|
||||
### Decorative Depth
|
||||
- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible
|
||||
- Footer: gradient background with warm tones transitioning to the bottom
|
||||
- No harsh section dividers — spacing and background warmth handle transitions
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use the warm cream background (`#f7f4ed`) as the page foundation — it's the brand's signature warmth
|
||||
- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)
|
||||
- Derive all grays from `#1c1c1c` at varying opacity levels for tonal unity
|
||||
- Use the inset shadow technique on dark buttons for tactile depth
|
||||
- Use `#eceae4` borders instead of shadows for card containment
|
||||
- Keep the weight system narrow: 400 for body/UI, 600 for headings
|
||||
- Use full-pill radius (9999px) only for action pills and icon buttons
|
||||
- Apply opacity 0.8 on active states for responsive tactile feedback
|
||||
|
||||
### Don't
|
||||
- Don't use pure white (`#ffffff`) as a page background — the cream is intentional
|
||||
- Don't use heavy box-shadows for cards — borders are the containment mechanism
|
||||
- Don't introduce saturated accent colors — the palette is intentionally warm-neutral
|
||||
- Don't use weight 700 (bold) — 600 is the maximum weight in the system
|
||||
- Don't apply 9999px radius on rectangular buttons — pills are for icon/action toggles
|
||||
- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators
|
||||
- Don't mix border styles — `#eceae4` for passive, `rgba(28,28,28,0.4)` for interactive
|
||||
- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <600px | Tight single column, reduced padding |
|
||||
| Mobile | 600–640px | Standard mobile layout |
|
||||
| Tablet Small | 640–700px | 2-column grids begin |
|
||||
| Tablet | 700–768px | Card grids expand |
|
||||
| Desktop Small | 768–1024px | Multi-column layouts |
|
||||
| Desktop | 1024–1280px | Full feature layout |
|
||||
| Large Desktop | 1280–1536px | Maximum content width, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: 8px 16px padding (comfortable touch)
|
||||
- Navigation: adequate spacing between items
|
||||
- Pill buttons: 9999px radius creates large tap-friendly targets
|
||||
- Menu toggle: 6px radius button with adequate sizing
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing
|
||||
- Navigation: horizontal links → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Template gallery: grid → stacked vertical cards
|
||||
- Stats bar: horizontal → stacked vertical
|
||||
- Footer: multi-column → stacked single column
|
||||
- Section spacing: 128px+ → 64px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Template screenshots maintain `1px solid #eceae4` border at all sizes
|
||||
- 12px border radius preserved across breakpoints
|
||||
- Gallery images responsive with consistent aspect ratios
|
||||
- Hero gradient softens/simplifies on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Charcoal (`#1c1c1c`)
|
||||
- Background: Cream (`#f7f4ed`)
|
||||
- Heading text: Charcoal (`#1c1c1c`)
|
||||
- Body text: Muted Gray (`#5f5f5d`)
|
||||
- Border: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Button text on dark: `#fcfbf8`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
|
||||
- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
|
||||
- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
|
||||
- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
|
||||
- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use cream (`#f7f4ed`) as the base — never pure white
|
||||
2. Derive grays from `#1c1c1c` at opacity levels rather than using distinct hex values
|
||||
3. Use `#eceae4` borders for containment, not shadows
|
||||
4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px
|
||||
5. Two weights: 400 (everything except headings) and 600 (headings)
|
||||
6. The inset shadow on dark buttons is the signature detail — don't skip it
|
||||
7. Camera Plain Variable at weight 480 is for special display moments only
|
||||
@@ -1,24 +1,3 @@
|
||||
# Lovable Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) extracted from the public [Lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lovable design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/lovable/design-md
|
||||
|
||||
@@ -1,349 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Lovable</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #1a1916;
|
||||
--charcoal: #e8e5de;
|
||||
--off-white: #1a1916;
|
||||
--border-light: #2e2c28;
|
||||
--muted: #9a9a98;
|
||||
--charcoal-40: rgba(232,229,222,0.35);
|
||||
--charcoal-83: rgba(232,229,222,0.83);
|
||||
--charcoal-04: rgba(232,229,222,0.06);
|
||||
--charcoal-03: rgba(232,229,222,0.04);
|
||||
--ring-blue: rgba(59,130,246,0.5);
|
||||
--focus-shadow: rgba(0,0,0,0.3) 0px 4px 12px;
|
||||
--shadow-inset: rgba(255,255,255,0.1) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.4) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.2) 0px 1px 2px 0px;
|
||||
--font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--charcoal);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(26,25,22,0.88);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--charcoal); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--charcoal); color: var(--off-white);
|
||||
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-inset);
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 60px; font-weight: 600; line-height: 1.10;
|
||||
letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-dark {
|
||||
display: inline-block; background: var(--charcoal); color: var(--off-white);
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-inset);
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.85; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--charcoal);
|
||||
padding: 10px 20px; border-radius: 6px;
|
||||
border: 1px solid var(--charcoal-40);
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { opacity: 0.8; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }
|
||||
.btn-cream {
|
||||
display: inline-block; background: var(--cream); color: var(--charcoal);
|
||||
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; border: 1px solid var(--border-light); cursor: pointer;
|
||||
}
|
||||
.btn-pill {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--cream); color: var(--charcoal);
|
||||
width: 36px; height: 36px; border-radius: 9999px;
|
||||
font-size: 14px; font-weight: 400; text-decoration: none;
|
||||
box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }
|
||||
.card:hover { border-color: var(--charcoal-40); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--muted); line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--cream); color: var(--charcoal);
|
||||
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
|
||||
font-family: var(--font-primary); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
|
||||
.form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
|
||||
.form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);
|
||||
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
|
||||
font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }
|
||||
.radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
|
||||
.radius-context { font-size: 10px; color: var(--muted); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }
|
||||
.footer a { color: var(--charcoal); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.9px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#e8e5de;color:#1a1916;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Lovable</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f4ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream</div><div class="color-swatch-hex">#f7f4ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal</div><div class="color-swatch-hex">#1c1c1c</div><div class="color-swatch-role">Primary text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fcfbf8"></div><div class="color-swatch-info"><div class="color-swatch-name">Off-White</div><div class="color-swatch-hex">#fcfbf8</div><div class="color-swatch-role">Button text on dark</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale (Opacity-Based)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.83)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 83%</div><div class="color-swatch-hex">rgba(28,28,28,0.83)</div><div class="color-swatch-role">Strong secondary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5f5f5d"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted Gray</div><div class="color-swatch-hex">#5f5f5d</div><div class="color-swatch-role">Body text, captions</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.4)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 40%</div><div class="color-swatch-hex">rgba(28,28,28,0.4)</div><div class="color-swatch-role">Interactive borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.04); border-bottom:1px solid var(--border-light)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 4%</div><div class="color-swatch-hex">rgba(28,28,28,0.04)</div><div class="color-swatch-role">Hover tint</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.03); border-bottom:1px solid var(--border-light)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 3%</div><div class="color-swatch-hex">rgba(28,28,28,0.03)</div><div class="color-swatch-role">Subtle overlay</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Surface & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Cream</div><div class="color-swatch-hex">#eceae4</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(59,130,246,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ring Blue</div><div class="color-swatch-hex">rgba(59,130,246,0.5)</div><div class="color-swatch-role">Focus ring</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;">Display Hero</div><div class="type-meta">Display Hero — 60px / 600 / 1.10 / -1.5px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section Heading — 48px / 600 / 1.00 / -1.2px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;">Sub-heading</div><div class="type-meta">Sub-heading — 36px / 600 / 1.10 / -0.9px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.25;">Card Title</div><div class="type-meta">Card Title — 20px / 400 / 1.25 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.38;">Body Large — Build something lovable. Create web applications with AI-powered development tools.</div><div class="type-meta">Body Large — 18px / 400 / 1.38 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for descriptions, paragraphs, and UI content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Button / Link — Interactive text</div><div class="type-meta">Button / Link — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);">Caption — Metadata and small labels</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Start Building</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outline</div></div>
|
||||
<div class="button-item"><a class="btn-cream" href="#">Settings</a><div class="button-label">Cream Surface</div></div>
|
||||
<div class="button-item"><button class="btn-pill">+</button><div class="button-label">Pill Icon</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Template</div>
|
||||
<h3>Portfolio Website</h3>
|
||||
<p>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: var(--charcoal-40);">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Featured</div>
|
||||
<h3>AI Chat Application</h3>
|
||||
<p>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Starter</div>
|
||||
<h3>SaaS Dashboard</h3>
|
||||
<p>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-lovable-app"><div class="form-state-label">Default (border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="lovable/my-project"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:56px"></div><div class="spacing-value">56</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Compact</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, cream bg</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 1: Bordered</div><div class="elevation-desc">1px solid #eceae4</div></div>
|
||||
<div class="elevation-card" style="background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);"><div class="elevation-label" style="color:var(--off-white);">Level 2: Inset</div><div class="elevation-desc" style="color:rgba(26,25,22,0.6);">Button inset shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);"><div class="elevation-label">Level 3: Focus</div><div class="elevation-desc">Focus shadow glow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.5);"><div class="elevation-label">Ring</div><div class="elevation-desc">Accessibility ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,348 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Lovable</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #f7f4ed;
|
||||
--charcoal: #1c1c1c;
|
||||
--off-white: #fcfbf8;
|
||||
--border-light: #eceae4;
|
||||
--muted: #5f5f5d;
|
||||
--charcoal-40: rgba(28,28,28,0.4);
|
||||
--charcoal-83: rgba(28,28,28,0.83);
|
||||
--charcoal-04: rgba(28,28,28,0.04);
|
||||
--charcoal-03: rgba(28,28,28,0.03);
|
||||
--ring-blue: rgba(59,130,246,0.5);
|
||||
--focus-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
|
||||
--shadow-inset: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px;
|
||||
--font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--charcoal);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(247,244,237,0.88);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--charcoal); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--charcoal); color: var(--off-white);
|
||||
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-inset);
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 60px; font-weight: 600; line-height: 1.10;
|
||||
letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-dark {
|
||||
display: inline-block; background: var(--charcoal); color: var(--off-white);
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-inset);
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.85; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--charcoal);
|
||||
padding: 10px 20px; border-radius: 6px;
|
||||
border: 1px solid var(--charcoal-40);
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { opacity: 0.8; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }
|
||||
.color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }
|
||||
.btn-cream {
|
||||
display: inline-block; background: var(--cream); color: var(--charcoal);
|
||||
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-pill {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--cream); color: var(--charcoal);
|
||||
width: 36px; height: 36px; border-radius: 9999px;
|
||||
font-size: 14px; font-weight: 400; text-decoration: none;
|
||||
box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: none;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }
|
||||
.card:hover { border-color: var(--charcoal-40); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--muted); line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--cream); color: var(--charcoal);
|
||||
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
|
||||
font-family: var(--font-primary); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
|
||||
.form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
|
||||
.form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);
|
||||
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
|
||||
font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }
|
||||
.radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
|
||||
.radius-context { font-size: 10px; color: var(--muted); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }
|
||||
.footer a { color: var(--charcoal); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.9px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Lovable</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f4ed; border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream</div><div class="color-swatch-hex">#f7f4ed</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal</div><div class="color-swatch-hex">#1c1c1c</div><div class="color-swatch-role">Primary text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fcfbf8; border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Off-White</div><div class="color-swatch-hex">#fcfbf8</div><div class="color-swatch-role">Button text on dark</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale (Opacity-Based)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.83)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 83%</div><div class="color-swatch-hex">rgba(28,28,28,0.83)</div><div class="color-swatch-role">Strong secondary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5f5f5d"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted Gray</div><div class="color-swatch-hex">#5f5f5d</div><div class="color-swatch-role">Body text, captions</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.4)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 40%</div><div class="color-swatch-hex">rgba(28,28,28,0.4)</div><div class="color-swatch-role">Interactive borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.04); border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 4%</div><div class="color-swatch-hex">rgba(28,28,28,0.04)</div><div class="color-swatch-role">Hover tint</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.03); border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 3%</div><div class="color-swatch-hex">rgba(28,28,28,0.03)</div><div class="color-swatch-role">Subtle overlay</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Surface & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Cream</div><div class="color-swatch-hex">#eceae4</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(59,130,246,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ring Blue</div><div class="color-swatch-hex">rgba(59,130,246,0.5)</div><div class="color-swatch-role">Focus ring</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;">Display Hero</div><div class="type-meta">Display Hero — 60px / 600 / 1.10 / -1.5px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section Heading — 48px / 600 / 1.00 / -1.2px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;">Sub-heading</div><div class="type-meta">Sub-heading — 36px / 600 / 1.10 / -0.9px / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.25;">Card Title</div><div class="type-meta">Card Title — 20px / 400 / 1.25 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.38;">Body Large — Build something lovable. Create web applications with AI-powered development tools.</div><div class="type-meta">Body Large — 18px / 400 / 1.38 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for descriptions, paragraphs, and UI content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Button / Link — Interactive text</div><div class="type-meta">Button / Link — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);">Caption — Metadata and small labels</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Start Building</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outline</div></div>
|
||||
<div class="button-item"><a class="btn-cream" href="#">Settings</a><div class="button-label">Cream Surface</div></div>
|
||||
<div class="button-item"><button class="btn-pill">+</button><div class="button-label">Pill Icon</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Template</div>
|
||||
<h3>Portfolio Website</h3>
|
||||
<p>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: var(--charcoal-40);">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Featured</div>
|
||||
<h3>AI Chat Application</h3>
|
||||
<p>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Starter</div>
|
||||
<h3>SaaS Dashboard</h3>
|
||||
<p>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-lovable-app"><div class="form-state-label">Default (border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="lovable/my-project"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:56px"></div><div class="spacing-value">56</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Compact</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, cream bg</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 1: Bordered</div><div class="elevation-desc">1px solid #eceae4</div></div>
|
||||
<div class="elevation-card" style="background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);"><div class="elevation-label" style="color:var(--off-white);">Level 2: Inset</div><div class="elevation-desc" style="color:rgba(252,251,248,0.6);">Button inset shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);"><div class="elevation-label">Level 3: Focus</div><div class="elevation-desc">Focus shadow glow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.5);"><div class="elevation-label">Ring</div><div class="elevation-desc">Accessibility ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,257 +0,0 @@
|
||||
# Design System Inspiration of MiniMax
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.
|
||||
|
||||
The typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.
|
||||
|
||||
What makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a "gallery of AI capabilities" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.
|
||||
|
||||
**Key Characteristics:**
|
||||
- White-dominant layout with colorful product card accents
|
||||
- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)
|
||||
- Pill buttons (9999px radius) for primary navigation and CTAs
|
||||
- Generous rounded cards (20px–24px radius) for product showcases
|
||||
- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)
|
||||
- Brand pink (`#ea5ec1`) as secondary accent
|
||||
- Near-black text (`#222222`, `#18181b`) on white backgrounds
|
||||
- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth
|
||||
- Dark footer section (`#181e25`) with product/company links
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Brand Primary
|
||||
- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color
|
||||
- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents
|
||||
- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent
|
||||
|
||||
### Blue Scale (Primary)
|
||||
- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds
|
||||
- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights
|
||||
- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions
|
||||
- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states
|
||||
- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states
|
||||
- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis
|
||||
|
||||
### Text Colors
|
||||
- **Near Black** (`#222222`): `--col-text00`, primary text
|
||||
- **Dark** (`#18181b`): Button text, headings
|
||||
- **Charcoal** (`#181e25`): Dark surface text, footer background
|
||||
- **Dark Gray** (`#45515e`): `--col-text04`, secondary text
|
||||
- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels
|
||||
- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): `--col-bg13`, primary background
|
||||
- **Light Gray** (`#f0f0f0`): Secondary button backgrounds
|
||||
- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay
|
||||
- **Border Light** (`#f2f3f5`): Subtle section dividers
|
||||
- **Border Gray** (`#e5e7eb`): Component borders
|
||||
|
||||
### Semantic
|
||||
- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds
|
||||
|
||||
### Shadows
|
||||
- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow
|
||||
- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow
|
||||
- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow
|
||||
- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow
|
||||
- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
- **Mid-tier**: `Poppins`
|
||||
- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |
|
||||
| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |
|
||||
| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |
|
||||
| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |
|
||||
| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |
|
||||
| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |
|
||||
| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |
|
||||
| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |
|
||||
| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |
|
||||
| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |
|
||||
| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |
|
||||
| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |
|
||||
| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |
|
||||
| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |
|
||||
|
||||
### Principles
|
||||
- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.
|
||||
- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).
|
||||
- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.
|
||||
- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Pill Primary Dark**
|
||||
- Background: `#181e25`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 11px 20px
|
||||
- Radius: 8px
|
||||
- Use: Primary CTA ("Get Started", "Learn More")
|
||||
|
||||
**Pill Nav**
|
||||
- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)
|
||||
- Text: `#18181b`
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Navigation tabs, filter toggles
|
||||
|
||||
**Pill White**
|
||||
- Background: `#ffffff`
|
||||
- Text: `rgba(24, 30, 37, 0.8)`
|
||||
- Radius: 9999px
|
||||
- Opacity: 0.5 (default state)
|
||||
- Use: Secondary nav, inactive tabs
|
||||
|
||||
**Secondary Light**
|
||||
- Background: `#f0f0f0`
|
||||
- Text: `#333333`
|
||||
- Padding: 11px 20px
|
||||
- Radius: 8px
|
||||
- Use: Secondary actions
|
||||
|
||||
### Product Cards
|
||||
- Background: Vibrant gradients (pink/purple/orange/blue)
|
||||
- Radius: 20px–24px (generous rounding)
|
||||
- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)
|
||||
- Content: Product name, model version, descriptive text
|
||||
- Each card has its own color palette matching the product identity
|
||||
|
||||
### AI Product Cards (Matrix)
|
||||
- Background: white with subtle shadow
|
||||
- Radius: 13px–16px
|
||||
- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`
|
||||
- Icon/illustration centered above product name
|
||||
- Product name in DM Sans 14–16px weight 500
|
||||
|
||||
### Links
|
||||
- **Primary**: `#18181b` or `#181e25`, underline on dark text
|
||||
- **Secondary**: `#8e8e93`, muted for less emphasis
|
||||
- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white background
|
||||
- MiniMax logo left-aligned (red accent in logo)
|
||||
- DM Sans 14px weight 500 for nav items
|
||||
- Pill-shaped active indicators (9999px radius)
|
||||
- "Login" text link, minimal right-side actions
|
||||
- Sticky header behavior
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered on page
|
||||
- Product card grids: horizontal scroll or 3–4 column layout
|
||||
- Full-width white sections with contained content
|
||||
- Dark footer at full-width
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, stacked cards |
|
||||
| Tablet | 768–1024px | 2-column grids |
|
||||
| Desktop | >1024px | Full layout, horizontal card scrolls |
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.
|
||||
- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct "chapters" of content.
|
||||
- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (4px): Small tags, micro badges
|
||||
- Standard (8px): Buttons, small cards
|
||||
- Comfortable (11px–13px): Medium cards, panels
|
||||
- Generous (16px–20px): Large product cards
|
||||
- Large (22px–24px): Hero product cards, major containers
|
||||
- Pill (30px–32px): Badge pills, rounded panels
|
||||
- Full (9999px): Buttons, nav tabs
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | White background, text blocks |
|
||||
| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |
|
||||
| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |
|
||||
| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |
|
||||
| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |
|
||||
|
||||
**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use white as the dominant background — let product cards provide the color
|
||||
- Apply pill radius (9999px) for navigation tabs and toggle buttons
|
||||
- Use generous border radius (20px–24px) for product showcase cards
|
||||
- Employ the purple-tinted shadow for featured/hero product cards
|
||||
- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only
|
||||
- Use Outfit for display headings, DM Sans for everything functional
|
||||
- Maintain the universal 1.50 line-height across body text
|
||||
- Let colorful product illustrations/gradients serve as the primary visual interest
|
||||
|
||||
### Don't
|
||||
- Don't add colored backgrounds to main content sections — white is structural
|
||||
- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core
|
||||
- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only
|
||||
- Don't mix more than one display font per section (Outfit OR Poppins, not both)
|
||||
- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text
|
||||
- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint
|
||||
- Don't use Roboto for headings — it's the data/technical context font only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, stacked product cards, hamburger nav |
|
||||
| Tablet | 768–1024px | 2-column product grids, condensed spacing |
|
||||
| Desktop | >1024px | Full horizontal card layouts, expanded spacing |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 80px → responsive scaling to ~40px on mobile
|
||||
- Product card grid: horizontal scroll → 2-column → single column stacked
|
||||
- Navigation: horizontal → hamburger menu
|
||||
- Footer: multi-column → stacked sections
|
||||
- Spacing: 64–80px gaps → 32–40px on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: `#ffffff` (primary), `#181e25` (dark/footer)
|
||||
- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)
|
||||
- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)
|
||||
- Brand Pink: `#ea5ec1` (accent only)
|
||||
- Borders: `#e5e7eb`, `#f2f3f5`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)."
|
||||
- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area."
|
||||
- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned."
|
||||
- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500."
|
||||
- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — color comes from product cards and illustrations only
|
||||
2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons
|
||||
3. Purple-tinted shadows for featured cards, neutral shadows for everything else
|
||||
4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only
|
||||
5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable
|
||||
6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements
|
||||
@@ -1,24 +1,3 @@
|
||||
# Minimax Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) extracted from the public [MiniMax](https://minimax.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Minimax design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/minimax/design-md
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user