Style Guide

Shared design system for simongibson.ca (personal) and re-elect.simongibson.ca (campaign). A warm, civic look: serif reading type, confident heading sizes, flat surfaces and hairlines.

Colors

Navy carries trust and civic weight. Gold is the single accent, used sparingly: the hero quote rule, the primary button, the quote border. Never introduce new hues.

navy#12283f
navy-deep#0b1b2c
accent gold#c8962e
paper#fbfaf7
white#ffffff
text#2a3138
muted#5d6873
line#e4e1d8
light / icon background#eef2f6

Typography

Two fonts only. Sans-serif for headings and UI, Georgia serif for everything people read. Headings are always navy, and sized generously: big type does the boldness, not heavy boxes or effects.

H1, heading fontRe-elect Simon Gibson
H2, section headingsAbout Simon
H3, card headingsKeeping taxes low
Body, serifAn independent voice accountable only to you.
Muted textSecondary detail text inside cards.

Layout

Content width1080px campaign, 900px personal
Section padding5rem 0 desktop, 4rem 0 mobile
Corner radius10px everywhere: buttons, cards, tiles
SurfacesFlat. Hairline borders (1px var(--line)) separate surfaces. No shadows.
Gridauto-fill, minmax(280px, 1fr), 1.5rem gap
Breakpoint820px campaign, 760px personal: grids collapse to one column

Buttons

Quiet rectangles with a 10px radius. One primary action per view. Gold fills are the main call to action; navy fills are nav CTAs; ghosts only sit on dark backgrounds.

Primary, gold Ghost, on dark Navy fill, nav

Cards and icons

Cards sit flat with a hairline border, never a shadow. Icons are inline SVG line drawings: 22px inside a 44px tile, 2px stroke, rounded caps, navy on a pale blue tile. One icon per card, above the heading. No emojis anywhere.

Card with icon

Heading in navy sans, body in muted serif.

Same structure

Icon tile, heading, one short paragraph. Nothing more.

Quote blocks

Simon's own words are always presented as quotes, never paraphrased into our voice. Italic serif, gold left border, attribution in bold sans.

“I can offer you experience that you can trust.” Simon Gibson

Copy rules

  • Simon's words only. Positions come from his transcripts and official bio. Quote him directly.
  • Plain sentences. Commas and colons, short paragraphs.
  • Serif voice. Warm, civic, understated.
  • No em dashes anywhere in visible copy. Titles use a pipe | instead.
  • No emojis anywhere. Icons are SVG only.
  • No eyebrow labels. No small uppercase kickers above headings. Headings carry hierarchy alone.
  • No invented positions. If Simon didn't say it, it doesn't go on the site.

Still needed

  • Photos: headshot for the hero on both pages, placeholder tiles until then.
  • Financial agent line: required in the campaign footer before launch.
  • Vote date: October 17 appears in every video, confirm details before publishing.
  • Video embeds: 8 campaign videos ready for the videos section.