revfold.co
Brand & design system · Forge · v0.2

The system behind revfold.co

Every color, type ramp, space step, radius and component we use — calm, warm and engineered. One document so anything we build looks unmistakably Revfold.

Typeface Bricolage GrotesqueData Space MonoAccent Coral #E4613CBase unit 4px
02

Color

Warm, low-glare and human. Coral is the single accent — used with discipline, roughly 10% of any view. Neutrals are warm (never cool gray). Every role is defined for light and dark.

Brand accent
AA · white text
Coral
#E4613C
Primary accent · CTAs, links, the mark
Coral deep
#C64A28
Hover / pressed · small-text links
Gold
#E0A43B
Secondary accent · sparing support
dark mode
Coral (dark)
#EA6C43
Accent on dark backgrounds
Neutrals · light
Cream
#FBF5EC
Page background
Card
#FFFFFF
Raised surface
Sand
#F3E9DB
Inset surface · tags, wells
Hairline
#EADFCF
Borders, dividers
Espresso
#231A13
Primary text
Ink-2
#6E6156
Secondary text
Ink-3
#9B8E7C
Muted · captions, placeholder
Coral
#E4613C
Accent (shared)
Neutrals · dark
Warm black
#17120D
Page background
Panel
#211A13
Raised surface
Surface-2
#2A2118
Inset surface
Hairline
#362B21
Borders, dividers
Bone
#F5ECE0
Primary text
Ink-2
#ADA090
Secondary text
Ink-3
#857868
Muted
Coral
#EA6C43
Accent (dark)
03

Typography

Bricolage Grotesque carries everything — display, headings and body. Space Mono is seasoning for data, labels and hex. Never set body in mono; never drop Bricolage below 700 for headings.

Display & body
Bricolage Grotesque
Aa Rr Gg
400 Regular500 Medium600 Semibold700 Bold800 Extrabold
Data & labels
Space Mono
Aa 012
400 Regular700 Bold
Revenue that folds forwardDisplay · Bricolage 800
clamp→64px · -0.035em · 1.0
You stay the expertH1 · Bricolage 700
38px · -0.035em · 1.05
We run the engineH2 · Bricolage 700
28px · -0.03em · 1.1
What we run behind youH3 · Bricolage 700
21px · -0.02em · 1.2
Large body — the audience is yours; we build the engine underneath it so revenue compounds.Body large · Bricolage 400
19px · 0 · 1.55
Body — we plan the content, run the ads, build the webinars and funnels, and fold into the operation.Body · Bricolage 400
16px · 0 · 1.6
Operating partner for creatorsEyebrow · Space Mono 400
11px · 0.14em · UPPER
+312%Metric · Space Mono 500
44px · -0.02em · tabular
04

Spacing

Base unit 4px. Use only steps on the scale — no arbitrary values. Let whitespace do the work; crowding reads cheap.

space-1
4px · icon-to-text
space-2
8px · inside small parts
space-3
12px · component padding
space-4
16px · default element padding
space-6
24px · card padding, gaps
space-8
32px · block spacing
space-12
48px · major section spacing
space-16
64px · page rhythm
Radius
Radius sm
14px · buttons, inputs, icon square, chips
Radius md
22px · cards, tiles (default)
Radius lg
28px · large cards, modals
Radius pill
999px · buttons, tags, pills
Elevation & motion
Soft shadow (featured / hover only)
0 20px 44px -22px rgba(60,40,20,.30)
Default surfaces stay flat with a hairline border. Lift only on hover or hero cards.
Motion
200ms · cubic-bezier(.2,.7,.2,1)
hover → translateY(-2 to -4px)
Warm, gentle ease-out. No bounce, no long durations.
05

Components

Built from the tokens above. Rounded, warm, flat-with-hairlines, one coral accent per view.

Buttons
Pill radius · 600 weight · fill uses coral + white · one primary per view.
Tags & pills
Rev-shareEvergreenOperating partner
Space Mono · pill radius · accent tag = coral fill + white; neutral = Sand.
Input · default & focus
Work email
44px height · sm radius · 3px coral focus ring.
Metric block
Partner revenue
+312%
Average over 12 months, compounding
Numbers live in Space Mono · coral for the headline metric.
Featured tile
Rev-share
$2.1M
Icon in square · avatars
Icons: Lucide, 1.8px stroke · inherit ink, coral when active · 46px square / sm radius.