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

173
design-md/wise/DESIGN.md Normal file
View File

@@ -0,0 +1,173 @@
# Design System: Wise
## 1. Visual Theme & Atmosphere
Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `"calt"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.
**Key Characteristics:**
- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
- Lime Green (`#9fe870`) accent with dark green text (`#163300`) — nature-inspired fintech
- Inter body at weight 600 as default — confident, not light
- Near-black (`#0e0f0c`) primary with warm green undertone
- Scale(1.05) hover animations — buttons physically grow
- OpenType `"calt"` on all text
- Pill buttons (9999px) and large rounded cards (30px–40px)
- Semantic color system with comprehensive state management
## 2. Color Palette & Roles
### Primary Brand
- **Near Black** (`#0e0f0c`): Primary text, background for dark sections
- **Wise Green** (`#9fe870`): Primary CTA button, brand accent
- **Dark Green** (`#163300`): Button text on green, deep green accent
- **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds
- **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent
### Semantic
- **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success
- **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error/destructive
- **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings
- **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint
- **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent
### Neutral
- **Warm Dark** (`#454745`): Secondary text, borders
- **Gray** (`#868685`): Muted text, tertiary
- **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface
## 3. Typography Rules
### Font Families
- **Display**: `Wise Sans`, fallback: `Inter` — OpenType `"calt"` on all text
- **Body / UI**: `Inter`, fallbacks: `Helvetica, Arial`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `"calt"` |
| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `"calt"` |
| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `"calt"` |
| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `"calt"` |
| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `"calt"` |
| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `"calt"` |
| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `"calt"` |
| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `"calt"` |
| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `"calt"` |
| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `"calt"` |
| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `"calt"` |
| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `"calt"` |
### Principles
- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
- **"calt" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
- **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.
## 4. Component Stylings
### Buttons
**Primary Green Pill**
- Background: `#9fe870` (Wise Green)
- Text: `#163300` (Dark Green)
- Padding: 5px 16px
- Radius: 9999px
- Hover: scale(1.05) — button physically grows
- Active: scale(0.95) — button compresses
- Focus: inset ring + outline
**Secondary Subtle Pill**
- Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)
- Text: `#0e0f0c`
- Padding: 8px 12px 8px 16px
- Radius: 9999px
- Same scale hover/active behavior
### Cards & Containers
- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)
- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)
### Navigation
- Green-tinted navigation hover: `rgba(211,242,192,0.4)`
- Clean header with Wise wordmark
- Pill CTAs right-aligned
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
### Border Radius Scale
- Minimal (2px): Links, inputs
- Standard (10px): Comboboxes, inputs
- Card (16px): Small cards, buttons, radio
- Medium (20px): Links, medium cards
- Large (30px): Feature cards
- Section (40px): Tables, large cards
- Mega (1000px): Presentation elements
- Pill (9999px): All buttons, images
- Circle (50%): Icons, badges
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Default |
| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |
| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |
**Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.
## 7. Do's and Don'ts
### Do
- Use Wise Sans weight 900 for display — the extreme boldness IS the brand
- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
- Apply scale(1.05) hover and scale(0.95) active on buttons
- Enable "calt" on all text
- Use Inter weight 600 as the body default
### Don't
- Don't use light font weights for Wise Sans — only 900
- Don't relax the 0.85 line-height on display — the density is the identity
- Don't use the Wise Green as background for large surfaces — it's for buttons and accents
- Don't skip the scale animation on buttons
- Don't use traditional shadows — ring shadows only
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <576px | Single column |
| Tablet | 576–992px | 2-column |
| Desktop | 992–1440px | Full layout |
| Large | >1440px | Expanded |
## 9. Agent Prompt Guide
### Quick Color Reference
- Text: Near Black (`#0e0f0c`)
- Background: White (`#ffffff` / off-white)
- Accent: Wise Green (`#9fe870`)
- Button text: Dark Green (`#163300`)
- Secondary: Gray (`#868685`)
### Example Component Prompts
- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
### Iteration Guide
1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
2. Lime Green for buttons only — dark green text on green background
3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
4. "calt" on everything — contextual alternates are mandatory
5. Inter 600 for body — confident reading weight

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

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

230
design-md/wise/preview-dark.html Normal file
View File

@@ -0,0 +1,230 @@
<!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: Wise (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;900&display=swap" rel="stylesheet">
<style>
:root {
--white:#0e0f0c; --black:#e8ebe6; --green:#9fe870; --dark-green:#163300;
--mint:#1a2e10; --gray:#6a6a69; --warm-dark:#a0a39e; --light:#1e201c;
--danger:#d03238; --warning:#ffd11a;
--font:'Inter',Helvetica,Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(232,235,230,0.1); }
.nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
.nav-links a:hover { opacity:0.7; }
.nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
.nav-cta:hover { transform:scale(1.05); }
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
.hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
.hero h1 span { color:var(--dark-green); }
.hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
.btn-green:hover { transform:scale(1.05); }
.btn-green:active { transform:scale(0.95); }
.btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
.btn-subtle:hover { transform:scale(1.05); }
.section { padding:64px 24px; 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-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
.section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
.color-swatch-block { height:64px; width:100%; }
.color-swatch-info { padding:10px; }
.color-swatch-name { font-size:13px; font-weight:600; 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(--warm-dark); 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:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
.card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
.card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
.form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
.form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); 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(--green); 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(--mint); border:1px solid var(--green); 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 rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
.footer a { color:var(--green); text-decoration:underline; }
@media (max-width:576px) { .hero h1 { font-size:48px; } .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:#9fe870;color:#163300;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
<section class="hero">
<h1>Design System<br>Inspired by<br><span>Wise</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
<div class="hero-buttons">
<a class="btn-green" href="#">Send Money</a>
<a class="btn-subtle" 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">Brand</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green 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:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</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:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
<div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
<div class="button-row">
<div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
<div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
</div>
<p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
<div class="card-grid">
<div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
<div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
<div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
<div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
<div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
<div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</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: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>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</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</div></div>
<div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>

229
design-md/wise/preview.html Normal file
View File

@@ -0,0 +1,229 @@
<!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: Wise (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;900&display=swap" rel="stylesheet">
<style>
:root {
--white:#ffffff; --black:#0e0f0c; --green:#9fe870; --dark-green:#163300;
--mint:#e2f6d5; --gray:#868685; --warm-dark:#454745; --light:#e8ebe6;
--danger:#d03238; --warning:#ffd11a;
--font:'Inter',Helvetica,Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(14,15,12,0.08); }
.nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
.nav-links a:hover { opacity:0.7; }
.nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
.nav-cta:hover { transform:scale(1.05); }
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
.hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
.hero h1 span { color:var(--dark-green); }
.hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
.btn-green:hover { transform:scale(1.05); }
.btn-green:active { transform:scale(0.95); }
.btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
.btn-subtle:hover { transform:scale(1.05); }
.section { padding:64px 24px; 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-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
.section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
.color-swatch-block { height:64px; width:100%; }
.color-swatch-info { padding:10px; }
.color-swatch-name { font-size:13px; font-weight:600; 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(--warm-dark); 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:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
.card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
.card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
.form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
.form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); 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(--green); 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(--mint); border:1px solid var(--green); 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 rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
.footer a { color:var(--green); text-decoration:underline; }
@media (max-width:576px) { .hero h1 { font-size:48px; } .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<br><span>Wise</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
<div class="hero-buttons">
<a class="btn-green" href="#">Send Money</a>
<a class="btn-subtle" 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">Brand</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green 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:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</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:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
<div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
<div class="button-row">
<div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
<div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
</div>
<p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
<div class="card-grid">
<div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
<div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
<div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
<div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
<div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
<div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</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: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>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</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</div></div>
<div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>