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