Style guide

Seven named colours plus four tinted grounds. Components never use a raw hex value — every colour below is a CSS custom property declared in globals.css.

Two families, four weights in total. Bricolage Grotesque (700, 800) for display; Instrument Sans (400, 600) for everything else. Both are self-hosted through next/font and subset to Latin.

• display-1

  Hero headline only. One per page.

  Train up a child

• display-2

  Page H1, CTA band headline.

  Train up a child

• h1

  Section headings.

  Six things you can check

• h2

  Sub-section headings.

  Curriculum and assessment

• h3

  Card and block headings.

  Guided reading in sixes

• h4

  Small card headings, labels.

  Class sizes capped at 22

• lead

  Standfirst under a heading.

  Classes capped at 22, and reports that tell you the truth.

• body

  Default paragraph.

  The quick brown fox jumps over the lazy dog, 0123456789.

• small

  Card copy, form labels.

  The quick brown fox jumps over the lazy dog.

• fine

  Meta, captions, hints.

  The quick brown fox jumps over the lazy dog.

Every field has a real <label>, a stable id, and wires its error message to the input with aria-describedby and aria-invalid. Live examples are on the contact page, the tour form and the four-step application.

• Text, email, tel, date, numberTextField
• Multi-lineTextArea
• Single choice from a listSelectField
• Multiple choiceCheckboxGroup
• One of a fewRadioGroup
• ConsentConsentBox
• Spam trapHoneypot
• Submit with pending stateSubmitButton
• Success / error bannerFormMessage

The school’s crest — a quartered shield carrying a book, an abacus, a torch and a pencil, over a ribbon reading “Train up a child”. Supplied as artwork and used as an image rather than redrawn: tracing a crest by hand always loses something, and at the sizes used here a PNG is smaller and more faithful.

• 

  lockup.png

  Full lockup, for print and documents

• 

  shield.png

  Header, mobile menu, light grounds

• 

  shield-light.png

  Footer and any burgundy band

• 

  icon-512.png

  Favicon, app icon, social card

Drawn in-house at 24×24 with a 1.7 stroke, so weight and corner radius match the rest of the design. No icon library is downloaded at runtime.

• class-size
• curriculum
• reading
• ict
• safeguarding
• teachers
• bus
• meal
• clinic
• clock
• calendar
• cedi
• document
• download
• phone
• mail
• pin
• sport
• music
• art
• chat
• shield
• search
• check
• users
• globe
• lab

• tone=“paper”

  Hairlines and tinted grounds do most of the work; shadows are used sparingly and are always tinted burgundy, never neutral grey.

  Read more

• tone=“mist”

  Hairlines and tinted grounds do most of the work; shadows are used sparingly and are always tinted burgundy, never neutral grey.

  Read more

• tone=“outline”

  Hairlines and tinted grounds do most of the work; shadows are used sparingly and are always tinted burgundy, never neutral grey.

  Read more

• tone=“burgundy”

  Hairlines and tinted grounds do most of the work; shadows are used sparingly and are always tinted burgundy, never neutral grey.

  Read more

The arch is the signature shape — a doorway rather than a generic blob. Three masks cover the whole site.

• mask-arch

  Portraits, hero images, feature photographs

• mask-arch-soft

  Wide collage images

• mask-leaf

  Thumbnails, news cards, secondary images

Placeholder artwork

Every photographic slot is registered in content/images.ts with alt text, aspect ratio and the shot required. Until a real photograph is supplied, the slot renders deterministic on-brand artwork captioned with the shot needed — so nothing is ever broken, and replacing a placeholder never shifts the layout.

CSS scroll-snap does the scrolling; JavaScript only adds the arrows and keeps their disabled state in sync. No carousel library, no autoplay, and it works with JavaScript switched off.

Wraps in its own horizontally scrollable, focusable region so a wide table never makes the page scroll sideways on a phone.

Pure CSS on a duplicated list; the second copy is hidden from assistive technology. Pauses on hover and stops entirely under prefers-reduced-motion.

Alternating grounds are what give a page its rhythm. Every band on the site goes through the Section component rather than styling its own background.

• paper
• mist
• blush
• sand
• burgundy
• blue

Home page order: blush → paper → mist → burgundy → paper → sand → paper → blush → burgundy → paper → gold → burgundy.

• The signature moment — hero, on load

  The headline rises line by line while the arch-masked photograph opens from a small doorway to full height, and the star cluster settles last. Pure CSS, so there is no JavaScript on the largest-contentful element. Runs once.

• Everything else — quiet

  A short opacity-and-translate reveal on scroll, once, via IntersectionObserver (about 1KB, chosen over an animation library to protect the JavaScript budget). Stat counters count up once. Hover states are 200ms colour and shadow transitions.

• Reduced motion

  A global rule in globals.css reduces every animation and transition to 0.001ms. The reveal renders instantly, the counter shows its final value, and the marquee stops.

• One <h1> per page, and heading levels never skip.
• Skip-to-content link is the first focusable element on every page.
• Focus is a 3px gold outline with a 3px offset — visible on light and dark grounds alike.
• Every interactive target is at least 44×44px.
• Colour is never the only carrier of meaning; status pills carry text as well as tone.
• Decorative SVG is aria-hidden; meaningful images carry real alt text from content/images.ts.
• Modal dialogs (mobile menu, lightbox) trap focus, close on Escape and restore focus on close.
• Carousels are labelled scrollable regions and are keyboard-reachable.
• Form errors are announced through aria-describedby, and status banners use role="status".