# The Fréson Stylebook

The brand for everything signed Fréson, and its one source of truth. Read on the web at https://dev.yannicfreson.be/stylebook; tokens as JSON at https://dev.yannicfreson.be/stylebook/tokens.json.

When you design or build for Yannic Fréson: pick the edition by site, use these tokens, follow every rule below, and if something isn’t covered, choose the most restrained option: black, white, one amber, a hard square frame, the signed wordmark, Balbek display. Don’t invent new brand elements.

## Editions

- **Newsprint** (dev.yannicfreson.be): Black ink on white paper, a black frame, amber as the one spot ink. The developer portfolio, run as a newspaper.
- **Dark** (yannicfreson.be, 3d.yannicfreson.be): White on a black canvas, a white frame, photos in white mats. The photography site and the 3D service.

## The mark: Signed, never typed

Fréson is a signature, set in Asteroid in amber and squashed by hand. The first letter is a long, low swoosh; the rest is stretched a tenth wider and pressed to six tenths, tucked so the accent on the é meets the end of the crossbar.

- Use the outlined SVG, never live text. *Why:* It looks the same on every device, with no flash while a font loads, and matches the business cards exactly.
- Keep the squash at every width. Only the size changes. *Why:* The squash is the signature. A mark that unsquashes on phones is a different mark.
- The mark is always aria-hidden; the element around it carries the name. *Why:* A screen reader should say “The Fréson”, not read out a drawing.
- The 3D service signs with the same hand: a lowercase 3d after réson, tucked under the tail of the F. *Why:* One signature with the wordmark’s box, so Yannic Fréson reads first and the service second.
- Never set “3D” beside the wordmark in another face. *Why:* Two faces side by side read as a logo lock-up, not a signature.
- The monogram is the squashed F alone, for favicons and tight spaces. *Why:* At 16px the full signature is a smudge; the swoosh still reads.

Recipe: F scaleY(0.4); réson scaleX(1.1) scaleY(0.6). On a signed word in live Asteroid text, the first letter is also set at 1.2em, and the rest tucked in by 0.13em and dropped 0.53em.

| Size | Height | Use |
|---|---|---|
| narrow | 2.5rem, 3rem from 640px | Tight spots: a footer, a nav. |
| wide | 3.5rem, 4rem from 640px | Inside pages of the paper, back to the front. |
| hero | 5rem, 7rem, 9rem | A Dark site’s opening screen. |
| nameplate | 6rem, 9rem, 12rem, 14rem | The front page of the paper. |

Files:
- Wordmark, Amber, transparent: https://dev.yannicfreson.be/brand/freson-wordmark-amber.svg
- Wordmark, Amber on black: https://dev.yannicfreson.be/brand/freson-wordmark-amber-on-black.svg
- Wordmark, Black, transparent: https://dev.yannicfreson.be/brand/freson-wordmark-black.svg
- Wordmark, White, transparent: https://dev.yannicfreson.be/brand/freson-wordmark-white.svg
- 3D mark, Amber, transparent: https://dev.yannicfreson.be/brand/freson-3d-amber.svg
- 3D mark, Amber on black: https://dev.yannicfreson.be/brand/freson-3d-amber-on-black.svg
- 3D mark, Black, transparent: https://dev.yannicfreson.be/brand/freson-3d-black.svg
- 3D mark, White, transparent: https://dev.yannicfreson.be/brand/freson-3d-white.svg
- Monogram, Amber, transparent: https://dev.yannicfreson.be/brand/freson-monogram-amber.svg
- Monogram, Amber on black: https://dev.yannicfreson.be/brand/freson-monogram-amber-on-black.svg
- Monogram, Black, transparent: https://dev.yannicfreson.be/brand/freson-monogram-black.svg
- Monogram, White, transparent: https://dev.yannicfreson.be/brand/freson-monogram-white.svg

## Colour: Black, white and one amber

Three colours do all the work, in two editions. Amber is the only accent, and it is used sparingly: if everything is amber, nothing is.

- There are no grey tokens. Muted is ink at 60%. *Why:* A grey is a fourth colour. Opacity keeps the palette at three and works on both grounds.
- On the paper, amber is a spot ink: a fill, never text. *Why:* Amber on white is 2.1:1. It can’t carry a word, so it carries flags, the nameplate and one rule.
- Anything on amber is black. *Why:* Black on amber is 10.2:1; white on amber is 2.1:1, as unreadable as amber on white.
- The focus ring is amber on Dark and black on the paper. *Why:* An outline has to reach 3:1 against what is around it. Amber does on black, not on white.
- No second accent, no gradients. *Why:* The restraint is the brand. A second colour would make amber ordinary.

| Token | Newsprint | Dark | Use |
|---|---|---|---|
| bg | #ffffff | #000000 | The page: white paper, or the black canvas. |
| ink | #000000 | #ffffff | Text, rules, and on Dark the photo mats. |
| accent | #f8a20c | #f8a20c | The one colour. Dark: the wordmark, focus ring, buttons, hovers. Newsprint: a spot ink, only ever a fill. |
| on-accent | #000000 | #000000 | Anything set on an amber fill. |
| ink-muted | rgba(0, 0, 0, 0.6) | rgba(255, 255, 255, 0.6) | Secondary text. Ink at 60%, never a grey. |
| hairline | #000000 | rgba(255, 255, 255, 0.15) | Borders and dividers. Newspaper rules print solid. |
| frame | #000000 | #ffffff | The frame around every page on a mouse or trackpad screen. |
| focus | #000000 | #f8a20c | The 2px keyboard outline, 3px clear of the element. |

- #000000 on #ffffff: 21:1. Every word on the paper.
- #000000 on #f8a20c: 10.2:1. Flags, buttons, the skip link.
- #f8a20c on #ffffff: 2.1:1. Never text. Amber on white is a fill only.

## Type: Four faces, one job each

A script for the signature, a condensed display face for headlines, a news face for the paper and the system’s own sans on the Dark sites. No face does another’s job.

- Headlines are Balbek in sentence case on the paper; capitals on Dark. *Why:* Sentence case reads like news. On a black canvas, short capitals sit like gallery labels.
- Set a wrapping sentence-case Balbek headline at a line height of 1.05, never under 1. Capitals-only titles on Dark may close to 0.95. *Why:* Its descenders drop 0.2em and its ascenders rise 0.8em. Under 1, a “g” runs into the capitals below. Capitals have no descenders, so only an accented capital, at 0.97em, could touch.
- The paper sets capitals only as small caps. *Why:* Small caps keep datelines and bylines quiet beside the headlines.
- Running text keeps a measure of at most 65 characters. *Why:* Longer lines lose the reader on the way back to the left edge.
- Keep Ü Ù Ú Û ° ² ³ out of Balbek. *Why:* The font has no glyphs for them; the browser would swap in another face mid-word.

- **Asteroid** (Both): The signature, and the rare signed word: the photography site’s categories, the paper’s supplements. *Why:* It is the signature’s face. Used for anything else, the signature stops being special.
- **Balbek** (Both): Display. Every headline on the paper in sentence case; on Dark, capitals for titles, and capitals with wide tracking for taglines, nav and buttons. *Why:* Condensed and heavy, it carries a long, specific headline in two lines where a wider face needs four.
- **Newsreader** (Newsprint): The paper’s text face: justified, hyphenated body, italic standfirsts and captions, small capitals for the edition strip, datelines and bylines. *Why:* Drawn for news reading, with an optical-size axis, so a 14px caption and a 24px standfirst each get a cut made for their size.
- **System sans** (Dark): Body copy on the Dark sites, at a measure near 65 characters. *Why:* On a black canvas the photos are the voice. The body text should read and step aside.

| Style | Face | Size | Line height | Edition | Use |
|---|---|---|---|---|---|
| headline-lead | Balbek | clamp(2.5rem, 5.6vw, 5.25rem) | 1.05 | Newsprint | The lead story: the biggest type on the front page. |
| headline-article | Balbek | clamp(2.5rem, 6.4vw, 6rem) | 1.05 | Newsprint | An article’s headline. |
| headline | Balbek | 2rem | 1.05 | Newsprint | Feature headlines. |
| headline-brief | Balbek | 1.25rem | 1.25 | Newsprint | Briefs and More from this edition. |
| column-heading | Balbek | 1.5rem | 1.333 | Newsprint | A column’s heading, on a 3px rule. |
| standfirst | Newsreader | 1.25rem; 1.5rem from 640px | 1.375 | Newsprint | The one sentence under a headline. |
| news-body | Newsreader | 1.0625rem | 1.5 | Newsprint | Running text on the front page, justified and hyphenated. |
| article-body | Newsreader | 1.125rem | 1.625 | Newsprint | An article’s one column, opening with a drop cap. |
| caption | Newsreader | 0.875rem | 1.43 | Newsprint | Under every photo: its alt text, set as a sentence. |
| edition-strip | Newsreader | 0.875rem | 1.43 | Newsprint | The edition strip and bylines. Small capitals are the only capitals the paper sets. |
| kicker | Newsreader | 0.95rem | 1 | Newsprint | A story’s section, over its headline below the lead. Datelines run at body size, in small capitals, inside the first paragraph. |
| display-xl | Balbek | 2.25rem; 3.75rem from 640px; 4.5rem from 1024px | 0.95 | Dark | Page and section titles on the black canvas. Capitals have no descenders, so 0.95 holds; only an accented capital under another line would touch. |
| body | System sans | 1rem | 1.5625 | Dark | Running text on the Dark sites. |

## The frame: A sheet of paper on a dark table

A hard, square border around every page, white on the Dark sites and black on the paper. It is the most recognisable thing about the brand, and it is for mouse and trackpad screens only.

- Half a rem below 640px, a full rem above. *Why:* The frame should read as an edge, not eat a phone-sized window.
- Each side widens to clear a notch or a home indicator. *Why:* max(frame, safe-area inset) keeps the frame visible and the content clear of the hardware.
- Touch screens get no frame. *Why:* Touch browsers, iOS Safari above all, move and float their toolbars over the page. No version of a frame sat right there.
- Nothing is pinned to the bottom of a touch screen. *Why:* That is where Safari’s toolbar floats. Persistent actions live in the sticky header.
- No border radius, ever. *Why:* The frame is square, so everything inside it is square too.

Width 0.5rem, 1rem from 40rem. Each side is max(var(--frame), env(safe-area-inset-<side>)). Drawn only under @media (hover: hover) and (pointer: fine).

## Two editions: One brand, in negative

The same tokens print two ways. Dark is white on black with a white frame; Newsprint is the same brand in negative, black ink on white paper with a black frame. Amber stays amber in both.

- Pick the edition by site, not by mood. *Why:* The photography and 3D sites are Dark, the developer portfolio is Newsprint. A reader moving between them should feel one family.
- The newspaper is played straight in its structure and lightly in its copy. *Why:* Real newspaper furniture makes the conceit work; jokes everywhere would make it a costume.
- The sites lead to each other. *Why:* On Dark, doorways open the other worlds; on the paper they run as weekend supplements.

## Shape and imagery: Square corners, ruled columns

Everything is hard-edged. On Dark, photos sit in a white mat like a framed print. On the paper they run unmatted with a caption, and rules divide the page where another site would use cards.

- On Dark, every photo sits in a white mat with small, even padding. *Why:* It makes a screen of photos feel like prints on a wall, and keeps the photography and 3D sites consistent.
- On the paper, photos run unmatted with an italic caption. *Why:* That is how a newspaper prints them. The caption is the photo’s alt text, set as a sentence.
- Front-page photos are black and white; inside an article they run in colour. *Why:* Like the printed paper and its colour features.
- Screenshots keep their own proportions. *Why:* Cropping a screenshot hides the point of it.
- Rules divide; nothing floats. No cards, no shadows. *Why:* A newspaper separates with ink. Shadows belong to a different kind of page.

- rule-hairline, 1px: Column rules and row dividers.
- rule-heavy, 3px: Under a column’s heading.
- rule-double, 7px: Under the nameplate, above the colophon: 3px, a 3px gap, 1px.
- rule-spot, 8px: Amber, over In short: the one amber rule.
- frame-width, 1rem: The frame at 640px and up; 0.5rem below.
- gutter, 1.25rem: Side padding inside the frame; 2rem from 1024px.
- column-gap, 1.5rem: Either side of a column rule on the front-page grid; 1.25rem in the classifieds and More from this edition. Running text in columns keeps 1rem either side.
- row, 1.5rem: Above and below a horizontal rule between rows.
- radius, 0: Everywhere. There is no other radius.

## Motion: One easing, one moment

Everything moves on one curve, fast out of the gate and slow to settle. The paper moves once: the nameplate signs itself in. After that it holds still, like paper.

- All motion waits for prefers-reduced-motion: no-preference. *Why:* Someone who asked for less motion sees everything at once, at rest.
- Nothing starts hidden waiting for a scroll. *Why:* A page that reveals on scroll shows a blank to anyone who doesn’t scroll: a screenshot, a link preview, a skimmer.
- One moment per page, at most. *Why:* A single orchestrated movement lands. Scattered effects read as noise.

Easing: cubic-bezier(0.22, 1, 0.36, 1). The nameplate signs itself in, left to right, once, on the front page. 1.6s, after 0.15s. On Dark, entrances fade up on load, staggered. 1rem over 0.8s.

## Voice: Say the thing

Confident, plain and specific. Short sentences, active voice, concrete nouns. A little dry wit is welcome; cleverness for its own sake is not.

- Headlines report: past or present tense, specific, built from facts in the project’s own write-up. *Why:* Never invent a fact for a better headline. A reader who catches one stops trusting the rest.
- Write what someone does, not what a system delivers. *Why:* “I build interfaces” is a person. “Solutions are delivered” is nobody.
- Curly quotes and apostrophes, everywhere. *Why:* Straight quotes are typewriter marks. Tests check the paper’s stories and this stylebook for them.
- On the paper: no eyebrow labels, no A · B · C meta strings, no arrows on links. On Dark, one amber tagline may sit over a title. *Why:* The paper labels with its own furniture: flags, kickers, datelines, jump lines. The Dark sites have no such furniture, so a short tagline does the job.

## Components: The parts, as they ship

These are the components the sites run on, rendered here from the same code. Each names the file it lives in.

- One amber section flag per page: the lead’s on the front, the story’s on an article. *Why:* A flag is how the reader finds the one thing to read first. Two flags is no flag.
- Below the lead, a story’s section is a kicker in small capitals. *Why:* It labels without competing with the lead.
- Every headline links to its article, once. *Why:* The front page is edited: nothing appears twice.
- Buttons are Dark only. The paper uses underlined links and jump lines. *Why:* A newspaper has no buttons. Its one button-like thing is the amber way back on a correction.

## Do

- Use amber deliberately, and on the paper only as a fill.
- Keep every corner square, and the frame on mouse and trackpad screens.
- Set the wordmark from the outlined SVG, exactly.
- Make muted text ink at reduced opacity.
- Give every rule its reason when you write a new one here.

## Don’t

- Add a second accent colour or a grey token.
- Round a corner, or force the frame onto a touch screen.
- Set amber text on white, or an amber focus ring on the paper.
- Retype the wordmark in the font.
- Add gradients, drop shadows or decoration. The restraint is the brand.