Forge — Design Brief
A near-monochrome dark dev-tool homepage in the editorial-engineering tradition. The design reads like a calm engineering doc that happens to ship a product: hairline borders, a quiet dot-grid, one warm slate accent, and a serif headline that lets technical UI breathe around it.
1. Design principles
- One container, one rhythm. Every section uses the same \
.wrap\(max-width 1200px,
24px gutters, 18px on small screens). Nothing escapes the rail — features, timeline, code card, pricing, footer all snap to the same column.
- Texture, not decoration. No full-bleed gridlines, no panels of color.
A subtle radial-masked dot grid appears only behind hero, quote and CTA sections — it dies out toward the edges so it never reads as a wallpaper.
- Hairlines stay inside cards. Dividers live on the border of a card,
never as floating page-wide lines that fight the typography.
- Editorial serif × engineering mono. Fraunces (italic optical-sized)
carries every display headline. Geist Mono carries every label, status, commit, branch, file path. Geist (sans) carries everything else.
- One accent. A single cool off-white \
#c8d4e3\is the only "color".
Status chips (\ok / warn / bad / info\) are restrained mineral tones, not neon. They appear in pips and chips — never as fills.
2. Color tokens
\\\css --bg: #0b0d10; /* page */ --bg-2: #0f1216; /* recessed surfaces (rows, code panes) */ --surface: #14181d; /* raised surfaces (cards, plans) */ --surface-2: #1a1f25; /* hover / selected rows */ --fg: #f4f5f7; /* primary text */ --fg-soft: rgba(244,245,247,0.66); --fg-muted: rgba(244,245,247,0.42); --hairline: rgba(244,245,247,0.08); /* every card border */ --hairline-2:rgba(244,245,247,0.16); /* button outlines, emphasis */ --accent: #c8d4e3; /* italic serif emphasis, focused chips */ --accent-2: #7c8a9d; /* secondary glyphs */ --ok:#6bd29a; --warn:#e8b66a; --bad:#e98091; --info:#8fb6e8; \\\
Rule: never introduce a sixth color. If you need to differentiate, change surface depth (\bg → bg-2 → surface → surface-2\) before reaching for hue.
3. Type system
| Role | Family | Weight / size |
|---|---|---|
| Display (h1/h2) | Fraunces | 400, italic for emphasis, \clamp\ fluid sizing |
| Body | Geist | 400 / 500, 14–16px |
| Labels, status, file paths, code | Geist Mono | 400 / 500, 11–13px, +0.16em letter-spacing on uppercase |
Every italic word in a headline is wrapped in \<em>\ and tinted \var(--accent)\. That is the only place the accent color appears as text.
4. Reusable primitives
The page is built from four primitives. Reproduce them once and reuse everywhere.
4.1 \.wrap\ (Page rail)
\\\css .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; } @media (max-width: 640px) { .wrap { padding: 0 18px; } } \\\
4.2 Dot Grid texture
A radial-masked dot pattern. Drop it as an absolutely-positioned child inside any section that needs depth.
\\\css .dotgrid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(244,245,247,0.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%); } \\\
4.3 Avatar Group
Overlapping 26px circles with a 2px page-color border. The fifth slot is a muted "+N" pill.
4.4 Segmented Control
A 3px-padded pill with an active "tab" sitting on top of a darker recess. Used for toolbar tabs, filter switches, and pricing cadence.
\\\css .segctl { background: var(--surface); border: 1px solid var(--hairline-2); border-radius: 8px; padding: 3px; } .segctl .seg { height: 28px; padding: 0 14px; border-radius: 6px; color: var(--fg-soft); } .segctl .seg.on { background: var(--bg); color: var(--fg); } \\\
5. Section anatomy (top to bottom)
- Sticky nav — blurred dark surface, brand mark = two offset hairline squares.
- Hero — 1.1fr / 1fr two-column grid. Left: serif H1 + lede + CTA + avatar
social-proof. Right: a "pipeline status" card with four mono rows. Dot grid behind everything.
- App mock — a full-width panel with a window-chrome toolbar (traffic
lights, breadcrumb, segmented control) and a sidebar + PR list.
- Logo strip — quiet hairlined band, label + 5 mono logo marks.
- Feature grid — 3-column bento. Each cell: a 140px schematic graphic
(bars, branch, chart) above a serif-quiet h3 + body.
- Workflow timeline — 6 rows, 3 columns: \
step / title / chips\.
On mobile collapses into a single column with hairline dividers.
- Code + review card — left pane is a syntax-tinted diff (add/del rows
with subtle color washes), right pane is "auto + human" review comments.
- Stat strip — 4 large serif numerals, mono labels.
- Integrations — 4×2 grid of small icon cards.
- Pull-quote — centered serif blockquote, dot grid behind, avatar group
+ name + role beneath.
- Pricing — 3 plans, middle one "feat" with a slightly raised gradient.
- CTA + footer — large serif callout over dot grid; minimal footer.
6. Responsive strategy
The page has four breakpoints and degrades gracefully — no horizontal scrollbars, no clipped text, no dead grey rectangles.
| Breakpoint | What changes |
|---|---|
| ≤1100px | App-mock sidebar narrows to 200px. |
| ≤900px | Nav links + ghost button hide. Hero collapses to one column. Features → 1 col. Timeline rows stack. Code card stacks. Pricing → 1 col. Stats → 2 cols. |
| ≤720px | App-mock sidebar disappears (PR list takes full width). Toolbar wraps so the segmented control drops to its own line. Each PR row becomes a 3-area stacked card (\ico / title checks / id avatar\). |
| ≤640px | Tightens every internal padding, reduces feature graphic height, drops code font to 11px, and converts every section-head to a vertical stack. Footer stacks. |
| ≤380px | Hard cap on H1 (\1.85rem\) and feature graphic (\100px\) so even the smallest phones never overflow. |
Guidelines when extending:
- Always set \
min-width: 0\on flex children that hold long mono strings. - Use \
text-wrap: balance\on display H1/H2 so they never break a single
word vertically (this was the original mobile bug).
- Use fluid \
clamp(min, vw, max)\for headlines, but pick a min that holds at
320px — \clamp(2rem, 6.4vw, 3.6rem)\ for H1, \clamp(1.9rem, 3.2vw, 2.7rem)\ for H2.
7. How to rebuild this from scratch
If you want to apply the Forge system to your own product page, follow these seven steps in order:
- Drop in the design tokens. Paste the \
--bg / --fg / --hairline / --accent\
token block into the root scope (or a scoped \.yourname\ wrapper). Do not theme individual components — let everything inherit.
- Add the three font families (Fraunces, Geist, Geist Mono) once at the
top of your stylesheet via Google Fonts. Set \font-optical-sizing: auto\ on the serif so it scales gracefully.
- **Build \
.wrap\first.** Get the 1200/24/18 container right before you
write a single section. Every other layout problem traces back to an inconsistent rail.
- Build the four primitives (\
btn\, \segctl\, \avatar-group\, \dotgrid\)
in isolation. They are the entire visual vocabulary — once they look correct, the rest of the page is just composition.
- Compose top-down, hero first. Lock the H1 typography (italic emphasis,
serif), get the eyebrow + lede + CTA rhythm right, then add the right-side status card. Don't tune sections in isolation.
- Stay greyscale until the very end. Add the \
--ok / --warn / --bad / --info\
tints last, only as 6px pips and chip dots. If a status feels weak, thicken the border, do not saturate the color.
- Test mobile at 375px and 320px before you ship. Open DevTools, enable
the iPhone SE viewport, and walk every section. The rules above (text-wrap balance, min-width: 0, sidebar hide at 720px) are non-negotiable.
8. Common pitfalls
- ❌ Adding a second accent ("just a little blue for links"). Use \
--info\or
\--accent\ only — never introduce a true brand color.
- ❌ Putting full-bleed horizontal lines between sections. The vertical rhythm
comes from \.section\ padding, not dividers.
- ❌ Letting mono labels grow past 13px. Once mono is body-sized it stops
reading as metadata and starts competing with content.
- ❌ Wrapping serif headings in \
<strong>\for emphasis. Always use
\<em>\ + the accent color — that's the only emphasis primitive.
- ❌ Using shadows. There are none. Depth comes from surface tokens
(\bg → bg-2 → surface → surface-2\).
Wrap the new transaction in an idempotency key so retries don’t mint two sessions for the same user. Suggested change inline.