New Form

以超大字体重塑金融视觉Monochrome finance, shaped by oversized type

浅色主题金融科技investment firm homepage极简编辑式黑白灰超大字体城市摄影原网页 newformcap.com ↗ · 2026-10-12 采集 · 1440×900 桌面端

New Form 以高对比字体搭配黑白城市摄影，呈现其对数字金融领域的投资方向。页面留白充足、视觉克制，仅用鲜绿色点缀导航与行动按钮。

North star · Let monumental, tightly composed typography lead; use monochrome city imagery and green only as a precise accent.

The page is built around a restrained palette: white and near-black establish broad, high-contrast fields, while muted green-gray supports secondary text. Vivid green is reserved for small navigational marks and the portfolio CTA, so it reads as a deliberate signal rather than a decorative color. Oversized, tightly tracked headlines dominate the composition; a contemporary sans serif handles practical text, while a softer editorial serif and a characterful display face add contrast to the type system. The hero treats its headline as the main visual object, interrupting the lines with small black-and-white urban photographs. Navigation and supporting details remain compact against generous open space. The measured system is spacious, but the available screenshots show only the opening hero clearly; avoid inferring unseen section designs. Keep controls crisp and mostly flat, with subtle depth reserved for the green CTA.

配色

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

强调色

表层色

中性色

功能色

页面底色 · Gallery White表层 · Forest Ink主文字 · Forest Ink次要文字 · Moss Gray弱文字 · Gallery White强调 · Signal Green

文字	背景	对比度	WCAG
#121613 Forest Ink	#ffffff Gallery White	18.26:1	AAA
#516254 Moss Gray	#ffffff Gallery White	6.51:1	AA
#516254 Moss Gray	#121613 Forest Ink	2.8:1	不达标
#ffffff Gallery White	#121613 Forest Ink	18.26:1	AAA
#2bee4b Signal Green	#ffffff Gallery White	1.56:1	不达标
#2bee4b Signal Green	#121613 Forest Ink	11.68:1	AAA

字体

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

Aa 设计

TWK Lausanne

网络字体 · 字重 350 / 200 / 550 · 占比 81%

免费替代：Inter

Primary sans serif for body copy, navigation, captions, and some headings

Aa 设计

Editorial New

网络字体 · 字重 300 · 占比 11%

免费替代：Cormorant Garamond

Light editorial display headings

Aa 设计

PP Mondwest

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

免费替代：Bodoni Moda

Distinctive display headlines

角色	示例	字号	字重	行高	字距
特大标题 Oversized, characterful headline or display text	New Form	295px	400	0.9	-0.04em
一级标题 Primary hero headline in a light editorial face	New Form	240px	300	0.9	-0.01em
二级标题 Large secondary display heading	New Form	165px	400	0.9	-0.04em
三级标题 Prominent sans-serif heading	New Form	155px	550	1	-0.04em
四级标题 Light editorial subheading	New Form	140px	300	0.9	-0.02em
正文 Compact supporting paragraphs	The quick brown fox 敏捷的狐狸	14px	350	1.1	0.01em
辅助文字 Small uppercase labels and metadata	The quick brown fox 敏捷的狐狸	11px	550	1.1	0
导航 Compact menu and navigation labels	The quick brown fox 敏捷的狐狸	16px	550	1.4	0.01em

间距与布局

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

50px版块间距

50px元素间距

—卡片内边距

—内容最大宽度

4px

8px

10px

15px

20px

25px

30px

32px

35px

40px

45px

50px

55px

60px

120px

130px

The visible hero uses a wide canvas with a compact brand mark at the upper left and a small menu control opposite it. A large headline occupies the main field, broken into tightly stacked lines and interleaved with photographic inserts. The screenshot shows a substantial dark, curved overlay entering from the right, so preserve its dramatic asymmetry rather than forcing a conventional centered grid. Measurements indicate spacious rhythm, but no maximum width is recorded. Keep supporting elements sparse and let the open background frame the headline.

圆角与层次

按钮 · 5px

图片 · 50%

md · button

The overall treatment is flat and graphic, with no measured border color or gradient. Keep panels and text areas clean, relying on contrast and overlap rather than outlines. The measured green CTA has a soft, offset green shadow; reserve that depth for the primary action instead of applying it broadly.

组件

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

Brand mark

Small New Form wordmark anchored at the upper-left of the hero, with a fine green accent beneath it.

Menu control

Compact upper-right navigation affordance with a menu label and thin green marks.

Hero headline

Oversized, tightly stacked headline with alternating photographic inserts and near-black lettering.

Image inserts

Grayscale architectural and street photographs cropped into small rounded rectangles within headline lines.

Portfolio CTA

Uppercase VIEW PORTFOLIO action using #2bee4b, black text, a small radius, and a soft green shadow.

Inverse section

Near-black #121613 section or card surface with contrasting light text, as indicated by measured surface data.

Imagery · Use documentary-style urban photography in monochrome: buildings, streets, and architectural details. Images appear as small horizontal or near-square inserts embedded within the headline, with tight crops and subtle corner rounding. Their grayscale treatment supports the black-and-white palette rather than introducing competing color. The first viewport also shows a large dark organic shape overlapping the text; treat it as a strong compositional layer, not as a photographic asset.

该做与不该做

✓ 该做

Make the headline the dominant hero element.
Use black-and-white urban photography as inline composition.
Keep the canvas bright and the dark fields sharply defined.
Reserve #2bee4b for a few high-value actions or marks.
Use compact uppercase styling for small labels.
Preserve generous open space around the hero.

✕ 不该做

Do not introduce unmeasured palette colors.
Do not turn the hero into a conventional centered card.
Do not let colorful photography compete with the typography.
Do not apply green broadly to large backgrounds.
Do not add decorative borders across the page.
Do not apply CTA shadows to every component.

给 AI 的提示词

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

Build a new page in New Form’s restrained editorial style. Use Gallery White (#ffffff) as the principal canvas and Forest Ink (#121613) for dominant text and inverse fields; keep Moss Gray (#516254) secondary and use Signal Green (#2bee4b) only for a small control or primary action with black lettering. Set an oversized, tightly tracked headline as the main composition, combining a contemporary sans serif with light editorial and distinctive display faces. Weave tightly cropped grayscale urban photographs into the headline rather than placing them in a conventional card grid. Keep navigation compact at the top, preserve broad open space, and use deliberate asymmetry or a bold overlapping shape where appropriate. Keep surfaces flat and crisp; reserve a subtle green shadow for the primary CTA. Do not invent palette values or unseen page sections.

相似风格

Aker

akercompanies.com

以克制视角投资城市社区

浅色地产家居

Capital

capital.xyz

以产品为主角的克制金融美学

深色金融科技

Wealthsimple

wealthsimple.com

沉稳金融感，融入鲜明编辑风

浅色金融科技

Munro Partners

munropartners.com

以远见穿越增长之路

浅色金融科技

Origin Financial

useorigin.com

以编辑式美学呈现金融生活

深色金融科技

July Fund

july.fund

以沉静编辑感呈现远大愿景

深色金融科技

下载

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

# New Form · Design System

> Monochrome finance, shaped by oversized type

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

New Form pairs high-contrast typography with monochrome urban photography to frame its investment focus on digital finance. The page feels spacious and restrained, using vivid green as a small navigational and CTA accent.

## North star

Let monumental, tightly composed typography lead; use monochrome city imagery and green only as a precise accent.

## Overview

The page is built around a restrained palette: white and near-black establish broad, high-contrast fields, while muted green-gray supports secondary text. Vivid green is reserved for small navigational marks and the portfolio CTA, so it reads as a deliberate signal rather than a decorative color. Oversized, tightly tracked headlines dominate the composition; a contemporary sans serif handles practical text, while a softer editorial serif and a characterful display face add contrast to the type system. The hero treats its headline as the main visual object, interrupting the lines with small black-and-white urban photographs. Navigation and supporting details remain compact against generous open space. The measured system is spacious, but the available screenshots show only the opening hero clearly; avoid inferring unseen section designs. Keep controls crisp and mostly flat, with subtle depth reserved for the green CTA.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and light areas; the measured palette also detects white in text, so use it for contrast on dark surfaces. |
| Forest Ink | `#121613` | `--color-forest-ink` | surface | Near-black inverse section and card surface, plus primary dark text and headings. |
| Moss Gray | `#516254` | `--color-moss-gray` | semantic | Muted heading or secondary-text tone; keep it subordinate to the near-black display type. |
| Signal Green | `#2bee4b` | `--color-signal-green` | accent | Small navigation accent and portfolio CTA background; pair the measured black on-accent text with it. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | CTA lettering and sharp dark details; hero lettering appears near-black, not a separate colored field. |
| Deep Slate | `#232924` | `--color-deep-slate` | neutral | Minor text and detail tone in the measured data; not a dominant canvas color. |
| Pale Sage | `#c8d2c8` | `--color-pale-sage` | neutral | Subtle heading tint in measured data; treat as a restrained text detail, not a section background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#121613` (Forest Ink) · `--color-text` → `#121613` (Forest Ink) · `--color-text-muted` → `#516254` (Moss Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#2bee4b` (Signal Green) · `--color-on-accent` → `#000000` (Pure Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121613` | `#ffffff` | 18.26:1 | AAA |
| `#516254` | `#ffffff` | 6.51:1 | AA |
| `#516254` | `#121613` | 2.8:1 | fail |
| `#ffffff` | `#121613` | 18.26:1 | AAA |
| `#2bee4b` | `#ffffff` | 1.56:1 | fail |
| `#2bee4b` | `#121613` | 11.68:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWK Lausanne | `--font-body` | webfont | 350, 200, 550 | Primary sans serif for body copy, navigation, captions, and some headings | Inter |
| Editorial New | `--font-display` | webfont | 300 | Light editorial display headings | Cormorant Garamond |
| PP Mondwest | `--font-pp-mondwest` | webfont | 400 | Distinctive display headlines | Bodoni Moda |

- **TWK Lausanne:** Measured weights span light to medium; body is compact with slight positive tracking, while captions use uppercase.
- **Editorial New:** Use a light weight and close line spacing for large headline moments; preserve contrast with the sans serif.
- **PP Mondwest:** Measured display styles use tight negative tracking and close line spacing; reserve for prominent oversized text.

### Type scale — Custom (ratio ≈ 1.84, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 295px | 400 | 0.9 | -0.04em | — | PP Mondwest | Oversized, characterful headline or display text |
| h1 | 240px | 300 | 0.9 | -0.01em | — | Editorial New | Primary hero headline in a light editorial face |
| h2 | 165px | 400 | 0.9 | -0.04em | — | PP Mondwest | Large secondary display heading |
| h3 | 155px | 550 | 1 | -0.04em | — | TWK Lausanne | Prominent sans-serif heading |
| h4 | 140px | 300 | 0.9 | -0.02em | — | Editorial New | Light editorial subheading |
| body | 14px | 350 | 1.1 | 0.01em | — | TWK Lausanne | Compact supporting paragraphs |
| caption | 11px | 550 | 1.1 | 0 | uppercase | TWK Lausanne | Small uppercase labels and metadata |
| nav | 16px | 550 | 1.4 | 0.01em | — | TWK Lausanne | Compact menu and navigation labels |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 15, 20, 25, 30, 32, 35, 40, 45, 50, 55, 60, 120, 130 px.
- Section rhythm 50px · element gap 50px · card padding — · max content width —.

The visible hero uses a wide canvas with a compact brand mark at the upper left and a small menu control opposite it. A large headline occupies the main field, broken into tightly stacked lines and interleaved with photographic inserts. The screenshot shows a substantial dark, curved overlay entering from the right, so preserve its dramatic asymmetry rather than forcing a conventional centered grid. Measurements indicate spacious rhythm, but no maximum width is recorded. Keep supporting elements sparse and let the open background frame the headline.

## Shape & elevation

- Radius: button `5px` · media `50%` · xs `5px` · sm `8px` · md `10px` · lg `14px`
- Shadow `md` (button): `rgba(16, 94, 29, 0.45) 1px 8px 20px 0px`
- Shadow `md-2` (button): `rgba(18, 146, 39, 0.25) 1px 8px 20px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The overall treatment is flat and graphic, with no measured border color or gradient. Keep panels and text areas clean, relying on contrast and overlap rather than outlines. The measured green CTA has a soft, offset green shadow; reserve that depth for the primary action instead of applying it broadly.

## Imagery

Use documentary-style urban photography in monochrome: buildings, streets, and architectural details. Images appear as small horizontal or near-square inserts embedded within the headline, with tight crops and subtle corner rounding. Their grayscale treatment supports the black-and-white palette rather than introducing competing color. The first viewport also shows a large dark organic shape overlapping the text; treat it as a strong compositional layer, not as a photographic asset.

## Components

### Brand mark

Small New Form wordmark anchored at the upper-left of the hero, with a fine green accent beneath it.

### Menu control

Compact upper-right navigation affordance with a menu label and thin green marks.

### Hero headline

Oversized, tightly stacked headline with alternating photographic inserts and near-black lettering.

### Image inserts

Grayscale architectural and street photographs cropped into small rounded rectangles within headline lines.

### Portfolio CTA

Uppercase VIEW PORTFOLIO action using #2bee4b, black text, a small radius, and a soft green shadow.

### Inverse section

Near-black #121613 section or card surface with contrasting light text, as indicated by measured surface data.

### Measured component styles

- **Primary button** (“VIEW PORTFOLIO”): background #2bee4b · text #000000 · radius 4.9968px · padding 20px 30px · 550 11.0016px TWK Lausanne · uppercase · shadow rgba(16, 94, 29, 0.45) 1px 8px 20px 0px
- **Link** (“VIEW PORTFOLIO”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Times New Roman
- **Card** (“Home Portfolio Team”): background #121613 · text #000000 · radius 0px · padding 0px · 550 96.0048px TWK Lausanne
- **Navigation item** (“Close Menu”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Make the headline the dominant hero element.
- Use black-and-white urban photography as inline composition.
- Keep the canvas bright and the dark fields sharply defined.
- Reserve #2bee4b for a few high-value actions or marks.
- Use compact uppercase styling for small labels.
- Preserve generous open space around the hero.

## Don't

- Do not introduce unmeasured palette colors.
- Do not turn the hero into a conventional centered card.
- Do not let colorful photography compete with the typography.
- Do not apply green broadly to large backgrounds.
- Do not add decorative borders across the page.
- Do not apply CTA shadows to every component.

## Agent prompt

Build a new page in New Form’s restrained editorial style. Use Gallery White (#ffffff) as the principal canvas and Forest Ink (#121613) for dominant text and inverse fields; keep Moss Gray (#516254) secondary and use Signal Green (#2bee4b) only for a small control or primary action with black lettering. Set an oversized, tightly tracked headline as the main composition, combining a contemporary sans serif with light editorial and distinctive display faces. Weave tightly cropped grayscale urban photographs into the headline rather than placing them in a conventional card grid. Keep navigation compact at the top, preserve broad open space, and use deliberate asymmetry or a bold overlapping shape where appropriate. Keep surfaces flat and crisp; reserve a subtle green shadow for the primary CTA. Do not invent palette values or unseen page sections.

## Source CSS custom properties (selected)

```css
--survey-widget-space: 24px;
--survey-pageless-space: 80px;
--colour-neutral-1000: #232E3A;
--colour-neutral-600: #6080A0;
```

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

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