0 Fork 0

Files

T

neo 76c4c5b4fe design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)

- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc.
- 147 files: DESIGN.md + README.md per brand (~2.1 MB)
- Each DESIGN.md contains structured brand analysis (colors, typography, components)
- Updated 00-overview.md with new design-systems directory

2026-06-21 20:40:35 +05:00

1.4 KiB

Raw Blame History

title, description, tags

title

description

Typography Scale & System

Type Scale (1.25 ratio)

Name	Size	Weight	Line-height	Use
xs	12px	400	1.5	Captions, labels
sm	14px	400	1.5	Small text, form labels
base	16px	400	1.6	Body text
lg	18px	400	1.6	Subtitles, lead text
xl	20px	600	1.4	Small headings
2xl	24px	600	1.3	Section headings
3xl	30px	700	1.2	Page titles
4xl	36px	700	1.2	Hero titles
5xl	48px	800	1.1	Display titles
6xl	64px	800	1.1	Hero display

CSS Implementation

:root {
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-scale: 1.25;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

Font Pairing Rules

Contrast is key — Sans-serif + Sans-serif (different weights)
Max 2 fonts — One display, one body
Prefer system fonts — Faster rendering, native feel
Test at actual sizes — Not just in design tools

Anti-Patterns

Never use more than 2 type families
Never set line-height below 1.4 for body text
Never use font size below 14px
Never ignore font-display: swap

1.4 KiB Raw Blame History

Typography Scale & System

Type Scale (1.25 ratio)

CSS Implementation

Font Pairing Rules

Anti-Patterns

1.4 KiB

Raw Blame History