Studio Few

克制呈现字体个性Expressive type, presented with restraint.

浅色主题设计工具type foundry homepage极简编辑式黑白灰字体主导宽松留白原网页 studiofew.com ↗ · 2026-10-12 采集 · 1440×900 桌面端

Studio Few 以超大字体样张、简洁控件和黑白灰编辑式版面展示字体。温润的米白色区块与灰度主视觉形成变化，同时不抢字形本身的焦点。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

品牌色

表层色

中性色

页面底色 · Paper White表层 · Warm Stock主文字 · Foundry Ink次要文字 · Paper White弱文字 · Soft Graphite描边 · Foundry Ink

文字	背景	对比度	WCAG
#000000 Foundry Ink	#ffffff Paper White	21:1	AAA
#000000 Foundry Ink	#f6f4f1 Warm Stock	19.13:1	AAA
#ffffff Paper White	#f6f4f1 Warm Stock	1.1:1	不达标
#b7b7b7 Soft Graphite	#ffffff Paper White	2.01:1	不达标
#b7b7b7 Soft Graphite	#f6f4f1 Warm Stock	1.83:1	不达标

字体

字号阶梯：Custom（比例约 3.634，正文 12px）。示例用免费替代字体渲染，数值为实测。

Aa 设计

SterlingVF

网络字体 · 字重 400 / 500 / 300 · 占比 86%

免费替代：Inter

Navigation, controls, body labels, and links.

Aa 设计

BlokVF

网络字体 · 字重 400 · 占比 3%

免费替代：Audiowide

Distinctive display specimen lettering, including the Blok example.

Aa 设计

AnthroVF

网络字体 · 字重 400 · 占比 2%

免费替代：Manrope

Display specimen lettering and oversized light specimen treatment.

Aa 设计

ArbeitProContrastVF

网络字体 · 字重 400 · 占比 2%

免费替代：DM Sans

Arbeit Pro Contrast specimen lettering.

Aa 设计

Arbeittechnikvf

网络字体 · 字重 400 · 占比 2%

免费替代：Space Mono

Arbeit Technik specimen lettering.

Aa 设计

Formative

网络字体 · 字重 400 · 占比 2%

免费替代：Manrope

Formative display specimen lettering.

角色	示例	字号	字重	行高	字距
特大标题 Oversized typeface specimens that demonstrate each family’s character.	Studio Few	158.5px	400	1	-0.01em
一级标题 Large specimen or page-level headline where present.	Studio Few	115px	400	1.2	0
正文 Compact uppercase specimen names and metadata.	The quick brown fox 敏捷的狐狸	12px	400	1.6	0.017em
按钮 Trial and View action labels.	The quick brown fox 敏捷的狐狸	14px	300	1.57	0
导航 Top navigation links and footer navigation.	The quick brown fox 敏捷的狐狸	14px	400	1.86	0
链接 Small uppercase links such as ABOUT and specimen actions.	The quick brown fox 敏捷的狐狸	12px	400	1.75	0.017em

间距与布局

基准单位 4px · 密度：宽松

112px版块间距

24px元素间距

—卡片内边距

1392px内容最大宽度

2px

5px

7px

10px

12px

20px

24px

112px

160px

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.

圆角与层次

按钮 · 6px

没有测到阴影：页面是扁平的，层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

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.

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.

页面版块

共 11 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏字体主视觉

Full-width grayscale hero with overlaid mark, navigation, and a small specimen label.

产品展示字体样张

Two-column control strip above an oversized specimen on white.

产品展示字体样张

Repeated two-column specimen controls above a large face-specific sample.

产品展示暖底样张

Two-column specimen controls and display on a warm off-white band.

产品展示可调样张

Warm off-white specimen area with controls for width and roundness.

图集几何影像

Full-width grayscale geometric image between specimen groups.

产品展示字体样张

Two-column controls above an oversized specimen on white.

产品展示字体样张

Two-column control row with a large technical-style specimen below.

产品展示字体样张

Two-column controls and oversized display sample on white.

产品展示上线样张

Controls for weight and roundness above a large launch specimen.

页脚页脚导航

Compact four-column footer with the brand mark and grouped links.

该做与不该做

✓ 该做

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.

✕ 不该做

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.

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Heavyweight Digital Type Foundry

heavyweight-type.com

以克制排版呈现字体的温度

浅色设计工具

Studio.Design

studio.design

以克制画布衬托创意表达

浅色设计工具

Specht Studio

stephaniespecht.com

简洁框架，实验视觉

浅色设计工具

Studio Oker

oker.com

以克制画布呈现鲜明品牌作品

浅色设计工具

OFFFICE

offficestud.io

以巨幅字体呈现单色设计研究

深色设计工具

Websmith Studio

websmith.studio

素净底色，醒目字体，作品出彩

浅色设计机构

下载

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

AI 辅助生成：数值为实测，命名与说明为模型解读 · 把文件放进项目根目录，告诉 AI「按 DESIGN.md 实现」