Signal Red
#ec2e3aBrand accent — the colon in the wordmark, dot ornaments beside display headlines, card highlight borders, feature icon strokes. Carries the entire chromatic identity of the system
Wellfound
wellfound.com
Website preview
The design language
Wellfound speaks in the language of opportunity constellations: a crisp white editorial canvas where job-title pills float freely like sticky notes on a research wall. The brand is almost achromatic at its core — near-black ink text, generous white space, and whisper-thin borders — but punctuates this restraint with two signature chromatic notes: a signal-red used as accent punctuation (the colon in the wordmark, dot ornaments, border highlights) and a deep aubergine that turns the stats band into a velvet curtain of dark authority. Type is the workhorse: Graphik at every weight and size, with aggressive negative tracking on display sizes that pulls headlines into tight, confident shapes. Components stay flat and honest — pill-shaped tags, 12px-radius buttons, hairline borders, a single soft shadow reserved for elevation moments. The mood is 'startup-editorial': more The Information than SaaS dashboard.
Color palette
brand
Ember Red
#e32e19Warmer secondary red for text and border accents where Signal Red reads too cool
accent
Aubergine Depth
#210d25Dark hero/stat-band background, inverse-mode surface — turns the stats counter into a velvet authority moment against the otherwise light page
Plum Shadow
#541142Deeper purple link background, secondary dark accent for hover or emphasis on the aubergine family
neutral
Wellfound Ink
#051316High-contrast neutral action fill for primary buttons on light surfaces.
Paper White
#ffffffCanvas, card surface, button fill, nav surface — the dominant background across nearly every screen
Blush Mist
#fff4f6Soft warm card surface for feature blocks, gentle wash on two-column benefit sections
Ash Gray
#d8d8d8Ghost-button borders, hairline dividers, muted tag outlines — present without demanding attention
Charcoal
#333333Secondary text on images, subdued link color — slightly lighter than Ink for hierarchy
Slate Depth
#222222Nav text in dark sections, alternative ink tone for darker surface contexts
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-xl
100px · 600 · 0.82 · -2px trackingThe quick brown fox jumps
display
72px · 600 · 1 · -1.44px trackingThe quick brown fox jumps
heading-lg
40px · 600 · 1.14 · -0.64px trackingThe quick brown fox jumps
heading
30px · 600 · 1.27 · -0.48px trackingThe quick brown fox jumps
heading-sm
24px · 600 · 1.3 · -0.31px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.36The quick brown fox jumps
subheading
21px · 400 · 1.36 · -0.27px trackingThe quick brown fox jumps
text-17
17px · 500 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Graphik
- Weights
- 400, 500, 600
- Sizes
- 14, 16, 17, 21, 22, 24, 30, 40, 72, 100
- Line height
- 1.13–1.50 (body), 0.82–1.00 (display, tight leading)
- Letter spacing
- -0.0200em at display (72–100px), -0.0160em at heading (30–40px), -0.0130em at subheading (21–24px), normal at body
- Fallback
- Inter, Manrope, or Plus Jakarta Sans
Primary workhorse — used for everything from 14px nav links to 100px hero stats. Weight 400 for body and tags, 500 for buttons and medium emphasis, 600 for headlines and display. Negative letter-spacing (-0.013em to -0.020em) tightens display sizes into compact, confident shapes that read more like editorial typography than UI text. The very tight leading on 72px+ (0.82–1.0) is signature — display numbers feel sculpted rather than typeset.
Additional typeface
Aeonik Fono
- Weights
- 400, 700
- Sizes
- 14, 40
- Line height
- 1.40
- Fallback
- Space Grotesk or General Sans
Secondary typeface used sparingly for small-caps-style labels and select 40px display moments. Brings a slightly geometric counter-form to Graphik's humanist shapes, creating contrast when both fonts appear on the same surface.
Additional typeface
Aeonikfono
- Weights
- 400, 700
- Sizes
- 40px
- Line height
- 1.3
- Letter spacing
- -0.02
Aeonikfono — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 20-24px
- Element gap
- 16px
Border radius
tags
1000pxcards
16pxinputs
12pxbuttons
12pxlargeBlocks
40pxSpacing scale
4px6px7px8px10px11px12px13px14px16px20px22px24px28px29px32px40px48px60px64px80px96px100px120px144px264pxGuidelines
Do
- Use Graphik (or Inter/Manrope) at every text level with the negative letter-spacing scale: -0.020em at 72px+, -0.016em at 30–40px, -0.013em at 21–24px, normal at 16px and below
- Reserve Signal Red (#ec2e3a) for accent punctuation only — the colon in the wordmark, dot ornaments beside display headlines, card highlight borders, and icon strokes. Never use it for large filled areas or body text
- Apply the Aubergine Depth (#210d25) surface as a full-bleed band, not as a card — it works as a horizontal authority stripe, not a contained element
- Use 12px border-radius for all buttons and inputs, 16px for cards, and 1000px (pill) for all tags and chips — do not mix these radii across component types
- Set display headline (72–100px) line-height to 0.82–1.0 and body (14–17px) line-height to 1.4–1.5 — the extreme contrast between tight display and airy body is a signature
- Float pill-tags in white space at varying opacity (40–100%) to create constellation effects — never align them to a strict grid in hero contexts
- Pair the primary filled button (Ink #051316) with the ghost outlined button (#ffffff fill, #d8d8d8 border) in any action cluster — never show two filled buttons side by side
Don’t
- Do not use Signal Red for body text, large backgrounds, or button fills — it is a punctuation color, not a surface color
- Do not introduce gradients, glassmorphism, or heavy drop shadows — the system is flat and editorial by design
- Do not use border-radius values outside the established system: 0, 12px, 16px, 40px, or 1000px (pill). No 8px, no 24px, no random rounding
- Do not center body text — left-align all paragraph and feature-row text, reserving center-align for headlines and stat numbers only
- Do not place more than one Aubergine Depth band per page section — the dark surface is powerful and loses impact if repeated
- Do not use the Blush Mist (#fff4f6) as a full-page background — it is a soft card/panel surface, not a canvas replacement
- Do not add decorative dividers, ornamental graphics, or background patterns — white space and typography carry the visual weight
Components
Primary Filled Button
High-emphasis action (Sign Up, Find your next hire)Background #051316 (Wellfound Ink), text #ffffff, Graphik 500 at 14–16px, 12px border-radius, 12px 20px padding. No border. Optional subtle shadow rgba(0,0,0,0.06) 0px 9px 20px 0px. Tight, dark, confident — the button reads as 'switched on' against the white canvas.
Ghost Outlined Button
Secondary action (Log In, Learn more)Background #ffffff, 1px border #d8d8d8 (Ash Gray), text #051316, 12px radius, 12px 20px padding. No fill, no shadow. Sits quietly next to the primary button without competing.
Pill Tag / Opportunity Chip
Skill, role, or location label in the hero constellation and filter barsBackground #ffffff, 1px border #d8d8d8 or rgba(0,0,0,0.1), text #051316 at 14px Graphik 400, 1000px (pill) border-radius, 8px 14px padding. The hero deploys dozens of these at varying opacity to create a cloud of floating opportunities. No shadow on tags.
Hero Display Headline
Primary page-level headlineGraphik 600 at 72–100px, color #051316, line-height 0.82–1.0, letter-spacing -0.020em. Often paired with Signal Red (#ec2e3a) dot/colon ornaments (e.g., 'W:' prefix) as a brand signature. Tight tracking and tight leading make the headline feel sculpted.
Stats Band Block
Dark authority section with large numeric countersFull-width background #210d25 (Aubergine Depth), padding 80–96px vertical. Three or four columns, each with a 72–100px Graphik 600 number in #ffffff, plus a 14–16px Graphik 400 caption in #ffffff below. Numbers use the same tight tracking as display headlines. Hairline #ffffff-at-20% divider separates from the logo strip below.
Feature Row Item
Icon + heading + description in the two-column benefit section36–40px icon in #ec2e3a (Signal Red) stroke or fill on the left, body text block on the right: 16–18px Graphik 500 heading in #051316, 14–16px Graphik 400 body in #333333 or #051316. Gap of 16–24px between icon and text. Vertically stacked with 24–32px gap between rows.
Two-Column Benefit Panel
'Why job seekers love us' / 'Why recruiters love us' mirrored sectionsBackground #fff4f6 (Blush Mist) or #ffffff, 48–64px padding, two equal columns separated by 48–80px gap. Each column has a small caps-style eyebrow label, a 30–40px Graphik 600 heading, and 4 feature rows with icon + text.
Company Logo Strip
Social proof band below the statsGrayscale company logos on Aubergine Depth (#210d25) background, evenly distributed in a single row, ~48px height, 10–15% opacity white. No captions — the logos speak.
Navigation Bar
Top-level site navigationBackground #ffffff, 64–72px height, wordmark left ('wellfound:' with red colon in #ec2e3a), nav links center at 14px Graphik 500 in #051316, auth actions right (ghost Log In + filled Sign Up). 1px bottom border #d8d8d8 or invisible.
Dark CTA Card
Bottom-of-page conversion panelBackground #210d25 (Aubergine Depth), 16–40px border-radius, generous padding (48–64px), 30–40px Graphik 600 white headline. Optional Signal Red accent on key word. Button inside uses white-fill variant on the dark surface.
Icon Set
Feature and nav icons1.5–2px stroke weight, line-style icons, monochrome in Signal Red (#ec2e3a) for feature contexts, Wellfound Ink (#051316) for nav and utility. 24–36px sizing. Rounded line caps, geometric construction.
Surfaces & elevation
Level 0
Paper White
#ffffffBase canvas — nav, page body, most card surfaces
Level 1
Blush Mist
#fff4f6Warm secondary surface for two-column benefit sections, soft card washes
Level 2
Aubergine Depth
#210d25Dark inverse surface for stats band, CTA banners, authority moments
Wellfound uses elevation as a rare punctuation, not a structural tool. The single shadow token (a soft 9px-y, 20px-blur, 6% black) appears only on primary filled buttons — it lifts the dark button off the white canvas just enough to feel clickable, nothing more. Cards, tags, and nav rely on borders and background contrast, not shadows. This keeps the entire interface feeling flat, editorial, and fast — the opposite of skeuomorphic depth.
Primary Button
rgba(0, 0, 0, 0.06) 0px 9px 20px 0px
Layout & imagery
Layout
Page is max-width ~1200px centered with generous outer gutters. The hero is a full-width white canvas with a massive centered headline ('W: Find what's next') surrounded by a scattered constellation of 20+ pill-tags at varying vertical positions, creating an organic, non-grid layout. Below the hero, a full-bleed dark aubergine stats band (3-column counter layout) spans edge-to-edge. Then a logo strip on the same dark band. Next, a two-column benefit section (job seekers | recruiters) on a blush-mist or white surface, with 4 feature rows per column. The page ends with a dark CTA card. Navigation is a clean top bar — wordmark left, links center, auth right. No sidebar, no sticky behavior beyond the header. The rhythm alternates: white → dark → white → dark, with each band using generous 64–96px vertical padding for breathing room.
Imagery
The site is overwhelmingly text-and-tag-driven with no hero photography. The visual language is built from typographic constellation: dozens of white pill-tags (job titles, locations, skills) floating in white space at varying opacity, creating a 'cloud of opportunities' metaphor. The only photographic content is grayscale company logos in the social-proof band, rendered at low opacity on the dark aubergine surface. Icons are line-style, monochromatic red or ink, geometric. No illustration, no 3D, no product screenshots on the homepage. The aesthetic is closer to a print magazine spread than a SaaS dashboard.
Design notes
Agent Guide
**Quick Color Reference** - Canvas/surface: #ffffff - Primary text/borders: #051316 - Brand accent: #ec2e3a (Signal Red) - Dark surface: #210d25 (Aubergine Depth) - Soft panel surface: #fff4f6 (Blush Mist) - primary action: #051316 (filled action) - Hairline border: #d8d8d8 **Example Component Prompts** 1. **Hero Constellation Section**: White (#ffffff) canvas, max-width 1200px. Headline 'W: Find what's next' at 100px Graphik 600, #051316, letter-spacing -2.0px, line-height 0.82. The 'W:' prefix has two #ec2e3a (Signal Red) dots beside it as ornament. Surround the headline with 20+ floating pill-tags (background #ffffff, 1px border rgba(0,0,0,0.08), 14px Graphik 400 in #051316, 1000px radius, 8px 14px padding) at varying opacity and scattered positions. 2. **Stats Band**: Full-bleed background #210d25 (Aubergine Depth), 96px vertical padding. Three columns evenly spaced. Each column: 100px Graphik 600 number in #ffffff (line-height 0.82, letter-spacing -2.0px) with a 16px Graphik 400 white caption below. Optional 1px white-at-20% divider line above the logo strip. 3. **Two-Column Benefit Panel**: Background #fff4f6 (Blush Mist), 64px padding. Two equal columns with 48px gap. Each column: 14px Aeonik Fono 400 eyebrow label in #051316, 40px Graphik 600 heading, then 4 feature rows (36px Signal Red icon left, 16px heading + 14px body right, 24px row gap). 4. **Primary Filled Button**: Background #051316, text #ffffff, Graphik 500 at 16px, 12px border-radius, 12px 20px padding, optional shadow rgba(0,0,0,0.06) 0px 9px 20px 0px. 5. **Pill Tag Chip**: Background #ffffff, 1px border #d8d8d8, text #051316 at 14px Graphik 400, border-radius 1000px, padding 8px 14px. No shadow.
Typographic Signature
Wellfound's display typography is defined by three simultaneous choices: (1) extreme size jumps (17px body → 72px+ display), (2) aggressive negative letter-spacing that scales linearly with size (-0.020em at 100px, -0.013em at 21px, normal at 16px), and (3) unusually tight line-height on display (0.82 at 100px, 1.0 at 72px) contrasted with airy body leading (1.43–1.50 at 16–17px). This three-axis contrast — size, tracking, leading — is what makes the system read as 'editorial' rather than 'SaaS'. The tight display tracking pulls characters into compact shapes; the tight leading makes multi-line headlines feel like a single sculpted block; the body leading gives paragraphs room to breathe. Together they create a voice that whispers authority — confident without shouting.
Similar brands
AngelList (legacy Wellfound brand)
Same editorial white-canvas layout, same pill-tag constellation hero, same near-black + red accent palette
Notion
Shared monochrome-first aesthetic with single warm accent, generous white space, and restrained component elevation
Linear
Same preference for near-black (#051316 vs Linear's #08090A) as primary text, tight display tracking, and flat surface philosophy
Substack
Similar editorial typography treatment — large tight-tracked headlines on white, minimal color, text-first hierarchy
Pitch
Same typographic confidence — large display sizes with aggressive negative letter-spacing, minimal chromatic palette, float-and-constellation hero composition
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
