Style guide
The parts Plainspoken is built from.
Colour styles, text styles, buttons and components. Every colour style has a light and a dark value: change them in Assets and every page follows.
§ 1
Colour styles
Background
Light #FBFAF6 · Dark #121211
Surface
Light #FFFFFF · Dark #1A1A18
Surface 2
Light #F2F0E8 · Dark #22221F
Text
Light #141414 · Dark #F1EEE6
Text muted
Light #55575C · Dark #A9A59B
Rule (soft)
Light #DAD7CD · Dark #34332E
Highlighter
Light #F5DF4D · Dark #E9D23F
Link
Light #1F3FA6 · Dark #A9BCFF
§ 2
Text styles
Display · Libre Caslon Display 84
Page title · Libre Caslon Display 68
H2 · Libre Caslon Display 48
What happens after you call
H3 · Libre Caslon Text 25
Estate planning & probate
H4 · Libre Franklin 600 18
Is the first consultation free?
Lead · Libre Franklin 19
We explain your options plainly and put every fee in writing.
Body · Libre Franklin 16
Body copy for paragraphs, lists and form help text.
Label · Libre Franklin 600 12 caps
§ 4 · Case results
§ 3
Components
Plain-English note (open/closed)
FAQ item (open/closed)
Disclaimer · sample wording
Attorney advertising. Prior results do not guarantee a similar outcome. Every case is different. Sample wording: adapt it to your state bar’s rules before publishing.
§ 4
Spacing & motion
Spacing rhythm
Sections use 128 px vertical padding on desktop, 104 px on tablet and 72 px on phone, with 40/32/20 px side gutters and a 1200 px content width. Inside sections, spacing steps are 8, 12, 16, 24, 32, 48, 64 and 96 px.
Shapes and rules
Every corner is square. A double rule opens each numbered section (§), soft 1 px rules separate rows, and the yellow highlighter marks one phrase per heading.
Motion
Text and cards fade in and rise 8 to 12 px over 0.45 s, once, as they enter the screen. Nothing loops. All motion is switched off when the visitor’s device asks for reduced motion.