# Warm & Editorial: Opinionated, human, written like a magazine

Warm & Editorial treats a product site like a well-made magazine or book. It sets confident type on warm off-white paper (#f9f7f5–#fdfaf7) in warm-tinted ink, adds a few hand-made marks (highlighter swipes, squiggle dividers, stamps, swash initials) and writes copy with a clear opinion, such as a signed letter, a jab at the category or a precise living fact. Colour is rationed to one accent, and the real product does the persuading, shown in calm, hairline-bordered UI.

Sites in this collection: [Readwise](https://readwise.io), [Basecamp](https://basecamp.com), [HEY](https://www.hey.com), [Every](https://every.to), [Are.na](https://www.are.na), [Stripe Press](https://press.stripe.com).

## Brief for your agent

Design this in a warm, editorial, magazine-like style. Background is warm paper #fbf9f3 (range #f9f7f5–#fdfaf7), cards and product frames are #ffffff, secondary surfaces are parchment #f5f1e8, text is warm ink #2b2a28–#333333 and muted text is #6b6a68. Borders are 1px #dbd7cd or #e8e4da hairlines. Use exactly one accent, link blue #2377d2, for primary buttons, underlined bold links and active states, plus highlighter yellow #f7dc1f as a flat rectangle behind one key phrase per section. Headlines: Source Serif 4, H1 60–72px at weight 500–600, line-height 1.05, tracking -0.02em, sentence case, with one word italicised. H2 is 40–48px and card titles are 22–28px in Inter 600. Body: Inter 18px, line-height 1.5, max width ~680px. No uppercase eyebrows. Layout: 1200–1340px container, mostly a single centred column, and 120–180px between sections. Each feature repeats the pattern headline, short paragraph, then a large real product screenshot in a white frame with a 16px radius and a soft warm shadow (stacked low-opacity layers, no hard borders). Separate sections with a small hand-drawn squiggle or hairline, not background colour bands. Buttons: solid accent, 15–17px semibold, 12×22px padding, 6px radius (or a full pill if the brand is playful), with an italic grey reassurance line underneath. Copy must have a point of view. Write sentence-case claims, use first person, include specific numbers in bold, use testimonials with real names and bold the key phrase on a pale yellow background. Optionally add a signed founder note. For app screens: white sheets on paper, a linen #f2ede8 sidebar, hairline row dividers, 13–15px UI text, 4–8px control radii, thin outline icons, colour only for status, serif only for reading content, and empty states with one honest, witty sentence and a single action.

## Principles

### Paper, not screen

The canvas is a warm off-white, never pure white or cool grey: Readwise #fbf9f3, HEY #f9f7f5, Every #fdfaf7, Basecamp's barely tinted #f4f8f4 field under white cards. White (#ffffff) is reserved for cards and product frames floating on that paper. Text is a warm or tinted ink rather than black: #333333 (Readwise, Are.na), slate #29353c (Basecamp), aubergine #231c33 (HEY). HEY also tints its shadows with the ink colour (rgba(35,28,51,…)), and Every uses a warm rgba(158,153,148) shadow stack.

### Type carries the voice, at one of two extremes

Headlines are either a bookish serif at regular-to-semibold weight (Readwise Source Serif 4 64px/600/-0.02em with one italic word; Every Signifier 64px/400, line-height 0.9, -4%; Stripe Press Ivar ~32px/600 with italic bylines) or a heavy grotesk (Basecamp Graphik 42–56px/800 at -2.6%; HEY 83px/900 with a violet-to-coral gradient fill). Pair the heavy line with a large light subhead in the same family, as Basecamp does with an 800 H1 over a 31px/400 subhead. Are.na shows the quiet end of the range: everything at 19px, with hierarchy from weight alone. Avoid timid mid-weight, mid-size headings.

### Copy with a point of view

Words are the main design material. Examples: Basecamp's signed, slightly rotated founder letter ('Hey there—') and its em-dash link index; HEY's jabs ('Calendaring sucked for years, we fixed it') with literal *asterisk* emphasis; Are.na's living bold facts ('15 years and 62 days'); Every's literary titles. Write in sentence case and first person. Make specific claims instead of superlatives, and skip uppercase eyebrows. Basecamp and Are.na use none.

### One hand-made mark per section

Each page adds a human touch, used sparingly. Readwise puts a flat highlighter-yellow (#f7dc1f) rectangle behind one phrase per section, and Basecamp bolds the key phrase of each quote on #fcf9e7. Basecamp and HEY replace horizontal rules with hand-drawn squiggle dividers. Every uses postage-stamp perforations and swash initials. HEY adds a slightly rotated 'NEW!' sticker. Pick one or two motifs and repeat them consistently. If they are scattered everywhere, they turn into noise.

### One accent, rationed

Each site has a single action colour and uses it almost only for CTAs, links and active states: Basecamp link blue #2377d2 (bold, always underlined), HEY violet #5522fa, Every ice cyan #9ce5f5 on black, Are.na ultramarine #00075f, Readwise near-black #161616 pills. Muted text sits in warm greys between #6d767b and #7b7a79. Gradients, if used at all, are soft and blurred and stay behind content. Readwise's peach-to-tangerine panels fade into the paper, and HEY keeps its gradient to display lines of 40px or larger.

### Show the real product, calmly

Every site proves its claims with genuine product: Basecamp's dense flat project mockup, HEY's large real screenshots in 25px-radius frames, Readwise's faded tablet and phone mockups, Every's faithful Slack recreation, Are.na's hairline app window. Frames are white, with 1px #e3e5e5/#ededed borders or very soft shadows (0 0 34px rgba(0,0,0,0.05)). Colour appears only in content and state. Avoid stock photos and generic 3D art. Use real people, real footage and commissioned illustration (Every's collages) instead.

### Slow, bookish rhythm

Space is generous between sections and text is set at a reading measure. Section gaps run 100–250px (Basecamp 100–140, HEY ~140, Readwise 150–200, Are.na 150–250). Text columns sit at 600–830px (Are.na ~600, HEY paragraph cap ~720, Basecamp cards ~830), and Stripe Press holds prose to about 60–65 characters. Layouts are mostly a single column, centred (HEY, Basecamp) or slightly left-set with hanging list markers (Are.na, Stripe Press). Sections are separated by hairlines, dotted rules (Every #3c3c3c) or squiggles rather than by alternating background bands.

## Colour

Background: warm paper #f9f7f5–#fdfaf7 (Readwise's #fbf9f3 is the midpoint). An alternative is a near-white tinted field (#f4f8f4) with pure-white cards on top. Secondary surfaces: parchment #f5f1e8 or linen #f2ede8. Cards and product frames: #ffffff. Primary text: warm ink #231c33–#333333 (slate #29353c also works). Muted text: #5f5e5c–#7b7a79, darkened toward #5f5e5c below 18px. Borders: #dbd7cd linen, or #e3e5e5/#ededed hairlines. Highlighter: #f7dc1f behind body-sized text, or pale butter #fcf9e7 behind headlines and quotes. Pick exactly one action accent: link blue #2377d2, violet #5522fa, ultramarine #00075f or near-black #161616. Optional soft gradient (peach to tangerine, or violet #5522fa to coral #e08a8a) for one hero panel or display headline only. Dark editorial sections (Every, Stripe Press) use ink #000000–#25212c with stone #d6d3d1 or gold #e1c575 text. Never use cool blue-greys or pure #000 shadows on paper.

## Typography

Choose one of two routes and commit to it. (1) Serif route: headlines in Source Serif 4 or Newsreader at 56–72px for H1, weight 400–600, line-height 0.95–1.1, tracking -0.02 to -0.04em. Italicise one emotional word per headline. Section H2 at 40–48px, card titles at 22–32px. Body in a humanist sans (Inter, Albert Sans or Instrument Sans) at 17–20px, line-height 1.5, colour #5f5e5c–#7b7a79. (2) Heavy-sans route: H1 at 48–84px, weight 800–900, tracking -2 to -3%, followed directly by a 28–40px subhead at weight 400 in the same family. Use Bricolage Grotesque or Inter Tight. On both routes: sentence case throughout and no uppercase eyebrows (the exceptions are tiny 10–11px tracked datelines or bylines). Links are bold and underlined. Pull quotes are italic, with key phrases bolded on a highlighter background. Serif can also set reading content inside mockups, but never UI chrome or buttons on the serif route. Stripe Press, the all-serif exception, builds hierarchy with italic, size and colour instead.

## Layout

Content container: 1195–1376px. Text measure: 600–830px. The hero is either a centred stack (headline, 2–3 line subhead, one CTA with an italic reassurance line, then a large product frame) or a two-column split with a product mockup on one side and a left-aligned text or link index on the other (Basecamp). Below the hero, repeat a predictable trio: headline, short paragraph, big real screenshot. Leave 100–200px between sections. Float white cards (0–30px radius) on the paper field instead of switching background colours. Use squiggles, hairlines or dotted rules as dividers. Testimonial walls can be 3-column masonry that bleeds past the container edges. Optional: switch to a dark editorial index for content-heavy areas (Every), or give each item its own full-bleed colour band sampled from its artwork (Stripe Press). Keep density low on marketing pages, and let whitespace and copy set the pace.

## Components

Nav: minimal or absent. Use a logo and one or two links with a sign-in chip, a floating white pill (HEY) or a link index in place of a menu (Basecamp). Primary button: one solid accent shape with no icon clutter, about 12–16px × 20–24px padding and 15–18px medium/semibold text. Shape follows the site's character: a 40px pill (Readwise, HEY) or a hard 0–4px rectangle (Basecamp, Every, Stripe Press ledger rows). Secondary actions are an oat/grey fill (#edeae6, #f7f7f7) or a 1px outline. Put an italic grey line under the CTA ('No credit card required.'). Cards are white, with no border and a soft multi-layer diffuse shadow (~4% stacks) or a 1px hairline, never both heavy. Testimonials: real names, short italic quotes, the key phrase on a yellow highlighter background, and star rows in yellow. Stat pills: rounded white pills with a hairline border, a bold number and a regular noun. Section labels: a short 40px hairline plus an italic word, or a sentence-case heading. Add one personal artefact: a signed founder letter, a stamp, a sticker tag or a squiggle.

## App UI

Inside the product, the voice gets quieter but the warmth stays. Surfaces are white sheets on a warm paper or parchment shell (#fbf9f3/#f5f1e8). Use 1px hairline dividers (#efebdf, #e3e5e5) instead of boxes, and keep radii small (4–8px for controls, 12–18px for window frames). Colour is used only for state and content: avatars in pastel initials, unread dots, diff red/green, small status pills ('3 risky', mint 'Review'). Sidebar: a linen (#f2ede8) panel with plain sentence-case labels, an active item in ink with an inactive item in #999, and thin 14–16px outline icons. Tables and lists: airy rows of 44–52px with a bold primary label, grey 13px metadata, counts and dates right-aligned, and section labels in small grey text over a thin rule. Keep UI text at 13–15px sans, but set reading content (notes, highlights, documents) in the serif. Forms: white inputs with a 1px #dbd7cd border and a 6px radius, clear sentence-case labels above, and one accent button (accent pill or black). A page title can be large and centred, like HEY's Imbox, so screens read like documents rather than dense three-pane tools. Empty states are where the voice comes through. Use one honest, slightly witty sentence, a small hand-drawn squiggle or spot illustration, and a single underlined link or button ('Nothing here yet — add your first highlight'). Gradients stay behind the UI, never inside it.

## Do

- Use a warm off-white page background between #f9f7f5 and #fdfaf7 with white cards on top.
- Tint text and shadows with a warm ink such as #231c33 or #29353c.
- Write headlines as sentence-case opinions or plain claims, and put a precise number in bold.
- Italicise one word in a serif headline, or pair a heavy H1 with a large light subhead.
- Highlight one key phrase per section with a flat yellow rectangle.
- Divide sections with a hand-drawn squiggle or a hairline instead of colour bands.
- Use one accent colour only for CTAs, links and active states. Underline links.
- Show real product screenshots or faithful mockups in white frames with hairline borders or soft shadows.
- Use real people, signatures and customer quotes with full names.
- Keep body copy at 17–20px with line-height around 1.5 and a measure under 75 characters.

## Don't

- Don't use pure #ffffff or cool grey as the page background.
- Don't add uppercase eyebrow labels above every heading.
- Don't set headlines in medium weight at medium size. Go big and light, or big and heavy.
- Don't use stock photography, generic 3D blobs or AI-generic illustration.
- Don't put gradients on body text or inside product UI.
- Don't use more than one accent colour, or apply the highlighter more than once per section.
- Don't use the serif for buttons, labels or UI chrome (unless the whole system is serif, like Stripe Press).
- Don't write vague superlatives like 'the best platform for teams'.
- Don't stack heavy borders and heavy shadows on the same card.
- Don't let muted grey text drop below 16px on paper without darkening it toward #5f5e5c.

## Theme preset

```json
{
    "brand": "#2377d2",
    "neutral_tone": "warm",
    "mode": "light",
    "radius": 6,
    "density": "airy",
    "heading_font": "Source Serif 4",
    "body_font": "Inter",
    "shadow": "soft"
}
```

## The sites

### Readwise (https://readwise.io)

Readwise pairs a warm off-white paper canvas (#fbf9f3) with a literary serif (Source Serif 4) and soft peach-to-tangerine gradient panels, so the page feels like a well-made book. The product is shown through polished, slightly faded app mockups and a yellow highlighter-swipe motif behind key phrases, which ties every section back to the act of reading and highlighting.

Palette: #fbf9f3 background, #ffffff surface, #f5f1e8 surface, #333333 text, #7b7a79 muted, #161616 accent, #f7dc1f highlight, #dbd7cd border. Type: Source Serif 4 headings, Albert Sans body.

Signature moves:
- Put a flat yellow highlighter rectangle behind one key phrase per section, so the brand's core action becomes a typographic device.
- Set headlines in a bookish serif and italicise a single emotional word, then switch to a clean humanist sans for everything functional.
- Wrap major sections in large rounded panels filled with blurred peach-to-tangerine gradients that dissolve into the paper background instead of ending in a hard edge.
- Show the product through soft, partially faded device mockups with translucent cream bezels, cropped and overlapped so they feel ambient rather than technical.
- Let the social-proof wall bleed past the container edges with real tweet cards in a masonry layout, which implies an endless stream of fans.
- Use glossy gradient icon tiles in coral, amber and sky blue as the only saturated colour outside the gradients.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/readwise.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/readwise/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/readwise/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/readwise/tokens.json

### Basecamp (https://basecamp.com)

Basecamp's homepage reads like a confident, plain-spoken letter. Heavy 800-weight Graphik headlines, a single link blue, and white cards floating on a pale mint field carry a page whose argument is mostly words, real people and real product. It works because every device signals honesty and calm: an underlined index of links instead of a nav bar, a signed founder letter, unpolished customer videos and hard numbers, all framed with almost no decoration.

Palette: #ffffff surface, #f4f8f4 background, #29353c text, #6d767b muted, #2377d2 accent, #e3e5e5 border, #fcf9e7 highlight, #a42d1e accent. Type: Graphik headings, Graphik body.

Signature moves:
- Replace the nav bar with an index of underlined bold links, each followed by an em-dash explanation, so the hero doubles as a table of contents.
- Float square-cornered white cards on a faint mint-grey field and separate them with hand-drawn squiggle dividers instead of alternating section colours.
- Pair an 800-weight tightly tracked headline with a large 400-weight subhead in the same family, with no eyebrow and no gradient.
- Make the pitch a signed, slightly rotated paper letter from the founder, complete with email address and handwritten signature.
- Bold the money phrase in each customer quote on a yellow highlighter background so the wall of testimonials is scannable.
- Prove scale with dozens of plain stat pills (bold number plus noun) rather than three giant hero metrics.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/basecamp.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/basecamp/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/basecamp/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/basecamp/tokens.json

### HEY (https://www.hey.com)

HEY pairs a warm off-white canvas (#f9f7f5) with ultra-heavy, tightly packed Really Sans Large headlines filled with a violet-to-coral gradient, then lets large, softly shadowed screenshots of the real app carry the argument. The tone is loud, opinionated and funny at the headline level but calm and readable underneath, which makes a mundane category like email feel like a rebellion rather than a utility.

Palette: #f9f7f5 background, #ffffff surface, #edeae6 border, #231c33 text, #736c83 muted, #5522fa accent, #e08a8a highlight, #dbeafe surface. Type: Really Sans Large headings, Moniker body.

Signature moves:
- Fill every major headline with a violet (#5522fa) to coral gradient running left to right across ultra-black 850–900 weight type, so each section reads as a shouted slogan.
- Write headlines as opinionated, conversational jabs ('Calendaring sucked for years, we fixed it') and use typed asterisks for emphasis instead of italics.
- Repeat a strict centred trio for every feature: gradient headline, short centred paragraph with the product noun in bold, then a big real screenshot.
- Use warm off-white #f9f7f5 instead of grey or pure white, and tint every shadow and text colour with the aubergine #231c33 so nothing looks cold.
- Build long, low, multi-layer stacked shadows with negative spread, so cards look lifted off the page rather than outlined; the page uses no borders at all.
- Hang overlapping pill labels off card edges (avatar name tags, a 'NEW!' tag on the nav) for a sticker-like, handmade feel.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/hey.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/hey/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/hey/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/hey/tokens.json

### Every (https://every.to)

Every pairs a literary editorial voice — a high-contrast Signifier serif with ornamental swash initials — against a stark black magazine grid and a warm off-white (#fdfaf7) hero that shows the product as a faithful Slack mockup. The tension between bookish serif, pixel-font accents, collage-style AI illustration and a single icy cyan (#9ce5f5) makes it read like a smart print publication that also ships software.

Palette: #000000 background, #fdfaf7 background, #1a1a1a surface, #f2ede8 surface, #ffffff text, #d6d3d1 muted, #3c3c3c border, #9ce5f5 accent. Type: Signifier (Klim Type Foundry) headings, Switzer body.

Signature moves:
- Swap one word of a serif headline into a pixel/bitmap font in muted grey to make the 'automated' idea literally visible.
- Replace the first letter of words in article titles with an ornamental swash glyph so every headline feels hand-set and literary.
- Use postage-stamp perforated edges (on the promo ticket, stamps and illustration frames) as a recurring brand motif.
- Flip from a warm paper hero (#fdfaf7) for the product pitch into a pure black editorial index for content, separating 'buy' from 'read'.
- Divide grids with thin dotted graphite rules instead of card boxes, like a printed newspaper.
- Commission consistent collage art — engraved classical figures and halftone photos on saturated flat colour — for every story image.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/every.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/every/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/every/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/every/tokens.json

### Are.na (https://www.are.na)

Are.na reads like a carefully typeset document rather than a marketing page: one typeface (Dinamo's Areal) at a single 19px size, a narrow centred text column, an outlined ordered list as the hero, and almost no colour beyond warm greys and a deep navy. It works because the restraint signals the product's values (no ads, no algorithm, user-owned thinking), and the only visual richness comes from the users' own collected images shown inside a quiet, near-borderless app UI.

Palette: #ffffff background, #f7f7f7 surface, #333333 text, #696969 muted, #999999 muted, #00075f accent, #ededed border, #dedede border. Type: Areal (Dinamo, custom) headings, Areal (Dinamo, custom) body.

Signature moves:
- Set every heading at body size and distinguish hierarchy only by weight, so the page reads like a letter, not an ad.
- Use an outlined a/b/c definition list as the hero, with the final item left as an empty '+' chip that invites the user to complete the sentence.
- Hang list markers into the left margin of a narrow text column for a typeset, bookish rhythm.
- Keep the whole site monochrome and reserve a single deep ultramarine (#00075f) for the primary CTA and a full-bleed footer block.
- Let user-collected content (photos, quotes, PDFs) supply all imagery, displayed in a hairline-bordered, nearly chrome-less app window.
- Include a precise, living fact in the copy ('15 years and 62 days', '20,516 people') in bold instead of marketing superlatives.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/arena.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/arena/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/arena/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/arena/tokens.json

### Stripe Press (https://press.stripe.com)

Stripe Press reads like a hardbound catalogue, not a website. Each book gets a full-bleed colour 'chapter' drawn from its cover (plum-charcoal with gold type, mustard with navy type), set in a refined editorial serif with hairline rules and zero rounded corners, so the whole page feels like turning pages in a well-made physical object.

Palette: #25212c background, #b7ab6b background, #635c52 surface, #e1c575 accent, #c4b26c text, #877960 muted, #433c3c border, #1d1b45 highlight. Type: Ivar Headline / Ivar Display (Letters from Sweden) headings, Ivar Text (Letters from Sweden) body.

Signature moves:
- Give every product/item its own full-bleed background colour sampled from its artwork and swap the text colour to a matching ink (gold on plum, navy on mustard) so scrolling feels like changing books.
- Use a single editorial serif family for everything, including buttons and labels, and build hierarchy with italic, size and colour instead of a sans-serif UI font.
- Replace buttons with ledger-style bordered rows: 1px accent hairlines, square corners, label + price + a tiny ↗ in a divided right cell.
- Mark sections with a short hairline plus an italic word rather than bold headings.
- Show the product as a realistic 3D physical object on a flat field, kept sticky beside long-form text.
- Use a minimal tick-mark rail as both navigation and scroll progress.

Full teardown: https://pageproofer.com/inspiration/warm-editorial/stripe-press.md · Screenshots: https://pageproofer.com/images/inspiration/warm-editorial/stripe-press/hero.jpg (first screen), https://pageproofer.com/images/inspiration/warm-editorial/stripe-press/page.jpg (full page) · Tokens: https://pageproofer.com/inspiration/warm-editorial/stripe-press/tokens.json