Alliance Française de Bloemfontein
Design system
Every token, class and pattern used to build this site. Build pages from these — if something you need is missing, the pattern library has a gap and should be extended rather than styled one-off.
Brand colours
The Alliance Française network contract. Identical on Johannesburg, Potchefstroom and Gaborone — never re-valued per branch. Pick these by name from any colour control.
Neutrals
Text, hairlines and backgrounds. Body copy uses Body Text; secondary copy uses Muted.
Spacing scale
A 4pt scale. Use these for every margin, padding and gap — never a loose pixel value. This is what keeps vertical rhythm consistent across pages built by different people.
Type scale
Poppins throughout, PT Serif reserved for display pull-quotes. Use the Heading element with a tag set — never a styled div.
Heading LG — 56px
Heading MD — 42px
Heading SM — 32px
Text XL — 24px
Text LG — 20px
Text Base — 17px · body copy
Text SM — 15px
Text XS — 13px · eyebrows and meta
PT Serif — display and pull-quotes only
Layout classes
Put a wrap inside every section to get the 1200px content column and responsive side padding. The grids collapse on their own at phone width.
section + wrap + grid-3 — card grid, auto-fits at 280px
grid-2 — two equal columns, stacks at 767px
Callout
Blue left rule. For notes and asides.
Callout red
Same block, red rule. For deadlines and required reading.
split — media beside copy, centred, wider gap
Our centre
Learn French in Bloemfontein
The split class pairs media with copy and stacks cleanly on mobile. Add split-reverse to put the image on the other side — it un-reverses itself once stacked, so the image never ends up below its own caption.
Brand elements
Small brand details used across the site. Reach for a native element first — these cover the cases where none fits.
badge
CEFR levels, categories and short labels.
tick-list
For prose. Prefer the Checkmark List element where you need icon control.
State modifiers
Modifiers adjust an existing block. They never introduce a new component.
is-center
Centred section head
Combine with prose-center to centre a measure-limited paragraph.
is-dark
Blue band
Use is-light on children to flip text white.
How to build a page
1. Start with a Section container. Add the section or section-mist class to alternate backgrounds down the page.
2. Put a wrap container inside it. Everything else goes in there.
3. Insert a Component from the library — Hero, Course Card Grid, CTA Band, Team Grid. Fill in the labelled fields in the right-hand panel.
4. For one-off content use real elements: Heading, Text, Button, Image, Icon Box, Accordion. Set colours and fonts from the named swatches.
5. Check the phone breakpoint before publishing.
You should never need to write CSS. If a layout you need is not here, that is a gap in the library — ask for it to be added rather than styling one element by hand. That is what keeps every branch site consistent.