Style guide
Colour, type and components.
Everything on this page comes from the project’s colour styles, text styles and components, so changing them here changes them everywhere.
Colour styles
Light and dark, side by side.
Each swatch switches with the theme toggle (Preview or published site).
Background
#FBF4EC / #111814
Surface
#FFFFFF / #18211C
Sand
#F4E7DA / #1F2A24
Text
#1C2620 / #F3ECE3
Text muted
#56605A / #ABB4AD
Forest room
#1D4A3A / #1F3D31
Blush room
#F7DCD2 / #3A2629
Accent (raspberry)
#B23A5C / #F28FA9
Typography
Young Serif and Figtree.
Headings in Young Serif, everything else in Figtree. Both Google Fonts under the SIL Open Font License.
Display · Young Serif 76
H1 · Young Serif 62
H2 · Young Serif 46
Quote · Young Serif 28
“I need a plan for our children.”
H3 · Figtree 600 22
Free first call
Lead · Figtree 19
We listen first, explain every step in plain words and look for agreement before court.
Body · Figtree 16
Most family matters are resolved through agreement or mediation. If court is needed, we explain why first.
Components
Buttons, pills and disclosures.
Default pill
Blush pill
Outline pill
Please don’t include confidential details yet. Sending this form doesn’t make us your lawyers; we first check for conflicts and confirm in writing.
Disclaimer · sample wording
Disclaimer block used on outcomes, stories and blog posts.
Line art
Eleven drawings, one walking dot.
Original one-stroke SVG drawings (code component “LineArt”). Lines draw in when scrolled into view and the accent dot walks its path; with reduced motion they show fully drawn and still.
home
twohomes
path
door
rings
document
shield
chat
family
sprout
calendar