BuildWithFern

A calm, developer-tooling marketing surface from Fern (a Postman company) anchored on white canvas with near-black CTAs and the GT Planar grotesque display face set at weight 400 with aggressive negative tracking. The system reads as precise and engineering-credible — light surfaces, square-cornered inputs, soft ~10px-radius cards, a single photographic dark hero band carrying a pill segmented control, and product/docs UI fragments shown inside cards. Brand voltage comes from the green Fern leaf mark and from real docs/API chrome embedded in the flow rather than from saturated accent fields.

buildwithfern.com

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 64px · 400 · 1.15

The quick brown fox jumps

body-lg 24px · 300 · 1.3

The quick brown fox jumps

button 14px · 400 · 1.429

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	6px
sm	8px
smd	10px
md	12px
lg	16px
xl	20px
xxl	24px
x3	32px
x4	40px
x5	48px
x6	64px

Border Radius

Name	Value	Preview
none	0px
xs	2px
sm	4px
md	6px
lg	8px
xl	10px
xxl	14px
x3	24px
pill	32px

FAQ

What colors does BuildWithFern use?: BuildWithFern's core palette includes #0a0a0a, #202020, #404040, #737373, #80838d. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the BuildWithFern DESIGN.md.
What font does BuildWithFern use?: BuildWithFern's primary typeface is GT Planar. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the BuildWithFern design system?: A calm, developer-tooling marketing surface from Fern (a Postman company) anchored on white canvas with near-black CTAs and the GT Planar grotesque display face set at weight 400 with aggressive nega…

More like this

↓ .md ↓ All files

loading…