---
title: "Fonts Ninja design system"
variant: extended
source: https://fonts.ninja/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/fonts-ninja)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Fonts Ninja · Design System

> A spacious canvas for expressive type discovery

**Theme:** light · **Industry:** design · **Source:** https://fonts.ninja/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Fonts Ninja pairs an oversized typographic masthead with a calm, pale canvas and a browsable library of font specimens. Coral accents guide attention while generous open space keeps the page focused on letterforms.

## North star

Keep the interface quiet and spacious so expressive font specimens—not decoration—command attention.

## Overview

The page is built around a restrained palette: #f7f6f6 fills the main canvas, white cards create quiet islands for font specimens, and #121212 carries the headline, navigation, and most copy. #ee585a is a precise signal for the inline library link and primary actions; #8e8e93 recedes into secondary navigation and metadata. Aeonik provides a clean sans-serif framework, while the oversized masthead and the varied type specimens let typography itself become the visual content. The hero is unusually spacious: a compact navigation sits above a very large wordmark, followed by a substantial open interval before the explanatory copy. Below, the font catalog switches to a consistent multi-column card grid. Cards are generously padded and softly rounded, with specimen lettering dominant and compact family, foundry, price, and style details beneath. The overall effect is editorial and approachable rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Font specimen cards and light content surfaces against the pale page canvas. |
| Coral Signal | `#ee585a` | `--color-coral-signal` | accent | Inline discovery link and primary catalog actions, including filter and bookmark buttons. |
| Typeface Ink | `#121212` | `--color-typeface-ink` | brand | Masthead, navigation, specimen lettering, and primary page copy. |
| Mist Canvas | `#f7f6f6` | `--color-mist-canvas` | surface | Main page background across the introductory area and font catalog. |
| Soft Graphite | `#8e8e93` | `--color-soft-graphite` | semantic | Secondary navigation, muted metadata, and less prominent supporting text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f7f6f6` (Mist Canvas) · `--color-text` → `#121212` (Typeface Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#8e8e93` (Soft Graphite) · `--color-accent` → `#ee585a` (Coral Signal) · `--color-on-accent` → `#fefefe`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#f7f6f6` | 17.37:1 | AAA |
| `#ffffff` | `#f7f6f6` | 1.08:1 | fail |
| `#8e8e93` | `#ffffff` | 3.26:1 | AA-large |
| `#8e8e93` | `#f7f6f6` | 3.02:1 | AA-large |
| `#ee585a` | `#ffffff` | 3.4:1 | AA-large |
| `#ee585a` | `#f7f6f6` | 3.15:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aeonikFont | `--font-body` | webfont | 400, 700, 500 | Navigation, explanatory copy, supporting labels, and interface text. | Inter |

- **aeonikFont:** Mostly regular weight with medium emphasis; keep interface copy clean and understated, reserving expressive display forms for the wordmark and font specimens.

### Type scale — Perfect Fifth (ratio ≈ 1.465, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 400 | normal | -0.011em | — | aeonikFont | Large introductory heading or wordmark treatment. |
| h2 | 32px | 400 | 1 | 0 | uppercase | aeonikFont | Uppercase section headings where present. |
| h3 | 24px | 500 | normal | 0 | — | aeonikFont | Font family or featured content headings. |
| body | 14px | 400 | 1.14 | 0 | — | aeonikFont | Introductory copy and general interface text. |
| caption | 12px | 400 | 1.5 | 0 | — | aeonikFont | Compact font details, foundry, pricing, and style counts. |
| nav | 24px | 500 | normal | 0 | — | aeonikFont | Primary navigation labels and prominent navigation text. |
| link | 44px | 400 | normal | -0.011em | — | aeonikFont | Large inline discovery link in the introductory copy. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 6, 16, 24, 32, 48, 56 px.
- Section rhythm 56px · element gap 8px · card padding 52px · max content width 1328px.

The page uses a broad centered content area, measured at a maximum width of 1328px, with a compact top navigation and a two-column introductory composition. A large typographic hero occupies the upper canvas; its copy sits low, leaving a pronounced open interval. The catalog follows as a multi-column grid of white cards on the same pale background. Spacing is comfortable, with a measured 56px section rhythm and 8px element gap; cards use generous measured padding.

## Shape & elevation

- Radius: button `9999px` · card `32px` · link `16px` · xs `16px` · sm `32px` · pill `9999px`
- Shadow `lg` (other): `rgba(72, 72, 74, 0.16) 0px 2px 32px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The interface is mostly flat, using contrast between the pale canvas and white cards to define catalog items. Cards have a measured 32px radius and generous padding; prominent buttons use pill-like rounding. Avoid pronounced borders and heavy shadows, which would compete with the type specimens.

## Imagery

The visual content is primarily typography rather than photography: the wordmark and font specimens display distinct typefaces as the product itself. In the hero, an oversized black wordmark dominates the viewport; catalog cards show large Aa-style previews above small metadata. The full-page image includes a red offset treatment in the wordmark, which reads as decorative brand artwork rather than a core interface color system. Avoid unrelated photography or illustration.

## Components

### Top navigation

Compact header with a small brand mark, primary links, utility icons, and menu control; measured navigation text uses #121212 with muted secondary items.

### Typography hero

Oversized black wordmark above a large quiet gap, followed by an explanatory sentence and an inline #ee585a discovery link.

### Font specimen card

White card with a 32px measured radius and generous padding; display a prominent font sample above compact family and pricing details.

### Primary action

Coral fill with near-white label text; bookmark and filter actions appear as rounded buttons with measured 16px text.

### Catalog grid

Repeated font cards form a multi-column browseable library, with consistent card sizing and clear gutters on the pale canvas.

### Pagination

Small, muted page controls sit below the catalog; use a coral-filled current-page indicator and restrained neighboring numbers.

### Measured component styles

- **Primary button** (“Bookmark”): background #ee585a · text #fefefe · radius 0px · padding 16px 24px · 400 16px aeonikFont
- **Link** (“2”): transparent background · text #121212 · radius 16px · padding 0px · 400 16px aeonikFont
- **Card** (“MazzardSoftM Pepper Type From $35 24 sty”): background #ffffff · text #121212 · radius 32px · padding 48px 56px · 400 16px aeonikFont
- **Navigation item** (“Fonts Bookmarks Get our extension About ”): transparent background · text #121212 · radius 0px · padding 0px · 400 16px aeonikFont

## Do

- Use the pale canvas as the dominant page surface.
- Let large type samples carry the visual emphasis.
- Keep specimen cards white and softly rounded.
- Use coral only to signal links and primary actions.
- Preserve generous open space around the hero.
- Keep card metadata compact and secondary.

## Don't

- Do not introduce gradients or decorative color fields.
- Do not crowd the hero with extra copy or controls.
- Do not make metadata compete with specimen lettering.
- Do not add heavy borders or prominent shadows.
- Do not use photography as the main visual content.
- Do not apply coral broadly to large backgrounds.

## Agent prompt

Build a font-discovery page in the Fonts Ninja visual style. Use Mist Canvas (#f7f6f6) as the main surface, Paper White (#ffffff) for specimen cards, and Typeface Ink (#121212) for navigation, copy, and font previews. Reserve Coral Signal (#ee585a) for important inline links and primary actions; Soft Graphite (#8e8e93) is for secondary labels. Use a clean Aeonik-like sans-serif for interface text, while letting specimen lettering provide expressive variety. Place a compact header above a dramatic, oversized typographic hero with generous empty space, then add an explanatory line and a browsable multi-column font grid. Give cards measured generous padding and a 32px radius, with large samples and compact metadata. Keep the composition airy, flat, and focused on type.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized wordmark above an open hero field; explanatory copy sits near the lower edge. | Inline library link, Visual brand introduction | Compact top navigation, Oversized typographic masthead, Coral link accent |
| 2 | product-grid | Multi-column font card grid on a continuous pale background. | Browse font options, Bookmark a typeface, Paginate results | White rounded cards, Large font specimens, Compact metadata, Coral action buttons |

## Source CSS custom properties (selected)

```css
--fn-backgroundIllustration: #D9D9D9;
--fn-backgroundPage: #F7F6F6;
--fn-backgroundScrollNav: #FFFFFF;
--fn-backgroundItems: #FFFFFF;
--fn-backgroundModalLayout: #12121250;
--fn-textDefault: #121212;
--fn-textDefaultOff: #8E8E93;
--fn-textPrimary: #EE585A;
--fn-textDeactivated: #8E8E93;
--fn-textError: #F0090C;
--fn-textButtonPrimary: #FEFEFE;
--fn-textButtonSecondary: #121212;
--fn-textButtonBoardOff: #8E8E93;
--fn-textButtonBoardOn: #121212;
--fn-buttonFillPrimary: #EE585A;
--fn-buttonFillPrimaryOver: #DC5153;
--fn-buttonFillSecondary: #F1F1F1;
--fn-buttonFillSecondaryOver: #D7D7DB;
--fn-colorEffectShadow: #48484a29;
--fn-colorEffectShadowSoft: #48484a1a;
--fn-avatarBackground: #121212;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fonts-ninja