Warm Paper
#fafafaPage background — the only surface; everything floats on this warm off-white
Fey
feyapp.comWebsite preview
The design language
Fey operates as a quiet editorial announcement — a near-empty white page where a single column of 21px serif-quality system text does all the talking. The entire visual system reduces to two ink tones on warm off-white: a graphite body for narrative and a near-black for emphasis and the one link. There are no buttons, cards, icons, or color accents — the restraint IS the design. Layout is centered and narrow (~520px column), with generous vertical rhythm between paragraphs and a small left-edge navigation index that acts as the only structural decoration.
Color palette
neutral
Graphite
#595959Body text, nav labels, footer copy — medium-dark gray keeps long-form reading comfortable without high-contrast harshness
Ink
#1c1c1cSecondary body text, navigation labels, and subdued headings.
Typography
Type scale
Major Second (1.125) · 21px basebody
21px · 600 · 1.55The quick brown fox jumps
body-sm
16px · 400 · 1.55The quick brown fox jumps
caption
13px · 400 · 1.55The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
-apple-system
- Weights
- 400, 600
- Sizes
- 13px, 16px, 21px
- Line height
- 1.20, 1.55
- Letter spacing
- -0.0100em, -0.0020em
- Fallback
- Inter or SF Pro Text
Body and navigation. At 21px / 600 / line-height 1.55 with -0.01em tracking, the system stack carries the entire page — the signature is the size and rhythm, not a custom face. 13px / 400 nav labels use the same -0.002em micro-tracking. A 16px / 400 utility size appears for small captions.
Additional typeface
Wealthsimple Sans Display
- Weights
- 700
- Sizes
- 21px
- Line height
- 1.55
- Letter spacing
- -0.0100em
- Fallback
- Inter (weight 700) or GT Walsheim Bold
Reserved for the "Wealthsimple" link — a single display-grade cut at 21px / 700 / -0.01em. It signals partnership without changing the page's monochrome restraint.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 520px
- Section gap
- 48px
- Card padding
- 0px
- Element gap
- 8px
Border radius
none
0pxSpacing scale
8px28px29px40px48px72pxGuidelines
Do
- Set body copy at 21px / weight 600 / line-height 1.55 with -0.01em tracking — this IS the brand voice.
- Use exactly two text colors: #595959 for narrative and #1c1c1c for emphasis and links. Nothing else.
- Constrain content to a ~520px centered column; let white space do the layout work.
- Separate paragraphs with ~29px margin-bottom for editorial rhythm.
- Keep the page to a single surface color (#fafafa) — no cards, no panels, no shadows.
Don’t
- Do not introduce accent colors, buttons, or CTAs — this page is a declaration, not an action.
- Do not add headings (h1/h2/h3) — the 21px body carries the hierarchy through weight and color alone.
- Do not use shadows, borders, or background fills on text containers.
- Do not break the 520px column with sidebars, images, or multi-column layouts.
- Do not use a display or serif font for body copy — the system stack at 21px / 600 is the intended voice.
- Do not add hover states beyond color/weight transitions on links; no transform, scale, or shadow effects.
Components
Editorial Text Column
Main content containerA narrow centered column (~520px max-width) holding 3-4 paragraphs of 21px / 600 body text at line-height 1.55. Paragraphs separated by ~29px margin-bottom. No headings, dividers, or decorative elements — just text on #fafafa.
Inline Emphasis Word
Inline bold highlight within a paragraphSelected words ("Fey joined", "Everything", "Fey", "Wealthsimple") rendered at the same 21px size but in #1c1c1c instead of #595959, using weight 600. Creates contrast within the same line without changing scale or family.
Inline Text Link
The single navigational link in the body"Wealthsimple" rendered in #1c1c1c at 21px / 600 / -0.01em, optionally in Wealthsimple Sans Display 700. No underline by default; relies on weight and color shift to signal interactivity.
Left-Edge Nav Index
Minimal navigation stripSignature Hand-Off Glyphs
Closing illustrationThree small hand-drawn line illustrations beneath the final paragraph, in #595959 stroke at ~16px height. The closing visual punctuation of the announcement — informal marks replacing a button or CTA.
Surfaces & elevation
Level 1
Warm Paper
#fafafaThe only surface — page background and text container share this single warm off-white
No elevation. The design deliberately avoids shadows, borders, and surface layering — everything exists on a single flat plane (#fafafa). Hierarchy is created through type weight, color contrast, and whitespace alone.
Layout & imagery
Layout
Single narrow centered column (~520px max-width) on a full-bleed #fafafa canvas. No hero, no grid, no sections — just one vertical flow of text paragraphs separated by ~29px gaps, with a tiny left-edge nav indicator aligned to the column. The page reads top-to-bottom like a printed letter: announcement, context, continuation, signature marks.
Imagery
Pure typography page — no photography, no product screenshots, no illustration beyond three small hand-drawn line glyphs at the bottom that serve as a closing signature. The visual language is absence: white space, two ink tones, and the texture of the type itself.
Design notes
Agent Guide
Quick Color Reference: - text: #595959 (body) / #1c1c1c (emphasis + links) - background: #fafafa - border: none - accent: none - primary action: no distinct CTA color Example Component Prompts: 1. "Create an editorial announcement page: full-bleed #fafafa background, a single centered column at 520px max-width. Body paragraphs at 21px, -apple-system, weight 600, line-height 1.55, letter-spacing -0.01em, color #595959. Paragraphs separated by 29px margin-bottom. No headings, no cards, no buttons." 2. "Add inline emphasis: render 'Fey joined' at the same 21px / 600 / -0.01em, but in color #1c1c1c instead of #595959. No underline, no background — color and weight carry the contrast." 3. "Create the single text link: 'Wealthsimple' at 21px / 600 / -0.01em, color #1c1c1c, optionally in Wealthsimple Sans Display weight 700. No default underline; let color signal interactivity." 4. "Add the left-edge nav indicator: five thin horizontal lines at the page's left margin (40px from viewport edge), 8px row-gap between lines, in #595959. Vertically centered against the text column." No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
Similar brands
Stripe Press
Same editorial restraint — a single narrow column of type on warm white, no CTAs, no accent colors, narrative voice carrying the page
Linear Changelog
Monochrome announcement pages with system-stack typography at a single comfortable size, using whitespace and type rhythm instead of visual decoration
Substack Blog
Centered narrow text column on off-white with generous paragraph spacing — reading-first layout that treats type as the entire design
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
