Thisispaper — Design System v1

The content is the design.

This page is the canonical reference for the Thisispaper visual language. Every decision here serves one principle: the interface must disappear so the work itself — architecture, art, photography — can speak. What follows is the atomic vocabulary from which every page in the site is composed.

Last updated 2026-04-17·Site id 5d70caf362d15d3604edadff·1 typeface · 12 tokens · 32 components

Typography

One typeface, three weights. Hierarchy comes from size alone — bold is never used for emphasis outside the logo. Light weight (300) is the signature on dark backgrounds; regular (400) is the workhorse on white. Larger text gets tighter tracking, smaller functional text gets looser.

Family

Favorit

by Dinamo · Light 300 · Regular 400 · Bold Extended 700 (logo only)

48px / 48 / 300Hero headline

Never miss a story.

36px / 1.1 / 300Section title

Sacred geometries of the everyday

28px / 38 / 300Article H2 (gray)

The threshold between wakefulness and sleep is not a subject she documents.

18px / 26 / 300Article body (gray)

The site aims for the feeling of standing in a physical space looking at art, not sitting at a computer browsing content.

14px / 20 / 400Base — navigation, meta

Mag · Guides · Editions · Plus · Submit · Login/Join

12px / 1.5 / 300Small meta, dates

MAR 25, 2026 · BERLIN · ARCHITECTURE

Weight rules

300 (Light): All text on dark backgrounds and article body
400 (Regular): All text on white — navigation, captions, small meta
700 (Bold Ext.): Logo wordmark only. Never in body or headlines

Bold Extended (700)

T H I S I S P A P E R

Favorit Bold Extended · wordmark + section-marker usage only. Tracked at ~15% of the em. Not to be used in body, headlines, captions, or buttons. The extended width + tracking is the logo’s signature — using it elsewhere dilutes identity.

300ThisispaperLight — headlines, body, buttons

400ThisispaperRegular — nav, captions, small meta

700 extT H I S I S P A P E RBold — wordmark only

Color

No accent color. No brand hue. The only color on the site comes from the photography itself. Text is never pure black — always #333 on white. Links are gray (#999), indistinguishable from muted text by design. This rewards the engaged reader.

White

--white

#FFFFFF

Page background, text on dark

Soft Black

--soft-black-333

#333333

Body text on white. Never pure black.

Off Black

--off-black-111

#111111

Darker accents, button fills

Grey

--grey-666

#666666

Secondary text, captions

Dark Grey

--dark-grey-999

#999999

Links, article body, muted labels

White Smoke

--white-smoke-ccc

#CCCCCC

Very muted dividers, disabled states

Off-White Grey

--off-white-grey

#EFEEEF

Section backgrounds, subtle cards

Black 3%

--black-3

hsla(0,0,0,0.03)

Barely-there overlay, hover tints

Black 6%

--black-6

hsla(0,0,0,0.06)

Subtle section separation

Black 9%

--black-9

rgba(0,0,0,0.09)

Submission CTA background

Dark over light, light over dark

Text on images is always white, weight 300. Text on white is always #333 or #999. There is no middle ground. No #444 on light gray. No #666 on white. The system is binary.

Border radius

Content gets a 3px rounding you feel rather than see — enough to soften the grid without announcing itself. Interactive elements step up to 4px. Tags and badges become pills (20px+). Perfect circles are reserved for icons. Sharp content images with zero radius sit beneath it all.

Grid images, raw content

3px

Default content — thumbnails, tags

4px

Interactive — grid wrapper, cards, inputs

9px

Guide card (outer)

10px

Guide thumbnail, submission CTA

20px

Category tag pills

40px

Large pill CTAs — Join Thisispaper+

100%

Icons, avatars, dot markers

Spacing & 1px grid

Images are separated by exactly one pixel — the most recognizable layout decision on the site. Not gap, not gutter: a hairline. Enough to distinguish tiles, not enough to create whitespace. Sections breathe through white space (60–80px), not through borders or dividers.

3-column mosaic · 1px gap

Vertical rhythm

1pxGrid gap, wrapper margin-bottom, padding. The signature.

10pxNavigation padding, inline button padding

20pxEdge padding on mobile

40pxEdge padding on desktop

60–80pxBetween content sections. No borders needed.

Buttons, pills, tags

The Submit button is the site’s only ambient-visible CTA — a deliberate accent because submissions are a revenue action. Everything else is text. Category tags are semi-transparent pills designed to sit over images without competing.

Primary CTABlack fill · white · 4px radius

SubmitNav submit · dark fill + outline

Join Thisispaper+Large pill · 40px radius

Explore all editions →Text-only link

Category tag pills

artsculptureexhibitioninstallationglassLondon

rgba(0,0,0,0.06) bg · 20px radius · 12px text · 6px 12px padding. On dark images: rgba(255,255,255,0.2).

Category tag pills · on dark

artsculptureexhibitionglass

Image treatment

Three image contexts with three treatments. The grid tile is raw and sharp. The hero is full-bleed with a top-to-bottom gradient for text. The guide card is the only image on the site with visible border-radius (9–10px), marking it as a distinct visual layer.

Mar 25, 2026

House in Narutaki

by kooo architects

Project card · no radius · object-fit cover · text over image, weight 300

Spectral Armour

Floryan Varennes

Hero · 100vw · 100vh · gradient overlay · centered title 40-48px

Thisispaper+

Tokyo Guide

Guide card · 10px radius · bottom gradient · kicker + title

Motion & interaction

Minimal by doctrine. Links change color on hover — gray to dark, or dark to gray. Nothing scales, nothing bounces, nothing glows. The site refuses to be “interactive” in the modern sense. It behaves like a printed page that has quietly allowed itself to be clicked.

Transition rule

Color transitions use 150ms ease. Nothing longer. If a change feels like it needs a slower curve, remove the change instead.

Component inventory

32 reusable components live in the Webflow library. They split into five families. Prefer inserting an existing component over rolling a new element — every deviation erodes the system.

Navigation & chrome

Desktop MenuTop nav · all pages
Mobile MenuHamburger drawer
Profile MenuLogged-in user state
Plus Menu FixedMember-only secondary nav
Rotate mobile modeOrientation prompt

Footers

FooterPrimary (dark)
Footer ©2024Lightweight variant
Footer ©2024 WhiteLight-bg variant
os-footerThisispaper OS pages
Guide More FooterEnd-of-guide cross-sell
Edition More FooterEnd-of-edition cross-sell

Content modules

Thumbnails 3 RowStandard 3-column grid row
Editions SliderHorizontal scroll of guide cards
Curated NFTs CoverRoom hero
OS Home BannerOS landing hero
Shop Full BannerShop hero
Shop Intro + EmailShop intro block
Shop InfoProduct meta

Conversion (Plus / Join)

Plus Full Cover/BannerPlus hero
Plus Grid: FeaturesMember benefits grid
Plus Info TagsTier summary
Join+ HeaderJoin page hero
Join Plus (Free and Non-Members)Conditional CTA
New Subscribe Memberstack BtnsMemberstack auth CTAs
New Subscribe Memberstack Btns (White)Light variant
New JOIN+ Memberstack BtnsJoin-specific variant

Newsletter & utility

Newsletter SignupInline email signup
NFT Newsletter SignupNFT-context variant
subscribe-guide-edition-footerSubscribe CTA for guide/edition bottoms
edition-how-text-buttonsEdition instructions block
Left Side Menu ContentLeft sidebar on article pages
Profile ComponentMember profile card

To reuse: open Add → Components → search by name. Deprecated or rarely-used components (Curated NFTs Cover, Rotate Mobile Mode) should probably be retired on the next pass.

Do / Don’t

The shortest version of this document. When a decision is ambiguous, come back here.

Use Favorit 300 on dark, Favorit 400 on white.
Use #333 for body text. Never pure black.
Use #999 for links. Let them hide.
Separate images by exactly 1px. No more.
Use 3px radius on content, 4px on interactive, 20px+ on pills.
Leave 60–80px of white space between sections.
Use text-only CTAs wherever possible.
Reuse an existing component before creating a new one.
Trust the photography to carry visual weight.

Don’t

Don’t introduce a brand color. Photography is the color.
Don’t use bold for emphasis. Size carries hierarchy.
Don’t add drop shadows, gradients, or elevation.
Don’t underline body links. Use a 1px dotted border.
Don’t put a border around cards or images.
Don’t add hover transforms on grid tiles.
Don’t use transitions longer than 150ms.
Don’t use icons decoratively. Photography only.
Don’t use #000 or #fff text on a #999 background.

Banners

Thisispaper has six banner patterns, each with a specific job. They share the same rule: full viewport width, no side padding on the outer shell, no shadows, no decorative borders. The banner is a full-width slice of page, not a contained card.

Cards

Ten card patterns drive the entire site. They differ in radius, overlay treatment, and metadata. Every card is image-first — the image takes most of the space, the text rides at the edge. Never a centered card with a border and a shadow. That is a SaaS card, and it is forbidden.

Mar 25, 2026

House in Narutaki

kooo architects

Project · 0 radius · overlay text

Thisispaper+

Tokyo Guide

Guide · 10px radius · bottom gradient

Concrete Stories

42 projects · since 2023

Edition · 3px radius · meta under image

Signed print — Ed. 01

€180

Shop · 3px radius · price right-aligned

Thisispaper+

€5/ month

Full archive access
Guide downloads
Members-only Arena channel
No ads, ever

JoinMember tier · white · 4px radius · border 1px

Zora · Base

† fanatics ii †

0x7f...a93

NFT · 3px radius · ticker + CA

Florian Varennes

Artist · 12 projects

Contributor · circle avatar · name + count

Story

Salt is an agent, not a material.

Story · 3px radius · kicker + title

architecturephotographyinteriorsTokyo

Tag chips live in card contexts too — articles, footers, meta sidebars.

Tag row · pill chips · flow wrap

Grid system

Seven grid configurations are used across the site. The 1px mosaic is the default for project listings. Everything else collapses toward a single column on mobile. Use gutters only on non-image content; image grids keep the 1px hairline rule.

1 · 3-col 1px mosaic · primary

Grid gap 1px. Wrapper 4px radius + overflow hidden. Each tile 4:5 aspect, object-fit cover.

2 · Article three-panel · 25 / 50 / 25

CTA

Images

100% width & full-bleed

The site has no outer container. Every section can extend to the viewport edge. Rules: image sections always full-bleed; text sections can be centered within a 900–720px max-width. Never put a 1200px container wrapper on a page-level layout.

→
Image sections must bleed. Hero, project grid, banner — always 100vw. Breaking image edges with page padding undoes the “gallery wall” feeling.
→
Text sections may center. Article body is narrower (max ~720–900px) and centered on the viewport. The imbalance between full-bleed images and narrow text is the layout’s voice.
→
Mobile padding is 20px. Desktop text padding is 40px on either edge. Image sections ignore padding entirely on all breakpoints.
→
Sticky widgets anchor to the viewport, not to any container. Subscribe chip sits at position: fixed; bottom: 0; right: 0;.
→
Footer is always full-bleed dark. Separates the site’s content from the site’s frame (even though the frame is mostly invisible).

full-bleed image section →

Blur, shadow, text shadow

Thisispaper refuses most elevation tricks. No card shadows, no floating panels, no glow effects. The three tools we DO use: backdrop-filter blur on translucent overlays, a tiny subtle drop shadow on the top nav after scroll, and — critically — 1px text shadows on white-text-over-image so the text stays legible when the photograph beneath is bright.

01 · Text shadow — white on phototext-shadow: 1px 1px 1px rgba(0,0,0,0.4)

Spectral Armour

by Floryan Varennes

Every white text over a photograph gets this. Prevents the “letters dissolving into clouds” problem when a light patch of sky or a white wall appears behind the headline. Near-invisible against dark photos, critical against light ones.

02 · Backdrop blur — translucent barbackdrop-filter: blur(14px)

search places, cities, studios

Applied to search overlay, cookie banners, sticky nav on scroll, atlas pill controls. Combined with rgba(255,255,255,0.85) background. Falls back gracefully to solid white on browsers without backdrop-filter.

03 · Backdrop blur — dark chipbackdrop-filter: blur(10px)

Thisispaper+

Dark overlay pill used on photo backgrounds. rgba(0,0,0,0.3) + blur(10). Keeps the tag readable without a hard fill that would crop the photograph visually.

04 · Gradient — photo-to-text fadelinear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%)

Tokyo Guide

Bottom-anchored linear gradient. Stands in for text shadow on card footers. Guide cards, project grid tiles, hero overlays. 40–60% black at the bottom, fully transparent at the top 40% mark.

05 · Sticky nav drop shadow (on scroll)box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)

content continues...

Applied ONLY when user has scrolled > 40px from top. Appears with backdrop-filter: blur(10px). A whisper of elevation, not a panel.

06 · Forbidden — card elevationbox-shadow: 0 8px 24px rgba(0,0,0,0.12) ✖

We do not lift cards. No hover elevation. No always-on shadows. Cards are separated by whitespace, not by Z-depth. If an element needs a shadow to work, the layout needs fixing instead.

Shadow discipline

Use shadows only when legibility or material hierarchy demands it. Never for decoration. The 1px text shadow on photo overlays is the most important rule in this section — without it, white text over a blown-out sky becomes an illegible grey smudge.

Images — aspect ratios & placements

Eleven image placements across the site. Each aspect ratio has a job. Portrait 4:5 is the grid default because it feels like a magazine spread. Square 1:1 is for Instagram-first contexts only. Full-bleed 16:9 and hero 100vh are for story drama. Inline article images sit in three fixed widths.

4:5 portrait

Grid tile default. Feels like a magazine page.

1:1 square

Shop products, NFTs, contributor avatars.

16:9 landscape

Editorial split, video covers, editions.

3:2 landscape

Story cards, atlas previews.

3:4 portrait

Guide cards (horizontal scroll).

Full-bleed 100vw / 100vh

Article hero, campaign heroes.

Inline article images · three fixed widths

max-width: 780px — centered

max-width: 100% — fullwidth

max-width: 1240px — wide

Pattern for article body: 780 → fullwidth → 780, alternating. Use fullwidth for landscape, 780 for portrait or detail shots. 1240 is the middle option when neither extreme reads right.

Overlay placements

Mar 25, 2026

Project Name

by Studio

Grid card: date top-left, title+studio bottom-left

Tech that Moves

Hero: edition pill bottom-right, 20px radius chip

Thisispaper+

Alps Guide

Guide card: kicker + title, bottom gradient only

Spacing scale

A 14-step scale. Think of it as two scales bolted together: the hairline sub-system (1, 4, 8) for separations inside a card or between grid tiles, and the editorial macro-scale (20, 40, 60, 80, 120, 160) for page composition. Avoid middle values like 10, 30, 50 — they read as design indecision.

Hairline · internal separation

1grid gap, padding hairline

4chip gap, inline pair

8stack gap inside cards

12compact meta stack

16tight card padding

Editorial · layout rhythm

20mobile edge padding

24card padding (member tier)

32section-to-rule padding

40desktop edge padding

60section vertical · minimum

80section vertical · typical

96hero internal padding

120landing page pause

160hero / closing dramatic space

Numbers to avoid

Do not use 10, 14, 18, 22, 28, 30, 36, 50, 70, 90. These are the zone of indecision. If you need “between 8 and 16,” pick 12. If you need “between 40 and 60,” pick 40 or 60 — the architectural decision is almost always one of those two, not a novel midpoint.

Padding system

Every component has a fixed internal padding. These are not arbitrary — each one matches the scale above. The padding system mirrors the spacing system: small (chip, tag), medium (button, card), large (section, hero).

ComponentPaddingWhy

Tag / category pill6 × 12Enough to give the text room without making the pill look empty.

Button · inline small10 × 15Legacy nav Submit button. Compact enough to live in a 52px nav bar.

Button · primary12 × 18Body CTA. Height reads as a clear clickable plane without dominating.

Button · pill Join14 × 28Hero CTA. Longer text + wide horizontal shape demands more breathing.

Input · email12 × 16Matches button height. Same inner room as a button, less horizontal pad.

Card · meta / tier24 × 24Square internal gutter on member tier and related content cards.

Card · submission CTA28 × 32Slightly looser because it’s the softest surface on the page (9% black).

Section · mobile60 × 20Minimum vertical rhythm + edge padding for a 375px viewport.

Section · desktop96 × 40Standard editorial rhythm between any two sections.

Hero · all breakpoints140 / 100 × 40 / 20More top than bottom so the headline sits visually at the 40–45% mark.

Negative space

The space between things is part of the work. Thisispaper uses silence the way a curator uses a blank wall — to frame the art, to slow the eye, to signal respect. Three rules govern it.

Hairline separation is not whitespace.

The 1px grid gap reads as a HAIRLINE, not a gap. The images are part of one mosaic. When you want “separation without whitespace,” reach for 1px. Never 2, never 4 — the eye collapses those into a clear border and breaks the mosaic illusion.

Section air comes from vertical margin, not borders.

Sections are separated by 60–80px of empty page, never by dividers. If a user can feel the break between two sections, the whitespace is doing its job. Adding a border on top of that whitespace is doubling the signal and flattening the rhythm.

Dramatic silence is intentional.

When a headline is followed by 120–200px of empty page before the first project, that space is a pause. It says: breathe. It is the inverse of the dense 1px mosaic — the mosaic is “this is a wall of work,” the dramatic silence is “this is the prelude before the wall.” Use it at the top of editions, before membership CTAs, after closing paragraphs.

HERO

120px · dramatic silence

HEADLINE

80px · section break

MOSAIC (1px gap)

80px · section break

CTA

60px · minimum rhythm

FOOTER

Forms & inputs

Inputs are quiet. 4px radius, 1px border in #ccc, no inner shadow. Focus rings are 1px dotted #999. We use the same typography as body text — no sans-serif fallback, no placeholder italics. Every form reduces to the same four pieces: a label, an input, a helper note, and a submit button.

01 · Newsletter

your@email.comSubscribe

One email a week. No re-sends, no ads.

Inline pair · input 12×16 pad · CTA matches input height

02 · Search

search places, cities, studios⌘K

Icon-left · translucent white · backdrop-filter 14px · kbd hint right

03 · Submission

Your name

Project link or brief

Send →

Stacked · labels above inputs · textarea for long field

04 · Login (Memberstack)

name@domain.com

Password

••••••••

Paired action · primary + text-link · 20px gap

Field states

rest

border 1px #ccc

focus

border 1px #333 · 1px dotted outline

filled@domain.com

text #333 · placeholder gone

bad email

border 1px #d74843 (destructive)

Designed to fit

Patterns the site doesn’t currently have, designed in the Thisispaper language so they can be added without disturbing the system. Every one of these reuses existing tokens: 3–4px radius, #333/#999 text, 1px borders, no shadow.

Accordion / FAQ

What is Thisispaper+?–

A paid membership that unlocks the archive, guide downloads, and a members-only Are.na channel. €5 per month, cancel anytime.

How do submissions work?+

Where do my newsletters go?+

1px hairline between items. +/– symbol instead of chevrons. No scale animation. Closed items collapse instantly, open items reveal with 150ms opacity.

Tabs

MagazineGuidesEditionsPlus

Active tab content would live here.

Text-only tabs, no pills. Active tab gets a 1px solid #333 bottom border — same weight as a body link. Inactive: #999. No background fills.

Breadcrumbs

Mag/Architecture/House in Narutaki

Separator is a slash, not a chevron. Links gray, active dark. 12px text. Placed in article sidebar or above category pages.

Inline notification

Your membership has been renewed. — Apr 17, 2026

Payment failed. Update your card to continue.

3px radius, 1px border, no icon. Neutral uses #efeeef bg and #333 text. Error uses #fff bg and #d74843 border + text.

Pagination

← Newer12345Older →

Numbers are text-only. Active gets a 1px dotted underline (same as body link). No background fill. Arrows are word+arrow, not icons.

Loading state

Skeletons use #efeeef blocks, 3px radius. No shimmer animation. The empty state IS the animation — it just stays until real content arrives.

Pricing — Thisispaper+

Pricing in the Thisispaper voice. No feature checklist. No “most popular” badge. Each tier is a single photograph of the relationship: reader, member, patron. Numbers are large. Descriptions are editorial paragraphs, not bullet points. The money is incidental; the reason is the point.

“Paying for journalism is paying for attention — your own, protected from the loop of ads and algorithmic urgency.”

Reader

Free· forever

Read the magazine end-to-end. Receive the weekly newsletter. Leave no trace, take whatever you find. The house rule is that anyone can enter.

Keep reading

Member

€5/ month

or €50 / year · two months on us

Unlock the full archive — 2,300 projects, every issue since 2019. Download the guide PDFs. Step into the members-only Are.na channel where the editors collect what doesn’t fit in a magazine. The ads disappear. The pace slows.

Join

Cancel anytime. No renewals you don’t expect.

Patron

€20/ month

or €200 / year

Everything in Member, plus a hand-signed postcard from the current edition twice a year, early access to guide releases, and a permanent line in the colophon. We answer your emails first.

Become a patron

Limited to 200 seats annually.

Pricing — Submissions

Submissions are first a question — is your work right for Thisispaper? — and only second a transaction. The tiers describe the relationship between editor and artist, not a feature matrix.

Open call

Free

Send your project through the open form. Reviewed in the order received — usually 3 to 4 weeks. No reply unless we publish. Silent rejections are the norm; they are not a judgment on the work.

Send through the open form →

Priority review

€29

Moves to the front of the queue — reviewed within 7 days, with a written reply either way. If we pass, you get a short note on why. If we publish, you get edits and a scheduled date.

Submit with priority

Editorial partnership

€149

A written piece shaped with one of our editors: three rounds, interview scaffolding, image sequencing, and distribution across our Instagram, X and newsletter in the week of release. For serious studios and single-artist shows.

Start a partnership

A quiet note on fees

Open call remains free and always will. The paid tiers exist so that committed submitters can pay for the editor’s time rather than the editor having to monetize their attention elsewhere. If you can’t afford a tier but the work is strong, write to us. We answer.

Typography on backgrounds

Type is never styled in a vacuum. The weight, color, tracking, and whether to add a text shadow depend entirely on what sits behind it. Here is every combination used on the site, cross-tabbed — white, off-white grey, soft black, full black, a dark photograph, and a bright photograph.

on #FFFFFF

Never miss a story.

Body paragraphs render in #999 weight 300. Headlines sit in #333 weight 300 with 0.96px tracking. No text shadow. No effects. The paper itself is the contrast.

Mar 25 · Berlin · Architecture

on #EFEEEF (off-white grey)

Sacred profanities.

Used for subtle section breaks and quote blocks. Headlines drop to #333 weight 300. Body stays #666 weight 300 — one shade darker than on pure white because the contrast from the background is slightly softer.

Quote · editorial aside

on #111111 (off-black)

The crack into sleep.

Footer and hero-CTA context. White weight 300 for headlines, rgba(255,255,255,0.8) for body. No text shadow — solid black is predictable. Tracking opens slightly at large sizes for optical compensation.

Mar 25 · Berlin

on #333333 (soft black)

Tender apocalypses.

Used on translucent dark overlays and blurred photo chips. White 300, body at rgba(255,255,255,0.85). Subtly warmer than pure black, less oppressive for long-form reading.

Curator’s note

on dark photograph

Spectral armour.

White 300 with 1px 1px 1px rgba(0,0,0,0.4) text-shadow. Shadow is near-invisible here but STAYS on because photos are unpredictable — the shot might brighten as you scroll.

Floryan Varennes · Xxijra Hii

on bright photograph

Salt of the earth.

The text-shadow earns its keep here. Without it, white type would dissolve into blown-out sky or a white gallery wall. With it, the words hold.

Odyssea · PUNTA Gallery

Weight × background — the matrix

BackgroundLight 300Regular 400Bold Ext. 700

WhiteAaAaA A

Off-whiteAaAaA A

DarkAaAaA A

PhotoAaAaA A

Light is the default everywhere. Regular appears only on white and off-white for functional meta. Bold Extended is near-mandatory on dark + photo backgrounds where it acts as the wordmark anchor; elsewhere it is logo-only.

Line height system

48 / 481.00Hero headline — letters almost touching for density

36 / ~401.10Section titles — tight but breathable

28 / 381.36Article H2 — opens up for a lede sentence

22 / ~311.40Lede, opening paragraph

18 / 261.44Body gray — article columns

16 / 241.50Secondary body, short blocks

14 / 201.43Navigation, captions, member meta

12 / ~181.50Small meta, dates

11 / ~171.55Fineprint, pricing fine-type, eyebrow labels

Pattern: large sizes = tight lines (1.0–1.1), body sizes = open lines (1.4–1.55). Never 1.0 on body. Never 1.5 on a 48px headline.

Principles

Ten lines. Tape these to the wall.

1
Zero ornamentation. Photography is the only visual content.
2
Weight 300 is the signature. Bold is forbidden outside the logo.
3
3px on content, 4px on UI, pills for tags. Two distinct visual layers.
4
1px grid gap — the mosaic effect. Not gutter. Hairline.
5
Links are gray. They are discovered, not announced.
6
Full bleed. The content IS the frame.
7
White space is structural. 60–80px between sections — no lines.
8
One font, three weights. Favorit Light, Regular, Bold Extended (logo only).
9
Dark over light, light over dark. No middle ground.
10
The site is a gallery wall, not a dashboard.

Improvements to ship next

consolidate6 footer components → reduce to 3 (primary dark, light, OS). The "Footer ©2024" + "Footer ©2024 White" pair is historical drift.
retireCurated NFTs Cover and Rotate Mobile Mode aren’t used on any published page today — candidates for unregister.
codifyThe three inline-image widths (780px, fullwidth, 1240px) currently live in article templates. Extract as a design variable.
alignThe "Apps" variable collection (shadcn-style) lists Body Font = Arial — inconsistent with the site’s Favorit-only rule. Either rename the collection or update the token.
addFocus-visible ring for keyboard nav — currently none on text links. 1px dotted at --dark-grey-999 would fit the system.

V2 · rebuilt as editorial · April 17, 2026

A visual atlas for everyone who builds on Thisispaper

The content is the design.

This document is a single idea extended across a handful of chapters: the interface should disappear so architecture, photography, and writing can speak. Nothing here is decorative. Nothing invented for its own sake. What follows is the vocabulary — type, colour, spacing, components, and motion — taken directly from how the site already behaves, written down so the next person who touches it keeps the rhythm.

Thisispaper · April 2026

Chapter I

Typography

One typeface, two weights. Favorit Regular carries everything that needs to be read; Favorit Bold is reserved for the wordmark. Light is not a weight — it is a CSS trick at 300, used for hero headlines and the button voice, pulled directly from Favorit Regular. What follows is a real article lockup with every specification noted in the margin.

Even Spectres Can Tire

by Floryan Varennes · Xxijra Hii · London

Floryan Varennes stages a landscape both natural and surgical at Xxijra Hii, introducing PVC and glass orthotic forms as measured bodies in tension with the gallery’s clinical architecture.

The works sit in silence against the gallery’s white walls, each one a calibrated restraint rather than a declaration. PVC translates the vocabulary of medical prosthetics into sculpture; glass carries the memory of care practice without its function.

Spectres here are not haunting, they are architectural — the outline of a figure held just beyond reach. Varennes leans into the ambiguity, treating the space as both hospital and temple.

“Everything is measured, everything held in tension — a geometry of care that sustains and confines.”

The show’s second half introduces PVC membranes suspended in steel armatures. These are the warmer pieces — translucent, domestic, almost wearable. They soften the clinical register and turn the room back toward the body.

Installation view, Even Spectres Can Tire, Xxijra Hii, London, 2026. Photo: Corey Bartle Sanderson.

Rules

Larger sizes get tighter tracking. 48px at 0.96, 14px at 0.42, 12px at 0.3.
Body is gray, not dark. #999 pushes the text back so the images lead.
Links are the same colour as the text they live in, underlined with 1px dotted — never a solid underline.
Favorit Regular is the workhorse. Favorit Bold is the wordmark. Light weight (300) is the editorial register; do not go heavier.
Headlines centred only when they are floating over a photograph. On a white page, left-aligned.

Chapter II

Colour

There is no brand colour. The palette emerges from the archive — every shade that has ever walked through Thisispaper is somewhere in these photographs. Below, six recent project covers stand in as a live swatch. The grey, the off-white, and the black are the only tokens the system itself specifies; everything else is loaned from the work.

Stoke RestaurantStudio Mark Randel · Berlin#a89f94 · warm concrete

Da Boavista ChurchAires Mateus · Lisbon#4a3b2c · deep ochre

OdysseaPUNTA Gallery · Varna#e8ddc3 · salt bone

Spectral ArmourFloryan Varennes · London#1a1a1a · clinical shadow

Kyoto Guidecurated edition#9a8f7c · stone paper

Fire and Its GhostsGhirardelli and Luzi#4a3522 · char residue

White#FFFFFF

Every background that isn’t a photograph. Never an off-white substitute.

Soft Black#333333

All body text. Never #000. The slight warmth matters.

Dark Grey#999999

Links, captions, article body. Text that should recede.

Off-white#EFEEEF

The only non-white background used at page scale. Cards and subtle breaks.

Chapter III

Spatial rhythm

Three spacings in three contexts. The hairline (1 px) binds images into a mosaic. Local breathing (20–40 px) lives inside a card or between meta elements. Editorial pauses (60–160 px) separate whole sections of a page. A single page uses all three at once, and the reader feels them without ever counting.

Hero · 100vh

120 px · dramatic pause

Section headline · 48 / 48 / 300

80 px · section break

1 px mosaic · the hairline rule

80 px · section break

Membership CTA · centred

60 px · minimum rhythm

Hairline · 1 px

The grid gap. Images touch one pixel apart. More than that breaks the mosaic illusion; less than that merges them.

Local · 12–40 px

Inside a card. Between meta and body. Between a button and the note beneath it. The numbers to use are 12, 16, 20, 24, 32, 40 — never the halves in between.

Editorial · 60–160 px

Between whole sections of a page. 60 is a minimum, 80 is typical, 120 is dramatic, 160 is a pause before an ending. Never dividers, never borders — only whitespace.

Chapter IV

The components themselves

Every block below is the real Webflow component, inserted into this page from your existing library — not a mockup. These are the atoms of every page on the site. If you change one here, it changes everywhere.

Desktop Menu · Every Thisispaper page begins here



Mag

Guides

Editions

Shop

Collect

Emails



Thisispaper Community

Join today.

Instant access to new channels

The top stories curated daily

Weekly roundups of what's important

Original features and deep dives

Exclusive community features



Become a Member

Join Free



Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Don't have an account? Register now.

Thisispaper

Connecting creative world.

For creatives

For publishers

For creatives

Apply

Thumbnails 3 Row · the 1 px mosaic in the wild

Branded Content

Thisispaper+ Member

May 1, 2026

Kehai House by HW Studio

Branded Content

Thisispaper+ Member

Apr 30, 2026

Modular Narratives in Recycled Plastic by reol

Boathouse by Barboza Blanco Office

Editions Slider · horizontal guide scroll

Discover the most inspiring places and stories through carefully-curated travel guides.

Newsletter Signup · the persistent ask

Plus Grid: Features · the subscriber pitch

Travel Guides

Milan Guide

Explore Guides +

Original Stories

Harriet Davey

'Culture First' at VAUST + CØR Studio

Veronika Janovec

Thisispaper Atlas

Interactive map
Linked to articles
300+ curated locations
Smart filters
+ more

Learn More+

Submission Module

Submit your work to reach our global 2M audience.

Print Archive

Curated Editions

Casa Mexicana

Explore Editions +

Bonus: the fuzzy feeling of supporting an independent family-run company ✨