Merge branch 'main' of code.gitlink.org.cn:testPerson/uitocode
This commit is contained in:
commit
375057922a
|
|
@ -0,0 +1,220 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# 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
|
||||
|
||||
|
|
@ -0,0 +1,822 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,832 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
# Design System Inspiration of Mintlify
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#ffffff`) background, near-black (`#0d0d0d`) text, and a signature green brand accent (`#18E299`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers "we care about your developer experience" in every pixel.
|
||||
|
||||
The Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page.
|
||||
|
||||
What distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable
|
||||
- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice
|
||||
- Brand green (`#18E299`) used sparingly — CTAs, hover states, focus rings, and accent touches
|
||||
- Atmospheric gradient hero with cloud-like green-white wash
|
||||
- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills
|
||||
- Subtle 5% opacity borders (`rgba(0,0,0,0.05)`) creating barely-there separation
|
||||
- 8px base spacing system with generous section padding (48px–96px)
|
||||
- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Near Black** (`#0d0d0d`): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.
|
||||
- **Pure White** (`#ffffff`): Page background, card surfaces, input backgrounds.
|
||||
- **Brand Green** (`#18E299`): The signature accent — CTAs, links on hover, focus rings, brand identity.
|
||||
|
||||
### Secondary Accents
|
||||
- **Brand Green Light** (`#d4fae8`): Tinted green surface for badges, hover states, subtle backgrounds.
|
||||
- **Brand Green Deep** (`#0fa76e`): Darker green for text on light-green badges, hover states on brand elements.
|
||||
- **Warm Amber** (`#c37d0d`): Warning states, caution badges — `--twoslash-warn-bg`.
|
||||
- **Soft Blue** (`#3772cf`): Tag backgrounds, informational annotations — `--twoslash-tag-bg`.
|
||||
- **Error Red** (`#d45656`): Error states, destructive actions — `--twoslash-error-bg`.
|
||||
|
||||
### Neutral Scale
|
||||
- **Gray 900** (`#0d0d0d`): Primary heading text, nav links.
|
||||
- **Gray 700** (`#333333`): Secondary text, descriptions, body copy.
|
||||
- **Gray 500** (`#666666`): Tertiary text, muted labels.
|
||||
- **Gray 400** (`#888888`): Placeholder text, disabled states, code annotations.
|
||||
- **Gray 200** (`#e5e5e5`): Borders, dividers, card outlines.
|
||||
- **Gray 100** (`#f5f5f5`): Subtle surface backgrounds, hover states.
|
||||
- **Gray 50** (`#fafafa`): Near-white surface tint.
|
||||
|
||||
### Interactive
|
||||
- **Link Default** (`#0d0d0d`): Links match text color, relying on underline/context.
|
||||
- **Link Hover** (`#18E299`): Brand green on hover — `var(--color-brand)`.
|
||||
- **Focus Ring** (`#18E299`): Brand green focus outline for inputs and interactive elements.
|
||||
|
||||
### Surface & Overlay
|
||||
- **Card Background** (`#ffffff`): White cards on white background, separated by borders.
|
||||
- **Border Subtle** (`rgba(0,0,0,0.05)`): 5% black opacity borders — the primary separation mechanism.
|
||||
- **Border Medium** (`rgba(0,0,0,0.08)`): Slightly stronger borders for interactive elements.
|
||||
- **Input Border Focus** (`var(--color-brand)`): Green ring on focused inputs.
|
||||
|
||||
### Shadows & Depth
|
||||
- **Card Shadow** (`rgba(0,0,0,0.03) 0px 2px 4px`): Barely-there ambient shadow for subtle lift.
|
||||
- **Button Shadow** (`rgba(0,0,0,0.06) 0px 1px 2px`): Micro-shadow for button depth.
|
||||
- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter`, with fallback: `Inter Fallback, system-ui, -apple-system, sans-serif`
|
||||
- **Monospace**: `Geist Mono`, with fallback: `Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |
|
||||
| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |
|
||||
| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |
|
||||
| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |
|
||||
| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |
|
||||
| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |
|
||||
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
|
||||
| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |
|
||||
| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |
|
||||
| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions |
|
||||
| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | `text-transform: uppercase`, section labels |
|
||||
| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text |
|
||||
| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | `text-transform: uppercase`, technical labels |
|
||||
| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | `text-transform: uppercase`, status badges |
|
||||
| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | `text-transform: uppercase`, tiny labels |
|
||||
|
||||
### Principles
|
||||
- **Tight tracking at display sizes**: Inter at 40–64px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient — documentation headings, not billboard copy.
|
||||
- **Relaxed reading at body sizes**: 16–18px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort.
|
||||
- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical/code contexts. The boundary is strict — no mixing.
|
||||
- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px–0.65px) as a clear visual delimiter between content types.
|
||||
- **Three weights**: 400 (body/reading), 500 (UI/navigation/emphasis), 600 (headings/titles). No bold (700) in the system.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Brand (Full-round)**
|
||||
- Background: `#0d0d0d` (near-black)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 24px
|
||||
- Radius: 9999px (full pill)
|
||||
- Font: Inter 15px weight 500
|
||||
- Shadow: `rgba(0,0,0,0.06) 0px 1px 2px`
|
||||
- Hover: opacity 0.9
|
||||
- Use: Primary CTA ("Get Started", "Start Building")
|
||||
|
||||
**Secondary / Ghost (Full-round)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0d0d0d`
|
||||
- Padding: 4.5px 12px
|
||||
- Radius: 9999px (full pill)
|
||||
- Border: `1px solid rgba(0,0,0,0.08)`
|
||||
- Font: Inter 15px weight 500
|
||||
- Hover: opacity 0.9
|
||||
- Use: Secondary actions ("Request Demo", "View Docs")
|
||||
|
||||
**Transparent / Nav Button**
|
||||
- Background: transparent
|
||||
- Text: `#0d0d0d`
|
||||
- Padding: 5px 6px
|
||||
- Radius: 8px
|
||||
- Border: none or `1px solid rgba(0,0,0,0.05)`
|
||||
- Use: Navigation items, icon buttons
|
||||
|
||||
**Brand Accent Button**
|
||||
- Background: `#18E299`
|
||||
- Text: `#0d0d0d`
|
||||
- Padding: 8px 24px
|
||||
- Radius: 9999px
|
||||
- Use: Special promotional CTAs
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**Standard Card**
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid rgba(0,0,0,0.05)`
|
||||
- Radius: 16px
|
||||
- Padding: 24px
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 2px 4px`
|
||||
- Hover: subtle border darkening to `rgba(0,0,0,0.08)`
|
||||
|
||||
**Featured Card**
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid rgba(0,0,0,0.05)`
|
||||
- Radius: 24px
|
||||
- Padding: 32px
|
||||
- Inner content areas may have their own 16px radius containers
|
||||
|
||||
**Logo/Trust Card**
|
||||
- Background: `#fafafa` or `#ffffff`
|
||||
- Border: `1px solid rgba(0,0,0,0.05)`
|
||||
- Radius: 16px
|
||||
- Centered logo/icon with consistent sizing
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Email Input**
|
||||
- Background: transparent or `#ffffff`
|
||||
- Text: `#0d0d0d`
|
||||
- Padding: 0px 12px (height controlled by line-height)
|
||||
- Border: `1px solid rgba(0,0,0,0.08)`
|
||||
- Radius: 9999px (full pill, matching buttons)
|
||||
- Focus: `1px solid var(--color-brand)` + `outline: 1px solid var(--color-brand)`
|
||||
- Placeholder: `#888888`
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white, sticky with backdrop blur
|
||||
- Brand logotype left-aligned
|
||||
- Links: Inter 14–15px weight 500, `#0d0d0d` text
|
||||
- Hover: color shifts to brand green `var(--color-brand)`
|
||||
- CTA: dark pill button right-aligned ("Get Started")
|
||||
- Mobile: hamburger menu collapse at 768px
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots with subtle 1px borders
|
||||
- Rounded containers: 16px–24px radius
|
||||
- Atmospheric gradient backgrounds behind hero images
|
||||
- Cloud/sky imagery with soft green tinting
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Atmospheric Hero**
|
||||
- Full-width gradient wash: soft green-to-white cloud-like gradient
|
||||
- Centered headline with tight tracking
|
||||
- Subtitle in muted gray
|
||||
- Dual CTA buttons (dark primary + ghost secondary)
|
||||
- The gradient creates a sense of elevation and intelligence
|
||||
|
||||
**Trust Bar / Logo Grid**
|
||||
- "Loved by your favorite companies" section
|
||||
- Company logos in muted grayscale
|
||||
- Grid or horizontal layout with consistent sizing
|
||||
- Subtle border separation between logos
|
||||
|
||||
**Feature Cards with Icons**
|
||||
- Icon or illustration at top
|
||||
- Title at 20px weight 600
|
||||
- Description at 14–16px in gray
|
||||
- Consistent padding and border treatment
|
||||
- Grid layout: 2–3 columns on desktop
|
||||
|
||||
**CTA Footer Section**
|
||||
- Dark or gradient background
|
||||
- Large headline: "Make documentation your winning advantage"
|
||||
- Email input with pill styling
|
||||
- Brand green accent on CTAs
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px
|
||||
- Section padding: 48px–96px vertical
|
||||
- Card padding: 24px–32px
|
||||
- Component gaps: 8px–16px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous top padding (96px+)
|
||||
- Feature sections: 2–3 column CSS Grid for cards
|
||||
- Full-width sections with contained content
|
||||
- Consistent horizontal padding: 24px (mobile) to 32px (desktop)
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort.
|
||||
- **Sections as chapters**: Each feature section is a self-contained unit with 48px–96px vertical padding, creating clear "chapter breaks."
|
||||
- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1–2 key messages per section with supporting imagery.
|
||||
|
||||
### Border Radius Scale
|
||||
- Small (4px): Inline code, small tags, tooltips
|
||||
- Medium (8px): Nav buttons, transparent buttons, small containers
|
||||
- Standard (16px): Cards, content containers, image wrappers
|
||||
- Large (24px): Featured cards, hero containers, section panels
|
||||
- Full Pill (9999px): Buttons, inputs, badges, pills — the signature shape
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
|
||||
| Subtle Border (Level 1) | `1px solid rgba(0,0,0,0.05)` | Standard card borders, dividers |
|
||||
| Medium Border (Level 1b) | `1px solid rgba(0,0,0,0.08)` | Interactive elements, input borders |
|
||||
| Ambient Shadow (Level 2) | `rgba(0,0,0,0.03) 0px 2px 4px` | Cards with subtle lift |
|
||||
| Button Shadow (Level 2b) | `rgba(0,0,0,0.06) 0px 1px 2px` | Button micro-depth |
|
||||
| Focus Ring (Accessibility) | `1px solid #18E299` outline | Focused inputs, active interactive elements |
|
||||
|
||||
**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (`0.03 opacity, 2px blur, 4px spread`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability.
|
||||
|
||||
### Decorative Depth
|
||||
- Hero gradient: atmospheric green-white cloud gradient behind hero content
|
||||
- No background color alternation — white on white throughout
|
||||
- Depth comes from border opacity variation (5% → 8%) and whitespace
|
||||
|
||||
## 7. Dark Mode
|
||||
|
||||
### Color Inversions
|
||||
- **Background**: `#0d0d0d` (near-black)
|
||||
- **Text Primary**: `#ededed` (near-white)
|
||||
- **Text Secondary**: `#a0a0a0` (muted gray)
|
||||
- **Brand Green**: `#18E299` (unchanged — the green works on both backgrounds)
|
||||
- **Border**: `rgba(255,255,255,0.08)` (white at 8% opacity)
|
||||
- **Card Background**: `#141414` (slightly lighter than page)
|
||||
- **Shadow**: `rgba(0,0,0,0.4) 0px 2px 4px` (stronger shadow for contrast)
|
||||
|
||||
### Key Adjustments
|
||||
- Buttons invert: white background dark text becomes dark background light text
|
||||
- Badge backgrounds shift to deeper tones with lighter text
|
||||
- Focus ring remains brand green
|
||||
- Hero gradient shifts to dark-tinted green atmospheric wash
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, stacked layout, hamburger nav |
|
||||
| Tablet | 768–1024px | Two-column grids begin, expanded padding |
|
||||
| Desktop | >1024px | Full layout, 3-column grids, maximum content width |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons with full-pill shape have comfortable 8px+ vertical padding
|
||||
- Navigation links spaced with adequate 16px+ gaps
|
||||
- Mobile menu provides full-width tap targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 64px → 40px headline, maintains tight tracking proportionally
|
||||
- Navigation: horizontal links + CTA → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Section spacing: 96px → 48px on mobile
|
||||
- Footer: multi-column → stacked single column
|
||||
- Trust bar: grid → horizontal scroll or stacked
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots maintain aspect ratio with responsive containers
|
||||
- Hero gradient simplifies on mobile
|
||||
- Full-width sections maintain edge-to-edge treatment
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Near Black (`#0d0d0d`)
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Heading text: Near Black (`#0d0d0d`)
|
||||
- Body text: Gray 700 (`#333333`)
|
||||
- Border: `rgba(0,0,0,0.05)` (5% opacity)
|
||||
- Brand accent: Green (`#18E299`)
|
||||
- Link hover: Brand Green (`#18E299`)
|
||||
- Focus ring: Brand Green (`#18E299`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius)."
|
||||
- "Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666."
|
||||
- "Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase."
|
||||
- "Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05)."
|
||||
- "Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use full-pill radius (9999px) for buttons and inputs — this is Mintlify's signature shape
|
||||
2. Keep borders at 5% opacity (`rgba(0,0,0,0.05)`) — stronger borders break the airy feeling
|
||||
3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px
|
||||
4. Three weights only: 400 (read), 500 (interact), 600 (announce)
|
||||
5. Brand green (`#18E299`) is used sparingly — CTAs and hover states only, never for decorative fills
|
||||
6. Geist Mono uppercase for technical labels, Inter for everything else
|
||||
7. Section padding is generous: 64px–96px on desktop, 48px on mobile
|
||||
8. No gray background sections — white throughout, separation through borders and whitespace
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Mintlify Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) extracted from the public [Mintlify](https://mintlify.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/mintlify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mintlify 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
|
||||
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
<!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 Mintlify</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&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #ededed;
|
||||
--white: #0d0d0d;
|
||||
--gray-50: #141414;
|
||||
--gray-100: #1a1a1a;
|
||||
--gray-200: #2a2a2a;
|
||||
--gray-400: #666666;
|
||||
--gray-500: #888888;
|
||||
--gray-700: #a0a0a0;
|
||||
--brand: #18E299;
|
||||
--brand-light: #0d3d2a;
|
||||
--brand-deep: #5eedb8;
|
||||
--warn: #e6a733;
|
||||
--info-blue: #5b94e0;
|
||||
--error: #e06b6b;
|
||||
--border-subtle: rgba(255,255,255,0.06);
|
||||
--border-medium: rgba(255,255,255,0.10);
|
||||
--shadow-ambient: rgba(0,0,0,0.3) 0px 2px 4px;
|
||||
--shadow-button: rgba(0,0,0,0.4) 0px 1px 2px;
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', 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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--brand); color: #0d0d0d;
|
||||
padding: 6px 14px; border-radius: 9999px;
|
||||
font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(13,13,13,0.88);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--black); 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(--gray-500); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--brand); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 7px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.88; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 96px 32px 80px; text-align: center;
|
||||
background: linear-gradient(180deg, #061f14 0%, #0f1a15 30%, #0d0d0d 100%);
|
||||
position: relative;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 56px; font-weight: 600; line-height: 1.10;
|
||||
letter-spacing: -1.28px; color: var(--black); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--gray-500); 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(--black); color: var(--white);
|
||||
padding: 10px 24px; border-radius: 9999px; border: none;
|
||||
font-family: var(--font-sans); font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-button);
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.88; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--black);
|
||||
padding: 10px 24px; border-radius: 9999px; border: 1px solid var(--border-medium);
|
||||
font-family: var(--font-sans); font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--gray-400); }
|
||||
|
||||
/* 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(--gray-400); text-transform: uppercase; margin-bottom: 8px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.20; letter-spacing: -0.8px; 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: 16px; overflow: hidden; 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: 600; margin-bottom: 2px; letter-spacing: -0.26px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); letter-spacing: -0.28px; 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: 500; color: var(--gray-400); 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(--gray-400); margin-top: 8px; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: #0d0d0d;
|
||||
padding: 10px 24px; border-radius: 9999px; font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-pill-badge {
|
||||
display: inline-block; background: var(--brand-light); color: var(--brand-deep);
|
||||
padding: 4px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500;
|
||||
text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: var(--gray-50); border-radius: 16px; padding: 24px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-ambient);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.card:hover { border-color: var(--border-medium); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }
|
||||
.card-badge {
|
||||
display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
|
||||
text-transform: uppercase; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* FEATURED CARD */
|
||||
.card-featured {
|
||||
background: var(--gray-50); border-radius: 24px; padding: 32px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-ambient);
|
||||
}
|
||||
.card-featured h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card-featured p { font-size: 16px; color: var(--gray-500); line-height: 1.50; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--gray-50); color: var(--black);
|
||||
border: 1px solid var(--border-medium); padding: 10px 16px; border-radius: 9999px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
|
||||
.form-input--focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
|
||||
.form-input--error { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--gray-50); color: var(--black);
|
||||
border: 1px solid var(--border-medium); padding: 12px 16px; border-radius: 16px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--gray-400); 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: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }
|
||||
|
||||
/* 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(--black); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }
|
||||
.radius-context { font-size: 10px; color: var(--gray-400); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--gray-50); border-radius: 16px; 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(--gray-400); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--gray-500); }
|
||||
.footer a { color: var(--brand); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; 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="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Mintlify</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="#">Get Started</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:#0d0d0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0d0d0d</div><div class="color-swatch-role">Dark background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ededed"></div><div class="color-swatch-info"><div class="color-swatch-name">Near White</div><div class="color-swatch-hex">#ededed</div><div class="color-swatch-role">Primary text (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#18E299"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Green</div><div class="color-swatch-hex">#18E299</div><div class="color-swatch-role">Brand accent, CTAs</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand Extended</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0d3d2a"></div><div class="color-swatch-info"><div class="color-swatch-name">Green Dark</div><div class="color-swatch-hex">#0d3d2a</div><div class="color-swatch-role">Badge bg (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5eedb8"></div><div class="color-swatch-info"><div class="color-swatch-name">Green Light</div><div class="color-swatch-hex">#5eedb8</div><div class="color-swatch-role">Badge text (dark)</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ba673"></div><div class="color-swatch-info"><div class="color-swatch-name">Annotate Green</div><div class="color-swatch-hex">#1ba673</div><div class="color-swatch-role">Code annotations</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b94e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Info Blue</div><div class="color-swatch-hex">#5b94e0</div><div class="color-swatch-role">Tags, annotations</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6a733"></div><div class="color-swatch-info"><div class="color-swatch-name">Warn Amber</div><div class="color-swatch-hex">#e6a733</div><div class="color-swatch-role">Warnings, caution</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e06b6b"></div><div class="color-swatch-info"><div class="color-swatch-name">Error Red</div><div class="color-swatch-hex">#e06b6b</div><div class="color-swatch-role">Errors, destructive</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale (Dark)</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#a0a0a0"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#a0a0a0</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#888888"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 500</div><div class="color-swatch-hex">#888888</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#666666"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 400</div><div class="color-swatch-hex">#666666</div><div class="color-swatch-role">Placeholders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2a2a2a"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 200</div><div class="color-swatch-hex">#2a2a2a</div><div class="color-swatch-role">Borders</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">Gray 100</div><div class="color-swatch-hex">#1a1a1a</div><div class="color-swatch-role">Surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#141414"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#141414</div><div class="color-swatch-role">Card background</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:600; line-height:1.10; letter-spacing:-1.28px;">Display Hero</div><div class="type-meta">Display Hero — 56px / 600 / 1.10 / -1.28px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.8px;">Section Heading</div><div class="type-meta">Section Heading — 40px / 600 / 1.10 / -0.8px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.30; letter-spacing:-0.24px;">Sub-heading</div><div class="type-meta">Sub-heading — 24px / 500 / 1.30 / -0.24px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.30; letter-spacing:-0.2px;">Card Title</div><div class="type-meta">Card Title — 20px / 600 / 1.30 / -0.2px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.50;">Body Large — The intelligent knowledge platform that powers your documentation, APIs, and guides.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / normal / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for documentation and content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / normal / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.50;">Button Label</div><div class="type-meta">Button — 15px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.50;">Link / Caption</div><div class="type-meta">Link / Caption — 14px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.65px;">Section Label</div><div class="type-meta">Label Uppercase — 13px / 500 / uppercase / 0.65px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.6px;">MONO TECHNICAL LABEL</div><div class="type-meta">Mono Code — 12px / 500 / uppercase / 0.6px / Geist Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:10px; font-weight:500; line-height:1.50; text-transform:uppercase;">MICRO LABEL</div><div class="type-meta">Mono Micro — 10px / 500 / uppercase / 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-dark" href="#">Get Started</a><div class="button-label">Primary</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-brand" href="#">Start Building</a><div class="button-label">Brand Accent</div></div>
|
||||
<div class="button-item"><span class="btn-pill-badge">Documentation</span><div class="button-label">Pill Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(91,148,224,0.15); color:#5b94e0; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;">Info</span><div class="button-label">Info Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(230,167,51,0.15); color:#e6a733; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;">Warning</span><div class="button-label">Warning Badge</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(--brand-light); color:var(--brand-deep);">Docs</div>
|
||||
<h3>Intelligent Search</h3>
|
||||
<p>AI-powered search that understands your documentation and delivers precise answers to developer questions.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(91,148,224,0.12); color:#5b94e0;">API</div>
|
||||
<h3>API Reference</h3>
|
||||
<p>Auto-generated API documentation with interactive examples, authentication flows, and code snippets.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(230,167,51,0.12); color:#e6a733;">Analytics</div>
|
||||
<h3>Documentation Analytics</h3>
|
||||
<p>Track what developers search for, which pages perform best, and where they get stuck.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:32px;">
|
||||
<div class="color-group-label">Featured Card (24px radius)</div>
|
||||
<div class="card-featured">
|
||||
<div class="card-badge" style="background:var(--brand-light); color:var(--brand-deep);">Featured</div>
|
||||
<h3>The Intelligent Knowledge Platform</h3>
|
||||
<p>Build beautiful documentation that powers your developer community. AI-enhanced, automatically updated, and always in sync with 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">Email Address</label><input class="form-input" type="text" placeholder="you@company.com"><div class="form-state-label">Default (pill shape)</div></div>
|
||||
<div class="form-group"><label class="form-label">Organization</label><input class="form-input form-input--focus" type="text" value="Mintlify"><div class="form-state-label">Focus (green 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">Description</label><textarea class="form-textarea" placeholder="Tell us about 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: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: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" 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">Code, 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">Nav buttons</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:24px"></div><div class="radius-label">24px</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">Buttons, 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-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle); box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">6% border + ambient</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-medium); box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 2: Medium</div><div class="elevation-desc">10% border + ambient</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-medium); box-shadow: rgba(0,0,0,0.4) 0px 4px 12px;"><div class="elevation-label">Level 3: Raised</div><div class="elevation-desc">Stronger shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--brand); box-shadow: 0 0 0 1px var(--brand);"><div class="elevation-label">Focus Ring</div><div class="elevation-desc">Brand green 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>
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
<!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 Mintlify</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&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #0d0d0d;
|
||||
--white: #ffffff;
|
||||
--gray-50: #fafafa;
|
||||
--gray-100: #f5f5f5;
|
||||
--gray-200: #e5e5e5;
|
||||
--gray-400: #888888;
|
||||
--gray-500: #666666;
|
||||
--gray-700: #333333;
|
||||
--brand: #18E299;
|
||||
--brand-light: #d4fae8;
|
||||
--brand-deep: #0fa76e;
|
||||
--warn: #c37d0d;
|
||||
--info-blue: #3772cf;
|
||||
--error: #d45656;
|
||||
--border-subtle: rgba(0,0,0,0.05);
|
||||
--border-medium: rgba(0,0,0,0.08);
|
||||
--shadow-ambient: rgba(0,0,0,0.03) 0px 2px 4px;
|
||||
--shadow-button: rgba(0,0,0,0.06) 0px 1px 2px;
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', 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;
|
||||
-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(255,255,255,0.88);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--black); 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(--gray-500); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--brand); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 7px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.88; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 96px 32px 80px; text-align: center;
|
||||
background: linear-gradient(180deg, #e8faf1 0%, #f0fdf6 30%, #ffffff 100%);
|
||||
position: relative;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 56px; font-weight: 600; line-height: 1.10;
|
||||
letter-spacing: -1.28px; color: var(--black); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--gray-500); 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(--black); color: var(--white);
|
||||
padding: 10px 24px; border-radius: 9999px; border: none;
|
||||
font-family: var(--font-sans); font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
box-shadow: var(--shadow-button);
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.88; }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: var(--white); color: var(--black);
|
||||
padding: 10px 24px; border-radius: 9999px; border: 1px solid var(--border-medium);
|
||||
font-family: var(--font-sans); font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--gray-400); }
|
||||
|
||||
/* 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(--gray-400); text-transform: uppercase; margin-bottom: 8px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.20; letter-spacing: -0.8px; 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: 16px; overflow: hidden; 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: 600; margin-bottom: 2px; letter-spacing: -0.26px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); letter-spacing: -0.28px; 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: 500; color: var(--gray-400); 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(--gray-400); margin-top: 8px; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: var(--black);
|
||||
padding: 10px 24px; border-radius: 9999px; font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-pill-badge {
|
||||
display: inline-block; background: var(--brand-light); color: var(--brand-deep);
|
||||
padding: 4px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500;
|
||||
text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: var(--white); border-radius: 16px; padding: 24px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-ambient);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.card:hover { border-color: var(--border-medium); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }
|
||||
.card-badge {
|
||||
display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
|
||||
text-transform: uppercase; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* FEATURED CARD */
|
||||
.card-featured {
|
||||
background: var(--white); border-radius: 24px; padding: 32px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-ambient);
|
||||
}
|
||||
.card-featured h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card-featured p { font-size: 16px; color: var(--gray-500); line-height: 1.50; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--white); color: var(--black);
|
||||
border: 1px solid var(--border-medium); padding: 10px 16px; border-radius: 9999px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
|
||||
.form-input--focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
|
||||
.form-input--error { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--white); color: var(--black);
|
||||
border: 1px solid var(--border-medium); padding: 12px 16px; border-radius: 16px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--gray-400); 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: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }
|
||||
|
||||
/* 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(--black); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }
|
||||
.radius-context { font-size: 10px; color: var(--gray-400); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 16px; 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(--gray-400); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--gray-500); }
|
||||
.footer a { color: var(--brand); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 40px; 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="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Mintlify</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="#">Get Started</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:#0d0d0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0d0d0d</div><div class="color-swatch-role">Primary text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e5e5e5"></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">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#18E299"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Green</div><div class="color-swatch-hex">#18E299</div><div class="color-swatch-role">Brand accent, CTAs</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand Extended</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d4fae8"></div><div class="color-swatch-info"><div class="color-swatch-name">Green Light</div><div class="color-swatch-hex">#d4fae8</div><div class="color-swatch-role">Badge backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0fa76e"></div><div class="color-swatch-info"><div class="color-swatch-name">Green Deep</div><div class="color-swatch-hex">#0fa76e</div><div class="color-swatch-role">Badge text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ba673"></div><div class="color-swatch-info"><div class="color-swatch-name">Annotate Green</div><div class="color-swatch-hex">#1ba673</div><div class="color-swatch-role">Code annotations</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3772cf"></div><div class="color-swatch-info"><div class="color-swatch-name">Info Blue</div><div class="color-swatch-hex">#3772cf</div><div class="color-swatch-role">Tags, annotations</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c37d0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Warn Amber</div><div class="color-swatch-hex">#c37d0d</div><div class="color-swatch-role">Warnings, caution</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d45656"></div><div class="color-swatch-info"><div class="color-swatch-name">Error Red</div><div class="color-swatch-hex">#d45656</div><div class="color-swatch-role">Errors, destructive</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:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#333333</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#666666"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 500</div><div class="color-swatch-hex">#666666</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#888888"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 400</div><div class="color-swatch-hex">#888888</div><div class="color-swatch-role">Placeholders</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">Gray 200</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5; border-bottom:1px solid #e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 100</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Subtle surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fafafa; border-bottom:1px solid #e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#fafafa</div><div class="color-swatch-role">Near-white tint</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:600; line-height:1.10; letter-spacing:-1.28px;">Display Hero</div><div class="type-meta">Display Hero — 56px / 600 / 1.10 / -1.28px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.8px;">Section Heading</div><div class="type-meta">Section Heading — 40px / 600 / 1.10 / -0.8px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.30; letter-spacing:-0.24px;">Sub-heading</div><div class="type-meta">Sub-heading — 24px / 500 / 1.30 / -0.24px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.30; letter-spacing:-0.2px;">Card Title</div><div class="type-meta">Card Title — 20px / 600 / 1.30 / -0.2px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.50;">Body Large — The intelligent knowledge platform that powers your documentation, APIs, and guides.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / normal / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for documentation and content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / normal / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.50;">Button Label</div><div class="type-meta">Button — 15px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.50;">Link / Caption</div><div class="type-meta">Link / Caption — 14px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.65px;">Section Label</div><div class="type-meta">Label Uppercase — 13px / 500 / uppercase / 0.65px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.6px;">MONO TECHNICAL LABEL</div><div class="type-meta">Mono Code — 12px / 500 / uppercase / 0.6px / Geist Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:10px; font-weight:500; line-height:1.50; text-transform:uppercase;">MICRO LABEL</div><div class="type-meta">Mono Micro — 10px / 500 / uppercase / 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-dark" href="#">Get Started</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-brand" href="#">Start Building</a><div class="button-label">Brand Accent</div></div>
|
||||
<div class="button-item"><span class="btn-pill-badge">Documentation</span><div class="button-label">Pill Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(55,114,207,0.12); color:#3772cf; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;">Info</span><div class="button-label">Info Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(195,125,13,0.12); color:#c37d0d; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;">Warning</span><div class="button-label">Warning Badge</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(--brand-light); color:var(--brand-deep);">Docs</div>
|
||||
<h3>Intelligent Search</h3>
|
||||
<p>AI-powered search that understands your documentation and delivers precise answers to developer questions.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(55,114,207,0.1); color:#3772cf;">API</div>
|
||||
<h3>API Reference</h3>
|
||||
<p>Auto-generated API documentation with interactive examples, authentication flows, and code snippets.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(195,125,13,0.1); color:#c37d0d;">Analytics</div>
|
||||
<h3>Documentation Analytics</h3>
|
||||
<p>Track what developers search for, which pages perform best, and where they get stuck.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:32px;">
|
||||
<div class="color-group-label">Featured Card (24px radius)</div>
|
||||
<div class="card-featured">
|
||||
<div class="card-badge" style="background:var(--brand-light); color:var(--brand-deep);">Featured</div>
|
||||
<h3>The Intelligent Knowledge Platform</h3>
|
||||
<p>Build beautiful documentation that powers your developer community. AI-enhanced, automatically updated, and always in sync with 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">Email Address</label><input class="form-input" type="text" placeholder="you@company.com"><div class="form-state-label">Default (pill shape)</div></div>
|
||||
<div class="form-group"><label class="form-label">Organization</label><input class="form-input form-input--focus" type="text" value="Mintlify"><div class="form-state-label">Focus (green 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">Description</label><textarea class="form-textarea" placeholder="Tell us about 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: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: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" 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">Code, 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">Nav buttons</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:24px"></div><div class="radius-label">24px</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">Buttons, 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-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle); box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">5% border + ambient</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-medium); box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 2: Medium</div><div class="elevation-desc">8% border + ambient</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-medium); box-shadow: rgba(0,0,0,0.06) 0px 4px 12px;"><div class="elevation-label">Level 3: Raised</div><div class="elevation-desc">Stronger shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--brand); box-shadow: 0 0 0 1px var(--brand);"><div class="elevation-label">Focus Ring</div><div class="elevation-desc">Brand green 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>
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
# Design System Inspiration of Stripe
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry.
|
||||
|
||||
The custom `sohne-var` variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType `"ss01"` stylistic set, which modifies character shapes for a distinctly geometric, modern feel. At display sizes (48px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the "bold hero headline" convention; Stripe's headlines feel like they don't need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks. At smaller sizes, the system also uses weight 300 with proportionally reduced tracking, and tabular numerals via `"tnum"` for financial data display.
|
||||
|
||||
What truly distinguishes Stripe is its shadow system. Rather than the flat or single-layer approach of most sites, Stripe uses multi-layer, blue-tinted shadows: the signature `rgba(50,50,93,0.25)` combined with `rgba(0,0,0,0.1)` creates shadows with a cool, almost atmospheric depth -- like elements are floating in a twilight sky. The blue-gray undertone of the primary shadow color (50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand.
|
||||
|
||||
**Key Characteristics:**
|
||||
- sohne-var with OpenType `"ss01"` on all text -- a custom stylistic set that defines the brand's letterforms
|
||||
- Weight 300 as the signature headline weight -- light, confident, anti-convention
|
||||
- Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward)
|
||||
- Blue-tinted multi-layer shadows using `rgba(50,50,93,0.25)` -- elevation that feels brand-colored
|
||||
- Deep navy (`#061b31`) headings instead of black -- warm, premium, financial-grade
|
||||
- Conservative border-radius (4px-8px) -- nothing pill-shaped, nothing harsh
|
||||
- Ruby (`#ea2261`) and magenta (`#f96bee`) accents for gradient and decorative elements
|
||||
- `SourceCodePro` as the monospace companion for code and technical labels
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system.
|
||||
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text.
|
||||
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark backgrounds.
|
||||
|
||||
### Brand & Dark
|
||||
- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Deep indigo for dark sections, footer backgrounds, and immersive brand moments.
|
||||
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness.
|
||||
|
||||
### Accent Colors
|
||||
- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Warm red-pink for icons, alerts, and accent elements.
|
||||
- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple for gradients and decorative highlights.
|
||||
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Tinted surface for magenta-themed cards and badges.
|
||||
|
||||
### Interactive
|
||||
- **Primary Purple** (`#533afd`): Primary link color, active states, selected elements.
|
||||
- **Purple Hover** (`#4434d4`): Darker purple for hover states on primary elements.
|
||||
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Dark purple for icon hover states.
|
||||
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Soft lavender for subdued hover backgrounds.
|
||||
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range selector and input highlight color.
|
||||
|
||||
### Neutral Scale
|
||||
- **Heading** (`#061b31`): Primary headings, nav text, strong labels.
|
||||
- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary headings.
|
||||
- **Body** (`#64748d`): Secondary text, descriptions, captions.
|
||||
- **Success Green** (`#15be53`): Status badges, success indicators (with 0.2-0.4 alpha for backgrounds/borders).
|
||||
- **Success Text** (`#108c3d`): Success badge text color.
|
||||
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight accent.
|
||||
|
||||
### Surface & Borders
|
||||
- **Border Default** (`#e5edf5`): Standard border color for cards, dividers, and containers.
|
||||
- **Border Purple** (`#b9b9f9`): Active/selected state borders on buttons and inputs.
|
||||
- **Border Soft Purple** (`#d6d9fc`): Subtle purple-tinted borders for secondary elements.
|
||||
- **Border Magenta** (`#ffd7ef`): Pink-tinted borders for magenta-themed elements.
|
||||
- **Border Dashed** (`#362baa`): Dashed borders for drop zones and placeholder elements.
|
||||
|
||||
### Shadow Colors
|
||||
- **Shadow Blue** (`rgba(50,50,93,0.25)`): The signature -- blue-tinted primary shadow color.
|
||||
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Deeper blue shadow for elevated elements.
|
||||
- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth reinforcement.
|
||||
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Soft ambient shadow for subtle elevation.
|
||||
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient shadow for light lift.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `sohne-var`, with fallback: `SF Pro Display`
|
||||
- **Monospace**: `SourceCodePro`, with fallback: `SFMono-Regular`
|
||||
- **OpenType Features**: `"ss01"` enabled globally on all sohne-var text; `"tnum"` for tabular numbers on financial data and captions.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |
|
||||
|------|------|------|--------|-------------|----------------|----------|-------|
|
||||
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority |
|
||||
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | Secondary hero headlines |
|
||||
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles |
|
||||
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections |
|
||||
| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads |
|
||||
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text |
|
||||
| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standard reading text |
|
||||
| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | Primary button text |
|
||||
| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Secondary/compact buttons |
|
||||
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Navigation links |
|
||||
| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Small labels, metadata |
|
||||
| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Fine print, timestamps |
|
||||
| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Financial data, numbers |
|
||||
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | Tiny labels, axis markers |
|
||||
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | Chart data, small numbers |
|
||||
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | Smallest labels |
|
||||
| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | Code blocks, syntax |
|
||||
| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | Bold code, keywords |
|
||||
| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | Technical labels |
|
||||
| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | Tiny code annotations |
|
||||
|
||||
### Principles
|
||||
- **Light weight as signature**: Weight 300 at display sizes is Stripe's most distinctive typographic choice. Where others use 600-700 to command attention, Stripe uses lightness as luxury -- the text is so confident it doesn't need weight to be authoritative.
|
||||
- **ss01 everywhere**: The `"ss01"` stylistic set is non-negotiable. It modifies specific glyphs (likely alternate `a`, `g`, `l` forms) to create a more geometric, contemporary feel across all sohne-var text.
|
||||
- **Two OpenType modes**: `"ss01"` for display/body text, `"tnum"` for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a data table uses tnum.
|
||||
- **Progressive tracking**: Letter-spacing tightens proportionally with size: -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, -0.26px at 26px, normal at 16px and below.
|
||||
- **Two-weight simplicity**: Primarily 300 (body and headings) and 400 (UI/buttons). No bold (700) in the primary font -- SourceCodePro uses 500/700 for code contrast.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Purple**
|
||||
- Background: `#533afd`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Font: 16px sohne-var weight 400, `"ss01"`
|
||||
- Hover: `#4434d4` background
|
||||
- Use: Primary CTA ("Start now", "Contact sales")
|
||||
|
||||
**Ghost / Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#533afd`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid #b9b9f9`
|
||||
- Font: 16px sohne-var weight 400, `"ss01"`
|
||||
- Hover: background shifts to `rgba(83,58,253,0.05)`
|
||||
- Use: Secondary actions
|
||||
|
||||
**Transparent Info**
|
||||
- Background: transparent
|
||||
- Text: `#2874ad`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid rgba(43,145,223,0.2)`
|
||||
- Use: Tertiary/info-level actions
|
||||
|
||||
**Neutral Ghost**
|
||||
- Background: transparent (`rgba(255,255,255,0)`)
|
||||
- Text: `rgba(16,16,16,0.3)`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Outline: `1px solid rgb(212,222,233)`
|
||||
- Use: Disabled or muted actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid #e5edf5` (standard) or `1px solid #061b31` (dark accent)
|
||||
- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured)
|
||||
- Shadow (standard): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
|
||||
- Shadow (ambient): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
|
||||
- Hover: shadow intensifies, often adding the blue-tinted layer
|
||||
|
||||
### Badges / Tags / Pills
|
||||
**Neutral Pill**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Padding: 0px 6px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid #f6f9fc`
|
||||
- Font: 11px weight 400
|
||||
|
||||
**Success Badge**
|
||||
- Background: `rgba(21,190,83,0.2)`
|
||||
- Text: `#108c3d`
|
||||
- Padding: 1px 6px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid rgba(21,190,83,0.4)`
|
||||
- Font: 10px weight 300
|
||||
|
||||
### Inputs & Forms
|
||||
- Border: `1px solid #e5edf5`
|
||||
- Radius: 4px
|
||||
- Focus: `1px solid #533afd` or purple ring
|
||||
- Label: `#273951`, 14px sohne-var
|
||||
- Text: `#061b31`
|
||||
- Placeholder: `#64748d`
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white, sticky with blur backdrop
|
||||
- Brand logotype left-aligned
|
||||
- Links: sohne-var 14px weight 400, `#061b31` text with `"ss01"`
|
||||
- Radius: 6px on nav container
|
||||
- CTA: purple button right-aligned ("Sign in", "Start now")
|
||||
- Mobile: hamburger toggle with 6px radius
|
||||
|
||||
### Decorative Elements
|
||||
**Dashed Borders**
|
||||
- `1px dashed #362baa` (purple) for placeholder/drop zones
|
||||
- `1px dashed #ffd7ef` (magenta) for magenta-themed decorative borders
|
||||
|
||||
**Gradient Accents**
|
||||
- Ruby-to-magenta gradients (`#ea2261` to `#f96bee`) for hero decorations
|
||||
- Brand dark sections use `#1c1e54` backgrounds with white text
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
|
||||
- Notable: The scale is dense at the small end (every 2px from 4-12), reflecting Stripe's precision-oriented UI for financial data
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1080px
|
||||
- Hero: centered single-column with generous padding, lightweight headlines
|
||||
- Feature sections: 2-3 column grids for feature cards
|
||||
- Full-width dark sections with `#1c1e54` background for brand immersion
|
||||
- Code/dashboard previews as contained cards with blue-tinted shadows
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Precision spacing**: Unlike the vast emptiness of minimalist systems, Stripe uses measured, purposeful whitespace. Every gap is a deliberate typographic choice.
|
||||
- **Dense data, generous chrome**: Financial data displays (tables, charts) are tightly packed, but the UI chrome around them is generously spaced. This creates a sense of controlled density -- like a well-organized spreadsheet in a beautiful frame.
|
||||
- **Section rhythm**: White sections alternate with dark brand sections (`#1c1e54`), creating a dramatic light/dark cadence that prevents monotony without introducing arbitrary color.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (1px): Fine-grained elements, subtle rounding
|
||||
- Standard (4px): Buttons, inputs, badges, cards -- the workhorse
|
||||
- Comfortable (5px): Standard card containers
|
||||
- Relaxed (6px): Navigation, larger interactive elements
|
||||
- Large (8px): Featured cards, hero elements
|
||||
- Compound: `0px 0px 6px 6px` for bottom-rounded containers (tab panels, dropdown footers)
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, inline text |
|
||||
| Ambient (Level 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtle card lift, hover hints |
|
||||
| Standard (Level 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Standard cards, content panels |
|
||||
| Elevated (Level 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Featured cards, dropdowns, popovers |
|
||||
| Deep (Level 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modals, floating panels |
|
||||
| Ring (Accessibility) | `2px solid #533afd` outline | Keyboard focus ring |
|
||||
|
||||
**Shadow Philosophy**: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (`rgba(50,50,93,0.25)`) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (`rgba(0,0,0,0.1)`) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled.
|
||||
|
||||
### Decorative Depth
|
||||
- Dark brand sections (`#1c1e54`) create immersive depth through background color contrast
|
||||
- Gradient overlays with ruby-to-magenta transitions for hero decorations
|
||||
- Shadow color `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) for top-edge shadows on sticky elements
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use sohne-var with `"ss01"` on every text element -- the stylistic set IS the brand
|
||||
- Use weight 300 for all headlines and body text -- lightness is the signature
|
||||
- Apply blue-tinted shadows (`rgba(50,50,93,0.25)`) for all elevated elements
|
||||
- Use `#061b31` (deep navy) for headings instead of `#000000` -- the warmth matters
|
||||
- Keep border-radius between 4px-8px -- conservative rounding is intentional
|
||||
- Use `"tnum"` for any tabular/financial number display
|
||||
- Layer shadows: blue-tinted far + neutral close for depth parallax
|
||||
- Use `#533afd` purple as the primary interactive/CTA color
|
||||
|
||||
### Don't
|
||||
- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice
|
||||
- Don't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe is conservative
|
||||
- Don't use neutral gray shadows -- always tint with blue (`rgba(50,50,93,...)`)
|
||||
- Don't skip `"ss01"` on any sohne-var text -- the alternate glyphs define the personality
|
||||
- Don't use pure black (`#000000`) for headings -- always `#061b31` deep navy
|
||||
- Don't use warm accent colors (orange, yellow) for interactive elements -- purple is primary
|
||||
- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight
|
||||
- Don't use the magenta/ruby accents for buttons or links -- they're decorative/gradient only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, reduced heading sizes, stacked cards |
|
||||
| Tablet | 640-1024px | 2-column grids, moderate padding |
|
||||
| Desktop | 1024-1280px | Full layout, 3-column feature grids |
|
||||
| Large Desktop | >1280px | Centered content with generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding (8px-16px vertical)
|
||||
- Navigation links at 14px with adequate spacing
|
||||
- Badges have 6px horizontal padding minimum for tap targets
|
||||
- Mobile nav toggle with 6px radius button
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 56px display -> 32px on mobile, weight 300 maintained
|
||||
- Navigation: horizontal links + CTAs -> hamburger toggle
|
||||
- Feature cards: 3-column -> 2-column -> single column stacked
|
||||
- Dark brand sections: maintain full-width treatment, reduce internal padding
|
||||
- Financial data tables: horizontal scroll on mobile
|
||||
- Section spacing: 64px+ -> 40px on mobile
|
||||
- Typography scale compresses: 56px -> 48px -> 32px hero sizes across breakpoints
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard/product screenshots maintain blue-tinted shadow at all sizes
|
||||
- Hero gradient decorations simplify on mobile
|
||||
- Code blocks maintain `SourceCodePro` treatment, may horizontally scroll
|
||||
- Card images maintain consistent 4px-6px border-radius
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Stripe Purple (`#533afd`)
|
||||
- CTA Hover: Purple Dark (`#4434d4`)
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Heading text: Deep Navy (`#061b31`)
|
||||
- Body text: Slate (`#64748d`)
|
||||
- Label text: Dark Slate (`#273951`)
|
||||
- Border: Soft Blue (`#e5edf5`)
|
||||
- Link: Stripe Purple (`#533afd`)
|
||||
- Dark section: Brand Dark (`#1c1e54`)
|
||||
- Success: Green (`#15be53`)
|
||||
- Accent decorative: Ruby (`#ea2261`), Magenta (`#f96bee`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background. Headline at 48px sohne-var weight 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px radius)."
|
||||
- "Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, 'ss01'. Body at 16px weight 300, #64748d."
|
||||
- "Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid rgba(21,190,83,0.4)."
|
||||
- "Create navigation: white sticky header with backdrop-filter blur(12px). sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px radius."
|
||||
- "Design a dark brand section: #1c1e54 background, white text. Headline 32px sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300, rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px radius."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always enable `font-feature-settings: "ss01"` on sohne-var text -- this is the brand's typographic DNA
|
||||
2. Weight 300 is the default; use 400 only for buttons/links/navigation
|
||||
3. Shadow formula: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` where Y1/B1 are larger (far shadow) and Y2/B2 are smaller (near shadow)
|
||||
4. Heading color is `#061b31` (deep navy), body is `#64748d` (slate), labels are `#273951` (dark slate)
|
||||
5. Border-radius stays in the 4px-8px range -- never use pill shapes or large rounding
|
||||
6. Use `"tnum"` for any numbers in tables, charts, or financial displays
|
||||
7. Dark sections use `#1c1e54` -- not black, not gray, but a deep branded indigo
|
||||
8. SourceCodePro for code at 12px/500 with 2.00 line-height (very generous for readability)
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Stripe Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) extracted from the public [Stripe](https://stripe.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/stripe/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Stripe 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
|
||||
|
||||
|
|
@ -0,0 +1,428 @@
|
|||
<!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 Stripe</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=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'sohne-var';
|
||||
src: local('sohne-var'), local('Sohne'), local('SF Pro Display');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
:root {
|
||||
--purple: #665efd;
|
||||
--purple-hover: #7a73ff;
|
||||
--purple-deep: #533afd;
|
||||
--purple-light: #3d3a7a;
|
||||
--purple-mid: #b9b9f9;
|
||||
--navy: #e8ecf0;
|
||||
--dark-navy: #c8d0da;
|
||||
--brand-dark: #0e0f2e;
|
||||
--white: #0e0f2e;
|
||||
--ruby: #ea2261;
|
||||
--magenta: #f96bee;
|
||||
--magenta-light: rgba(255,215,239,0.1);
|
||||
--success: #15be53;
|
||||
--success-text: #4cdf80;
|
||||
--lemon: #d4a04a;
|
||||
--slate: #8a95a8;
|
||||
--dark-slate: #a0aec0;
|
||||
--border: rgba(255,255,255,0.1);
|
||||
--border-purple: rgba(185,185,249,0.3);
|
||||
--border-soft: rgba(214,217,252,0.15);
|
||||
--shadow-blue: rgba(50,50,93,0.4);
|
||||
--shadow-dark-blue: rgba(3,3,39,0.5);
|
||||
--shadow-black: rgba(0,0,0,0.3);
|
||||
--shadow-ambient: rgba(0,0,0,0.3);
|
||||
--shadow-soft: rgba(0,0,0,0.2);
|
||||
--shadow-card: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;
|
||||
--shadow-ambient-card: rgba(0,0,0,0.3) 0px 15px 35px 0px;
|
||||
--shadow-subtle: rgba(0,0,0,0.2) 0px 3px 6px 0px;
|
||||
--font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--navy);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 300; line-height: 1.40;
|
||||
font-feature-settings: "ss01" 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(14,15,46,0.90);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); 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(--slate); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--navy); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--purple); color: #ffffff;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.nav-cta:hover { background: var(--purple-hover); }
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--purple); color: #ffffff;
|
||||
font-size: 11px; font-weight: 400; padding: 4px 10px; border-radius: 4px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 300; line-height: 1.15;
|
||||
letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--purple); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-primary:hover { background: var(--purple-hover); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--purple-mid);
|
||||
padding: 10px 20px; border-radius: 4px;
|
||||
border: 1px solid var(--border-purple);
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(102,94,253,0.1); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border); 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: 6px; overflow: hidden; border: 1px solid var(--border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }
|
||||
.color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); 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: 300; color: var(--slate); margin-top: 8px; }
|
||||
.btn-info {
|
||||
display: inline-block; background: transparent; color: #5ba8d9;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
border: 1px solid rgba(91,168,217,0.25); text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-neutral {
|
||||
display: inline-block; background: transparent; color: rgba(232,236,240,0.3);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
outline: 1px solid rgba(255,255,255,0.1); border: none; text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-success {
|
||||
display: inline-block; background: rgba(21,190,83,0.15); color: #4cdf80;
|
||||
padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;
|
||||
border: 1px solid rgba(21,190,83,0.3);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-neutral {
|
||||
display: inline-block; background: rgba(255,255,255,0.05); color: var(--slate);
|
||||
padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03); border-radius: 6px; padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: box-shadow 0.25s ease;
|
||||
}
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }
|
||||
.card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }
|
||||
.card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: rgba(255,255,255,0.05); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--purple); }
|
||||
.form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: rgba(255,255,255,0.05); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }
|
||||
|
||||
/* 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(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
|
||||
/* 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(--purple); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
.radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }
|
||||
.footer a { color: var(--purple-mid); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 32px; letter-spacing: -0.64px; }
|
||||
.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 now</a>
|
||||
</nav>
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Stripe</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-primary" href="#">Start now</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:#533afd"></div><div class="color-swatch-info"><div class="color-swatch-name">Stripe Purple</div><div class="color-swatch-hex">#533afd</div><div class="color-swatch-role">Primary brand, CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#061b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#061b31</div><div class="color-swatch-role">Headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid rgba(255,255,255,0.1)"></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>
|
||||
|
||||
<div class="color-group-label">Brand & Dark</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1e54"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Dark</div><div class="color-swatch-hex">#1c1e54</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0d253d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Navy</div><div class="color-swatch-hex">#0d253d</div><div class="color-swatch-role">Darkest neutral</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ea2261"></div><div class="color-swatch-info"><div class="color-swatch-name">Ruby</div><div class="color-swatch-hex">#ea2261</div><div class="color-swatch-role">Accent, alerts</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f96bee"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta</div><div class="color-swatch-hex">#f96bee</div><div class="color-swatch-role">Gradients, decorative</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd7ef"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta Light</div><div class="color-swatch-hex">#ffd7ef</div><div class="color-swatch-role">Tinted surface</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive Purple Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4434d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Hover</div><div class="color-swatch-hex">#4434d4</div><div class="color-swatch-role">CTA hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#665efd"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Mid</div><div class="color-swatch-hex">#665efd</div><div class="color-swatch-role">Range selectors</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b9b9f9"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Light</div><div class="color-swatch-hex">#b9b9f9</div><div class="color-swatch-role">Subdued hover bg</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2e2b8c"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#2e2b8c</div><div class="color-swatch-role">Icon hover</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#273951"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#273951</div><div class="color-swatch-role">Labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#64748d"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#64748d</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5edf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5edf5</div><div class="color-swatch-role">Default border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#15be53"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#15be53</div><div class="color-swatch-role">Status, badges</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9b6829"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon</div><div class="color-swatch-hex">#9b6829</div><div class="color-swatch-role">Warning accent</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d6d9fc"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Soft</div><div class="color-swatch-hex">#d6d9fc</div><div class="color-swatch-role">Purple-tinted border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#362baa"></div><div class="color-swatch-info"><div class="color-swatch-name">Dashed Border</div><div class="color-swatch-hex">#362baa</div><div class="color-swatch-role">Drop zones</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.03; letter-spacing:-1.4px; color:var(--navy);">Display Hero</div><div class="type-meta">Display Hero -- 56px / 300 / 1.03 / -1.4px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);">Display Large</div><div class="type-meta">Display Large -- 48px / 300 / 1.15 / -0.96px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);">Section Heading</div><div class="type-meta">Section Heading -- 32px / 300 / 1.10 / -0.64px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);">Sub-heading Large</div><div class="type-meta">Sub-heading -- 26px / 300 / 1.12 / -0.26px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);">Sub-heading</div><div class="type-meta">Sub-heading -- 22px / 300 / 1.10 / -0.22px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.</div><div class="type-meta">Body Large -- 18px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);">Body -- Standard reading text for descriptions and content.</div><div class="type-meta">Body -- 16px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);">Button Text</div><div class="type-meta">Button -- 16px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);">Link / Navigation</div><div class="type-meta">Link -- 14px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);">Caption -- Small labels and metadata</div><div class="type-meta">Caption -- 12px / 300 / 1.45 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;">$1,234,567.89</div><div class="type-meta">Tabular Numbers -- 12px / 300 / 1.33 / -0.36px / sohne-var "tnum"</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;">const stripe = require('stripe')('sk_test_...');</div><div class="type-meta">Code Body -- 12px / 500 / 2.00 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;">API VERSION</div><div class="type-meta">Code Label -- 12px / 500 / uppercase / Source Code Pro</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-primary" href="#">Start now</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-info" href="#">Learn more</a><div class="button-label">Transparent Info</div></div>
|
||||
<div class="button-item"><a class="btn-neutral" href="#">Disabled</a><div class="button-label">Neutral Ghost</div></div>
|
||||
<div class="button-item"><span class="badge-success">Active</span><div class="button-label">Success Badge</div></div>
|
||||
<div class="button-item"><span class="badge-neutral">v2024-12</span><div class="button-label">Neutral Badge</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(83,58,253,0.15); color:var(--purple-mid);">Payments</div>
|
||||
<h3>Online Payments</h3>
|
||||
<p>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(234,34,97,0.15); color:var(--ruby);">Elevated</div>
|
||||
<h3>Revenue Recognition</h3>
|
||||
<p>Automate your revenue reporting. Card shown with full shadow stack for elevated importance.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(21,190,83,0.1); color:var(--success-text);">Connect</div>
|
||||
<h3>Platform Payments</h3>
|
||||
<p>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.</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">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--focus" type="text" value="https://api.example.com/webhook"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--error" type="text" value="invalid-email"><div class="form-state-label">Error (ruby ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Metadata</label><textarea class="form-textarea" placeholder='{"key": "value"}'></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:12px"></div><div class="spacing-value">12</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:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</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</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1px"></div><div class="radius-label">1px</div><div class="radius-context">Micro</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">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Standard cards</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">Nav, large cards</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">Featured</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</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border);"><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.2) 0px 3px 6px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Ambient soft</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.3) 0px 15px 35px 0px;"><div class="elevation-label">Level 2: Standard</div><div class="elevation-desc">Ambient card</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Dual layer deep</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.5) 0px 14px 21px -14px, rgba(0,0,0,0.3) 0px 8px 17px -8px;"><div class="elevation-label">Level 4: Deep</div><div class="elevation-desc">Dark deep</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px 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>
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
<!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 Stripe</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=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'sohne-var';
|
||||
src: local('sohne-var'), local('Sohne'), local('SF Pro Display');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
:root {
|
||||
--purple: #533afd;
|
||||
--purple-hover: #4434d4;
|
||||
--purple-deep: #2e2b8c;
|
||||
--purple-light: #b9b9f9;
|
||||
--purple-mid: #665efd;
|
||||
--navy: #061b31;
|
||||
--dark-navy: #0d253d;
|
||||
--brand-dark: #1c1e54;
|
||||
--white: #ffffff;
|
||||
--ruby: #ea2261;
|
||||
--magenta: #f96bee;
|
||||
--magenta-light: #ffd7ef;
|
||||
--success: #15be53;
|
||||
--success-text: #108c3d;
|
||||
--lemon: #9b6829;
|
||||
--slate: #64748d;
|
||||
--dark-slate: #273951;
|
||||
--border: #e5edf5;
|
||||
--border-purple: #b9b9f9;
|
||||
--border-soft: #d6d9fc;
|
||||
--shadow-blue: rgba(50,50,93,0.25);
|
||||
--shadow-dark-blue: rgba(3,3,39,0.25);
|
||||
--shadow-black: rgba(0,0,0,0.1);
|
||||
--shadow-ambient: rgba(23,23,23,0.08);
|
||||
--shadow-soft: rgba(23,23,23,0.06);
|
||||
--shadow-card: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;
|
||||
--shadow-ambient-card: rgba(23,23,23,0.08) 0px 15px 35px 0px;
|
||||
--shadow-subtle: rgba(23,23,23,0.06) 0px 3px 6px 0px;
|
||||
--font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--navy);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 300; line-height: 1.40;
|
||||
font-feature-settings: "ss01" 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(255,255,255,0.90);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); 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(--slate); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--navy); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--purple); color: var(--white);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.nav-cta:hover { background: var(--purple-hover); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 300; line-height: 1.15;
|
||||
letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--purple); color: var(--white);
|
||||
padding: 10px 20px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-primary:hover { background: var(--purple-hover); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--purple);
|
||||
padding: 10px 20px; border-radius: 4px;
|
||||
border: 1px solid var(--border-purple);
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(83,58,253,0.05); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border); 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: 6px; overflow: hidden; border: 1px solid var(--border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }
|
||||
.color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); 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: 300; color: var(--slate); margin-top: 8px; }
|
||||
.btn-info {
|
||||
display: inline-block; background: transparent; color: #2874ad;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
border: 1px solid rgba(43,145,223,0.2); text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-neutral {
|
||||
display: inline-block; background: transparent; color: rgba(16,16,16,0.3);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
outline: 1px solid rgb(212,222,233); border: none; text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-success {
|
||||
display: inline-block; background: rgba(21,190,83,0.2); color: #108c3d;
|
||||
padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;
|
||||
border: 1px solid rgba(21,190,83,0.4);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-neutral {
|
||||
display: inline-block; background: #ffffff; color: #000000;
|
||||
padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;
|
||||
border: 1px solid #f6f9fc;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: var(--white); border-radius: 6px; padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: box-shadow 0.25s ease;
|
||||
}
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }
|
||||
.card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }
|
||||
.card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--white); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--purple); }
|
||||
.form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--white); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }
|
||||
|
||||
/* 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(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
|
||||
/* 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(--purple); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
.radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 6px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }
|
||||
.footer a { color: var(--purple); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 32px; letter-spacing: -0.64px; }
|
||||
.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 now</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Stripe</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-primary" href="#">Start now</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:#533afd"></div><div class="color-swatch-info"><div class="color-swatch-name">Stripe Purple</div><div class="color-swatch-hex">#533afd</div><div class="color-swatch-role">Primary brand, CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#061b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#061b31</div><div class="color-swatch-role">Headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e5edf5"></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>
|
||||
|
||||
<div class="color-group-label">Brand & Dark</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1e54"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Dark</div><div class="color-swatch-hex">#1c1e54</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0d253d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Navy</div><div class="color-swatch-hex">#0d253d</div><div class="color-swatch-role">Darkest neutral</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ea2261"></div><div class="color-swatch-info"><div class="color-swatch-name">Ruby</div><div class="color-swatch-hex">#ea2261</div><div class="color-swatch-role">Accent, alerts</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f96bee"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta</div><div class="color-swatch-hex">#f96bee</div><div class="color-swatch-role">Gradients, decorative</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd7ef"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta Light</div><div class="color-swatch-hex">#ffd7ef</div><div class="color-swatch-role">Tinted surface</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive Purple Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4434d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Hover</div><div class="color-swatch-hex">#4434d4</div><div class="color-swatch-role">CTA hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#665efd"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Mid</div><div class="color-swatch-hex">#665efd</div><div class="color-swatch-role">Range selectors</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b9b9f9"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Light</div><div class="color-swatch-hex">#b9b9f9</div><div class="color-swatch-role">Subdued hover bg</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2e2b8c"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#2e2b8c</div><div class="color-swatch-role">Icon hover</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#273951"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#273951</div><div class="color-swatch-role">Labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#64748d"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#64748d</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5edf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5edf5</div><div class="color-swatch-role">Default border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#15be53"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#15be53</div><div class="color-swatch-role">Status, badges</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9b6829"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon</div><div class="color-swatch-hex">#9b6829</div><div class="color-swatch-role">Warning accent</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d6d9fc"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Soft</div><div class="color-swatch-hex">#d6d9fc</div><div class="color-swatch-role">Purple-tinted border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#362baa"></div><div class="color-swatch-info"><div class="color-swatch-name">Dashed Border</div><div class="color-swatch-hex">#362baa</div><div class="color-swatch-role">Drop zones</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.03; letter-spacing:-1.4px; color:var(--navy);">Display Hero</div><div class="type-meta">Display Hero -- 56px / 300 / 1.03 / -1.4px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);">Display Large</div><div class="type-meta">Display Large -- 48px / 300 / 1.15 / -0.96px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);">Section Heading</div><div class="type-meta">Section Heading -- 32px / 300 / 1.10 / -0.64px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);">Sub-heading Large</div><div class="type-meta">Sub-heading -- 26px / 300 / 1.12 / -0.26px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);">Sub-heading</div><div class="type-meta">Sub-heading -- 22px / 300 / 1.10 / -0.22px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.</div><div class="type-meta">Body Large -- 18px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);">Body -- Standard reading text for descriptions and content.</div><div class="type-meta">Body -- 16px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);">Button Text</div><div class="type-meta">Button -- 16px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);">Link / Navigation</div><div class="type-meta">Link -- 14px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);">Caption -- Small labels and metadata</div><div class="type-meta">Caption -- 12px / 300 / 1.45 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;">$1,234,567.89</div><div class="type-meta">Tabular Numbers -- 12px / 300 / 1.33 / -0.36px / sohne-var "tnum"</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;">const stripe = require('stripe')('sk_test_...');</div><div class="type-meta">Code Body -- 12px / 500 / 2.00 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;">API VERSION</div><div class="type-meta">Code Label -- 12px / 500 / uppercase / Source Code Pro</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-primary" href="#">Start now</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-info" href="#">Learn more</a><div class="button-label">Transparent Info</div></div>
|
||||
<div class="button-item"><a class="btn-neutral" href="#">Disabled</a><div class="button-label">Neutral Ghost</div></div>
|
||||
<div class="button-item"><span class="badge-success">Active</span><div class="button-label">Success Badge</div></div>
|
||||
<div class="button-item"><span class="badge-neutral">v2024-12</span><div class="button-label">Neutral Badge</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(83,58,253,0.1); color:var(--purple);">Payments</div>
|
||||
<h3>Online Payments</h3>
|
||||
<p>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(234,34,97,0.1); color:var(--ruby);">Elevated</div>
|
||||
<h3>Revenue Recognition</h3>
|
||||
<p>Automate your revenue reporting. Card shown with full blue-tinted shadow stack for elevated importance.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(21,190,83,0.15); color:var(--success-text);">Connect</div>
|
||||
<h3>Platform Payments</h3>
|
||||
<p>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.</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">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--focus" type="text" value="https://api.example.com/webhook"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--error" type="text" value="invalid-email"><div class="form-state-label">Error (ruby ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Metadata</label><textarea class="form-textarea" placeholder='{"key": "value"}'></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:12px"></div><div class="spacing-value">12</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:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</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</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1px"></div><div class="radius-label">1px</div><div class="radius-context">Micro</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">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Standard cards</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">Nav, large cards</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">Featured</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</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(23,23,23,0.06) 0px 3px 6px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Ambient soft</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(23,23,23,0.08) 0px 15px 35px 0px;"><div class="elevation-label">Level 2: Standard</div><div class="elevation-desc">Ambient card</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Blue-tinted dual layer</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px;"><div class="elevation-label">Level 4: Deep</div><div class="elevation-desc">Dark blue-tinted</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px 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>
|
||||
Loading…
Reference in New Issue