Style guide
How Hyphen is put together, and where to change each part.
Everything on this site comes from styles, components and the CMS. Nothing is typed into a layer twice. Delete this page, or unlink it from the footer, before you publish.
Set up
In the layout template, select the Hyphen Nav layer: Left word and Right word are the name, and Links is the list of pages. The footer wordmark is a Hyphen layer set to Line only: change its two words there.
Colours
Paper
#F5F4F0. Page ground.
Ink
#121211. Text, buttons, the closed hyphen.
Muted
#8B8A84. Second half of two-tone headings.
Soft
#6E6D68. Small secondary text.
Line
Ink at 16%. Hairlines.
Accent
#2B50FF. Focus on form fields, the sent state.
Card
#FFFFFF. Picture ground.
On photo
#FFFFFF. Text over a picture.
Tint
#E6E5E0. The open navigation bar and the phone menu.
Other palettes
Paper #EEF1F6, Ink #0F1B33, Muted #7D8799, Soft #5A6478, Line Ink at 16%, Accent #FF5B2E, Tint #DEE3EC. Cool paper, navy ink, one warm accent.
Paper #F2F0EA, Ink #1D1B16, Muted #8F8A7C, Soft #6B665A, Line Ink at 16%, Accent #1F7A4D, Tint #E4E1D9. Warmer and softer, with a green accent.
Paper #111214, Ink #F1EFEA, Muted #8A8B8F, Soft #A9AAAE, Line Ink at 18%, Accent #6E8BFF, Card #1A1B1E, Tint #1F2125. A dark set: type the values into the nine colour styles.
Type
Display is the style of this page’s title
Display. 80, 60 and 40 px, Archivo Regular. One per page: it is the h1.
Design and engineering, joined by a hyphen
Statement. 48, 38 and 28 px. Section statements.
Design and engineering, joined by a hyphen
Heading. 32, 28 and 24 px. Article headings, the phone menu.
Design and engineering, joined by a hyphen
Title. 24, 22 and 20 px. Row titles.
“The build matched the design.”
Quote. 28, 24 and 21 px. Kind words.
Design and engineering, joined by a hyphen
Lead. 22, 20 and 18 px. Page introductions.
Design and engineering, joined by a hyphen
Body. 17 px. Running text.
Design and engineering, joined by a hyphen
Small. 15 px, tabular numerals. Dates, notes.
Design and engineering, joined by a hyphen
Label. 15 px, medium. Section labels, facts.
The headline font
The words beside a hyphen narrow as the picture opens. That needs a typeface with a width axis, so the code components (Hyphen, Hyphen Index, Hyphen Chain, Hyphen Nav, Widths and Wide Title) load one font file of their own: Archivo, with widths from 62 to 125.
Components
The work list, and the services list on the home page. One instance sits in each item of a collection list; Place in list and Total in list are bound to the list. Each hyphen opens in turn while the screen holds: onto the picture, or, with no picture, onto a panel (Panel text, Panel figure, Panel note). With Kind left empty, a hyphenated title such as Design-to-code is split at its first hyphen.
Hyphen Nav
The navigation, in the layout template. At the top of a page the hyphen in the name is open and holds the links. As the page scrolls it closes to the name; point at it, tab into it or scroll up and it opens in place, away from the word under the pointer, and the link you point at widens. Below the Menu below width the hyphen is the menu button and opens to the whole screen. Name, links, labels, email, note and the bar colours are all in its panel.
Collections
The services index on the home page, the services rows and each service page: Summary, Price, Terms, Details and a list of what is included. A hyphenated Title is split at its first hyphen on the home page.
The process chain. From and To are the two words, and each To should be the next step’s From. Picture and Note fill the hyphen.