Reference build · Phase 2 of 4
Brand and design for a fictional B2B SaaS launch.
The brand foundations Threshold needs to ship a launch microsite. Real tokens, real fonts, real components, rendered live on this page.
Demonstration notice
This walkthrough is a demonstration. Threshold is a fictional product built to illustrate how the catalog composes. The brand foundations on this page are real (real tokens, real fonts, working components rendered inline); the product itself is not. The brand work derives from the Phase 1 brief, itself fictional but documented.
Mini-deck 1
Identity.
Logo variants, rendered live
primary: Default lockup. Accent-color symbol next to ink wordmark on warm off-white. Used on light backgrounds, primary marketing surfaces, app navigation bar.
mono-ink: Single-color ink lockup. Used in print contexts, low-fidelity reproduction, contexts where the accent color cannot render reliably.
mono-white: Reverse lockup. Used on dark backgrounds, rich-media slide decks, photographic backgrounds with high tonal contrast.
stacked: Vertical lockup. Used in narrow contexts (favicon sources, square avatars, mobile splash). Symbol sits above the wordmark.
Symbol without wordmark. Used in app-icon contexts, browser favicons, extremely narrow lockups. The symbol must read on its own at 16x16px.
The logo is a combination mark: a small event-marker symbol next to a lowercase serif wordmark. Each decision derives from the Phase 1 brief.
The symbol is an event marker. A thin vertical line above a filled circle, evoking the way an analytics tool plots a threshold-crossing event on a chart axis. Threshold measures the moment a new user crosses into activation; the mark holds that idea in eight pixels of geometry. Muted teal (#5B8B85) carries the accent role.
The wordmark is lowercase serif. Lowercase to match the Conversational tone from the brief; serif to anchor the Editorial Restrained aesthetic. IBM Plex Serif Semibold renders cleanly from 12px favicons up to 64px hero displays without losing character. Deep navy ink (#0F1B2D) keeps the wordmark readable at any reproduction quality.
Five variants cover the surfaces. Primary for marketing surfaces, mono-ink for low-fidelity print, mono-white for dark backgrounds, stacked for narrow contexts (favicons, square avatars), symbol-only for app icons and 16x16px browser tab marks. Clear-space rule: 1x the symbol height of padding on all sides. Minimum size: 24px wide (primary lockup), 16px (symbol-only).
Skills used in this section
Clear space: 1x the symbol height. Minimum padding around the logo, expressed as a multiple of the symbol height. Inside this clear space, no other graphic elements may appear.
Mini-deck 2
System.
14 color tokens, 9 type tokens, three working component primitives. All render live on this page from the same data layer Phase 3 will consume.
Color tokens
Deep ink as primary, muted teal as accent, warm ochre as data highlight. Warm off-white background. WCAG contrast ratios documented for each token; the accent role hits 4.1 against white (just over AA).
ink
#0F1B2D
Primary text, logo wordmark, headlines
ink-soft
#1F2D44
Secondary headlines, emphasized body
background
#FFFFFF
Default surface, card fills
background-warm
#FAF9F6
Page background, off-white surfaces
accent
#5B8B85
Primary accent, links, CTAs, brand symbol
accent-deep
#3F6661
Hover states, pressed buttons, deeper accent
highlight
#C9A227
KPI numerics, sparingly applied highlight (data confidence)
neutral-900
#1A1F2C
Strong borders, deep neutrals
neutral-700
#4A5568
Body text alternative, secondary copy
neutral-500
#7B8392
Muted text, captions, helper copy
neutral-300
#C7CCD4
Borders, dividers
neutral-100
#EDEFF2
Subtle backgrounds, table-row alternates
danger
#A33B3B
Error states, drop-off indicators
success
#3F6E55
Activation indicators, positive deltas
Typography
IBM Plex Serif for display and headlines. Inter for UI and body. JetBrains Mono for numerics and data. All three loaded via next/font/google with optimized subsetting.
display
IBM Plex Serif · 600
56px / 64px
headline
IBM Plex Serif · 600
36px / 44px
title
Inter · 600
24px / 32px
subtitle
Inter · 500
18px / 28px
body
Inter · 400
16px / 28px
body-strong
Inter · 600
16px / 28px
caption
Inter · 500
13px / 20px
eyebrow
Inter · 600
12px / 16px
data
JetBrains Mono · 500
14px / 20px
Component primitives
Three foundational components rendered with the real tokens: buttons (primary, secondary, accent), KPI card (numeric in mono, ochre highlight), comparison row (capability-by-capability table).
Buttons
KPI card
Activation rate
47.3%
Median across cohort, Q1 2026
Comparison row
| Capability | Threshold | General-purpose analytics |
|---|---|---|
| Pre-built activation funnel | ✓ | · |
| Time-to-first-value benchmark | ✓ | · |
| Custom event tracking | ✓ | ✓ |
Skills used in this section
Mini-deck 3
Composition.
Three mockups showing how the foundations compose into the actual launch microsite. These are demonstration renders; Phase 3 builds the real surfaces.
Launch hero
Logo at top-left, navigation at top-right, generous whitespace, serif headline carrying the brief's tagline verbatim, sans-serif subhead expanding into the wedge claim. Two CTAs: a primary deep-navy "Join the waitlist," a secondary outline "See how it compares." A single muted-teal stat card grounds the page in the 47.3%-activation-rate credibility number.
Launch comparison
The wedge made visible. A 3-column comparison table contrasts Threshold (focused) with general-purpose analytics tools (broad). The capabilities Threshold ships out-of-the-box (pre-built activation funnel, time-to-first-value benchmark, onboarding drop-off detection) get muted-teal checks; capabilities both tools have (custom event tracking) get checks on both sides. No disparagement; the framing is positioning, not knockoff.
Launch waitlist
Three qualifying questions, one at a time, with a progress indicator. The questions match the Phase 1 brief's waitlist criteria (role, team size, primary metric being optimized) so the waitlist data downstream is sales-ready, not just an email list. Step 2 of 3 shown in selected state to demonstrate the in-progress UI.
Phase 3 hand-off brief
What the build phase consumes.
The data layer at app/walkthroughs/saas-launch-brand-and-design/_data/ holds the production tokens. The fonts loader at _fonts.ts drops into the Phase 3 layout root. The ThresholdLogo component ships as-is. The mockup compositions inform the Phase 3 surface layout but Phase 3 produces the actual rendered HTML, not a screenshot replica. Phase 4 will audit the deployed result against the Phase 1 success criteria from the brief.
Skill used in this section
The reference build continues
What's next.
Phase 1
Strategy and research
Brief, real Ahrefs research, competitor profiles, content gap analysis, recommendations.
Read the walkthrough →
Phase 3
Build and ship
Frontend implementation consuming the Phase 2 tokens. Deployed launch microsite, pre-launch waitlist with the qualifying questions.
Read the walkthrough →
Phase 4
Audit and optimize
Accessibility, performance, on-page SEO audit on the live site. Validates against the Phase 1 success criteria.
Queued
Demonstration framing
Threshold is a fictional product built to illustrate how the catalog composes from research-driven brief to applied brand foundations. The brand foundations on this page are real (real tokens, real fonts via next/font, real working components rendered live); the product itself is not. The 14 color tokens, 9 type tokens, and 5 logo variants surfaced here are production-grade and form the data layer Phase 3 will consume. No data is collected from this page; no waitlist is operating.
Skills used (Phase 2)
Tooling used (Phase 2)
- next/font/google for IBM Plex Serif, Inter, JetBrains Mono
- lib/image-pipeline.ts (Gemini + Sonnet review) for the four compositional mockups rendered on this page
Brief inherited: Threshold with creative axes Conversational / Editorial Restrained / Peer / Considered.