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

add new designs

Browse Source
This commit is contained in:
necatiozmen
2026-04-01 15:58:51 +03:00
parent 3976d28923
commit ed3c8649c3
53 changed files with 9390 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
design-md/resend/DESIGN.md Normal file
View File

@@ -0,0 +1,303 @@
# Design System: Resend
## 1. Visual Theme & Atmosphere
Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.
The typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.
What makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`), the result is a design system that feels premium, precise, and quietly confident.
**Key Characteristics:**
- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness
- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer
- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales
- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
- OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`) on display fonts
- Commit Mono for code — monospace as a design element, not an afterthought
- Whisper-level shadows using blue-tinted ring: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`
## 2. Color Palette & Roles
### Primary
- **Void Black** (`#000000`): Page background, the defining canvas color (95% opacity via `--color-black-12`)
- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements
- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link highlights
### Accent Scale — Orange
- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm glow
- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm, energetic
- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary use
### Accent Scale — Green
- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald wash
- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator glow
### Accent Scale — Blue
- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent
- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue
- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive elements
### Accent Scale — Other
- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or highlights
- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states, destructive actions
### Neutral Scale
- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions
- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content
- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis
- **Medium Gray** (`#494949`): Quaternary text
- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)
- **Border Gray** (`#eaeaea`): Light context borders
- **Edge Gray** (`#ececec`): Subtle borders on light surfaces
- **Mist Gray** (`#dedfdf`): Light dividers
- **Soft Gray** (`#e5e6e6`): Alternate light border
### Surface & Overlay
- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94% opacity)
- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark
- **White 60%** (`oklab(0.999994 ... / 0.577)`): Semi-transparent white for muted text
- **White 64%** (`oklab(0.999994 ... / 0.642)`): Slightly brighter semi-transparent white
### Borders & Shadows
- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy blue-tinted borders at 19% opacity
- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant for list items
- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted shadow-as-border
- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring
- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`): Minimal card elevation
## 3. Typography Rules
### Font Families
- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero headlines
- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks: `ui-sans-serif, system-ui` — section headings
- **Body / UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text, buttons, navigation
- **Monospace**: `commitMono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
- **Secondary**: `Helvetica` — fallback for specific UI contexts
- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `"ss01", "ss04", "ss11"` |
| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |
| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `"ss01", "ss04", "ss11"` |
| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `"ss01", "ss04", "ss11"` |
| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `"ss01", "ss04", "ss11"` |
| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |
| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |
| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |
| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `"ss01", "ss03", "ss04"` — positive tracking |
| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |
| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |
| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |
| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |
| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |
| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |
| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |
| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |
| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |
### Principles
- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.
- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.
- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.
- **OpenType as identity**: The `"ss01"`, `"ss03"`, `"ss04"`, `"ss11"` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.
- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.
## 4. Component Stylings
### Buttons
**Primary Transparent Pill**
- Background: transparent
- Text: `#f0f0f0`
- Padding: 5px 12px
- Radius: 9999px (full pill)
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
- Use: Primary CTA on dark backgrounds
**White Solid Pill**
- Background: `#ffffff`
- Text: `#000000`
- Padding: 5px 12px
- Radius: 9999px
- Use: High-contrast CTA ("Get started")
**Ghost Button**
- Background: transparent
- Text: `#f0f0f0`
- Radius: 4px
- No border
- Hover: subtle background tint
- Use: Secondary actions, tab items
### Cards & Containers
- Background: transparent or very subtle dark tint
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
- Radius: 16px (standard cards), 24px (large sections/panels)
- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
- Dark product screenshots and code demos as card content
- No traditional box-shadow elevation
### Inputs & Forms
- Text: `#f0f0f0` on dark, `#000000` on light
- Radius: 4px
- Focus: shadow-based ring
- Minimal styling — inherits dark theme
### Navigation
- Sticky dark header with frost border bottom: `1px solid rgba(214, 235, 253, 0.19)`
- "Resend" wordmark left-aligned
- ABC Favorit 14px weight 500 with +0.35px tracking for nav links
- Pill CTAs right-aligned
- Mobile: hamburger collapse
### Image Treatment
- Product screenshots and code demos dominate content sections
- Dark-themed screenshots on dark background — seamless integration
- Rounded corners: 12px–16px on images
- Full-width sections with subtle gradient overlays
### Distinctive Components
**Tab Navigation**
- Horizontal tabs with subtle selection indicator
- Tab items: 8px radius
- Active state with subtle background differentiation
**Code Preview Panels**
- Dark code blocks using Commit Mono
- Frost borders (`rgba(214, 235, 253, 0.19)`)
- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)
**Multi-color Accent Badges**
- Each product feature has its own accent color from the CSS variable scale
- Badges use the accent color at low opacity (12–42%) for background, full opacity for text
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
### Grid & Container
- Centered content with generous max-width
- Full-width black sections with contained inner content
- Single-column hero, expanding to feature grids below
- Code preview panels as full-width or contained showcases
### Whitespace Philosophy
- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.
- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated "islands" of content.
- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.
### Border Radius Scale
- Sharp (4px): Buttons (ghost), inputs, small interactive elements
- Subtle (6px): Menu panels, navigation items
- Standard (8px): Tabs, content blocks
- Comfortable (10px): Accent elements
- Card (12px): Clipboard buttons, medium containers
- Large (16px): Feature cards, images, main buttons
- Section (24px): Large panels, section containers
- Pill (9999px): Primary CTAs, tags, badges
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |
| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Shadow-as-border for cards, containers |
| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | Explicit borders — buttons, dividers, tabs |
| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation |
| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | Heavy black focus ring — accessibility |
**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a "glass panel floating in space" aesthetic where borders are the primary depth mechanism.
### Decorative Depth
- Subtle warm gradient glows behind hero content (orange/amber tints)
- Product screenshots create visual depth through their own internal UI
- No gradient backgrounds — depth comes from border luminance and content contrast
## 7. Do's and Don'ts
### Do
- Use pure black (`#000000`) as the page background — the void is the canvas
- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines — they're the blue-tinted signature
- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else
- Enable OpenType `"ss01"`, `"ss04"`, `"ss11"` on Domaine and ABC Favorit text
- Apply pill radius (9999px) to primary CTAs and tags
- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting
- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows don't work
- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking
### Don't
- Don't lighten the background above `#000000` — the pure black void is non-negotiable
- Don't use neutral gray borders — all borders must have the frost blue tint
- Don't apply Domaine Display to body text — it's a display-only serif
- Don't mix accent colors in the same component — each feature gets one accent color
- Don't use box-shadow for elevation on the dark background — use frost borders instead
- Don't skip the OpenType stylistic sets — they define the typographic character
- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px
- Don't make buttons opaque on dark — transparency with frost border is the pattern
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <480px | Single column, tight padding, 76.8px hero |
| Mobile | 480–600px | Standard mobile, stacked layout |
| Desktop | >600px | Full layout, 96px hero, expanded sections |
*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*
### Touch Targets
- Pill buttons: adequate padding (5px 12px minimum)
- Tab items: 8px radius with comfortable hit areas
- Navigation links spaced with 0.35px tracking for visual separation
### Collapsing Strategy
- Hero: Domaine 96px → 76.8px on mobile
- Navigation: horizontal → hamburger
- Feature sections: side-by-side → stacked
- Code panels: maintain width, horizontal scroll if needed
- Spacing compresses proportionally
### Image Behavior
- Product screenshots maintain aspect ratio
- Dark screenshots blend seamlessly with dark background at all sizes
- Rounded corners (12px–16px) maintained across breakpoints
## 9. Agent Prompt Guide
### Quick Color Reference
- Background: Void Black (`#000000`)
- Primary text: Near White (`#f0f0f0`)
- Secondary text: Silver (`#a1a4a5`)
- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
- Orange accent: `#ff801f`
- Green accent: `#11ff99` (at 18% opacity)
- Blue accent: `#3b9eff`
- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`
### Example Component Prompts
- "Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
- "Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned."
- "Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
- "Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d)."
- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500."
### Iteration Guide
1. Start with pure black — everything floats in the void
2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral
3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross
4. OpenType stylistic sets are mandatory on display fonts — they define the character
5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
7. No shadows — use frost borders for depth against the void

23
design-md/resend/README.md Normal file
View File

@@ -0,0 +1,23 @@
# Resend Inspired Design System
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/resend/DESIGN.md) extracted from the public [resend](https://resend.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/resend/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Resend 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
![Resend Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/resend/preview-dark-screenshot.png)
### Light Mode
![Resend Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/resend/preview-screenshot.png)

357
design-md/resend/preview-dark.html Normal file
View File

@@ -0,0 +1,357 @@
<!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: Resend (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&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
<style>
:root {
--void: #050505;
--near-white: #f0f0f0;
--white: #ffffff;
--silver: #a1a4a5;
--dark-gray: #464a4d;
--mid-gray: #5c5c5c;
--orange-10: #ff801f;
--orange-11: #ffa057;
--green-4: #11ff99;
--blue-10: #3b9eff;
--yellow-9: #ffc53d;
--red-5: #ff2047;
--frost-border: rgba(214, 235, 253, 0.19);
--frost-border-alt: rgba(217, 237, 254, 0.145);
--ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;
--font-serif: 'DM Serif Display', Georgia, serif;
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--void);
color: var(--near-white);
font-family: var(--font-sans);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(5,5,5,0.9);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--frost-border);
}
.nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }
.nav-links a:hover { color: var(--near-white); }
.nav-cta {
display: inline-block; background: var(--white); color: var(--void);
padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }
.hero {
padding: 100px 32px 80px; text-align: center;
position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
width: 600px; height: 400px;
background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.hero h1 {
font-family: var(--font-serif); font-size: 88px; font-weight: 400;
line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white {
display: inline-block; background: var(--white); color: var(--void);
padding: 8px 20px; border-radius: 9999px; border: none;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-white:hover { opacity: 0.85; }
.btn-frost {
display: inline-block; background: transparent; color: var(--near-white);
padding: 8px 20px; border-radius: 9999px;
border: 1px solid var(--frost-border);
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-frost:hover { background: rgba(255,255,255,0.08); }
.btn-ghost {
display: inline-block; background: transparent; color: var(--near-white);
padding: 8px 14px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer;
}
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }
.section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
.color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }
.card:hover { border-color: rgba(214,235,253,0.35); }
.card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--silver); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }
.form-input {
width: 100%; background: transparent; color: var(--near-white);
border: 1px solid var(--frost-border); 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(--blue-10); }
.form-input--focus { border-color: var(--blue-10); }
.form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }
.form-textarea {
width: 100%; min-height: 80px; background: transparent; color: var(--near-white);
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }
.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(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.radius-context { font-size: 9px; color: var(--dark-gray); }
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }
.footer a { color: var(--orange-10); text-decoration: underline; }
@media (max-width: 600px) {
.hero h1 { font-size: 56px; letter-spacing: -0.56px; }
.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="#">Get Started</a>
</nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff801f;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;">Dark Mode</div>
<section class="hero">
<div class="hero-content">
<h1>Design System<br>Inspired by Resend</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-white" href="#">Get Started</a>
<a class="btn-frost" href="#">Documentation</a>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Void Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Near White</div><div class="color-swatch-hex">#f0f0f0</div><div class="color-swatch-role">Primary text</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">Maximum emphasis</div></div></div>
</div>
<div class="color-group-label">Accent Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff801f"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 10</div><div class="color-swatch-hex">#ff801f</div><div class="color-swatch-role">Primary orange accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa057"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 11</div><div class="color-swatch-hex">#ffa057</div><div class="color-swatch-role">Light orange</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#11ff99"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 4</div><div class="color-swatch-hex">#11ff99</div><div class="color-swatch-role">Success / green accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#3b9eff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 10</div><div class="color-swatch-hex">#3b9eff</div><div class="color-swatch-role">Interactive blue</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc53d"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 9</div><div class="color-swatch-hex">#ffc53d</div><div class="color-swatch-role">Warning / gold</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2047"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 5</div><div class="color-swatch-hex">#ff2047</div><div class="color-swatch-role">Error / destructive</div></div></div>
</div>
<div class="color-group-label">Neutral Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#a1a4a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#a1a4a5</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c5c5c"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5c5c5c</div><div class="color-swatch-role">Muted labels</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#464a4d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#464a4d</div><div class="color-swatch-role">Tertiary text</div></div></div>
</div>
<div class="color-group-label">Border & Surface</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Frost Border</div><div class="color-swatch-hex">rgba(214,235,253,0.19)</div><div class="color-swatch-role">Signature icy border</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(255,255,255,0.28)"></div><div class="color-swatch-info"><div class="color-swatch-name">White Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.28)</div><div class="color-swatch-role">Button hover</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display Hero — 96px / 400 / 1.00 / -0.96px / Domaine Display</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;">Section Heading</div><div class="type-meta">Section Heading — 56px / 400 / 1.20 / -2.8px / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;">Sub-heading text</div><div class="type-meta">Sub-heading — 20px / 400 / 1.30 / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;">Feature Title</div><div class="type-meta">Feature Title — 24px / 500 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;">Nav Link</div><div class="type-meta">Nav Link — 14px / 500 / 1.43 / +0.35px / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;">Button / Link</div><div class="type-meta">Button — 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;">Small Uppercase</div><div class="type-meta">Small Uppercase — 12px / 500 / uppercase / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);">resend.emails.send({ to: 'user@example.com' })</div><div class="type-meta">Code Body — 16px / 400 / 1.50 / Commit Mono</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);">npm install resend</div><div class="type-meta">Code Small — 12px / 400 / 1.33 / Commit Mono</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-white" href="#">Get Started</a><div class="button-label">White Solid Pill</div></div>
<div class="button-item"><a class="btn-frost" href="#">Documentation</a><div class="button-label">Frost Pill</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Learn more</a><div class="button-label">Ghost</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Email API</span><div class="button-label">Accent Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Webhooks</span><div class="button-label">Blue Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Delivered</span><div class="button-label">Green Badge</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:rgba(255,128,31,0.12); color:var(--orange-10);">Email API</div>
<h3>First-class developer experience</h3>
<p>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.</p>
</div>
<div class="card" style="border-color: rgba(214,235,253,0.35);">
<div class="card-badge" style="background:rgba(59,158,255,0.12); color:var(--blue-10);">Elevated</div>
<h3>Reach humans, not spam</h3>
<p>Deliver transactional emails at scale. Card shown with brighter frost border on hover.</p>
</div>
<div class="card" style="border-radius: 24px;">
<div class="card-badge" style="background:rgba(17,255,153,0.12); color:var(--green-4);">Section</div>
<h3>React Email</h3>
<p>Build beautiful emails using React components. 24px radius section panel variant.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">API Key</label><input class="form-input" type="text" placeholder="re_123456789"><div class="form-state-label">Default (frost border)</div></div>
<div class="form-group"><label class="form-label">To Address</label><input class="form-input form-input--focus" type="email" value="user@example.com"><div class="form-state-label">Focus (blue border)</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 border)</div></div>
<div class="form-group"><label class="form-label">Email Body</label><textarea class="form-textarea" placeholder="Write your email content..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</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">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">Tabs</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">Containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></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 rgba(214,235,253,0.08);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow — void background</div></div>
<div class="elevation-card" style="box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Ring</div><div class="elevation-desc">Blue-tinted ring shadow</div></div>
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.19);"><div class="elevation-label">Level 1b: Frost</div><div class="elevation-desc">Icy frost border</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;"><div class="elevation-label">Level 2: Subtle</div><div class="elevation-desc">Minimal card elevation</div></div>
<div class="elevation-card" style="box-shadow: rgb(0,0,0) 0px 0px 0px 8px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Heavy black focus ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>

356
design-md/resend/preview.html Normal file
View File

@@ -0,0 +1,356 @@
<!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: Resend (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&family=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
<style>
:root {
--void: #000000;
--near-white: #f0f0f0;
--white: #ffffff;
--silver: #a1a4a5;
--dark-gray: #464a4d;
--mid-gray: #5c5c5c;
--orange-10: #ff801f;
--orange-11: #ffa057;
--green-4: #11ff99;
--blue-10: #3b9eff;
--yellow-9: #ffc53d;
--red-5: #ff2047;
--frost-border: rgba(214, 235, 253, 0.19);
--frost-border-alt: rgba(217, 237, 254, 0.145);
--ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;
--font-serif: 'DM Serif Display', Georgia, serif;
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--void);
color: var(--near-white);
font-family: var(--font-sans);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--frost-border);
}
.nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }
.nav-links a:hover { color: var(--near-white); }
.nav-cta {
display: inline-block; background: var(--white); color: var(--void);
padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }
.hero {
padding: 100px 32px 80px; text-align: center;
position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
width: 600px; height: 400px;
background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.hero h1 {
font-family: var(--font-serif); font-size: 88px; font-weight: 400;
line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white {
display: inline-block; background: var(--white); color: var(--void);
padding: 8px 20px; border-radius: 9999px; border: none;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-white:hover { opacity: 0.85; }
.btn-frost {
display: inline-block; background: transparent; color: var(--near-white);
padding: 8px 20px; border-radius: 9999px;
border: 1px solid var(--frost-border);
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-frost:hover { background: rgba(255,255,255,0.08); }
.btn-ghost {
display: inline-block; background: transparent; color: var(--near-white);
padding: 8px 14px; border-radius: 4px; border: none;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
text-decoration: none; cursor: pointer;
}
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }
.section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
.color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }
.card:hover { border-color: rgba(214,235,253,0.35); }
.card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--silver); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }
.form-input {
width: 100%; background: transparent; color: var(--near-white);
border: 1px solid var(--frost-border); 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(--blue-10); }
.form-input--focus { border-color: var(--blue-10); }
.form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }
.form-textarea {
width: 100%; min-height: 80px; background: transparent; color: var(--near-white);
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }
.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(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.radius-context { font-size: 9px; color: var(--dark-gray); }
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }
.footer a { color: var(--orange-10); text-decoration: underline; }
@media (max-width: 600px) {
.hero h1 { font-size: 56px; letter-spacing: -0.56px; }
.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="#">Get Started</a>
</nav>
<section class="hero">
<div class="hero-content">
<h1>Design System<br>Inspired by Resend</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-white" href="#">Get Started</a>
<a class="btn-frost" href="#">Documentation</a>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Void Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Near White</div><div class="color-swatch-hex">#f0f0f0</div><div class="color-swatch-role">Primary text</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">Maximum emphasis</div></div></div>
</div>
<div class="color-group-label">Accent Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff801f"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 10</div><div class="color-swatch-hex">#ff801f</div><div class="color-swatch-role">Primary orange accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa057"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 11</div><div class="color-swatch-hex">#ffa057</div><div class="color-swatch-role">Light orange</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#11ff99"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 4</div><div class="color-swatch-hex">#11ff99</div><div class="color-swatch-role">Success / green accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#3b9eff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 10</div><div class="color-swatch-hex">#3b9eff</div><div class="color-swatch-role">Interactive blue</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc53d"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 9</div><div class="color-swatch-hex">#ffc53d</div><div class="color-swatch-role">Warning / gold</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2047"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 5</div><div class="color-swatch-hex">#ff2047</div><div class="color-swatch-role">Error / destructive</div></div></div>
</div>
<div class="color-group-label">Neutral Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#a1a4a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#a1a4a5</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c5c5c"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5c5c5c</div><div class="color-swatch-role">Muted labels</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#464a4d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#464a4d</div><div class="color-swatch-role">Tertiary text</div></div></div>
</div>
<div class="color-group-label">Border & Surface</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Frost Border</div><div class="color-swatch-hex">rgba(214,235,253,0.19)</div><div class="color-swatch-role">Signature icy border</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(255,255,255,0.28)"></div><div class="color-swatch-info"><div class="color-swatch-name">White Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.28)</div><div class="color-swatch-role">Button hover</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display Hero — 96px / 400 / 1.00 / -0.96px / Domaine Display</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;">Section Heading</div><div class="type-meta">Section Heading — 56px / 400 / 1.20 / -2.8px / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;">Sub-heading text</div><div class="type-meta">Sub-heading — 20px / 400 / 1.30 / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;">Feature Title</div><div class="type-meta">Feature Title — 24px / 500 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;">Nav Link</div><div class="type-meta">Nav Link — 14px / 500 / 1.43 / +0.35px / ABC Favorit</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;">Button / Link</div><div class="type-meta">Button — 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;">Small Uppercase</div><div class="type-meta">Small Uppercase — 12px / 500 / uppercase / Inter</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);">resend.emails.send({ to: 'user@example.com' })</div><div class="type-meta">Code Body — 16px / 400 / 1.50 / Commit Mono</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);">npm install resend</div><div class="type-meta">Code Small — 12px / 400 / 1.33 / Commit Mono</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-white" href="#">Get Started</a><div class="button-label">White Solid Pill</div></div>
<div class="button-item"><a class="btn-frost" href="#">Documentation</a><div class="button-label">Frost Pill</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Learn more</a><div class="button-label">Ghost</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Email API</span><div class="button-label">Accent Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Webhooks</span><div class="button-label">Blue Badge</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Delivered</span><div class="button-label">Green Badge</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:rgba(255,128,31,0.12); color:var(--orange-10);">Email API</div>
<h3>First-class developer experience</h3>
<p>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.</p>
</div>
<div class="card" style="border-color: rgba(214,235,253,0.35);">
<div class="card-badge" style="background:rgba(59,158,255,0.12); color:var(--blue-10);">Elevated</div>
<h3>Reach humans, not spam</h3>
<p>Deliver transactional emails at scale. Card shown with brighter frost border on hover.</p>
</div>
<div class="card" style="border-radius: 24px;">
<div class="card-badge" style="background:rgba(17,255,153,0.12); color:var(--green-4);">Section</div>
<h3>React Email</h3>
<p>Build beautiful emails using React components. 24px radius section panel variant.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">API Key</label><input class="form-input" type="text" placeholder="re_123456789"><div class="form-state-label">Default (frost border)</div></div>
<div class="form-group"><label class="form-label">To Address</label><input class="form-input form-input--focus" type="email" value="user@example.com"><div class="form-state-label">Focus (blue border)</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 border)</div></div>
<div class="form-group"><label class="form-label">Email Body</label><textarea class="form-textarea" placeholder="Write your email content..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</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">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">Tabs</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">Containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></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 rgba(214,235,253,0.08);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow — void background</div></div>
<div class="elevation-card" style="box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Ring</div><div class="elevation-desc">Blue-tinted ring shadow</div></div>
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.19);"><div class="elevation-label">Level 1b: Frost</div><div class="elevation-desc">Icy frost border</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;"><div class="elevation-label">Level 2: Subtle</div><div class="elevation-desc">Minimal card elevation</div></div>
<div class="elevation-card" style="box-shadow: rgb(0,0,0) 0px 0px 0px 8px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Heavy black focus ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>