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

309
design-md/notion/DESIGN.md Normal file
View File

@@ -0,0 +1,309 @@
# Design System: Notion
## 1. Visual Theme & Atmosphere
Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.
The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features `"lnum"` (lining numerals) and `"locl"` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.
What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin `1px solid rgba(0,0,0,0.1)` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.
**Key Characteristics:**
- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
- Warm neutral palette: grays carry yellow-brown undertones (`#f6f5f4` warm white, `#31302e` warm dark)
- Near-black text via `rgba(0,0,0,0.95)` -- not pure black, creating micro-warmth
- Ultra-thin borders: `1px solid rgba(0,0,0,0.1)` throughout -- whisper-weight division
- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth
- Notion Blue (`#0075de`) as the singular accent color for CTAs and interactive elements
- Pill badges (9999px radius) with tinted blue backgrounds for status indicators
- 8px base spacing unit with an organic, non-rigid scale
## 2. Color Palette & Roles
### Primary
- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on blue.
- **Notion Blue** (`#0075de`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.
### Brand Secondary
- **Deep Navy** (`#213183`): Secondary brand color, used sparingly for emphasis and dark feature sections.
- **Active Blue** (`#005bab`): Button active/pressed state -- darker variant of Notion Blue.
### Warm Neutral Scale
- **Warm White** (`#f6f5f4`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.
- **Warm Dark** (`#31302e`): Dark surface background, dark section text. Warmer than standard grays.
- **Warm Gray 500** (`#615d59`): Secondary text, descriptions, muted labels.
- **Warm Gray 300** (`#a39e98`): Placeholder text, disabled states, caption text.
### Semantic Accent Colors
- **Teal** (`#2a9d99`): Success states, positive indicators.
- **Green** (`#1aae39`): Confirmation, completion badges.
- **Orange** (`#dd5b00`): Warning states, attention indicators.
- **Pink** (`#ff64c8`): Decorative accent, feature highlights.
- **Purple** (`#391c57`): Premium features, deep accents.
- **Brown** (`#523410`): Earthy accent, warm feature sections.
### Interactive
- **Link Blue** (`#0075de`): Primary link color with underline-on-hover.
- **Link Light Blue** (`#62aef0`): Lighter link variant for dark backgrounds.
- **Focus Blue** (`#097fe8`): Focus ring on interactive elements.
- **Badge Blue Bg** (`#f2f9ff`): Pill badge background, tinted blue surface.
- **Badge Blue Text** (`#097fe8`): Pill badge text, darker blue for readability.
### Shadows & Depth
- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Multi-layer card elevation.
- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Five-layer deep elevation for modals and featured content.
- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Standard division border -- cards, dividers, sections.
## 3. Typography Rules
### Font Family
- **Primary**: `NotionInter`, with fallbacks: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
- **OpenType Features**: `"lnum"` (lining numerals) and `"locl"` (localized forms) enabled on display and heading text.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |
| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |
| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with `"lnum"` |
| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |
| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |
| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |
| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |
| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |
| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |
| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |
| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |
| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |
| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |
| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |
| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |
### Principles
- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.
- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy.
- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.
- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.
## 4. Component Stylings
### Buttons
**Primary Blue**
- Background: `#0075de` (Notion Blue)
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px (subtle)
- Border: `1px solid transparent`
- Hover: background darkens to `#005bab`
- Active: scale(0.9) transform
- Focus: `2px solid` focus outline, `var(--shadow-level-200)` shadow
- Use: Primary CTA ("Get Notion free", "Try it")
**Secondary / Tertiary**
- Background: `rgba(0,0,0,0.05)` (translucent warm gray)
- Text: `#000000` (near-black)
- Padding: 8px 16px
- Radius: 4px
- Hover: text color shifts, scale(1.05)
- Active: scale(0.9) transform
- Use: Secondary actions, form submissions
**Ghost / Link Button**
- Background: transparent
- Text: `rgba(0,0,0,0.95)`
- Decoration: underline on hover
- Use: Tertiary actions, inline links
**Pill Badge Button**
- Background: `#f2f9ff` (tinted blue)
- Text: `#097fe8`
- Padding: 4px 8px
- Radius: 9999px (full pill)
- Font: 12px weight 600
- Use: Status badges, feature labels, "New" tags
### Cards & Containers
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.1)` (whisper border)
- Radius: 12px (standard cards), 16px (featured/hero cards)
- Shadow: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
- Hover: subtle shadow intensification
- Image cards: 12px top radius, image fills top half
### Inputs & Forms
- Background: `#ffffff`
- Text: `rgba(0,0,0,0.9)`
- Border: `1px solid #dddddd`
- Padding: 6px
- Radius: 4px
- Focus: blue outline ring
- Placeholder: warm gray `#a39e98`
### Navigation
- Clean horizontal nav on white, not sticky
- Brand logo left-aligned (33x34px icon + wordmark)
- Links: NotionInter 15px weight 500-600, near-black text
- Hover: color shift to `var(--color-link-primary-text-hover)`
- CTA: blue pill button ("Get Notion free") right-aligned
- Mobile: hamburger menu collapse
- Product dropdowns with multi-level categorized menus
### Image Treatment
- Product screenshots with `1px solid rgba(0,0,0,0.1)` border
- Top-rounded images: `12px 12px 0px 0px` radius
- Dashboard/workspace preview screenshots dominate feature sections
- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)
### Distinctive Components
**Feature Cards with Illustrations**
- Large illustrative headers (The Great Wave, product UI screenshots)
- 12px radius card with whisper border
- Title at 22px weight 700, description at 16px weight 400
- Warm white (`#f6f5f4`) background variant for alternating sections
**Trust Bar / Logo Grid**
- Company logos (trusted teams section) in their brand colors
- Horizontal scroll or grid layout with team counts
- Metric display: large number + description pattern
**Metric Cards**
- Large number display (e.g., "$4,200 ROI")
- NotionInter 40px+ weight 700 for the metric
- Description below in warm gray body text
- Whisper-bordered card container
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments
### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with generous top padding (80-120px)
- Feature sections: 2-3 column grids for cards
- Full-width warm white (`#f6f5f4`) section backgrounds for alternation
- Code/dashboard screenshots as contained with whisper border
### Whitespace Philosophy
- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.
- **Warm alternation**: White sections alternate with warm white (`#f6f5f4`) sections, creating gentle visual rhythm without harsh color breaks.
- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.
### Border Radius Scale
- Micro (4px): Buttons, inputs, functional interactive elements
- Subtle (5px): Links, list items, menu items
- Standard (8px): Small cards, containers, inline elements
- Comfortable (12px): Standard cards, feature containers, image tops
- Large (16px): Hero cards, featured content, promotional blocks
- Full Pill (9999px): Badges, pills, status indicators
- Circle (100%): Tab indicators, avatars
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | Standard borders, card outlines, dividers |
| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |
| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |
| Focus (Accessibility) | `2px solid var(--focus-color)` outline | Keyboard focus on all interactive elements |
**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.
### Decorative Depth
- Hero section: decorative character illustrations (playful, hand-drawn style)
- Section alternation: white to warm white (`#f6f5f4`) background shifts
- No hard section borders -- separation comes from background color changes and spacing
## 7. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <400px | Tight single column, minimal padding |
| Mobile | 400-600px | Standard mobile, stacked layout |
| Tablet Small | 600-768px | 2-column grids begin |
| Tablet | 768-1080px | Full card grids, expanded padding |
| Desktop Small | 1080-1200px | Standard desktop layout |
| Desktop | 1200-1440px | Full layout, maximum content width |
| Large Desktop | >1440px | Centered, generous margins |
### Touch Targets
- Buttons use comfortable padding (8px-16px vertical)
- Navigation links at 15px with adequate spacing
- Pill badges have 8px horizontal padding for tap targets
- Mobile menu toggle uses standard hamburger button
### Collapsing Strategy
- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing
- Navigation: horizontal links + blue CTA -> hamburger menu
- Feature cards: 3-column -> 2-column -> single column stacked
- Product screenshots: maintain aspect ratio with responsive images
- Trust bar logos: grid -> horizontal scroll on mobile
- Footer: multi-column -> stacked single column
- Section spacing: 80px+ -> 48px on mobile
### Image Behavior
- Workspace screenshots maintain whisper border at all sizes
- Hero illustrations scale proportionally
- Product screenshots use responsive images with consistent border radius
- Full-width warm white sections maintain edge-to-edge treatment
## 8. Accessibility & States
### Focus System
- All interactive elements receive visible focus indicators
- Focus outline: `2px solid` with focus color + shadow level 200
- Tab navigation supported throughout all interactive components
- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)
### Interactive States
- **Default**: Standard appearance with whisper borders
- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links
- **Active/Pressed**: scale(0.9) transform, darker background variant
- **Focus**: Blue outline ring with shadow reinforcement
- **Disabled**: Warm gray (`#a39e98`) text, reduced opacity
### Color Contrast
- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio
- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)
- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)
- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: Notion Blue (`#0075de`)
- Background: Pure White (`#ffffff`)
- Alt Background: Warm White (`#f6f5f4`)
- Heading text: Near-Black (`rgba(0,0,0,0.95)`)
- Body text: Near-Black (`rgba(0,0,0,0.95)`)
- Secondary text: Warm Gray 500 (`#615d59`)
- Muted text: Warm Gray 300 (`#a39e98`)
- Border: `1px solid rgba(0,0,0,0.1)`
- Link: Notion Blue (`#0075de`)
- Focus ring: Focus Blue (`#097fe8`)
### Example Component Prompts
- "Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)."
- "Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59."
- "Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px."
- "Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)."
- "Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px."
### Iteration Guide
1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray
2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px
3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)
4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier
5. Shadows use 4-5 layers with individual opacity never exceeding 0.05
6. The warm white (#f6f5f4) section background is essential for visual rhythm
7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs
8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links

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

@@ -0,0 +1,25 @@
# Notion — Design System
> Design.md extracted from the public [notion](https://notion.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 Notion 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
![Notion Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/notion/preview-dark-screenshot.png)
### Light Mode
![Notion Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/notion/preview-screenshot.png)

374
design-md/notion/preview-dark.html Normal file
View File

@@ -0,0 +1,374 @@
<!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: Notion (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--black: rgba(255,255,255,0.92);
--black-solid: #e8e8e8;
--white: #191919;
--warm-white: #1e1e1e;
--warm-dark: #d4d3d1;
--gray-500: #a8a5a0;
--gray-300: #6b6763;
--notion-blue: #4da3f0;
--active-blue: #3a8fdc;
--focus-blue: #5aacf5;
--link-light-blue: #62aef0;
--badge-bg: #1a2a3a;
--badge-text: #5aacf5;
--teal: #3dbdb9;
--green: #2fca52;
--orange: #f07020;
--pink: #ff80d5;
--purple: #a07acc;
--brown: #c49060;
--deep-navy: #6878c8;
--border-whisper: 1px solid rgba(255,255,255,0.1);
--shadow-card: rgba(0,0,0,0.2) 0px 4px 18px 0px, rgba(0,0,0,0.15) 0px 2.025px 7.85px 0px, rgba(0,0,0,0.1) 0px 0.8px 2.93px 0px, rgba(0,0,0,0.08) 0px 0.175px 1.04px 0px;
--shadow-deep: rgba(0,0,0,0.15) 0px 1px 3px 0px, rgba(0,0,0,0.2) 0px 3px 7px 0px, rgba(0,0,0,0.2) 0px 7px 15px 0px, rgba(0,0,0,0.25) 0px 14px 28px 0px, rgba(0,0,0,0.3) 0px 23px 52px 0px;
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { 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 {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: var(--white);
border-bottom: var(--border-whisper);
}
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--black); text-decoration: underline; }
.nav-cta {
display: inline-block; background: var(--notion-blue); color: #191919;
padding: 6px 14px; border-radius: 4px; font-size: 15px; font-weight: 600;
text-decoration: none; transition: background 0.15s;
}
.nav-cta:hover { background: var(--active-blue); }
/* DARK MODE BADGE */
.dark-badge {
position: fixed; top: 16px; right: 16px; z-index: 200;
background: var(--black-solid); color: var(--white);
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
}
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 64px; font-weight: 700; line-height: 1.00;
letter-spacing: -2.125px; color: var(--black); margin-bottom: 16px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-blue {
display: inline-block; background: var(--notion-blue); color: #191919;
padding: 10px 24px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 15px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-blue:hover { background: var(--active-blue); }
.btn-ghost {
display: inline-block; background: rgba(255,255,255,0.08); color: var(--black);
padding: 10px 24px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 15px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section--warm { background: var(--warm-white); }
.section--warm .section-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }
.section-label { font-size: 12px; font-weight: 600; color: var(--gray-300); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 32px; font-weight: 700; line-height: 1.20; letter-spacing: -1px; margin-bottom: 32px; }
.section-divider { border: none; border-top: var(--border-whisper); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 8px; overflow: hidden; border: var(--border-whisper); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }
.color-swatch-role { font-size: 11px; color: var(--gray-300); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: var(--border-whisper); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; font-family: 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(--gray-300); margin-top: 8px; }
.btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.125px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--white); border-radius: 12px; padding: 24px; border: var(--border-whisper); box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-deep); }
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 9999px; margin-bottom: 12px; letter-spacing: 0.125px; }
/* 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(--warm-white); color: var(--black);
border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(77,163,240,0.25); }
.form-input--focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(77,163,240,0.25); }
.form-input--error { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(240,112,32,0.25); }
.form-textarea {
width: 100%; min-height: 80px; background: var(--warm-white); color: var(--black);
border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--gray-300); 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(--warm-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }
/* 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(--warm-dark); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }
.radius-context { font-size: 10px; color: var(--gray-300); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--white); border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--gray-300); font-family: monospace; }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: var(--border-whisper); font-size: 13px; color: var(--gray-500); }
.footer a { color: var(--notion-blue); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 40px; letter-spacing: -1.5px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.section--warm .section-inner { 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="#">Get Notion free</a>
</nav>
<div class="dark-badge">Dark Mode</div>
<section class="hero">
<h1>Design System<br>Inspired by Notion</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
<div class="hero-buttons">
<a class="btn-blue" href="#">Get Notion free</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:rgba(0,0,0,0.95)"></div><div class="color-swatch-info"><div class="color-swatch-name">Notion Black</div><div class="color-swatch-hex">rgba(0,0,0,0.95)</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#0075de"></div><div class="color-swatch-info"><div class="color-swatch-name">Notion Blue</div><div class="color-swatch-hex">#0075de</div><div class="color-swatch-role">Primary CTA, links</div></div></div>
</div>
<div class="color-group-label">Warm Neutrals</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f6f5f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm White</div><div class="color-swatch-hex">#f6f5f4</div><div class="color-swatch-role">Surface tint, sections</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#31302e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#31302e</div><div class="color-swatch-role">Dark surfaces</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#615d59"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray 500</div><div class="color-swatch-hex">#615d59</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#a39e98"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray 300</div><div class="color-swatch-hex">#a39e98</div><div class="color-swatch-role">Placeholder, muted</div></div></div>
</div>
<div class="color-group-label">Semantic Accents</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#2a9d99"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#2a9d99</div><div class="color-swatch-role">Success states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1aae39"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#1aae39</div><div class="color-swatch-role">Confirmation</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#dd5b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#dd5b00</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff64c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff64c8</div><div class="color-swatch-role">Decorative accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#391c57"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#391c57</div><div class="color-swatch-role">Premium features</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#523410"></div><div class="color-swatch-info"><div class="color-swatch-name">Brown</div><div class="color-swatch-hex">#523410</div><div class="color-swatch-role">Earthy accent</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:#005bab"></div><div class="color-swatch-info"><div class="color-swatch-name">Active Blue</div><div class="color-swatch-hex">#005bab</div><div class="color-swatch-role">Button active state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#097fe8"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#097fe8</div><div class="color-swatch-role">Focus ring</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#213183"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#213183</div><div class="color-swatch-role">Brand secondary</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f9ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Badge Bg</div><div class="color-swatch-hex">#f2f9ff</div><div class="color-swatch-role">Pill badge surface</div></div></div>
</div>
</section>
<div class="section--warm">
<div class="section-inner" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:64px; font-weight:700; line-height:1.00; letter-spacing:-2.125px;">Display Hero</div><div class="type-meta">Display Hero -- 64px / 700 / 1.00 / -2.125px / Inter</div></div>
<div class="type-sample"><div style="font-size:54px; font-weight:700; line-height:1.04; letter-spacing:-1.875px;">Display Secondary</div><div class="type-meta">Display Secondary -- 54px / 700 / 1.04 / -1.875px / Inter</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.00; letter-spacing:-1.5px;">Section Heading</div><div class="type-meta">Section Heading -- 48px / 700 / 1.00 / -1.5px / Inter</div></div>
<div class="type-sample"><div style="font-size:40px; font-weight:700; line-height:1.50;">Sub-heading Large</div><div class="type-meta">Sub-heading Large -- 40px / 700 / 1.50 / normal / Inter</div></div>
<div class="type-sample"><div style="font-size:26px; font-weight:700; line-height:1.23; letter-spacing:-0.625px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 700 / 1.23 / -0.625px / Inter</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:700; line-height:1.27; letter-spacing:-0.25px;">Card Title</div><div class="type-meta">Card Title -- 22px / 700 / 1.27 / -0.25px / Inter</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.125px;">Body Large -- Your workspace for docs, projects, and knowledge. All in one place.</div><div class="type-meta">Body Large -- 20px / 600 / 1.40 / -0.125px / 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:16px; font-weight:400; line-height:1.50;">Body -- Standard reading text for articles and descriptions</div><div class="type-meta">Body -- 16px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-size:15px; font-weight:600; line-height:1.33;">Nav / Button Label</div><div class="type-meta">Nav / Button -- 15px / 600 / 1.33 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.43;">Caption -- Metadata and secondary labels</div><div class="type-meta">Caption -- 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.33; letter-spacing:0.125px;">Badge / Micro Label</div><div class="type-meta">Badge -- 12px / 600 / 1.33 / 0.125px / Inter</div></div>
</div>
</div>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-blue" href="#">Get Notion free</a><div class="button-label">Primary Blue</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Request a demo</a><div class="button-label">Secondary</div></div>
<div class="button-item"><a class="btn-pill" href="#">New</a><div class="button-label">Pill Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(61,189,185,0.15); color:var(--teal); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Available</span><div class="button-label">Teal Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(240,112,32,0.15); color:var(--orange); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Warning</span><div class="button-label">Orange Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(47,202,82,0.15); color:var(--green); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Confirmed</span><div class="button-label">Green Badge</div></div>
</div>
</section>
<div class="section--warm">
<div class="section-inner" 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(--badge-bg); color:var(--badge-text);">Workspace</div>
<h3>Custom Agents</h3>
<p>Build and deploy AI agents tailored to your team's workflow. Automate tasks, answer questions, and streamline processes.</p>
</div>
<div class="card" style="box-shadow: var(--shadow-deep);">
<div class="card-badge" style="background:rgba(61,189,185,0.15); color:var(--teal);">Productivity</div>
<h3>Connected Wikis</h3>
<p>Centralize team knowledge in interconnected wikis. Keep documentation organized and always up to date with real-time collaboration.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(255,128,213,0.15); color:var(--pink);">Projects</div>
<h3>Team Projects</h3>
<p>Manage projects with flexible views: boards, timelines, lists, and calendars. Everything your team needs, all in one workspace.</p>
</div>
</div>
</div>
</div>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Workspace Name</label><input class="form-input" type="text" placeholder="My Team Workspace"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--focus" type="text" value="team@company.com"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (orange ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your workspace..."></textarea></div>
</section>
<hr class="section-divider">
<div class="section--warm">
<div class="section-inner" 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: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: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>
</div>
</div>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: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">Links, menus</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">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">Hero cards</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">Badges</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Avatars</div></div>
</div>
</section>
<hr class="section-divider">
<div class="section--warm">
<div class="section-inner" 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: var(--border-whisper); box-shadow:none;"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
<div class="elevation-card" style="border: var(--border-whisper);"><div class="elevation-label">Level 1: Whisper</div><div class="elevation-desc">1px solid rgba(255,255,255,0.1)</div></div>
<div class="elevation-card" style="border: var(--border-whisper); box-shadow: var(--shadow-card);"><div class="elevation-label">Level 2: Card</div><div class="elevation-desc">4-layer stack</div></div>
<div class="elevation-card" style="border: var(--border-whisper); box-shadow: var(--shadow-deep);"><div class="elevation-label">Level 3: Deep</div><div class="elevation-desc">5-layer stack, 52px blur</div></div>
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">2px solid focus ring</div></div>
</div>
</div>
</div>
<footer class="footer">
Generated from <a href="https://notion.com/">notion.com</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>

366
design-md/notion/preview.html Normal file
View File

@@ -0,0 +1,366 @@
<!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: Notion (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--black: rgba(0,0,0,0.95);
--black-solid: #000000;
--white: #ffffff;
--warm-white: #f6f5f4;
--warm-dark: #31302e;
--gray-500: #615d59;
--gray-300: #a39e98;
--notion-blue: #0075de;
--active-blue: #005bab;
--focus-blue: #097fe8;
--link-light-blue: #62aef0;
--badge-bg: #f2f9ff;
--badge-text: #097fe8;
--teal: #2a9d99;
--green: #1aae39;
--orange: #dd5b00;
--pink: #ff64c8;
--purple: #391c57;
--brown: #523410;
--deep-navy: #213183;
--border-whisper: 1px solid rgba(0,0,0,0.1);
--shadow-card: rgba(0,0,0,0.04) 0px 4px 18px 0px, rgba(0,0,0,0.027) 0px 2.025px 7.85px 0px, rgba(0,0,0,0.02) 0px 0.8px 2.93px 0px, rgba(0,0,0,0.01) 0px 0.175px 1.04px 0px;
--shadow-deep: rgba(0,0,0,0.01) 0px 1px 3px 0px, rgba(0,0,0,0.02) 0px 3px 7px 0px, rgba(0,0,0,0.02) 0px 7px 15px 0px, rgba(0,0,0,0.04) 0px 14px 28px 0px, rgba(0,0,0,0.05) 0px 23px 52px 0px;
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { 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 {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: var(--white);
border-bottom: var(--border-whisper);
}
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--black); text-decoration: underline; }
.nav-cta {
display: inline-block; background: var(--notion-blue); color: var(--white);
padding: 6px 14px; border-radius: 4px; font-size: 15px; font-weight: 600;
text-decoration: none; transition: background 0.15s;
}
.nav-cta:hover { background: var(--active-blue); }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 64px; font-weight: 700; line-height: 1.00;
letter-spacing: -2.125px; color: var(--black); margin-bottom: 16px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-blue {
display: inline-block; background: var(--notion-blue); color: var(--white);
padding: 10px 24px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 15px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-blue:hover { background: var(--active-blue); }
.btn-ghost {
display: inline-block; background: rgba(0,0,0,0.05); color: var(--black);
padding: 10px 24px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 15px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(0,0,0,0.1); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section--warm { background: var(--warm-white); }
.section--warm .section-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }
.section-label { font-size: 12px; font-weight: 600; color: var(--gray-300); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 32px; font-weight: 700; line-height: 1.20; letter-spacing: -1px; margin-bottom: 32px; }
.section-divider { border: none; border-top: var(--border-whisper); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 8px; overflow: hidden; border: var(--border-whisper); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }
.color-swatch-role { font-size: 11px; color: var(--gray-300); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: var(--border-whisper); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; font-family: 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(--gray-300); margin-top: 8px; }
.btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.125px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--white); border-radius: 12px; padding: 24px; border: var(--border-whisper); box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-deep); }
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 9999px; margin-bottom: 12px; letter-spacing: 0.125px; }
/* 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 #dddddd; padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(0,117,222,0.2); }
.form-input--focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(0,117,222,0.2); }
.form-input--error { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(221,91,0,0.2); }
.form-textarea {
width: 100%; min-height: 80px; background: var(--white); color: var(--black);
border: 1px solid #dddddd; padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--gray-300); 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(--warm-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }
/* 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(--warm-dark); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }
.radius-context { font-size: 10px; color: var(--gray-300); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--white); border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--gray-300); font-family: monospace; }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: var(--border-whisper); font-size: 13px; color: var(--gray-500); }
.footer a { color: var(--notion-blue); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 40px; letter-spacing: -1.5px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.section--warm .section-inner { 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="#">Get Notion free</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Notion</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
<div class="hero-buttons">
<a class="btn-blue" href="#">Get Notion free</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:rgba(0,0,0,0.95)"></div><div class="color-swatch-info"><div class="color-swatch-name">Notion Black</div><div class="color-swatch-hex">rgba(0,0,0,0.95)</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 rgba(0,0,0,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#0075de"></div><div class="color-swatch-info"><div class="color-swatch-name">Notion Blue</div><div class="color-swatch-hex">#0075de</div><div class="color-swatch-role">Primary CTA, links</div></div></div>
</div>
<div class="color-group-label">Warm Neutrals</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f6f5f4; border-bottom:1px solid rgba(0,0,0,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm White</div><div class="color-swatch-hex">#f6f5f4</div><div class="color-swatch-role">Surface tint, sections</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#31302e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#31302e</div><div class="color-swatch-role">Dark surfaces</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#615d59"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray 500</div><div class="color-swatch-hex">#615d59</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#a39e98"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray 300</div><div class="color-swatch-hex">#a39e98</div><div class="color-swatch-role">Placeholder, muted</div></div></div>
</div>
<div class="color-group-label">Semantic Accents</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#2a9d99"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#2a9d99</div><div class="color-swatch-role">Success states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1aae39"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#1aae39</div><div class="color-swatch-role">Confirmation</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#dd5b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#dd5b00</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff64c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff64c8</div><div class="color-swatch-role">Decorative accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#391c57"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#391c57</div><div class="color-swatch-role">Premium features</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#523410"></div><div class="color-swatch-info"><div class="color-swatch-name">Brown</div><div class="color-swatch-hex">#523410</div><div class="color-swatch-role">Earthy accent</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:#005bab"></div><div class="color-swatch-info"><div class="color-swatch-name">Active Blue</div><div class="color-swatch-hex">#005bab</div><div class="color-swatch-role">Button active state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#097fe8"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#097fe8</div><div class="color-swatch-role">Focus ring</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#213183"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#213183</div><div class="color-swatch-role">Brand secondary</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f9ff; border-bottom:1px solid rgba(0,0,0,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Badge Bg</div><div class="color-swatch-hex">#f2f9ff</div><div class="color-swatch-role">Pill badge surface</div></div></div>
</div>
</section>
<div class="section--warm">
<div class="section-inner" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:64px; font-weight:700; line-height:1.00; letter-spacing:-2.125px;">Display Hero</div><div class="type-meta">Display Hero -- 64px / 700 / 1.00 / -2.125px / Inter</div></div>
<div class="type-sample"><div style="font-size:54px; font-weight:700; line-height:1.04; letter-spacing:-1.875px;">Display Secondary</div><div class="type-meta">Display Secondary -- 54px / 700 / 1.04 / -1.875px / Inter</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.00; letter-spacing:-1.5px;">Section Heading</div><div class="type-meta">Section Heading -- 48px / 700 / 1.00 / -1.5px / Inter</div></div>
<div class="type-sample"><div style="font-size:40px; font-weight:700; line-height:1.50;">Sub-heading Large</div><div class="type-meta">Sub-heading Large -- 40px / 700 / 1.50 / normal / Inter</div></div>
<div class="type-sample"><div style="font-size:26px; font-weight:700; line-height:1.23; letter-spacing:-0.625px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 700 / 1.23 / -0.625px / Inter</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:700; line-height:1.27; letter-spacing:-0.25px;">Card Title</div><div class="type-meta">Card Title -- 22px / 700 / 1.27 / -0.25px / Inter</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.125px;">Body Large -- Your workspace for docs, projects, and knowledge. All in one place.</div><div class="type-meta">Body Large -- 20px / 600 / 1.40 / -0.125px / 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:16px; font-weight:400; line-height:1.50;">Body -- Standard reading text for articles and descriptions</div><div class="type-meta">Body -- 16px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-size:15px; font-weight:600; line-height:1.33;">Nav / Button Label</div><div class="type-meta">Nav / Button -- 15px / 600 / 1.33 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.43;">Caption -- Metadata and secondary labels</div><div class="type-meta">Caption -- 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.33; letter-spacing:0.125px;">Badge / Micro Label</div><div class="type-meta">Badge -- 12px / 600 / 1.33 / 0.125px / Inter</div></div>
</div>
</div>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-blue" href="#">Get Notion free</a><div class="button-label">Primary Blue</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Request a demo</a><div class="button-label">Secondary</div></div>
<div class="button-item"><a class="btn-pill" href="#">New</a><div class="button-label">Pill Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(42,157,153,0.1); color:var(--teal); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Available</span><div class="button-label">Teal Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(221,91,0,0.1); color:var(--orange); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Warning</span><div class="button-label">Orange Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(26,174,57,0.1); color:var(--green); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;">Confirmed</span><div class="button-label">Green Badge</div></div>
</div>
</section>
<div class="section--warm">
<div class="section-inner" 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(--badge-bg); color:var(--badge-text);">Workspace</div>
<h3>Custom Agents</h3>
<p>Build and deploy AI agents tailored to your team's workflow. Automate tasks, answer questions, and streamline processes.</p>
</div>
<div class="card" style="box-shadow: var(--shadow-deep);">
<div class="card-badge" style="background:rgba(42,157,153,0.1); color:var(--teal);">Productivity</div>
<h3>Connected Wikis</h3>
<p>Centralize team knowledge in interconnected wikis. Keep documentation organized and always up to date with real-time collaboration.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(255,100,200,0.1); color:var(--pink);">Projects</div>
<h3>Team Projects</h3>
<p>Manage projects with flexible views: boards, timelines, lists, and calendars. Everything your team needs, all in one workspace.</p>
</div>
</div>
</div>
</div>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Workspace Name</label><input class="form-input" type="text" placeholder="My Team Workspace"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--focus" type="text" value="team@company.com"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid domain"><div class="form-state-label">Error (orange ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your workspace..."></textarea></div>
</section>
<hr class="section-divider">
<div class="section--warm">
<div class="section-inner" 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: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: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>
</div>
</div>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: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">Links, menus</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">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">Hero cards</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">Badges</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Avatars</div></div>
</div>
</section>
<hr class="section-divider">
<div class="section--warm">
<div class="section-inner" 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: var(--border-whisper); box-shadow:none;"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
<div class="elevation-card" style="border: var(--border-whisper);"><div class="elevation-label">Level 1: Whisper</div><div class="elevation-desc">1px solid rgba(0,0,0,0.1)</div></div>
<div class="elevation-card" style="border: var(--border-whisper); box-shadow: var(--shadow-card);"><div class="elevation-label">Level 2: Card</div><div class="elevation-desc">4-layer stack, max 0.04</div></div>
<div class="elevation-card" style="border: var(--border-whisper); box-shadow: var(--shadow-deep);"><div class="elevation-label">Level 3: Deep</div><div class="elevation-desc">5-layer stack, 52px blur</div></div>
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">2px solid focus ring</div></div>
</div>
</div>
</div>
<footer class="footer">
Generated from <a href="https://notion.com/">notion.com</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>