Style guide, one system.
Colours, type, buttons and links used across Raster. Every value is a Lumen variable, so you can restyle the whole site from one panel.
Instructions
(01) Typography
Heading 1 / pgh_t
Grids hold the shape.
Heading 2 / h2
Work that lasts, plainly.
Heading 3 / util_h
A strict line grid.
Lead / pgh_side_text
Raster ships with three homes and three layouts for each key page.
Body / util_p
Twelve columns, no gutters. Text sits inside each cell, media runs line to line.
Label / mono
(01) Label
Rich text heading two
Body copy inside CMS rich text. Case studies, journal posts and role descriptions all use this style, so one edit here changes every article.
Rich text heading three
A second paragraph to show the spacing between blocks.
Heading 4, for sub-sections
Heading 5, for small sub-sections
Heading 6, for labels inside long articles
A grid is a shared language, not a cage.
- Item 1
- Item 2
- Item 3
- Item A
- Item B
- Item C
(02) Colours
Color/Page
Color/Soft
Color/Panel
Color/Text
Color/Muted
Color/Muted Strong
Color/Border Strong
Color/Line
Color/Guide
Color/Mark
Color/Transition
(03) Buttons and links
Text links inside copy look like this link.