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

185
design-md/revolut/DESIGN.md Normal file
View File

@@ -0,0 +1,185 @@
# Design System: Revolut
## 1. Visual Theme & Atmosphere
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
**Key Characteristics:**
- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
- Universal pill buttons (9999px radius) with generous padding (14px 32px)
- Inter for body text with positive letter-spacing (0.16px–0.24px)
- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
- Zero shadows detected — depth through color contrast only
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
## 2. Color Palette & Roles
### Primary
- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
### Brand / Interactive
- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
### Semantic
- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
- **Green Text** (`#006400`): `--website-color-green-text`, green text
- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
### Neutral Scale
- **Mid Slate** (`#505a63`): Secondary text
- **Cool Gray** (`#8d969e`): Muted text, tertiary
- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
## 3. Typography Rules
### Font Families
- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
- **Body / UI**: `Inter` — standard system sans
- **Fallback**: `Arial` for specific button contexts
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
### Principles
- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
## 4. Component Stylings
### Buttons
**Primary Dark Pill**
- Background: `#191c1f`
- Text: `#ffffff`
- Padding: 14px 32px
- Radius: 9999px (full pill)
- Hover: opacity 0.85
- Focus: `0 0 0 0.125rem` ring
**Secondary Light Pill**
- Background: `#f4f4f4`
- Text: `#000000`
- Padding: 14px 34px
- Radius: 9999px
- Hover: opacity 0.85
**Outlined Pill**
- Background: transparent
- Text: `#191c1f`
- Border: `2px solid #191c1f`
- Padding: 14px 32px
- Radius: 9999px
**Ghost on Dark**
- Background: `rgba(244, 244, 244, 0.1)`
- Text: `#f4f4f4`
- Border: `2px solid #f4f4f4`
- Padding: 14px 32px
- Radius: 9999px
### Cards & Containers
- Radius: 12px (small), 20px (cards)
- No shadows — flat surfaces with color contrast
- Dark and light section alternation
### Navigation
- Aeonik Pro 20px weight 500
- Clean header, hamburger toggle at 12px radius
- Pill CTAs right-aligned
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
- Large section spacing: 80px–120px
### Border Radius Scale
- Standard (12px): Navigation, small buttons
- Card (20px): Feature cards
- Pill (9999px): All buttons
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
## 7. Do's and Don'ts
### Do
- Use Aeonik Pro weight 500 for all display headings
- Apply 9999px radius to all buttons — pill shape is universal
- Use generous button padding (14px 32px)
- Keep the palette to near-black + white for marketing surfaces
- Apply positive letter-spacing on Inter body text
### Don't
- Don't use shadows — Revolut is flat by design
- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
- Don't use small buttons — the generous padding is intentional
- Don't apply semantic colors to marketing surfaces — they're for the product
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <400px | Compact, single column |
| Mobile | 400–720px | Standard mobile |
| Tablet | 720–1024px | 2-column layouts |
| Desktop | 1024–1280px | Standard desktop |
| Large | 1280–1920px | Full layout |
## 9. Agent Prompt Guide
### Quick Color Reference
- Dark: Revolut Dark (`#191c1f`)
- Light: White (`#ffffff`)
- Surface: Light (`#f4f4f4`)
- Blue: Revolut Blue (`#494fdf`)
- Danger: Red (`#e23b4a`)
- Success: Teal (`#00a87e`)
### Example Component Prompts
- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
### Iteration Guide
1. Aeonik Pro 500 for headings — never bold
2. All buttons are pills (9999px) with generous padding
3. Zero shadows — flat is the Revolut identity
4. Near-black + white for marketing, semantic colors for product

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

@@ -0,0 +1,23 @@
# Revolut Inspired Design System
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/revolut/DESIGN.md) extracted from the public [revolut](https://revolut.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/revolut/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Revolut 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
![Revolut Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/revolut/preview-dark-screenshot.png)
### Light Mode
![Revolut Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/revolut/preview-screenshot.png)

234
design-md/revolut/preview-dark.html Normal file
View File

@@ -0,0 +1,234 @@
<!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: Revolut (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&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--white:#0d0e10; --dark:#f4f4f4; --light:#1e2124; --blue:#494fdf; --action:#4f55f1;
--danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
--gray:#6a7078; --slate:#a0a8b0; --border:#2e3236;
--font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:var(--white); }
.nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
.nav-links a:hover { opacity:0.7; }
.nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
.hero { padding:80px 32px; text-align:center; }
.hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
.hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
.btn-dark:hover { opacity:0.85; }
.btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
.btn-light:hover { opacity:0.85; }
.btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
.btn-outline:hover { opacity:0.85; }
.btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
.section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
.section-dark .inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
.section-divider { border:none; border-top:1px solid var(--light); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
.color-swatch-block { height:60px; width:100%; }
.color-swatch-info { padding:8px 10px; }
.color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
.color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
.type-sample:last-child { border-bottom:none; }
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button-item { text-align:center; }
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
.card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
.card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
.card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
.form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spacing-item { text-align:center; }
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.radius-item { text-align:center; }
.radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
.footer a { color:var(--white); text-decoration:underline; }
@media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#494fdf;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
<section class="hero">
<h1>Design System<br>Inspired by Revolut</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Get Started</a>
<a class="btn-outline" href="#">Learn More</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:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, 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">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
</div>
<div class="color-group-label">Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
</div>
<div class="color-group-label">Neutral</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</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-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
</div>
<div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
<a class="btn-ghost-dark" href="#">Ghost on Dark</a>
</div>
<div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
</section>
<div class="section-dark">
<div class="inner" id="cards">
<div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
<div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
<div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
</div>
</div>
</div>
<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">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width: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:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid">
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
<div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>

233
design-md/revolut/preview.html Normal file
View File

@@ -0,0 +1,233 @@
<!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: Revolut (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&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--white:#ffffff; --dark:#191c1f; --light:#f4f4f4; --blue:#494fdf; --action:#4f55f1;
--danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
--gray:#8d969e; --slate:#505a63; --border:#c9c9cd;
--font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:var(--white); }
.nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
.nav-links a:hover { opacity:0.7; }
.nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
.hero { padding:80px 32px; text-align:center; }
.hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
.hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
.btn-dark:hover { opacity:0.85; }
.btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
.btn-light:hover { opacity:0.85; }
.btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
.btn-outline:hover { opacity:0.85; }
.btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
.section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
.section-dark .inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
.section-divider { border:none; border-top:1px solid var(--light); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
.color-swatch-block { height:60px; width:100%; }
.color-swatch-info { padding:8px 10px; }
.color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
.color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
.type-sample:last-child { border-bottom:none; }
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button-item { text-align:center; }
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
.card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
.card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
.card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
.form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spacing-item { text-align:center; }
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.radius-item { text-align:center; }
.radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
.footer a { color:var(--white); text-decoration:underline; }
@media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Revolut</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Get Started</a>
<a class="btn-outline" href="#">Learn More</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:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, 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">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
</div>
<div class="color-group-label">Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
</div>
<div class="color-group-label">Neutral</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</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-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
</div>
<div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
<a class="btn-ghost-dark" href="#">Ghost on Dark</a>
</div>
<div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
</section>
<div class="section-dark">
<div class="inner" id="cards">
<div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
<div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
<div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
</div>
</div>
</div>
<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">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width: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:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid">
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
<div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>