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

# Studio Few · Design System

> Expressive type, presented with restraint.

**Theme:** light · **Industry:** design · **Source:** https://www.studiofew.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._

Studio Few presents its typefaces through oversized specimen typography, restrained controls, and a monochrome editorial layout. A single warm off-white band and a large grayscale hero image add contrast without distracting from the letterforms.

## North star

Let each typeface specimen dominate, while keeping controls, color, and layout quiet and consistent.

## Overview

The page uses a deliberately narrow palette: white canvas, near-black type and controls, a warm off-white band for selected specimens, and muted gray for secondary values. The screenshot’s gray tones are largely the grayscale hero photograph and specimen imagery, not additional brand colors. Typography is the main visual event: display faces appear at exceptional scale, while SterlingVF handles compact uppercase labels, navigation, and controls. Specimen rows repeat a calm two-column structure, with the font name and a small expand affordance on the left, and size/weight controls plus Trial and View actions across the row. Generous white space gives each face room to read as both product and demonstration. Fine rules separate controls and rows; the hero image is cropped edge-to-edge and monochrome. Rounded buttons provide the page’s main soft detail against otherwise crisp, flat geometry.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Ink | `#000000` | `--color-foundry-ink` | brand | Primary specimen lettering, navigation, links, borders, and filled View buttons. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main page canvas and the text on black filled buttons. |
| Warm Stock | `#f6f4f1` | `--color-warm-stock` | surface | Alternating specimen section backgrounds, including the Personality and Understanding examples. |
| Soft Graphite | `#b7b7b7` | `--color-soft-graphite` | neutral | Muted values and secondary text; keep subdued against the high-contrast specimens. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f6f4f1` (Warm Stock) · `--color-text` → `#000000` (Foundry Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#b7b7b7` (Soft Graphite) · `--color-border` → `#000000` (Foundry Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f4f1` | 19.13:1 | AAA |
| `#ffffff` | `#f6f4f1` | 1.1:1 | fail |
| `#b7b7b7` | `#ffffff` | 2.01:1 | fail |
| `#b7b7b7` | `#f6f4f1` | 1.83:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SterlingVF | `--font-body` | webfont | 400, 500, 300 | Navigation, controls, body labels, and links. | Inter |
| BlokVF | `--font-display` | webfont | 400 | Distinctive display specimen lettering, including the Blok example. | Audiowide |
| AnthroVF | `--font-anthrovf` | webfont | 400 | Display specimen lettering and oversized light specimen treatment. | Manrope |
| ArbeitProContrastVF | `--font-arbeitprocontrastvf` | webfont | 400 | Arbeit Pro Contrast specimen lettering. | DM Sans |
| Arbeittechnikvf | `--font-arbeittechnikvf` | webfont | 400 | Arbeit Technik specimen lettering. | Space Mono |
| Formative | `--font-formative` | webfont | 400 | Formative display specimen lettering. | Manrope |

- **SterlingVF:** The workhorse sans; compact uppercase labels use slight tracking, while navigation and button text remain mixed case.
- **BlokVF:** Use for the font’s own expressive specimen, not general interface copy.
- **AnthroVF:** Large, open forms; reserve for specimen-led display moments.
- **ArbeitProContrastVF:** Keep its specimen treatment distinct from the neutral interface typography.
- **Arbeittechnikvf:** Use for the technical, monospaced-looking specimen character.
- **Formative:** Shown at oversized scale with clean, modern letterforms.

### Type scale — Custom (ratio ≈ 3.634, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 158.5px | 400 | 1 | -0.01em | — | AnthroVF | Oversized typeface specimens that demonstrate each family’s character. |
| h1 | 115px | 400 | 1.2 | 0 | — | BlokVF | Large specimen or page-level headline where present. |
| body | 12px | 400 | 1.6 | 0.017em | uppercase | SterlingVF | Compact uppercase specimen names and metadata. |
| button | 14px | 300 | 1.57 | 0 | — | SterlingVF | Trial and View action labels. |
| nav | 14px | 400 | 1.86 | 0 | — | SterlingVF | Top navigation links and footer navigation. |
| link | 12px | 400 | 1.75 | 0.017em | uppercase | SterlingVF | Small uppercase links such as ABOUT and specimen actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 5, 7, 10, 12, 20, 24, 112, 160 px.
- Section rhythm 112px · element gap 24px · card padding — · max content width 1392px.

The page is a spacious, full-width vertical sequence, with a measured maximum content width of 1392px. A full-bleed hero sits above repeated specimen sections; those sections use a two-column control row above a large display sample. Labels align left, adjustment controls sit centrally, and paired actions align right. Section spacing is generous, while the controls themselves are compact. White sections dominate, with occasional warm off-white bands to distinguish specimen groups; the footer resolves into several aligned link columns.

## Shape & elevation

- Radius: button `6px` · xs `2px` · sm `6px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured shadows or gradients, and little card-like separation. Thin black or pale hairlines define controls and specimen boundaries. Filled black View buttons and outlined Trial buttons provide the clearest component edges, with a small measured radius. The hero gains depth from its photographic subject, not UI layering.

## Imagery

A large monochrome editorial photograph leads the page, cropped edge-to-edge with the Studio Few mark and site navigation over it. The image shows printed type specimen material and a dark sculptural foreground, reinforcing the foundry context. Further down, a grayscale geometric image interrupts the type rows. Imagery is restrained and high-contrast; the primary visual content remains the typefaces themselves, rendered as large live specimens rather than decorative illustrations.

## Components

### Specimen control row

A compact metadata and control strip above each large type sample; aligns the specimen label, size and weight controls, and actions.

### Trial button

White or canvas-colored button with a 1px black border, 6px radius, and SterlingVF light text.

### View button

Black filled button with white SterlingVF text, a 1px black border, and 6px radius.

### Specimen display

Oversized black type rendering on a plain white or warm off-white field, showcasing the face rather than functioning as ordinary heading copy.

### Primary navigation

Small, quiet top-right links for Fonts, Mockups, and Branding, paired with the foundry mark and a basket count.

### Footer link columns

A compact, multi-column footer with the mark and grouped studio, policy, and social links.

### Measured component styles

- **Primary button** (“View”): background #000000 · text #ffffff · border 1px solid #000000 · radius 6px · padding 12px 24px · 300 14px SterlingVF
- **Secondary button** (“Trial”): transparent background · text #000000 · border 1px solid #000000 · radius 6px · padding 12px 24px · 300 14px SterlingVF
- **Link** (“ABOUT”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px SterlingVF · uppercase
- **Navigation item** (“Fonts”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px SterlingVF

## Do

- Give each specimen generous uninterrupted space.
- Use live type samples as the main visual content.
- Keep interface copy small and restrained.
- Use black-filled View actions and outlined Trial actions.
- Use warm off-white selectively for specimen section bands.
- Keep hero imagery grayscale and editorial.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce extra brand colors.
- Do not let controls compete with specimen lettering.
- Do not place every specimen inside a card.
- Do not use dense, multi-level navigation.
- Do not treat grayscale image tones as new palette colors.

## Agent prompt

Build a new page in the Studio Few visual style: a calm, editorial type-foundry experience where the type specimens are the content and the interface recedes. Use Paper White (#ffffff) as the main canvas, Foundry Ink (#000000) for display type, links, borders, and filled actions, Warm Stock (#f6f4f1) for occasional section bands, and Soft Graphite (#b7b7b7) for secondary values. Arrange content in a spacious full-width vertical sequence with repeated specimen rows: small uppercase metadata and controls above oversized live type. Align labels left, controls centrally, and Trial/View actions to the right. Use Sterling-like sans typography for UI and a distinct face per specimen. Keep borders fine, buttons modestly rounded, and elevation flat. Use grayscale editorial photography sparingly; avoid extra colors, shadows, gradients, and card-heavy layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width grayscale hero with overlaid mark, navigation, and a small specimen label. | top navigation, hero specimen link | edge-to-edge image, overlaid navigation, grayscale treatment |
| 2 | product-showcase | Two-column control strip above an oversized specimen on white. | size adjustment, weight adjustment, trial and view actions | uppercase metadata, fine rules, large live type |
| 3 | product-showcase | Repeated two-column specimen controls above a large face-specific sample. | size adjustment, weight adjustment, trial and view actions | quiet control row, oversized display lettering |
| 4 | product-showcase | Two-column specimen controls and display on a warm off-white band. | size adjustment, weight adjustment, trial and view actions | warm surface band, large display sample |
| 5 | product-showcase | Warm off-white specimen area with controls for width and roundness. | width adjustment, roundness adjustment, trial and view actions | variable-font controls, distinctive display face |
| 6 | gallery | Full-width grayscale geometric image between specimen groups. | visual pause | edge-to-edge imagery, monochrome photography |
| 7 | product-showcase | Two-column controls above an oversized specimen on white. | size adjustment, weight adjustment, trial and view actions | uppercase labels, large display sample |
| 8 | product-showcase | Two-column control row with a large technical-style specimen below. | size adjustment, weight adjustment, trial and view actions | repeated controls, face-specific display type |
| 9 | product-showcase | Two-column controls and oversized display sample on white. | size adjustment, weight adjustment, trial and view actions | fine separators, large specimen lettering |
| 10 | product-showcase | Controls for weight and roundness above a large launch specimen. | weight adjustment, roundness adjustment, trial and view actions | variable-font controls, oversized display |
| 11 | footer | Compact four-column footer with the brand mark and grouped links. | studio navigation, policy links, social links | small uppercase links, multi-column alignment |

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