1
Arch
The tunnel a firm moves through as it changes.
[ Graphic language ⬩ Logotype ]
Logo, wordmark & combinations
Three parts: the symbol and how to use it at each size, the wordmark beside it, and the colour pairs the lockup can appear in.
[ Section 01 ]01 / 05
The logo
The symbol has three parts. A round-topped arch: the tunnel a firm moves through as it changes. A chevron across it: the rail, and progress along it. A diamond keystone at the top: the block that holds the structure together, standing for both our building blocks and the finished OS. All three are drawn in negative space.
rails ⬩ blocks ⬩ the tunnel forward2
Chevron
Crosses the arch. The rail, and progress along it.
3
Keystone
The block at the top that holds the structure together.
Fig. 1 ⬩ The mark at sizeHeight in px
12056322014 ⬩ floor[ Section 02 ]02 / 05
The wordmark
A custom serif drawn to match the symbol. From the symbol, it takes the same stroke weight, straight-cut ends and sharp corners. From Newsreader, our heading font, it takes its proportions and classical feel. All letters share one height, so the word reads as a single block. The wordmark and the site headings speak with one voice.
the logo’s solidity ⬩ Newsreader’s eleganceFig. 2a ⬩ Primary lockupInk on paper
Fig. 2b ⬩ Inverse lockupPaper on ink
Fig. 2c ⬩ Minimum sizesBelow the floor, mark only
300px ⬩ cap 40px180px ⬩ cap 24px ⬩ floorMark onlyRefRuleValue
A1Mark height1.04× cap height
A2Gap0.23× cap height
A3Clear space0.5× the arch, on every side
A4Floor180px wide ⬩ cap 24px
A5Below the floorDrop the wordmark, use the mark alone
A6Live type fallbackNewsreader 400 at −0.03em, only where the SVG can’t be used
Schedule 01 ⬩ Lockup geometry06 rows
[ Section 03 ]03 / 05
Colour combinations
One flat colour on one flat background. Only these ten pairs are allowed.
one ink ⬩ one ground ⬩ never two
Do+ Always
01Horizontal, mark left of the wordmark, at the spacing in the supplied file. Never stack them.
02Only the ten pairs above. One flat ink on one flat ground. No other combination is legal.
03Use the supplied SVG. Where live type is unavoidable, Newsreader 400 at −0.03em.
04Keep 0.5× the arch clear on every side; nothing enters that space.
05Below 180px wide, drop the wordmark and use the mark alone.
Don’t− Never
01Re-space, condense, stretch, outline or redraw the lettering.
02Two colours inside the lockup: no clay arch with ink lettering.
03A photograph, gradient or grained surface behind it. Put a flat ground there.
04Shadows, glows, strokes, rotation or any angle other than horizontal.
05A tagline, box or badge attached to the lockup. Those sit outside the clear space.
[ Section 04 ]04 / 05
Favicon
The browser tab, bookmark and home-screen icon. The mark alone, in paper, centred on a square of ink. The mark takes up half the tile, so the clear space is built in.
paper on ink ⬩ mark at ½ ⬩ squareFig. 4a ⬩ FaviconPaper on ink
Tile 1:1Mark ½ ⬩ margin ¼
Fig. 4b ⬩ Actual size1× px
×Rules+ Always
01Mark only, never the wordmark. The favicon sits far below 180px.
02Paper on ink. #FEF4E8 mark on a flat #0D0503 square. One colour, one ground.
03Mark at half the tile. The quarter left on every side is the 0.5× arch clear space.
04Square, flat corners. Let the platform round it (iOS, Android). Never add a border, shadow or gradient.
05Use the supplied file.
rb-favicon.svg, scaled. Don’t redraw or re-centre the mark.[ Section 05 ]05 / 05
Downloads
The supplied files. SVG for screens and print, at any size. PNG where SVG can’t be used: transparent, 3000px wide for the lockup, 1024px for the mark and favicon.
svg ⬩ png ⬩ transparent
