# Tubik Studio — longform design study (No. 01)

## Overview

Tubik Studio's blog is a typography-forward, design-studio editorial. The page under study ("UX Design: How to Make User Interface Readable") makes its argument by example: it is calm, monochrome, and text-first. The design language is a high-contrast serif display paired with a light humanist sans, pure black on white, a single violet accent, and unusually generous body leading. The tone is restraint — nothing decorates the page except the words and the space around them.

- Genre: design-studio editorial blog (typography-forward).
- Signature in one line: serif display + light humanist sans, black/white, one violet accent, 1.75 body leading, luxurious whitespace.
- Real fonts: display = TWK Ghost (high-contrast transitional/Didone serif); body = TWK Lausanne (custom humanist sans, weight ~350). Free homage substitutes: Fraunces (display) + Inter (text).

## How it structures longform content

Reading order is strict and repeats predictably:

1. Tall empty top zone (a deliberate pause before any content).
2. Small-caps kicker naming the topic ("PROCESSES AND TOOLS  UI/UX"), uppercase and letter-spaced.
3. Large serif headline (H1), left-aligned.
4. Plain-sans deck / standfirst of two–three lines.
5. Quiet byline row: author name + circular avatar on the left, "Share" label + social icons (facebook / x / pinterest / linkedin / copy-link) on the right.
6. First image — contained inside the column, never full-bleed.
7. Body with periodic serif H2 section heads.

Hierarchy devices:

- Size does the work. A 72px serif headline over 20px sans body means the size jump alone signals rank; there are no boxes, tint blocks, or heavy rules.
- The accent is rationed. Violet (~#5B4EE9) appears only on links, the logo mark, and small details, so it keeps meaning.
- Section heads stay in the display serif at 38px/500 — smaller than the H1 but still clearly above body.

Imagery strategy:

- ~18 images, 0 full-bleed. Every figure sits inside the same measure as the text, with generous margin above and below.
- This holds one steady scroll rhythm: text → breath → image → breath → text.

Signature technique: whitespace as punctuation. The document is ~23,800px tall yet never reads dense, because air around headings, images, and lines paces the read.

## Desktop treatment (1366)

- Body: TWK Lausanne (weight ~350), 20px / 35px line-height (1.75), #000 on #fff.
- H1: TWK Ghost, 72px / 82px, weight 400, ~40px bottom margin.
- H2: TWK Ghost, 38px / 38px, weight 500, letter-spacing −0.38px, ~20px bottom margin.
- Deck (standfirst): Lausanne sans, 24px / 35px, weight ~350.
- Kicker/eyebrow: uppercase small-caps, letter-spaced.
- Measure: 900px column, ~90 CPL (wide — only tolerable because of the 1.75 leading).
- Accent: violet/indigo ~#5B4EE9 (Inter for UI chrome).
- Layout: left-aligned content column with a large empty top zone; contained (non-bleed) images.
- Chrome: sticky lowercase "tubik" wordmark header with a circular logo mark; horizontal topic nav row.
- Doc height: ~23,800px (very long).

## Mobile treatment (390)

- Body: 16px / 24px (1.5) — the leading ratio drops as the size drops; tight columns need less air.
- H1: 72 → 38px / 42px, weight and contrast preserved.
- Measure: 345px, ~43 CPL (ideal). Single column, ~15px side gutters.
- Nav collapses; hero image goes full-width inside the column.
- Adaptation strategy = shrink the body AND relax the leading (not the "hold size, narrow measure" strategy some peers use).

## Design system (tokens)

Type:

- Display serif: Fraunces (homage) / TWK Ghost (real) — weight 400, high optical contrast.
- Text sans: Inter (homage) / TWK Lausanne (real) — weight 300–400, humanist.
- Scale: H1 72px serif 400 → clamp(2.6rem, 6vw, 4.5rem); H2 38px serif 500, letter-spacing −0.01em (~2.2rem); deck 1.4rem Inter 400; body 20px / 1.75 (16px / 1.5 at ≤480px); kicker 0.72rem Inter 600, uppercase, letter-spacing 0.16em, muted.

Colour:

- ink #0A0A0A
- paper #FFFFFF
- muted #6B6B6B
- hairline #E7E7E7
- accent violet #5B4EE9

Layout:

- Single left-aligned column. Reference measure 900px (~90 CPL); this homage tightens to ~720px (~66 CPL) as an improvement while keeping the airy leading and voice.
- Leading: 1.75 desktop, 1.5 at ≤480px.
- Chrome: sticky lowercase wordmark left, minimal nav right, thin topic-nav row below.
- Devices: empty top zone, small-caps kicker, byline + share row, contained images with generous margins.

## Signature techniques

- Editorial calm as brand: pure black/white with a single rationed violet accent.
- Serif-display + light-sans pairing where the size contrast alone carries hierarchy.
- Enormous 1.75 body leading — the airiness is the memorable trait.
- Empty top zone before the headline: silence before the first word.
- Contained imagery only, keeping a steady text/breath/image rhythm.
- Whitespace used as punctuation to pace a very long document.

## What to steal

1. Buy attention with empty space — a tall pause above the headline makes the first line feel considered and costs nothing.
2. Let size carry hierarchy — a big serif over a small sans needs no rules or colour to signal rank; pick two type roles and make the jump large.
3. Ration the accent — one violet, used only on links and marks, reads as intent; spend it rarely so it still means something.
4. Pair high leading with a sane measure — 1.75 leading rescues a wide column, but do both: keep the air and pull the line length toward ~66 CPL so nothing depends on luck. (This is the one place to improve on the reference's 90 CPL.)
5. Keep images in the column — contained figures with margins hold a calm scroll rhythm; save full-bleed for drama, not for a text-first read.

## Visual references

- Desktop (1366): ../assets/screenshots/01-tubik-desktop.jpeg
- Mobile (390): ../assets/screenshots/01-tubik-mobile.jpeg

Screenshots captured for study and commentary only; not affiliated with Tubik Studio.

## Source URL

https://tubikstudio.com/blog/ux-design-readable-user-interface/