Solved Marketing · Design system
Style Guide
Every colour, type style, button, grid and spacing step used on the site, built from the live classes. Change a class here and it changes everywhere it is used.
Colours
Green 900
#002400 · primary, dark panels, headings
Green 850
#012D01 · panel gradient
Green 800
#073707 · panel gradient
Case tab
#07221A · case study tabs
Case rail
#104E3F · case study rail
Lime
#B4E034 · accent, buttons, highlights
Lime soft
#EEF6D6 · hover tints
Background light
#F8FAFC · light sections
Ink
#111611 · body text
Muted
#5B635B · secondary text
Line
#E1E6E3 · dividers, borders
Line strong
#121812 · strong rules
Legal ink
#8CBC8C · legal strip text
Error
#FFB4A6 · form errors on dark
Typography
Poppins · 400 / 500 / 600 · headings, buttons, labels
Aa Bb Cc Gg 0123456789
Inter · variable 100–900 · body text
Aa Bb Cc Gg 0123456789 — The quick brown fox jumps over the lazy dog.
H1 tag · the page title above · Poppins 500 · 46–104px
One per page. No class: the look comes from the All H1 Headings tag style.
H2 tag · Poppins 500 · 30–48px
Section heading
H3 tag · Poppins 500 · 28–36px
Sub-section heading
H4 tag
Card heading
H5 tag
Small heading
H6 tag
Smallest heading
Display Title and paragraph sizes
Display Title · 56
Websites. Marketing.
Display Title · 46
Professional Services
Display Title · 40
Let’s talk about your growth
Display Title · 34
Success Stories
Display Title · 28
Privacy Policy
Display Title · 26
Discover
Display Title · 22
Get In Touch
Display Title · 18
Who we are
Main Paragraph · Big
Big-agency expertise without the big-agency overheads.
Main Paragraph
An in-house team spanning websites, marketing and creative, working as an extension of yours.
Main Paragraph · 16
We focus on activity that earns its place, measure what matters and keep improving.
Main Paragraph · 14
Small print, captions and supporting notes.
sm-stat-note
Long-term · Collaborative · Embedded
Buttons and links
sm-btn-circle · default / is-outline
sm-text-link + sm-text-link-arrow
On dark · sm-btn-circle is-on-dark (+ is-lg)
sm-eyebrow · Digital PR & SEO · Professional Services
sm-case-extra-label · Additional Services Provided
sm-case-extra-list · SEO · Email Marketing · Design & Branding
Grids and spacing
Every grid is Main Grid + a column combo + its own combo for the real gaps (for example Main Grid · column-2 · sm-contact-grid). The bare template combos are shown below.
Main Grid · column-1
Main Grid · column-2
Main Grid · column-3
Main Grid · column-4
mg-medium · 12px (8 on tiny)
mg-regular · 24px
mg-large · 64px (40 on tiny)
mg-xlarge · 100px (64 on small) · create when needed