{"name":"The Fréson Stylebook","source":"https://dev.yannicfreson.be/stylebook","editions":{"newsprint":{"name":"Newsprint","sites":"dev.yannicfreson.be"},"dark":{"name":"Dark","sites":"yannicfreson.be, 3d.yannicfreson.be"}},"colour":{"bg":{"newsprint":"#ffffff","dark":"#000000"},"ink":{"newsprint":"#000000","dark":"#ffffff"},"accent":{"newsprint":"#f8a20c","dark":"#f8a20c"},"on-accent":{"newsprint":"#000000","dark":"#000000"},"ink-muted":{"newsprint":"rgba(0, 0, 0, 0.6)","dark":"rgba(255, 255, 255, 0.6)"},"hairline":{"newsprint":"#000000","dark":"rgba(255, 255, 255, 0.15)"},"frame":{"newsprint":"#000000","dark":"#ffffff"},"focus":{"newsprint":"#000000","dark":"#f8a20c"}},"contrast":[{"ink":"#000000","on":"#ffffff","ratio":"21:1","verdict":"Every word on the paper."},{"ink":"#000000","on":"#f8a20c","ratio":"10.2:1","verdict":"Flags, buttons, the skip link."},{"ink":"#f8a20c","on":"#ffffff","ratio":"2.1:1","verdict":"Never text. Amber on white is a fill only."}],"type":{"faces":{"Asteroid":{"role":"The signature, and the rare signed word: the photography site’s categories, the paper’s supplements.","editions":"Both"},"Balbek":{"role":"Display. Every headline on the paper in sentence case; on Dark, capitals for titles, and capitals with wide tracking for taglines, nav and buttons.","editions":"Both"},"Newsreader":{"role":"The paper’s text face: justified, hyphenated body, italic standfirsts and captions, small capitals for the edition strip, datelines and bylines.","editions":"Newsprint"},"System sans":{"role":"Body copy on the Dark sites, at a measure near 65 characters.","editions":"Dark"}},"scale":{"headline-lead":{"face":"Balbek","size":"clamp(2.5rem, 5.6vw, 5.25rem)","leading":"1.05","edition":"Newsprint","usage":"The lead story: the biggest type on the front page."},"headline-article":{"face":"Balbek","size":"clamp(2.5rem, 6.4vw, 6rem)","leading":"1.05","edition":"Newsprint","usage":"An article’s headline."},"headline":{"face":"Balbek","size":"2rem","leading":"1.05","edition":"Newsprint","usage":"Feature headlines."},"headline-brief":{"face":"Balbek","size":"1.25rem","leading":"1.25","edition":"Newsprint","usage":"Briefs and More from this edition."},"column-heading":{"face":"Balbek","size":"1.5rem","leading":"1.333","edition":"Newsprint","usage":"A column’s heading, on a 3px rule."},"standfirst":{"face":"Newsreader","size":"1.25rem; 1.5rem from 640px","leading":"1.375","edition":"Newsprint","usage":"The one sentence under a headline.","italic":true},"news-body":{"face":"Newsreader","size":"1.0625rem","leading":"1.5","edition":"Newsprint","usage":"Running text on the front page, justified and hyphenated."},"article-body":{"face":"Newsreader","size":"1.125rem","leading":"1.625","edition":"Newsprint","usage":"An article’s one column, opening with a drop cap."},"caption":{"face":"Newsreader","size":"0.875rem","leading":"1.43","edition":"Newsprint","usage":"Under every photo: its alt text, set as a sentence.","italic":true},"edition-strip":{"face":"Newsreader","size":"0.875rem","leading":"1.43","edition":"Newsprint","usage":"The edition strip and bylines. Small capitals are the only capitals the paper sets.","smallcaps":true},"kicker":{"face":"Newsreader","size":"0.95rem","leading":"1","edition":"Newsprint","usage":"A story’s section, over its headline below the lead. Datelines run at body size, in small capitals, inside the first paragraph.","smallcaps":true},"display-xl":{"face":"Balbek","size":"2.25rem; 3.75rem from 640px; 4.5rem from 1024px","leading":"0.95","edition":"Dark","usage":"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.","uppercase":true},"body":{"face":"System sans","size":"1rem","leading":"1.5625","edition":"Dark","usage":"Running text on the Dark sites."}}},"wordmark":{"first":{"glyph":"F","transform":"scaleY(0.4)"},"rest":{"glyphs":"réson","transform":"scaleX(1.1) scaleY(0.6)"},"live":{"firstSize":"1.2em","tuck":"0.13em","drop":"0.53em"},"viewBox":"-23 -160.99 712.45 246.84","sizes":[{"variant":"narrow","height":"2.5rem, 3rem from 640px","usage":"Tight spots: a footer, a nav."},{"variant":"wide","height":"3.5rem, 4rem from 640px","usage":"Inside pages of the paper, back to the front."},{"variant":"hero","height":"5rem, 7rem, 9rem","usage":"A Dark site’s opening screen."},{"variant":"nameplate","height":"6rem, 9rem, 12rem, 14rem","usage":"The front page of the paper."}]},"frame":{"widthNarrow":"0.5rem","widthWide":"1rem","breakpoint":"40rem","side":"max(var(--frame), env(safe-area-inset-<side>))","query":"(hover: hover) and (pointer: fine)"},"rules":{"rule-hairline":"1px","rule-heavy":"3px","rule-double":"7px","rule-spot":"8px"},"spacing":{"frame-width":"1rem","gutter":"1.25rem","column-gap":"1.5rem","row":"1.5rem","radius":"0"},"motion":{"easing":"cubic-bezier(0.22, 1, 0.36, 1)","sign":{"duration":"1.6s","delay":"0.15s","what":"The nameplate signs itself in, left to right, once, on the front page."},"enter":{"duration":"0.8s","distance":"1rem","what":"On Dark, entrances fade up on load, staggered."}},"assets":["https://dev.yannicfreson.be/brand/freson-wordmark-amber.svg","https://dev.yannicfreson.be/brand/freson-wordmark-amber-on-black.svg","https://dev.yannicfreson.be/brand/freson-wordmark-black.svg","https://dev.yannicfreson.be/brand/freson-wordmark-white.svg","https://dev.yannicfreson.be/brand/freson-3d-amber.svg","https://dev.yannicfreson.be/brand/freson-3d-amber-on-black.svg","https://dev.yannicfreson.be/brand/freson-3d-black.svg","https://dev.yannicfreson.be/brand/freson-3d-white.svg","https://dev.yannicfreson.be/brand/freson-monogram-amber.svg","https://dev.yannicfreson.be/brand/freson-monogram-amber-on-black.svg","https://dev.yannicfreson.be/brand/freson-monogram-black.svg","https://dev.yannicfreson.be/brand/freson-monogram-white.svg"]}