Serviceplain is built so that nine colours, two fonts and your own photos change the whole site, including the animated sections. Here is where everything lives.
(01) Five steps
The whole rebrand, in order.
01
Colours
Assets › Colors. Change Accent first; it is the only loud colour. Paper and Ink set the tone.
02
Fonts
Assets › Text styles. Swap Inter Display and Inter; the animated sections have a Display font control too.
03
Name
Edit the wordmark in the Nav, the footer Wordmark component and the site title in Settings.
04
Photos
Replace the CMS images, then the Hero photo and the four process photos (see below).
05
Words
Edit the CMS first: services, case studies, testimonials, FAQ and journal. Then the section copy.
(02) Colours
Nine tokens. Change one and every page follows.
Paper
#F3F2EE · Page background
Surface
#FFFFFF · Cards, fields
Sunk
#EAE8E3 · Insets, placeholders
Ink
#121211 · Text, primary button, ruler
Graphite
#5E5D58 · Secondary text
Mute
#8E8C86 · Placeholders, tertiary
Hairline
#D9D6CF · Rules, borders, ticks
Accent
#FF5A1F · The one signal colour
On Accent
#FFFFFF · Text on accent
(03) Type
Nine text styles, one family and a mono.
Made simpler.
Made simpler.
Your business, made simpler.
Your business, made simpler.
Your business, made simpler.
Your business, made simpler.
Your business, made simpler.
(04) Photos
Where every image lives.
Home › 01 Hero › Photo control. Wide images work best (3:2 or wider).
Home and Process › engagement ruler › Phases › one image per phase.
Home › Who it’s for › Sectors › one image per sector.
CMS › Services / Case Studies / Journal › Image or Cover field.
The hero and process photos have a Photo grade and Grain control that pulls any photo toward the Paper colour.
(05) Animated sections
Each one has its own controls.
Headline lines, stop, intro, buttons, availability (openings per working day), clock city and time zone, photo, grade, grain.
Total weeks, ticks per week, phases with weeks, copy, time and photo.
Sectors with headline, problems, plan lines (W01–02 · text), metric and photo.
Currency, instalments, packages with price, unit, list, featured flag and link.
Figures with decimals, prefix and suffix; the statement paragraph.
Openings per day and slot times. Picking a slot fills the form field named “Preferred time”.
Word, stop, city, time zone and status line.