add new designs
This commit is contained in:
necatiozmen
180
design-md/bmw/DESIGN.md
Normal file
180
design-md/bmw/DESIGN.md
Normal file
@@ -0,0 +1,180 @@
|
||||
# Design System: 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
|
||||
23
design-md/bmw/README.md
Normal file
23
design-md/bmw/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 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
|
||||
|
||||
211
design-md/bmw/preview-dark.html
Normal file
211
design-md/bmw/preview-dark.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: BMW (Dark)</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">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
210
design-md/bmw/preview.html
Normal file
210
design-md/bmw/preview.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: BMW (Light)</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">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user