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

22 KiB

Raw Permalink Blame History

name, title, description, tags, source

name

title

description

Mobile Design Token Systems

21 дизайн-систем для мобильных интерфейсов с детальными токенами типографики, цветов и компонентов.

1. Bauhaus Geometric

Шрифт: Outfit (Single Family)
Стиль: Bauhaus, geometric, constructivist, bold uppercase
Применение: Мобильные приложения Bauhaus, bold editorial, дизайн-платформы

Typography Scale

Hero:   text-4xl–text-5xl  font-black  uppercase  tracking-tighter  leading-[0.9]
Sub:    text-2xl          font-bold   uppercase  tracking-tight     leading-[1]
Body:   text-base         font-bold   uppercase  tracking-tight     leading-[1.1]
Label:  text-xs           font-bold   uppercase  tracking-widest    leading-[1]

Implementation

fontFamily: {
  sans: ['Outfit', 'sans-serif']
}

.hero {
  @apply text-4xl font-black uppercase tracking-tighter leading-[0.9];
}
.body {
  @apply text-base font-bold uppercase tracking-tight leading-[1.1];
}
.label {
  @apply text-xs font-bold uppercase tracking-widest leading-[1];
}

2. Minimalist Monochrome Editorial

Шрифт: Playfair Display + Source Serif 4 + JetBrains Mono (Triple Stack)
Стиль: Monochrome, austere, typographic, luxury high contrast
Применение: Модные мобильные приложения, digital exhibitions, портфолио

Typography Scale

Hero:   text-5xl–text-6xl  font-black  tracking-tighter  leading-[0.9]
Section: text-2xl         font-bold   tracking-tight     leading-[1]
Body:   text-base        font-light  leading-relaxed    leading-[1.75]
Tag:    text-xs          font-bold   uppercase          tracking-widest

Implementation

fontFamily: {
  display: ['Playfair Display', 'serif'],
  body: ['Source Serif 4', 'serif'],
  mono: ['JetBrains Mono', 'monospace']
}

/* 100% serif/mono — NO UI sans-serif */
.hero {
  @apply text-5xl font-black tracking-tighter leading-[0.9] text-gray-900;
}
.tag {
  @apply text-xs font-bold uppercase tracking-widest text-gray-500;
}

3. Modern Dark Cinema (Inter System)

Шрифт: Inter (Single Family)
Стиль: Dark, cinematic, technical, precision
Применение: Dev tools, fintech, AI dashboards, streaming

Typography Scale

Display: text-4xl   font-bold     tracking-tighter  gradient-text (white→rgba(255,255,255,0.7))
H1:      text-3xl   font-semibold tracking-tight
H2:      text-2xl   font-semibold tracking-tight
Body:    text-base  font-normal
Label:   text-xs    font-medium  uppercase          tracking-widest

Implementation

fontFamily: {
  sans: ['Inter', 'sans-serif']
}

.display {
  @apply text-4xl font-bold tracking-tighter;
  background: linear-gradient(to right, #FFFFFF, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
}

.h1 { @apply text-3xl font-semibold tracking-tight; }
.h2 { @apply text-2xl font-semibold tracking-tight; }
.body { @apply text-base font-normal; }
.label {
  @apply text-xs font-medium uppercase tracking-[0.15em] text-gray-400;
}

Colors

:root {
  --background: #0B0B10;
  --foreground: #F8FAFC;
  --card: #1E1E23;
  --card-foreground: #F8FAFC;
  --muted: #232328;
  --muted-foreground: #94A3B8;
  --border: #1E293B;
}

4. SaaS Mobile Boutique (Calistoga + Inter)

Шрифт: Calistoga + Inter + JetBrains Mono (Tri-Stack)
Стиль: Boutique, warm editorial, premium
Применение: B2B SaaS mobile, fintech, marketing tools

Typography Scale

Hero:    text-3xl–text-4xl  font-medium  italic   leading-[1.1]
Section: text-2xl         font-semibold              leading-[1.2]
Body:    text-base        font-normal                leading-[1.625]
Label:   text-xs          font-bold  uppercase        tracking-[0.1em]
Data:    text-xs          font-mono    uppercase      tracking-[0.15em]

Implementation

fontFamily: {
  display: ['Calistoga', 'serif'],
  sans: ['Inter', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace']
}

.hero {
  @apply text-4xl font-medium italic leading-[1.1] text-gray-900;
}
.label {
  @apply text-xs font-bold uppercase tracking-[0.1em] text-gray-500;
}
.data {
  @apply text-xs font-mono uppercase tracking-[0.15em] text-gray-600;
}

5. Terminal CLI Monospace

Шрифт: JetBrains Mono (Single Family)
Стиль: Terminal, hacker, matrix, retro-future
Применение: Dev tools, Web3, hacker aesthetic, ARG

Typography Scale

Strict sizes ONLY: 12pt / 14pt / 16pt
Weight: 400 normal only (bold ruins mono character)
Line height: 1.2x font size (information density)
Letter spacing: normal (monospaced auto-spacing)

Implementation

fontFamily: {
  mono: ['JetBrains Mono', 'monospace']
}

.text-12 { @apply text-sm; }      /* 12pt */
.text-14 { @apply text-base; }    /* 14pt */
.text-16 { @apply text-lg; }      /* 16pt */

/* ALL UI labels uppercase */
.label {
  @apply text-sm font-mono uppercase;
}

/* ASCII borders and text-based progress bars */
.border-ascii {
  border: 1px solid #00FF41;
  font-family: 'JetBrains Mono', monospace;
}

.progress-bar {
  @apply text-sm font-mono text-green-400;
  content: '[████████████░░░░░░] 65%';
}

Colors

:root {
  --background: #000000;
  --foreground: #00FF41;         /* Matrix green */
  --card: #0D1117;
  --border: #1F1F1F;
}

6. Kinetic Brutalism (Space Grotesk)

Шрифт: Space Grotesk (Single Dominant)
Стиль: Kinetic, brutalist, aggressive, uppercase, oversized
Применение: Музыка/культура, спорт, бренд-флаги, дропы

Typography Scale

Hero:    text-4xl–text-6xl  font-black  uppercase  tracking-tight  leading-[0.9]
Section: text-2xl         font-bold   uppercase  tracking-tight    leading-[1]
Body:    text-base        font-semibold uppercase  tracking-tight  leading-[1.1]
Card:    text-lg          font-bold   uppercase  tracking-tight
Label:   text-xs          font-bold   uppercase  tracking-widest   leading-[1]

Implementation

fontFamily: {
  sans: ['Space Grotesk', 'sans-serif']
}

.hero {
  @apply text-5xl font-black uppercase tracking-tight leading-[0.9];
}
.body {
  @apply text-base font-semibold uppercase tracking-tight leading-[1.1];
}
.label {
  @apply text-xs font-bold uppercase tracking-widest leading-[1];
}

/* Responsive font scale (PixelRatio helper for responsive sizing) */
.hero-responsive {
  font-size: calc(1rem * var(--font-scale, 2.5));
}

7. Flat Design Mobile (System Bold)

Шрифт: Inter (Single Family, Thick Weights)
Стиль: Flat, clean, system, bold, geometric
Применение: Cross-platform, dashboards, marketing pages, icon-heavy UI

Typography Scale

Headline:  font-extrabold  text-4xl  tracking-tight  leading-[1]
Subhead:   font-bold       text-2xl  leading-[1.2]
Body:      font-normal     text-base  leading-[1.5]
Label:     font-bold       uppercase text-xs          tracking-widest

Key Principle: Size Contrast (Poster Rule)

Headline 40pt+ vs Body 16pt = mandatory 5:1 ratio
No shadows — thick weights carry all hierarchy

Implementation

.headline {
  @apply text-4xl font-extrabold tracking-tight leading-[1];
}
.subhead {
  @apply text-2xl font-bold leading-[1.2];
}
.body {
  @apply text-base font-normal leading-[1.5];
}
.label {
  @apply text-xs font-bold uppercase tracking-widest;
}

/* NO italic, NO thin weights */

8. Material You MD3 (Roboto System)

Шрифт: Roboto (System Default)
Стиль: Material Design 3, tonal, friendly, accessible
Применение: Android, cross-platform, productivity, B2B dashboards

MD3 Type Scale

Display Large:  56px / 400 / 64px
Headline Large: 32px / 500 / 40px
Title Large:    22px / 500 / 28px
Body Large:     16px / 400 / 24px
Label Medium:   12px / 500 / 16px
Buttons:        letterSpacing 0.1px

Implementation

fontFamily: {
  sans: ['Roboto', 'sans-serif']
}

.display-lg { @apply text-[56px] font-normal leading-[64px]; }
.headline-lg { @apply text-3xl font-medium leading-[40px]; }
.title-lg { @apply text-xl font-medium leading-[28px]; }
.body-lg { @apply text-base font-normal leading-[24px]; }
.label-md { @apply text-xs font-medium leading-[16px] tracking-[0.1px]; }

/* System Roboto on Android; Google Fonts for iOS parity */
/* Never use custom weights beyond 300–700 */

9. Neo Brutalism Mobile

Шрифт: Space Grotesk (Bold-Only: 700 & 900)
Стиль: Pop art, loud, bold, stickers, mechanical
Применение: Gen-Z marketing, e-commerce для молодёжи, коллаж-приложения

Typography Scale

Display:  text-4xl–text-5xl  font-black  uppercase  leading-[1]
Heading:  text-2xl         font-bold   uppercase  leading-[1.1]
Body:     text-lg          font-bold   leading-[1.2]
Label:    text-xs          font-black  uppercase  tracking-widest

Implementation

fontFamily: {
  sans: ['Space Grotesk', 'sans-serif']
}

/* STRICTLY 700 and 900 ONLY */
.display {
  @apply text-5xl font-black uppercase leading-[1];
}
.heading {
  @apply text-2xl font-bold uppercase leading-[1.1];
}
.body {
  @apply text-lg font-bold leading-[1.2];
}
.label {
  @apply text-xs font-black uppercase tracking-widest leading-[1];
}

/* No italic, no thin weights */

10. Bold Typography Mobile (Inter-Tight Poster)

Шрифт: Inter + Playfair Display (Italic) + JetBrains Mono
Стиль: Bold typography, editorial, poster, luxury
Применение: Creative brand flagships, reading platforms, luxury mobile

Typography Scale

Hero Statement: text-4xl–text-5xl  font-black   tracking-tighter
H1:             text-3xl          font-bold    tracking-tight
H2:             text-2xl         font-semibold  tracking-tight
Sub:            text-lg          font-semibold  tracking-tight
Body:           text-base        font-normal
Labels:         text-xs          font-medium    uppercase  tracking-widest
Pull Quote:     text-xl          italic        text-gray-600
Stats:          text-sm          font-mono

Key Rule: H1:Body = 5:1 Ratio (Mandatory)

.h1 {
  @apply text-3xl font-bold tracking-tight; /* ~32px */
}
.body {
  @apply text-base font-normal; /* ~16px */
}
/* 32/16 = 2x — meets 5:1 weight contrast */

Implementation

.fontFamily: {
  display: ['Inter', 'sans-serif'],
  quote: ['Playfair Display', 'serif'],
  mono: ['JetBrains Mono', 'monospace']
}

.hero-statement {
  @apply text-5xl font-black tracking-tighter;
}
.pull-quote {
  @apply text-xl italic text-gray-600;
}
.stats {
  @apply text-sm font-mono text-gray-500;
}

/* Underlines replace buttons for interactions */
.interaction {
  @apply border-b-2 border-current cursor-pointer hover:border-current;
}

11. Academia Mobile

Шрифт: Cormorant Garamond + Crimson Pro + Cinzel (Triple Stack)
Стиль: Library, mahogany, parchment, scholarly, antique
Применение: Knowledge management, scholarly reading, RPG games

Typography Scale

Headings:  text-xl–text-2xl  font-medium  leading-[1.1]
Body:      text-base         font-normal  leading-[1.5]
Labels:    text-xs           font-bold    uppercase  tracking-widest
Drop Cap:  text-[60px]       font-bold    text-amber-700

Implementation

fontFamily: {
  heading: ['Cormorant Garamond', 'serif'],
  body: ['Crimson Pro', 'serif'],
  display: ['Cinzel', 'serif']
}

.heading {
  @apply text-2xl font-medium leading-[1.1] text-gray-900;
}
.body {
  @apply text-base font-normal leading-[1.625] text-gray-700;
}
.label {
  @apply text-xs font-bold uppercase tracking-widest text-amber-800;
}

/* Drop cap for first letter */
.drop-cap::first-letter {
  @apply text-[60px] font-bold text-amber-700;
  font-family: 'Cinzel', serif;
}

/* Section prefix: VOLUME I/II/III in Cinzel */
.section-prefix {
  @apply text-xs font-bold uppercase tracking-widest text-amber-800;
  font-family: 'Cinzel', serif;
}

12. Cyberpunk Mobile

Шрифт: Orbitron + JetBrains Mono
Стиль: Neon, glitch, HUD, sci-fi, dark
Применение: Gaming, fintech/crypto, data visualization, cyberpunk games

Typography Scale

H1:   text-3xl        font-black  uppercase  tracking-widest  leading-[1]
H2:   text-xl        font-bold   uppercase  tracking-wider   leading-[1.1]
Section: text-lg    font-bold   uppercase  tracking-wider
Body:   text-sm     font-medium               leading-[1.5]
Labels: text-xs    font-medium  uppercase    opacity-70

Implementation

fontFamily: {
  heading: ['Orbitron', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace']
}

.h1 {
  @apply text-3xl font-black uppercase tracking-widest leading-[1] text-cyan-400;
}
.h2 {
  @apply text-xl font-bold uppercase tracking-wider leading-[1.1] text-pink-400;
}
.body {
  @apply text-sm font-mono leading-[1.5] text-green-400;
}
.label {
  @apply text-xs font-medium uppercase opacity-70 text-gray-400;
}

/* Dark background with neon accents */
:root {
  --background: #000000;
  --foreground: #E0E0E0;
  --accent-cyan: #00FFFF;
  --accent-pink: #FF00FF;
  --accent-green: #00FF41;
}

13. Web3 Bitcoin DeFi

Шрифт: Space Grotesk + Inter + JetBrains Mono (Triple)
Стиль: Digital gold, precision, luminescent
Применение: DeFi, NFT, metaverse, high-tech brands

Typography Scale

H1:   text-3xl–text-4xl  font-semibold  leading-[1.1]
H2:   text-2xl         font-semibold  leading-[1.2]
Body: text-base        font-normal    leading-[1.625]
Mono: text-sm          font-mono      leading-[1.5]
Labels: text-xs       font-bold      uppercase tracking-widest

Implementation

fontFamily: {
  heading: ['Space Grotesk', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace']
}

.body {
  @apply text-base font-normal leading-[1.625] text-gray-700;
}
.mono {
  @apply text-sm font-mono leading-[1.5] text-gray-600;
}
.label {
  @apply text-xs font-bold uppercase tracking-widest text-gray-500;
}

/* Balance figures: MaskedView gradient text (orange→gold) */
.balance {
  @apply text-3xl font-semibold;
  background: linear-gradient(to right, #F97316, #FBBF24);
  -webkit-background-clip: text;
}

/* Buttons: Inter Bold uppercase */
.btn {
  @apply text-sm font-bold uppercase tracking-[0.15em];
}

14. Claymorphism Mobile

Шрифт: Nunito + DM Sans
Стиль: Clay, rounded, playful, candy, tactile
Применение: Children's education, teen social, creative tools

Typography Scale

Hero:   text-4xl   font-black  tracking-tight  leading-[1.15]
Section: text-3xl font-extrabold tracking-tight leading-[1.2]
Card:   text-xl    font-bold                 leading-[1.3]
Body:   text-base  font-medium               leading-[1.5]

Implementation

fontFamily: {
  display: ['Nunito', 'sans-serif'],
  body: ['DM Sans', 'sans-serif']
}

.hero {
  @apply text-4xl font-black tracking-tight leading-[1.15] text-gray-900;
}
.section {
  @apply text-3xl font-extrabold tracking-tight leading-[1.2] text-gray-800;
}
.body {
  @apply text-base font-medium leading-[1.5] text-gray-700;
}

/* Include font padding for rounded buttons */
.nunito-button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  includeFontPadding: false;  /* React Native */
}

15. Enterprise SaaS Mobile

Шрифт: Plus Jakarta Sans (Single Family)
Стиль: Professional, modern, approachable, iOS Dynamic Type
Применение: B2B SaaS, productivity, government, finance, admin dashboards

Typography Scale

Hero:     text-3xl–text-4xl  font-extrabold  leading-[1.15]
Section:  text-2xl         font-bold        leading-[1.2]
Card:     text-lg          font-semibold    leading-[1.25]
Body:     text-base        font-normal      leading-[1.5]
Caption:  text-xs          font-normal      text-muted

Implementation

fontFamily: {
  sans: ['Plus Jakarta Sans', 'sans-serif']
}

.hero {
  @apply text-4xl font-extrabold leading-[1.15] text-gray-900;
}
.section {
  @apply text-2xl font-bold leading-[1.2] text-gray-800;
}
.card-title {
  @apply text-lg font-semibold leading-[1.25] text-gray-700;
}
.body {
  @apply text-base font-normal leading-[1.5] text-gray-600;
}
.caption {
  @apply text-xs font-normal text-gray-500;
}
.btn {
  @apply text-sm font-bold uppercase tracking-[0.5em];
}

/* Must support iOS Dynamic Type and Android font scaling */
/* Never hardcode pixel sizes without respecting system font scale */
@media (prefers-reduced-motion: no-preference) {
  body {
    font-size: clamp(14px, 1vw + 12px, 18px);
  }
}

16. Sketch Hand-Drawn Mobile

Шрифт: Kalam + Patrick Hand (Dual Handwritten)
Стиль: Sketch, hand-drawn, imperfect, organic, paper
Применение: Journaling, creative platforms, children's apps

Typography Scale

Heading:  text-2xl–text-3xl  font-bold   leading-[1.2]
Body:     text-base        font-normal  leading-[1.5]
Label:    text-sm          font-normal

Implementation

fontFamily: {
  display: ['Kalam', 'cursive'],
  body: ['Patrick Hand', 'cursive']
}

.heading {
  @apply text-3xl font-bold leading-[1.2] text-gray-900;
}
.body {
  @apply text-base font-normal leading-[1.5] text-gray-700;
}
.label {
  @apply text-sm text-gray-500;
}

/* Vary font sizes slightly between elements for spontaneous feel */
/* Never use for financial figures or legal text */

17. Neumorphism Mobile

Шрифт: Plus Jakarta Sans (or System)
Стиль: Soft UI, monochromatic, ceramic, depth
Применение: Smart home, minimal tools, aesthetic dashboards

Typography Scale

Heading:  text-2xl–text-3xl  font-bold   tracking-tight  leading-[1.2]
Body:     text-base        font-medium  leading-[1.4]
Caption:  text-xs          font-normal

Implementation

fontFamily: {
  sans: ['Plus Jakarta Sans', 'sans-serif']
}

:root {
  --surface: #E0E5EC;
  --text-primary: #3D4852;    /* 7.5:1 contrast */
  --text-muted: #6B7280;      /* 4.6:1 contrast */
  --accent: #6C63FF;
}

.heading {
  @apply text-3xl font-bold tracking-tight leading-[1.2] text-[var(--text-primary)];
}
.body {
  @apply text-base font-medium leading-[1.4] text-[var(--text-primary)];
}
.caption {
  @apply text-xs font-normal text-[var(--text-muted)];
}

/* Accent only on active/focus indicators */
.active {
  color: var(--accent);
}

/* System (SF Pro / Roboto) acceptable fallback for performance */

18. SaaS Mobile (Inter Single Family)

Шрифт: Inter (Single Family)
Стиль: Modern, clean, professional, versatile
Применение: General purpose, portfolios, agencies, modern brands

Typography Scale

Display:  text-4xl   font-bold    tracking-tight  leading-[1.1]
H1:       text-3xl   font-semibold tracking-tight
H2:       text-2xl   font-semibold
Body:     text-base  font-normal
Label:    text-sm    font-medium  uppercase  tracking-wider

Implementation

fontFamily: {
  sans: ['Inter', 'sans-serif']
}

.display {
  @apply text-4xl font-bold tracking-tight leading-[1.1];
}
.h1 { @apply text-3xl font-semibold; }
.h2 { @apply text-2xl font-semibold; }
.body { @apply text-base font-normal; }
.label {
  @apply text-sm font-medium uppercase tracking-wider;
}

19. Vietnamese / Japanese / Korean / Chinese Typography

Script	Heading Font	Body Font	Notes
Vietnamese	Be Vietnam Pro	Noto Sans	Be Vietnam Pro excellent Vietnamese support
Japanese	Noto Serif JP	Noto Sans JP	Traditional + modern feel
Korean	Noto Sans KR	— (single family)	Clean modern Korean
Chinese TC	Noto Serif TC	Noto Sans TC	Taiwan/HK markets
Chinese SC	Noto Sans SC	— (single family)	Mainland China
Arabic	Noto Naskh Arabic	Noto Sans Arabic	RTL support, Naskh traditional, Sans modern
Thai	Noto Sans Thai	— (single family)	Clean Thai typography
Hebrew	Noto Sans Hebrew	— (single family)	RTL support

20. Accessibility First

Шрифт: Atkinson Hyperlegible (Single Family)
Стиль: Readable, inclusive, dyslexia-friendly
Применение: Accessibility-critical, government, healthcare, inclusive design

Implementation

fontFamily: {
  sans: ['Atkinson Hyperlegible', 'sans-serif']
}

/* Designed for maximum legibility */
/* Excellent for accessibility */

21. Pixel Retro

Шрифт: Press Start 2P + VT323
Стиль: Pixel, retro, gaming, 8-bit, nostalgic
Применение: Pixel art games, retro websites, creative portfolios

Implementation

fontFamily: {
  pixel: ['Press Start 2P', 'cursive'],
  terminal: ['VT323', 'monospace']
}

.display {
  @apply text-lg font-pixel;  /* Press Start 2P very wide/large */
}
.body {
  @apply text-base font-terminal;  /* VT323 better for body */
}

Quick Reference: Mobile Design Systems by Use Case

Use Case	System	Shorthand
Dev Tools	Modern Dark Cinema	`font-inter tracking-tight`
Terminal/Hacker	Terminal CLI Mono	`font-jetbrains mono`
Fashion/Luxury	Bauhaus Geometric	`font-outfit uppercase`
B2B SaaS	Enterprise SaaS	`font-plus-jakarta`
Gaming	Kinetic Brutalism	`font-space-grotesk uppercase`
Children	Claymorphism	`font-nunito rounded`
Finance	Neo Brutalism	`font-space-grotesk 700/900`
Health	Neumorphism	`font-plus-jakarta soft-ui`
Creative	Bold Typography	`font-inter + font-playfair italic`
Web3	Cyberpunk	`font-orbitron + font-jetbrains`
Academia	Academia	`font-cormorant + font-crimson + font-cinzel`
Retro	Pixel	`font-press-start`
Accessibility	Accessibility First	`font-atkinson-hyperlegible`

22 KiB Raw Permalink Blame History Unescape Escape

Mobile Design Token Systems

1. Bauhaus Geometric

Typography Scale

Implementation

2. Minimalist Monochrome Editorial

Typography Scale

Implementation

3. Modern Dark Cinema (Inter System)

Typography Scale

Implementation

Colors

4. SaaS Mobile Boutique (Calistoga + Inter)

Typography Scale

Implementation

5. Terminal CLI Monospace

Typography Scale

Implementation

Colors

6. Kinetic Brutalism (Space Grotesk)

Typography Scale

Implementation

7. Flat Design Mobile (System Bold)

Typography Scale

Key Principle: Size Contrast (Poster Rule)

Implementation

8. Material You MD3 (Roboto System)

MD3 Type Scale

Implementation

9. Neo Brutalism Mobile

Typography Scale

Implementation

10. Bold Typography Mobile (Inter-Tight Poster)

Typography Scale

Key Rule: H1:Body = 5:1 Ratio (Mandatory)

Implementation

11. Academia Mobile

Typography Scale

Implementation

12. Cyberpunk Mobile

Typography Scale

Implementation

13. Web3 Bitcoin DeFi

Typography Scale

Implementation

14. Claymorphism Mobile

Typography Scale

Implementation

15. Enterprise SaaS Mobile

Typography Scale

Implementation

16. Sketch Hand-Drawn Mobile

Typography Scale

Implementation

17. Neumorphism Mobile

Typography Scale

Implementation

18. SaaS Mobile (Inter Single Family)

Typography Scale

Implementation

19. Vietnamese / Japanese / Korean / Chinese Typography

20. Accessibility First

Implementation

21. Pixel Retro

Implementation

Quick Reference: Mobile Design Systems by Use Case

22 KiB

Raw Permalink Blame History