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

# Fonts In Use · Design System

> A living archive, led by type.

**Theme:** light · **Industry:** design · **Source:** https://fontsinuse.com/ · **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 In Use presents a searchable archive of real-world typography through a compact, image-led collection grid. A restrained monochrome interface lets the varied lettering and artwork in each archive entry provide the colour and character.

## North star

Keep the interface monochrome and orderly, and let the archived typographic work supply the visual variety.

## Overview

The page uses a white canvas and black text as a quiet frame for a varied archive of typographic work. Pale gray marks card surfaces and fine separators, while the measured palette avoids a distinct brand accent; colour mainly enters through the project images. BentonSansRE handles small navigation, controls, captions, and metadata with a compact, utilitarian voice. RelayCond supplies the more expressive display and editorial text. A wide, centered desktop composition places the wordmark and introductory copy above a heavy horizontal rule, followed by a slim category bar and a dense multi-column stream of image cards. Each card pairs a project image with typeface names and supporting labels. Generous gaps between rows and ample outer margins keep the busy collection legible without making the overall page feel sparse. Borders and shadows are restrained, so the archive reads as a flat catalog rather than a stack of elevated panels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Archive Ink | `#000000` | `--color-archive-ink` | neutral | Primary wordmark, headings, navigation, card labels, links, and the strong horizontal divider. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the quiet backdrop around the archive grid and header. |
| Catalog Mist | `#f0f0f0` | `--color-catalog-mist` | surface | Subtle card and link surfaces, plus fine separators that distinguish interface areas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Catalog Mist) · `--color-text` → `#000000` (Archive Ink) · `--color-border` → `#f0f0f0` (Catalog Mist)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BentonSansRE | `--font-bentonsansre` | webfont | 400, 700 | Utility sans-serif for navigation, captions, links, buttons, and archive metadata. | Libre Franklin |
| RelayCond | `--font-body` | webfont | 700, 400 | Expressive serif display and editorial text, including prominent page and content headings. | Bodoni Moda |

- **BentonSansRE:** Mostly regular weight; small utility text stays compact, with bold used for selected labels.
- **RelayCond:** Use both measured regular and bold weights; retain the distinctive condensed display character.

### Type scale — Custom (ratio ≈ 2, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1 | 0 | — | RelayCond | Prominent page heading and display-level editorial title. |
| body | 18px | 700 | 1.6 | 0 | — | RelayCond | Editorial copy and larger text accompanying archive entries. |
| caption | 10px | 400 | 1.1 | 0 | — | BentonSansRE | Small image captions and compact supporting metadata. |
| button | 12px | 400 | 1.6 | 0 | — | BentonSansRE | Search and other compact interface controls. |
| nav | 10px | 400 | 1.1 | 0 | — | BentonSansRE | Header links and category navigation. |
| link | 10px | 400 | 1.6 | 0 | — | BentonSansRE | Small archive filters and linked metadata. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 3, 5, 10, 30 px.
- Section rhythm 220px · element gap 3px · card padding 55px · max content width —.

Use a centered, wide desktop composition with broad outer margins and a header organized into wordmark, introductory copy, primary navigation, and search. Separate the header from a thin category strip with a strong black rule. The archive is a dense five-column image grid on desktop, with text labels directly below each image. Allow images and entry text to vary naturally while keeping columns aligned. Preserve spacious gaps between rows and avoid adding a measured maximum width that the source data does not specify.

## Shape & elevation

- Radius: button `2px` · input `3px` · xs `2px`
- Shadow `inset` (input): `rgba(0, 0, 0, 0.05) 1px 1px 3px 1px inset`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.3) 0px 8px 8px -5px inset`
- Motion: standard transition `0.25s ease` on interactive elements.

Keep the interface predominantly flat. Use black rules and pale gray hairlines to separate navigation and content rather than relying on cards with shadows. Archive items sit directly on the white canvas; the measured input alone has a subtle inset shadow. Avoid floating panels and pronounced layering.

## Imagery

Use documentary project images: printed matter, packaging, signage, editorial layouts, and other examples of typography in context. Crop each image into a consistent grid slot while preserving its original colours and recognizable composition. The artwork, rather than interface decoration, supplies most of the page’s visual variety; avoid filters, overlays, or synthetic illustrations.

## Components

### Brand header

Large black stacked wordmark sits beside a short archive description; primary links and a compact search field share the header area.

### Primary navigation

Collection and Blog links are prominent beneath the introduction, with a strong black horizontal divider below.

### Category strip

A pale gray, finely ruled row exposes Topics, Formats, and Typefaces as compact dropdown-style links.

### Archive filters

Small result and sort controls sit above the cards, aligned toward the right side of the content area.

### Archive card

A project image leads each flat grid item; bold or expressive typeface names and smaller supporting labels follow beneath.

### Sponsor feature

A colorful typographic artwork and brief sponsor copy appear as a featured item within the first grid row.

### Footer

Compact text-link columns and pagination close the archive, separated from the content by a strong black rule.

### Measured component styles

- **Primary button** (“2”): background #999999 · text #ffffff · radius 2px · padding 5px 10px · 400 12px BentonSansRE
- **Link** (“Staff Pick”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px BentonSansRE
- **Input**: transparent background · text #000000 · border 1px solid #dddddd · radius 3px · padding 0px 10px · 400 12px BentonSansRE · shadow rgba(0, 0, 0, 0.05) 1px 1px 3px 1px inset
- **Card** (“Staff Pick”): background #f0f0f0 · text #000000 · radius 0px · padding 0px 0px 220px 0px · 400 14px BentonSansRE
- **Navigation item** (“An independent archive of typography. Ma”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px BentonSansRE

## Do

- Use white as the uninterrupted main canvas.
- Use black for the wordmark, navigation, and primary text.
- Let archive artwork provide nearly all interface colour.
- Place labels directly below their corresponding images.
- Keep metadata compact and visually secondary.
- Use rules and gray hairlines for separation.

## Don't

- Do not introduce an unmeasured brand accent colour.
- Do not put heavy shadows behind archive cards.
- Do not make every card image the same subject or palette.
- Do not replace the image-led archive with decorative illustrations.
- Do not crowd category navigation into the card grid.
- Do not over-style utility text or controls.

## Agent prompt

Build a new page in the Fonts In Use visual style: a searchable, editorial archive where real project images and lettering are the main attraction. Use Gallery White (#ffffff) as the canvas, Archive Ink (#000000) for the wordmark, headings, navigation, labels, and rules, and Catalog Mist (#f0f0f0) only for subtle surfaces and separators. Pair a compact utility sans like Libre Franklin with a distinctive serif display face like Bodoni Moda. Create a broad centered header, a clear category-navigation strip, and a dense multi-column image grid with each title directly below its image. Keep controls small, dividers crisp, and spacing generous between rows. Preserve the source artwork’s natural colour and avoid decorative gradients, prominent shadows, or invented accent colours.

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