---
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` |