SquadSpot design system · v1.0 · August 2026
The living reference for squadspot.com.au. Every element on this page is built from the site's real classes and variables, so if something looks wrong here it is wrong everywhere — and fixing it here fixes it everywhere.
01 — Principles
SquadSpot sells trust to committees who run regulated clubs. The design should feel like well-made equipment: calm surfaces, one confident accent, generous space and type that is easy to read at a glance. Nothing decorative that does not carry information.
Hanken Grotesk for everything readable. IBM Plex Mono only for the instrument layer — eyebrows, buttons, data, captions. No third face, ever.
Every section, hero and nav shares the same 1248px edge. Content never bleeds off-canvas by accident, and every value comes from the spacing scale.
Links, eyebrows and icons are teal. Body copy is always Neutral 700, headings Neutral 800 or white. Gold is reserved for the hero CTA and one highlighted word.
02 — Colour
Eight colours, all Webflow variables. Ink is the ground and the primary button. Retired for good: navy #211f54, mauve #6e7191, template blue #4a3aff, pure black and #acacac.
Ink · Primary Dark
#073836 · grounds, primary button, headings on dark
Teal · Primary 1
#055f5b · links, eyebrows, icons, hover
Gold · Primary 2
#ffd584 · hero CTA, highlight word, shapes
Paper · Secondary 1
#fbf9f8 · alternate section ground
Stone
#e6e3df · borders, dividers, outlines
Neutral 800
#292c32 · headings on light
Neutral 700
#494a4d · body copy
Neutral 600
#6f7278 · captions, meta, placeholders
03 — Typography
The headings below carry no class at all — this is what the H1–H4 tag styles give you for free. Light (300) display weights are what make the heroes feel premium; keep them above 40px only. Sentence case throughout.
Display · 72 / 1.05 / 300 · .ss-display
H1 · 56 / 1.1 / 300
H2 · 40 / 1.15 / 300
H3 · 24 / 1.3 / 500
H4 / card title · 19 / 1.35 / 600
Body · 17 / 1.6 / 400 · Neutral 700
One modern platform that adapts to the real, regulated work generic tools treat as an afterthought. Firearms compliance, historic-rego logbooks, attendance-linked scoring, multi-tier associations. Running text sits in a container.is-narrow or is-text so lines stay near 65 characters.
Small · 14 / 1.5 · Neutral 600 · .ss-small
Secretary, Cheyenne Field Archers · August 2026
Eyebrow · mono 12 / .1em / caps · .ss-eyebrow
From single clubs to national governing bodies
Mobile
Display 44 · H1 40 · H2 30 · H3 22 · body 16. Set once on the tag styles at the tablet and mobile breakpoints, never per page.
04 — Buttons & links
All 48px tall, 4px radius, IBM Plex Mono 15 / 500, sentence case. If a page needs more emphasis, it needs fewer buttons — never a fourth style.
Primary · Button Primary
Book a demoSecondary · Button Secondary
Browse all featuresText link · tag style
Get in touchOn the ink ground
Gold (Button Primary Large Cal) is hero and nav only; add .small in the nav. White is the primary button inverted for dark sections.
05 — Grid, spacing & sections
Every number on the site comes from an eight-step scale — 8, 16, 24, 32, 48, 64, 96, 128 — stored as Webflow variables. If a value is not in the scale, change the variable, not the element.
ss-container
1248px max, 24px side gutters. The edge every section shares — heroes and the nav included.
ss-container.is-narrow
880px. Articles, privacy, editorial policy and any long-form prose.
ss-container.is-text
640px, centred. Section intros under a centred H2.
ss-section · is-sm · is-lg
96px top and bottom by default; 64 for compact; 128 for heroes and major breaks. Tablet drops one step, mobile two. Add .is-dark for the ink ground or .is-paper for the warm off-white.
Heading stack
Eyebrow → 12 → heading → 16 → body → 32 → button. Use ss-section-head for the block so it caps at 720px.
ss-grid · is-2 · is-4
Three columns by default with a 24px gap; two or four with the modifiers. Collapses to two at tablet and one at mobile.
Radius & borders
4px buttons and inputs, 8px cards and images, 16px the feature block only. Borders are 1px Stone. The only shadow is the card lift: 0 2px 7px at 6%.
06 — Cards & components
ss-card-v2: white surface, 1px Stone border, 8px radius, 28px padding; hover lifts the shadow and turns the border teal. Slots, in order: ss-card-media (16:10 image) or ss-card-icon (48px), ss-card-title (H4), ss-card-text (body), then ss-card-cta (teal mono link) or ss-card-meta (date, category) pinned to the bottom, and ss-card-badge for states like Coming soon. Add .is-link when the whole card is the link. Lay cards out with ss-grid (3 / 2 / 1 columns, 24px gap). This is now the only card on Home, Features, Resources, Compare, Articles and How it works.
Shooting
Genuine Reasons and licence/PTA expiry tracking, range-officer sign-in, attendance and participation compliance, and live scoring.
Shooting club softwareCar clubs
Club historic registration done properly — eligibility, logbook issuance and the lapse-of-membership risk handled — plus vehicle showcases and events.
Car club softwareAssociations
Run the whole network — national, state and club — on one platform, with reporting and compliance that roll up across every affiliate.
Association management softwareSection header
Eyebrow, H2, optional lead. Left-aligned by default; centred only above a symmetrical card grid.
CTA band
Ink ground, topographic line art at 12% opacity, H2 in white 300, one inverse primary button. One per page, near the end.
Split feature
Text column 50% capped at 560px, image column 45% with 8px radius, vertically centred. Alternate sides; never bleed off-canvas.
Comparison table
Ink card with the SquadSpot column lifted in teal. The Home version is the reference — reuse it on every Compare page.
FAQ
Accordion, closed by default, Stone dividers rather than cards, H4 questions, 720px wide.
07 — Working rules
1
Start from a component, not a copy. New sections are assembled from Section header, Card, Split feature, CTA band and FAQ.
2
No new numbers. Sizes, spacing, widths and radii come from the variables. If a value isn’t in the scale, the scale is wrong.
3
No new classes without the ss- prefix: ss-block, ss-block_element, .is-modifier. An auto-numbered “Heading 18” is a signal to stop and reuse.
4
Tags do the heavy lifting. H1–H4 and Paragraph hold the scale, so an unstyled heading is already correct. Classes only add layout or colour.
5
Teal means interactive. Links, eyebrows and icons only. Body copy is Neutral 700; headings Neutral 800 or white.
6
Measure quarterly. Re-run the audit script so drift shows up in numbers before visitors notice it.
