laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
design-md/lovable/DESIGN.md Normal file
View File

@@ -0,0 +1,298 @@
# Design System: Lovable
## 1. Visual Theme & Atmosphere
Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.
The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses `ui-sans-serif, system-ui` as fallbacks, acknowledging that the custom typeface carries the brand personality.
What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries.
**Key Characteristics:**
- Warm parchment background (`#f7f4ed`) — not white, not beige, a deliberate cream that feels hand-selected
- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
- Opacity-driven color system: all grays derived from `#1c1c1c` at varying transparency levels
- Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`
- Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements
- Full-pill radius (`9999px`) used extensively for action buttons and icon containers
- Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis
- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling
## 2. Color Palette & Roles
### Primary
- **Cream** (`#f7f4ed`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
- **Charcoal** (`#1c1c1c`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
- **Off-White** (`#fcfbf8`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
### Neutral Scale (Opacity-Based)
- **Charcoal 100%** (`#1c1c1c`): Primary text, headings, dark surfaces.
- **Charcoal 83%** (`rgba(28,28,28,0.83)`): Strong secondary text.
- **Charcoal 82%** (`rgba(28,28,28,0.82)`): Body copy.
- **Muted Gray** (`#5f5f5d`): Secondary text, descriptions, captions.
- **Charcoal 40%** (`rgba(28,28,28,0.4)`): Interactive borders, button outlines.
- **Charcoal 4%** (`rgba(28,28,28,0.04)`): Subtle hover backgrounds, micro-tints.
- **Charcoal 3%** (`rgba(28,28,28,0.03)`): Barely-visible overlays, background depth.
### Surface & Border
- **Light Cream** (`#eceae4`): Card borders, dividers, image outlines. The warm divider line.
- **Cream Surface** (`#f7f4ed`): Card backgrounds, section fills — same as page background for seamless integration.
### Interactive
- **Ring Blue** (`#3b82f6` at 50% opacity): `--tw-ring-color`, Tailwind focus ring.
- **Focus Shadow** (`rgba(0,0,0,0.1) 0px 4px 12px`): Focus and active state shadow — soft, warm, diffused.
### Inset Shadows
- **Button Inset** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons.
## 3. Typography Rules
### Font Family
- **Primary**: `Camera Plain Variable`, with fallbacks: `ui-sans-serif, system-ui`
- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |
| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |
| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |
| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |
| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |
| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |
| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |
| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |
| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |
| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |
| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |
### Principles
- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.
## 4. Component Stylings
### Buttons
**Primary Dark (Inset Shadow)**
- Background: `#1c1c1c`
- Text: `#fcfbf8`
- Padding: 8px 16px
- Radius: 6px
- Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
- Active: opacity 0.8
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
- Use: Primary CTA ("Start Building", "Get Started")
**Ghost / Outline**
- Background: transparent
- Text: `#1c1c1c`
- Padding: 8px 16px
- Radius: 6px
- Border: `1px solid rgba(28,28,28,0.4)`
- Active: opacity 0.8
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
- Use: Secondary actions ("Log In", "Documentation")
**Cream Surface**
- Background: `#f7f4ed`
- Text: `#1c1c1c`
- Padding: 8px 16px
- Radius: 6px
- No border
- Active: opacity 0.8
- Use: Tertiary actions, toolbar buttons
**Pill / Icon Button**
- Background: `#f7f4ed`
- Text: `#1c1c1c`
- Radius: 9999px (full pill)
- Shadow: same inset pattern as primary dark
- Opacity: 0.5 (default), 0.8 (active)
- Use: Additional actions, plan mode toggle, voice recording
### Cards & Containers
- Background: `#f7f4ed` (matches page)
- Border: `1px solid #eceae4`
- Radius: 12px (standard), 16px (featured), 8px (compact)
- No box-shadow by default — borders define boundaries
- Image cards: `1px solid #eceae4` with 12px radius
### Inputs & Forms
- Background: `#f7f4ed`
- Text: `#1c1c1c`
- Border: `1px solid #eceae4`
- Radius: 6px
- Focus: ring blue (`rgba(59,130,246,0.5)`) outline
- Placeholder: `#5f5f5d`
### Navigation
- Clean horizontal nav on cream background, fixed
- Logo/wordmark left-aligned (128.75 x 22px)
- Links: Camera Plain 14–16px weight 400, `#1c1c1c` text
- CTA: dark button with inset shadow, 6px radius
- Mobile: hamburger menu with 6px radius button
- Subtle border or no border on scroll
### Links
- Color: `#1c1c1c`
- Decoration: underline (default)
- Hover: primary accent (via CSS variable `hsl(var(--primary))`)
- No color change on hover — decoration carries the interactive signal
### Image Treatment
- Showcase/portfolio images with `1px solid #eceae4` border
- Consistent 12px border radius on all image containers
- Soft gradient backgrounds behind hero content (warm multi-color wash)
- Gallery-style presentation for template/project showcases
### Distinctive Components
**AI Chat Input**
- Large prompt input area with soft borders
- Suggestion pills with `#eceae4` borders
- Voice recording / plan mode toggle buttons as pill shapes (9999px)
- Warm, inviting input area — not clinical
**Template Gallery**
- Card grid showing project templates
- Each card: image + title, `1px solid #eceae4` border, 12px radius
- Hover: subtle shadow or border darkening
- Category labels as text links
**Stats Bar**
- Large metrics: "0M+" pattern in 48px+ weight 600
- Descriptive text below in muted gray
- Horizontal layout with generous spacing
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room
### Grid & Container
- Max content width: approximately 1200px (centered)
- Hero: centered single-column with massive vertical padding (96px+)
- Feature sections: 2–3 column grids
- Full-width footer with multi-column link layout
- Showcase sections with centered card grids
### Whitespace Philosophy
- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.
- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
- **Section separation**: Footer uses `1px solid #eceae4` border and 16px radius container. Sections defined by generous spacing rather than border lines.
### Border Radius Scale
- Micro (4px): Small buttons, interactive elements
- Standard (6px): Buttons, inputs, navigation menu
- Comfortable (8px): Compact cards, divs
- Card (12px): Standard cards, image containers, templates
- Container (16px): Large containers, footer sections
- Full Pill (9999px): Action pills, icon buttons, toggles
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, cream background | Page surface, most content |
| Bordered (Level 1) | `1px solid #eceae4` | Cards, images, dividers |
| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |
| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active/focus states |
| Ring (Accessibility) | `rgba(59,130,246,0.5)` 2px ring | Keyboard focus on inputs |
**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (`#eceae4`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (`rgba(0,0,0,0.1) 0px 4px 12px`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.
### Decorative Depth
- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible
- Footer: gradient background with warm tones transitioning to the bottom
- No harsh section dividers — spacing and background warmth handle transitions
## 7. Do's and Don'ts
### Do
- Use the warm cream background (`#f7f4ed`) as the page foundation — it's the brand's signature warmth
- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)
- Derive all grays from `#1c1c1c` at varying opacity levels for tonal unity
- Use the inset shadow technique on dark buttons for tactile depth
- Use `#eceae4` borders instead of shadows for card containment
- Keep the weight system narrow: 400 for body/UI, 600 for headings
- Use full-pill radius (9999px) only for action pills and icon buttons
- Apply opacity 0.8 on active states for responsive tactile feedback
### Don't
- Don't use pure white (`#ffffff`) as a page background — the cream is intentional
- Don't use heavy box-shadows for cards — borders are the containment mechanism
- Don't introduce saturated accent colors — the palette is intentionally warm-neutral
- Don't use weight 700 (bold) — 600 is the maximum weight in the system
- Don't apply 9999px radius on rectangular buttons — pills are for icon/action toggles
- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators
- Don't mix border styles — `#eceae4` for passive, `rgba(28,28,28,0.4)` for interactive
- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <600px | Tight single column, reduced padding |
| Mobile | 600–640px | Standard mobile layout |
| Tablet Small | 640–700px | 2-column grids begin |
| Tablet | 700–768px | Card grids expand |
| Desktop Small | 768–1024px | Multi-column layouts |
| Desktop | 1024–1280px | Full feature layout |
| Large Desktop | 1280–1536px | Maximum content width, generous margins |
### Touch Targets
- Buttons: 8px 16px padding (comfortable touch)
- Navigation: adequate spacing between items
- Pill buttons: 9999px radius creates large tap-friendly targets
- Menu toggle: 6px radius button with adequate sizing
### Collapsing Strategy
- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing
- Navigation: horizontal links → hamburger menu at 768px
- Feature cards: 3-column → 2-column → single column stacked
- Template gallery: grid → stacked vertical cards
- Stats bar: horizontal → stacked vertical
- Footer: multi-column → stacked single column
- Section spacing: 128px+ → 64px on mobile
### Image Behavior
- Template screenshots maintain `1px solid #eceae4` border at all sizes
- 12px border radius preserved across breakpoints
- Gallery images responsive with consistent aspect ratios
- Hero gradient softens/simplifies on mobile
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: Charcoal (`#1c1c1c`)
- Background: Cream (`#f7f4ed`)
- Heading text: Charcoal (`#1c1c1c`)
- Body text: Muted Gray (`#5f5f5d`)
- Border: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px`
- Button text on dark: `#fcfbf8`
### Example Component Prompts
- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
### Iteration Guide
1. Always use cream (`#f7f4ed`) as the base — never pure white
2. Derive grays from `#1c1c1c` at opacity levels rather than using distinct hex values
3. Use `#eceae4` borders for containment, not shadows
4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px
5. Two weights: 400 (everything except headings) and 600 (headings)
6. The inset shadow on dark buttons is the signature detail — don't skip it
7. Camera Plain Variable at weight 480 is for special display moments only

25
design-md/lovable/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Lovable — Design System
> Design.md extracted from the public [lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Lovable design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Lovable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/lovable/preview-dark-screenshot.png)
### Light Mode
![Lovable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/lovable/preview-screenshot.png)

351
design-md/lovable/preview-dark.html Normal file
View File

@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Lovable (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
<style>
:root {
--cream: #1a1916;
--charcoal: #e8e5de;
--off-white: #1a1916;
--border-light: #2e2c28;
--muted: #9a9a98;
--charcoal-40: rgba(232,229,222,0.35);
--charcoal-83: rgba(232,229,222,0.83);
--charcoal-04: rgba(232,229,222,0.06);
--charcoal-03: rgba(232,229,222,0.04);
--ring-blue: rgba(59,130,246,0.5);
--focus-shadow: rgba(0,0,0,0.3) 0px 4px 12px;
--shadow-inset: rgba(255,255,255,0.1) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.4) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.2) 0px 1px 2px 0px;
--font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cream);
color: var(--charcoal);
font-family: var(--font-primary);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(26,25,22,0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--charcoal); }
.nav-cta {
display: inline-block; background: var(--charcoal); color: var(--off-white);
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: opacity 0.15s;
box-shadow: var(--shadow-inset);
}
.nav-cta:hover { opacity: 0.85; }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 60px; font-weight: 600; line-height: 1.10;
letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;
}
.hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-dark {
display: inline-block; background: var(--charcoal); color: var(--off-white);
padding: 10px 20px; border-radius: 6px; border: none;
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
box-shadow: var(--shadow-inset);
}
.btn-dark:hover { opacity: 0.85; }
.btn-ghost {
display: inline-block; background: transparent; color: var(--charcoal);
padding: 10px 20px; border-radius: 6px;
border: 1px solid var(--charcoal-40);
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-ghost:hover { opacity: 0.8; }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }
.color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }
.btn-cream {
display: inline-block; background: var(--cream); color: var(--charcoal);
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;
text-decoration: none; border: 1px solid var(--border-light); cursor: pointer;
}
.btn-pill {
display: inline-flex; align-items: center; justify-content: center;
background: var(--cream); color: var(--charcoal);
width: 36px; height: 36px; border-radius: 9999px;
font-size: 14px; font-weight: 400; text-decoration: none;
box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: 1px solid var(--border-light);
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }
.card:hover { border-color: var(--charcoal-40); }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--cream); color: var(--charcoal);
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
font-family: var(--font-primary); font-size: 14px; outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
.form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
.form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }
.form-textarea {
width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* SPACING */
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.spacing-item { text-align: center; }
.spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }
.radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
.radius-context { font-size: 10px; color: var(--muted); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }
.footer a { color: var(--charcoal); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 36px; letter-spacing: -0.9px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Start Building</a>
</nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#e8e5de;color:#1a1916;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;">Dark Mode</div>
<section class="hero">
<h1>Design System<br>Inspired by Lovable</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Start Building</a>
<a class="btn-ghost" href="#">View Documentation</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f4ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream</div><div class="color-swatch-hex">#f7f4ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal</div><div class="color-swatch-hex">#1c1c1c</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fcfbf8"></div><div class="color-swatch-info"><div class="color-swatch-name">Off-White</div><div class="color-swatch-hex">#fcfbf8</div><div class="color-swatch-role">Button text on dark</div></div></div>
</div>
<div class="color-group-label">Neutral Scale (Opacity-Based)</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.83)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 83%</div><div class="color-swatch-hex">rgba(28,28,28,0.83)</div><div class="color-swatch-role">Strong secondary</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#5f5f5d"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted Gray</div><div class="color-swatch-hex">#5f5f5d</div><div class="color-swatch-role">Body text, captions</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.4)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 40%</div><div class="color-swatch-hex">rgba(28,28,28,0.4)</div><div class="color-swatch-role">Interactive borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.04); border-bottom:1px solid var(--border-light)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 4%</div><div class="color-swatch-hex">rgba(28,28,28,0.04)</div><div class="color-swatch-role">Hover tint</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.03); border-bottom:1px solid var(--border-light)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 3%</div><div class="color-swatch-hex">rgba(28,28,28,0.03)</div><div class="color-swatch-role">Subtle overlay</div></div></div>
</div>
<div class="color-group-label">Surface & Border</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Cream</div><div class="color-swatch-hex">#eceae4</div><div class="color-swatch-role">Borders, dividers</div></div></div>
</div>
<div class="color-group-label">Interactive</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(59,130,246,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ring Blue</div><div class="color-swatch-hex">rgba(59,130,246,0.5)</div><div class="color-swatch-role">Focus ring</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;">Display Hero</div><div class="type-meta">Display Hero — 60px / 600 / 1.10 / -1.5px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section Heading — 48px / 600 / 1.00 / -1.2px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;">Sub-heading</div><div class="type-meta">Sub-heading — 36px / 600 / 1.10 / -0.9px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.25;">Card Title</div><div class="type-meta">Card Title — 20px / 400 / 1.25 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.38;">Body Large — Build something lovable. Create web applications with AI-powered development tools.</div><div class="type-meta">Body Large — 18px / 400 / 1.38 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for descriptions, paragraphs, and UI content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Button / Link — Interactive text</div><div class="type-meta">Button / Link — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);">Caption — Metadata and small labels</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-dark" href="#">Start Building</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outline</div></div>
<div class="button-item"><a class="btn-cream" href="#">Settings</a><div class="button-label">Cream Surface</div></div>
<div class="button-item"><button class="btn-pill">+</button><div class="button-label">Pill Icon</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Template</div>
<h3>Portfolio Website</h3>
<p>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.</p>
</div>
<div class="card" style="border-color: var(--charcoal-40);">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Featured</div>
<h3>AI Chat Application</h3>
<p>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.</p>
</div>
<div class="card">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Starter</div>
<h3>SaaS Dashboard</h3>
<p>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-lovable-app"><div class="form-state-label">Default (border)</div></div>
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="lovable/my-project"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (red ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:56px"></div><div class="spacing-value">56</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Compact</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<div class="section-label">08 / Elevation</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, cream bg</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 1: Bordered</div><div class="elevation-desc">1px solid #eceae4</div></div>
<div class="elevation-card" style="background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);"><div class="elevation-label" style="color:var(--off-white);">Level 2: Inset</div><div class="elevation-desc" style="color:rgba(26,25,22,0.6);">Button inset shadow</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);"><div class="elevation-label">Level 3: Focus</div><div class="elevation-desc">Focus shadow glow</div></div>
<div class="elevation-card" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.5);"><div class="elevation-label">Ring</div><div class="elevation-desc">Accessibility ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://lovable.dev/">lovable.dev</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>

350
design-md/lovable/preview.html Normal file
View File

@@ -0,0 +1,350 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Lovable (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;480;500;600&display=swap" rel="stylesheet">
<style>
:root {
--cream: #f7f4ed;
--charcoal: #1c1c1c;
--off-white: #fcfbf8;
--border-light: #eceae4;
--muted: #5f5f5d;
--charcoal-40: rgba(28,28,28,0.4);
--charcoal-83: rgba(28,28,28,0.83);
--charcoal-04: rgba(28,28,28,0.04);
--charcoal-03: rgba(28,28,28,0.03);
--ring-blue: rgba(59,130,246,0.5);
--focus-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
--shadow-inset: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px;
--font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cream);
color: var(--charcoal);
font-family: var(--font-primary);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(247,244,237,0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--charcoal); }
.nav-cta {
display: inline-block; background: var(--charcoal); color: var(--off-white);
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: opacity 0.15s;
box-shadow: var(--shadow-inset);
}
.nav-cta:hover { opacity: 0.85; }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 60px; font-weight: 600; line-height: 1.10;
letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;
}
.hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-dark {
display: inline-block; background: var(--charcoal); color: var(--off-white);
padding: 10px 20px; border-radius: 6px; border: none;
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
box-shadow: var(--shadow-inset);
}
.btn-dark:hover { opacity: 0.85; }
.btn-ghost {
display: inline-block; background: transparent; color: var(--charcoal);
padding: 10px 20px; border-radius: 6px;
border: 1px solid var(--charcoal-40);
font-family: var(--font-primary); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-ghost:hover { opacity: 0.8; }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }
.color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }
.btn-cream {
display: inline-block; background: var(--cream); color: var(--charcoal);
padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;
text-decoration: none; border: none; cursor: pointer;
}
.btn-pill {
display: inline-flex; align-items: center; justify-content: center;
background: var(--cream); color: var(--charcoal);
width: 36px; height: 36px; border-radius: 9999px;
font-size: 14px; font-weight: 400; text-decoration: none;
box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: none;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }
.card:hover { border-color: var(--charcoal-40); }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--cream); color: var(--charcoal);
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
font-family: var(--font-primary); font-size: 14px; outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
.form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }
.form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }
.form-textarea {
width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);
border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;
font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* SPACING */
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.spacing-item { text-align: center; }
.spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }
.radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }
.radius-context { font-size: 10px; color: var(--muted); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }
.footer a { color: var(--charcoal); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 36px; letter-spacing: -0.9px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Start Building</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Lovable</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Start Building</a>
<a class="btn-ghost" href="#">View Documentation</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f4ed; border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream</div><div class="color-swatch-hex">#f7f4ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal</div><div class="color-swatch-hex">#1c1c1c</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fcfbf8; border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Off-White</div><div class="color-swatch-hex">#fcfbf8</div><div class="color-swatch-role">Button text on dark</div></div></div>
</div>
<div class="color-group-label">Neutral Scale (Opacity-Based)</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.83)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 83%</div><div class="color-swatch-hex">rgba(28,28,28,0.83)</div><div class="color-swatch-role">Strong secondary</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#5f5f5d"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted Gray</div><div class="color-swatch-hex">#5f5f5d</div><div class="color-swatch-role">Body text, captions</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.4)"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 40%</div><div class="color-swatch-hex">rgba(28,28,28,0.4)</div><div class="color-swatch-role">Interactive borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.04); border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 4%</div><div class="color-swatch-hex">rgba(28,28,28,0.04)</div><div class="color-swatch-role">Hover tint</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(28,28,28,0.03); border-bottom:1px solid #eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Charcoal 3%</div><div class="color-swatch-hex">rgba(28,28,28,0.03)</div><div class="color-swatch-role">Subtle overlay</div></div></div>
</div>
<div class="color-group-label">Surface & Border</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Cream</div><div class="color-swatch-hex">#eceae4</div><div class="color-swatch-role">Borders, dividers</div></div></div>
</div>
<div class="color-group-label">Interactive</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(59,130,246,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ring Blue</div><div class="color-swatch-hex">rgba(59,130,246,0.5)</div><div class="color-swatch-role">Focus ring</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;">Display Hero</div><div class="type-meta">Display Hero — 60px / 600 / 1.10 / -1.5px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section Heading — 48px / 600 / 1.00 / -1.2px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;">Sub-heading</div><div class="type-meta">Sub-heading — 36px / 600 / 1.10 / -0.9px / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.25;">Card Title</div><div class="type-meta">Card Title — 20px / 400 / 1.25 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.38;">Body Large — Build something lovable. Create web applications with AI-powered development tools.</div><div class="type-meta">Body Large — 18px / 400 / 1.38 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text for descriptions, paragraphs, and UI content.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Button / Link — Interactive text</div><div class="type-meta">Button / Link — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);">Caption — Metadata and small labels</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Camera Plain Variable</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-dark" href="#">Start Building</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outline</div></div>
<div class="button-item"><a class="btn-cream" href="#">Settings</a><div class="button-label">Cream Surface</div></div>
<div class="button-item"><button class="btn-pill">+</button><div class="button-label">Pill Icon</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Template</div>
<h3>Portfolio Website</h3>
<p>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.</p>
</div>
<div class="card" style="border-color: var(--charcoal-40);">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Featured</div>
<h3>AI Chat Application</h3>
<p>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.</p>
</div>
<div class="card">
<div class="card-badge" style="background:var(--charcoal-04); color:var(--charcoal);">Starter</div>
<h3>SaaS Dashboard</h3>
<p>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Project Name</label><input class="form-input" type="text" placeholder="my-lovable-app"><div class="form-state-label">Default (border)</div></div>
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="lovable/my-project"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (red ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:56px"></div><div class="spacing-value">56</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Compact</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<div class="section-label">08 / Elevation</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow, cream bg</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-light);"><div class="elevation-label">Level 1: Bordered</div><div class="elevation-desc">1px solid #eceae4</div></div>
<div class="elevation-card" style="background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);"><div class="elevation-label" style="color:var(--off-white);">Level 2: Inset</div><div class="elevation-desc" style="color:rgba(252,251,248,0.6);">Button inset shadow</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);"><div class="elevation-label">Level 3: Focus</div><div class="elevation-desc">Focus shadow glow</div></div>
<div class="elevation-card" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.5);"><div class="elevation-label">Ring</div><div class="elevation-desc">Accessibility ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://lovable.dev/">lovable.dev</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>