neo
76c4c5b4fe
- 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
892 lines
22 KiB
Markdown
892 lines
22 KiB
Markdown
---
|
||
name: concepts/mobile-design-tokens
|
||
title: Mobile Design Token Systems
|
||
description: 21 mobile-first design systems with detailed typography scales, color tokens, and component patterns.
|
||
tags: [mobile, design-tokens, typography, ui, responsive]
|
||
source: ui-ux-pro-max-skill
|
||
---
|
||
|
||
# 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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
: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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
: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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
.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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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)
|
||
|
||
```css
|
||
.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
|
||
|
||
```css
|
||
.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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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` |
|