Primer School
primer.com/a microschool network that dresses a serious education argument in confident editorial design: a Sirca display serif over Soehne grotesque body, full-bleed primary-colour bands (yellow #FED933, blue #377EF0, orange #FE6D2E) and a literal graph-paper grid motif, sharp 2px corners, Webflow plus Lenis smooth scroll.
Design tokens
- display
- Sirca
- body
- Soehne Buch
- mono
- none
Do / Don't
Reference it for
- A serif-display-over-grotesque pairing (Sirca + Soehne) that reads as both rigorous and modern, ideal for an education brand needing authority and warmth.
- Bold full-bleed primary-colour bands (yellow #FED933, blue #377EF0, green, orange #FE6D2E) used as whole sections, not accents.
- A graph-paper grid motif as a structural, on-theme texture for a learning brand.
- Sharp, almost-zero radius (2px) and zero shadow: a flat, editorial, print-like system.
- A clean Webflow + Lenis build with one decisive easing (cubic-bezier(0.76,0,0.24,1)) carrying every transition.
Do not copy
- The primary-colour-blocks-plus-graph-paper identity is Primer's signature; borrow the structural idea, not the literal yellow/blue/grid look.
- Sirca and Soehne are licensed; map to a similar display serif plus grotesque pair.
- The "real students, no models" framing and crowd hero are Primer's brand claim; reproduce the confidence with the client's own proof.
Signature moves
serif-display over grotesque for authority plus warmth
a display serif (Sirca) over a grotesque body (Soehne) across a 12-56px scale reads as both rigorous and modern, ideal for an education brand needing authority and warmth.
full-bleed primary-colour bands as whole sections
bold primary-colour bands (yellow #fed933, blue #377ef0, orange #fe6d2e, green) are used as entire sections rather than accents, with a graph-paper grid motif as an on-theme texture.
Related references
Gumroad
strongMarketing Platform
The reference for playful creator-platform branding — chunky black filled CTAs, cream background, hand-drawn pink coin illustrations, ABC Favorit at 96px.
Lava Dental
flagshipOther
A dental clinic that turns the most anxiety-inducing service into calm and reassurance - a deep forest-green canvas, a rounded geometric display, and a circular arc-timeline that carries you through "peace and safety during every appointment".
Notion
flagshipSaas Product
warmth at scale - a vast product suite made to feel friendly and human through warm neutral colour, a customised Inter, serif editorial accents and approachable copy.
Parsley Health
flagshipHealth
a functional-medicine telehealth clinic that earns trust through calm, a deep forest-teal and warm-cream palette, an EuclidCircularB-plus-Teodor-serif pairing, a long evidence-led page of credential blocks, comparison tables and measurable outcomes, all on a clean Next.js + Tailwind build.