Premium Navy / Editorial — guidelines

Page template

Every page is built from the same shell. Take content from live verbatim; do not inherit live's per-page chrome. Where a live section genuinely carries meaning — a carousel, a closing CTA band, a two-column hero photo — port that section into this template.

• Shell, in order: <SiteChrome /> (announcement bar + navbar) → <main> → <Footer />. The footer is our dark navy band sitewide; live's is white. Standing decision — don't re-litigate per page.
• Container: 1240px max, canvas margins from --pad (desktop 100 / laptop + tablet 50 / phone 24).
• Breakpoints (they match the Framer frames): phone <810, tablet 810–1023, laptop 1024–1439, desktop ≥1440. Check all three of 390 / 810 / 1440 — past misses existed at one width only.
• Section padding: 80px top and bottom for a content section; 72–80px for a closing band. Tighter than that and the page reads cramped against live.

Hero

• Marketing hero — navy band, headline in the Market Pro script (--display-script). Used on /perks, /careers, course and level pages.
• Utility hero — navy band, headline in Euclid Bold (--display). Used on /links, /app-privacy-policy, /404 and other pages that are being read rather than sold.
• Two-column hero with a photo: copy left, photo right at ≥1024, photo capped at 600px with the asymmetric "leaf" corner (border-radius: 120px 24px 24px 24px). Below 1024 it becomes ONE CENTRED column with the photo first, then the headline — the same order as the course leaf heroes.
• Hero CTAs: side by side from 810 up (each filling half the column when the hero is centred); stacked full-width on phones, so they stay comfortable tap targets.
• The script face appears ONCE per page, and only in the hero. Market Pro (--display-script) is the marketing hero headline and nothing else — not section headings, not the closing band, not cards. Everything else is Euclid Bold (--display). /careers was using it twice, in its hero and its closing band, which no other page does (John, 2026-08-01). Enforced by node scripts/maintain/check-contrast.mjs --all.

Section headings

• Euclid Bold, centred: 40px desktop / 32px tablet and laptop / 24px phone.
• On a dark band you must write color: #fff !important. global.css sets h1, h2, .h2, … { color: var(--ms-navy) !important } sitewide, so a scoped rule loses and the heading renders navy-on-navy — invisible, while still passing the text-parity gate. This has shipped once. Run node scripts/maintain/check-contrast.mjs --all.

Imagery corners

• Every image on the site uses the standard corner — border-radius: var(--r-card) (10px). Hero photos, card photos, worksheet shots, carousel frames: all the same.
• Do not port live's per-page image treatments. Live uses an asymmetric "leaf" corner on some heroes (a large radius on one corner only) and 20px tiles elsewhere; those are page-by-page decoration, not a system. Standardised 2026-08-01 (John) — /perks was the last page carrying the leaf corner.
• The only deliberate exception is the full-bleed photo band, which has no corners at all.

Filter chips

Two shared classes in global.css — .filter-chips for the strip and .filter-chip for each button — used by the blog tag strip, the careers department filter, the locations region filter and the perks category filter. There used to be four hand-rolled copies that had drifted apart: locations ran 16px Medium with no fill and an 8px gap, blog 13px, careers 14px, perks plain text copied from live; two were centred and two left-aligned. Standardised on the blog/careers treatment, centred, 2026-08-01 (John).

• Strip: .filter-chips — flex, wraps, centred, 10px gap. Centred on every page, under the (centred) section heading. Don't re-align it per page; that is the drift this replaced.
• Chip, resting: Euclid SemiBold 14px, navy text, --surface fill, 1px --border, fully rounded, 8px/18px padding. Active: navy fill, white text.
• A chip is a control. If it doesn't filter anything, don't render it. Derive the strip from the data so a category with nothing behind it simply doesn't appear — and comes back on its own when content exists. /perks shipped a strip copied from live where clicking a tab did nothing (live's own filter is broken); the categories were in the CMS the whole time.
• Keep the page's own class on the button as the JavaScript hook (.btags__chip, .dir__tab…) and add the shared classes for appearance. Page-specific layout — blog's 860px width cap, section margins — stays local.

Closing CTA band

• Full-width --ms-navy, centred, 72–80px padding, white heading and body copy, one white pill button (variant="primary" onDark).
• Heading in Euclid Bold at the 40 / 32 / 24 scale — never the script face; that belongs to the hero (see above).
• Live examples: .crcta on /careers, .rgcta on /registration, .pkpartner on /perks. Where live uses its own page-specific blue, we use the brand token.

Colour

Navy leads. Red is the single accent — eyebrows and inline links only, never a button fill.

Type

Two display faces, and the split is by role, not by page. The Market Pro brush script (--display-script) is the brand signature, and the hero band headline is the brand slot — so it runs on the hero H1 of every marketing page, homepage and course pages alike. It stops there: it is scoped to the hero classes rather than to h1, because it earns its keep on a short branded headline at 34px and up, and would hurt on a long blog title or a utility page. Everything else — section headings, sub-heads, labels and body — is Euclid, with headings on the Bold cut (--display).

Euclid ships a real italic cut (--font-italic), so a pull quote is a genuine italic rather than a slanted Bold. Use it sparingly — the editorial pull quote is the main case. Headings stay upright: italic is not part of the display set.

Corners

Radius is "Crisp" — editorial-premium without going cold. Every component reads these tokens, so the whole system re-rounds from one place. Circular is reserved for icon buttons (carousel arrows).

Buttons & links

One shape. Two contexts. Two roles, plus a tertiary text link. That is the whole system.

• Primary carries the main action per section — at most one. Props: variant="primary".
• Secondary is the supporting action (enquire / WhatsApp). Props: variant="secondary".
• On photo or navy bands add onDark — primary inverts to white-filled, secondary becomes a ghost outline.
• Conversion CTA (variant="cta") is the ONE red-filled button in the system, and it exists only on campaign pages — the single action that page is there to produce. John's call (2026-08-01): live called this out in red and it was doing real work. It stays rare on purpose; a second red button on the same screen cancels the first. Everywhere else the primary action is navy.
• Tertiary is the red “… →” text link, used inside cards only.
• External and PDF links open in a new tab (the component adds target="_blank" + rel="noopener noreferrer" for any http(s):// or .pdf href). In-site navigation and in-page anchors stay in the same tab, preserving the browser-back convention. Pass an explicit target to override.
• No glossy or gradient fills; hover is a 1px lift, nothing more.

Cards

Borderless editorial card — image, optional tag, title, teaser, red CTA. The image radius, tag and type all read tokens. Set --sl-lines / --sl-title-lines on the container to reserve consistent heights so every CTA lines up across a row.

The Final 3 Months to PSLE

Primary 6 lessons move fully into exam preparation across all four subjects, with Last Lap Bootcamp and cher.ai free while enrolled.

Find out more →

National Youth Orator Championships 2026

Entries close 13 September, or 18 October for Primary 6. Over 500 students took part in 2025. Primary to University, free to join.

Register Now →

Limited slots available!

Mind Sparks Student Care Open House

Open houses run from August to September at eight centres, including our new Jurong Point, Bukit Timah and Clementi centres.

Register Now →

• Props: image, title, body, href, cta, tag?, ratio?.
• Square ratio="1 / 1" for promos; landscape (e.g. "285 / 200") for level photos.
• Only the title and CTA are links — never wrap the whole card (it breaks on nested links).

Carousel

Pure-CSS scroll-snap row of cards (no library). Navy circular arrows on laptop and desktop; on phones the arrows drop and a swipe hint appears. Drives "What's Happening" on the home page.

The Final 3 Months to PSLE

Primary 6 lessons move fully into exam preparation across all four subjects, with Last Lap Bootcamp and cher.ai free while enrolled.

Find out more →

National Youth Orator Championships 2026

Entries close 13 September, or 18 October for Primary 6. Over 500 students took part in 2025. Primary to University, free to join.

Register Now →

Limited slots available!

Mind Sparks Student Care Open House

Open houses run from August to September at eight centres, including our new Jurong Point, Bukit Timah and Clementi centres.

Register Now →

Limited slots, from $25 per hour

Biology Grade Accelerator Programme

86 hours of O-Level Biology preparation over 22 weeks, with weekly lab practicals and tutorials across all three papers.

Register Now →

P3 High-Ability Learners' Bootcamp

An 18-hour online bootcamp for the August 2026 High-Ability Learners Identification Exercise. Free for our P3 students.

Find out more →

Limited time only

1-Week Unlimited Trial Classes

A week of unlimited classes across Pre-Primary, Primary and Secondary, for $107.91 ($99 + GST). T&Cs apply.

Book now →

Limited time only

Free Trial Class in Punggol

Try a free class at Punggol Coast Mall or Northshore, with up to 20% off monthly fees when you bundle subjects.

Find out more →

Master Speakers AY 2026 Registration

Build communication, presentation and interview skills for Academic Year 2026, with more than $1,000 in savings.

Find out more →

Swipe to see more →

• Props: perView (cards per view, default 4), gap, label.
• Slot any cards as direct children; the track sizes them and one bundled script wires every carousel.
• Responsive: 2-up on tablet, ~1 card on mobile, regardless of perView.

Marquee

Infinite ticker. Slot the items once — a bundled script clones them for a seamless loop, so you never duplicate markup. Pauses on hover and respects reduced-motion. Drives the "We've been featured in" strip.

• Props: speed (seconds per loop, default 120), gap, label, reverse (scroll right — for two stacked rows drifting in opposite directions).
• Items size themselves — fixed-width cards or self-sizing logo chips both work.
• A photo strip is a marquee, not a carousel. Photographs that are atmosphere rather than content — event and ceremony shots — drift past on their own and need no arrows: set them to a fixed height with width: auto, run the strip full-bleed (margin: 0 calc(50% - 50vw)), and let it carry the whole set. 200px tall on laptop and desktop, 150px on phones (/achievement-awards, /registration). Reserve Carousel — which costs arrows, a swipe hint and a decision — for cards a visitor is meant to READ, like testimonials or programme cards (John, 2026-08-02).

FAQ accordion

Hairline-divided question rows with a plus that folds to a minus — FaqAccordion, built on native <details> so every answer ships in the HTML.

• Props: items — [{ q, a }]. Content comes from a data file (e.g. src/data/fees.js), never hardcoded.
• Questions are navy --font-bold; answers body ink. No red — the accordion is structure, not accent.
• Pair with a centred section heading; the list column caps at 720px. Campaign pages pass wide to drop the column.
• An answer may carry buttons — an optional ctas array per item, rendered as outlined buttons under the prose. Live's /registration answers "How do I enrol my child?" with two buttons, and "Where do I view all the schedules?" with a button and no prose at all, so an item can legitimately have buttons and an empty answer.

Full-bleed image band

An image that runs edge-to-edge, breaking out of the content column — the worksheet collages on the level pages ("Our Commitment to PSLE Excellence"). John's call (2026-08-01): keep this variation — a page of uniformly boxed images is monotonous.

• Place the <img> OUTSIDE .container: width: 100%, no border-radius, no card chrome, no scrim.
• Use for wide, busy artwork (collages, panoramas) that rewards the extra width — not portraits or icons.
• loading="lazy" below the fold; source ~1800px wide (2× its ~900px desktop render).
• Live examples: /levels/p5 and the stage hubs' worksheet band.

Imagery

The hero keeps the video. Two bands — Track Record and the closing CTA — become full-bleed achievement-awards crowd photos under a flat navy scrim, to convey scale and occasion. Content sections stay clean light surfaces so the photography lands as a deliberate accent, not wallpaper.

Photo stack — tap, click, swipe or use the arrow keys to send the front photo flying and reveal the next. A reusable component for galleries and event recaps.

• Props: images (front-to-back), ratio?, label?.
• Standalone single set — the home Event Highlights deck keeps its own tabbed variant.

Campaign pages

A second vocabulary, for pages whose job is to get someone to register — the promo pages (/psle-power-up-programme and its siblings). John's call (2026-08-01): "pages that are like psle-power-up should be conversion focused and not just force-fixed into the standard site template." So these keep our brand in full — navy and red, Euclid and Market Pro, the same buttons and radii — but not the standard content-page layout.

• Headlines are Euclid, not the brush script. A campaign page does not have to open with Market Pro (John, 2026-08-01) — the script stays the homepage's brand slot, and a long programme name reads better set in the display sans.
• What stays standard: site nav and footer, colour, type, buttons, corners, card language. A campaign page must read as the same site.
• What differs: a conversion hero instead of the centred navy hero, a sticky section-nav row, dense tables, and a phone-only bottom CTA bar.
• The local nav bar is for LONG pages only (John, 2026-08-01) — a page you can take in with a couple of swipes (e.g. /achievement-awards) doesn't get one. Its CTA label names the page's own action ("Register Now", "Apply Now") — never a default. A scroll-spy keeps a red underline pinned under the section you are in (hover alone teased an affordance that vanished) — the same treatment at every width (John, 2026-08-01).
• Section intros are body size (--text-body, 17px), not --text-lead (19px). Lead is for a SHORT section sub-head — which is what the homepage uses it for. A campaign intro is a two or three line explanatory paragraph, and at lead size it reads as heavy as the heading above it.
• Comparison tables keep two columns at every width. Stacking them into labelled pairs on phones repeated the column names on every row and doubled the height — and a comparison you scroll through in single file is no longer a comparison. Narrow the columns instead.
• Section padding is 72px (56 at tablet, 40 on phones) — matching our own /fees page. An earlier 88px stacked with the CTA margins into ~130px voids and made the page taller than live at desktop. Check a new page's total height against live at all three widths; it is the fastest way to catch spacing that has crept.
• Phones get a tighter page, not just a narrower one. Section padding, card padding and prose all step down at 809 — the first build of the flagship ran 27,400px tall on a phone against live's 24,400, which is three extra screens of scrolling for the same content. It now comes in under live. A card grid of four tall items becomes a swipeable carousel (scroll-snap, no JS) rather than a four-deep stack.
• A directory embedded in a long page paginates; a directory that IS the page does not. LocationsDirectory takes initial=6 to show six cards behind a "Load More", and nested to drop its branch names from a top-level heading to a sub-heading. /registration uses both; /locations uses neither. All 30 cards stay in the HTML either way, so the page works with JavaScript off and search engines see everything.
• Components live in src/components/campaign/. Content comes from a data file generated from live — never hand-typed.

Subject accents

Colour-coding a subject carries meaning — a parent scans six cards for "Maths" and finds it by colour before reading a word — so it is part of the system, not decoration. These alias the accents already in global.css; no new hues enter the brand.

• Navy still leads. An accent may set a card's top rule, its figure, or a small chip.
• Never a background. An accent-filled section or card is what made the old promo pages read as a different website.
• Higher Chinese shares the Chinese accent. Anything without a subject uses --subject-default (navy).

Figures & callout bands

One component, four grounds — so a band never has to fight whatever sits above it. The rule that matters: a band cannot repeat the ground it follows. A navy strip under a navy hero merges into one very tall dark block, which is what made the first build of /psle-power-up-programme feel heavy.

• tone="tint" — a quiet wash, navy text, hairline dividers. The default, and the right answer after a navy hero. Live uses exactly this for its claim strip on /final-sprint-to-psle.
• tone="navy" — the dark strip. Strong, but only where the section above it is light.
• tone="red" — the loudest thing in the system. At most once per page, and never beside the Register button, which is also red. Pairs with numbered, as on live's 1-2-3 strip.
• tone="plain" — white, hairlines top and bottom. The lightest.
• Weight is a second axis (John, 2026-08-01): variant="feature" is for the claims a page LEADS with; variant="quiet" is the subtle row — ONE compact centred line, small semibold items separated by short thin hairlines, matching live's own trust bar — for trust strips ("20+ years of proven results…") and soft callouts that support the page rather than headline it. If the row is reassurance rather than an argument, it is quiet.
• Headline figures (“2 in 3”, “50%+”) take rule="red" — a red rule down the left, the site's own stat marker from /fees and the homepage. Label-led claims take rule="divider", so the row reads as one object.
• On a campaign page the headline figures usually belong inside the hero, sharing its container and padding — they are part of the opening claim, not a band of their own.
• panel turns the band into a rounded card inside a section rather than a full-bleed strip — the red numbered 1-2-3 device on /final-sprint-to-psle. It runs denser than a band: card-title type on tight padding. Shown second below, which is the form the page actually ships.
• On phones the panel insets its ITEMS, not its box, so the hairlines keep running edge to edge. Numbered discs centre against the whole claim (live's own rule) — top-aligned they hang off the first line of any title that wraps, which at phone width is all of them.
• Divider colour follows the tone, on both edges. The hairline is --ms-navy-line only on navy; tint takes --border and red a white 28%. This bit us twice: the divider moves from the left edge to the top edge at 809px, and for a while only the left-edge colour was toned — so tinted bands drew dark navy hairlines on a light ground, and the red panel ruled itself in navy (John, 2026-08-02).

Section rhythm

A campaign page runs 6,000px and more. One flat white scroll reads as a wall, so sections alternate white → --surface tint → a full-bleed --ms-navy-deep band. Navy is not rationed to content pages or to one use per page (John, 2026-08-01) — the only rule is that two bands never sit back-to-back, because they merge into one very tall dark block. Figures come in two forms, below; the navy band shown here is the label-led one.

Calling out a phrase

Two devices, both from /final-sprint-to-psle. A drawn, handwriting-style stroke was tried and dropped — it looked odd (John, 2026-08-01) — so the rule is straight. Both take any accent, red by default, and both are opt-in per section: applying them to every intro automatically turned an accent into wallpaper.

• Rule (variant="rule" / "inline") — a straight underline, running unbroken through descenders. Best on a short phrase; under six or seven words it starts to read as a link.
• Marker (variant="marker") — a highlighter wash behind the lower band of the words, the same gradient technique live uses. Softer, and it carries a long phrase without looking like a link. This is what the section intros use.
• One phrase per section. Emphasis that repeats stops being emphasis.

The inline variant is the same rule at body-copy weight, for an emphasised phrase inside a sentence: “our Primary 6 lessons move fully into exam preparation, with an intensive bootcamp over the September holidays.” Section intros on light grounds pick this up automatically wherever the copy is bold.

Segmented controls

Tabs and toggles are switches, not buttons: a recessed tinted track with a raised white pill on the selected segment. They used to be navy-filled when selected, which read as a second primary button sitting next to the real one (John, 2026-08-01). A filled button says "do this"; a segmented control says "pick one of these". Live examples: the subject tabs and the two fee toggles on /psle-power-up-programme.

They stay ONE row on phones (John, 2026-08-02) — the padding tightens and the label drops to --text-xs, but the strip never wraps into a 2×2 block, because a control only reads as one control while it stays one strip. Four one-word segments fit at 320px. If labels are long enough that they genuinely cannot, that is a sign the tabs want shorter names, not a second row. Two components share this behaviour: SubjectTabs (exam-pack content) and Tabs (free-form panels, e.g. /final-sprint-to-psle) — keep them in step.

Dense tables

Schedules and fee matrices stay light. A solid navy header bar with white text and zebra-striped rows turns a schedule into a wall of chrome (John, 2026-08-01) — live's own tables are far quieter and they are right. The rules: a tinted header with small grey uppercase labels and a single bottom border; no striping; one hairline between rows and none after the last; the leading value in each cell emphasised and its supporting value quiet beneath it (the date reads first, the time supports it). Subject dots are circles, so they read as a marker beside the name rather than a second chip competing with the ones on the cards. Below 810 the table keeps its shape and scrolls sideways inside its own container, with the first column pinned — the page body never scrolls horizontally.

• Two-line headers split at <br>: the label leads in semibold uppercase, and the second line — a place, a venue — sits under it in regular weight and sentence case. Flattening both into one uppercase run loses the hierarchy.
• Status pills ("Rescheduled") are amber, so they read as "note this" without competing with the red conversion accent.
• Width follows content. A four-column fee matrix stretched to the full 1240px container looks adrift — it caps at 720px and centres. Wide schedules keep the full width.
• Savings read as a gain — green pills, the same green as the page's ticks.
• No frozen columns on phones. A pinned first column floating over the scrolling cells reads as a glitch. And the minimum width scales with the COLUMN COUNT, not one fixed number — three-column tables then fit a 390 screen outright and only a five-column grid needs a nudge sideways.
• Every date is emphasised, in every table. Live marks its date cells two different ways — a class on the <td> in some tables, on an inner <span> in others — and reading only one of them left half the schedules unstyled. Dates lead in semibold navy, times support in grey.

People cards

Whether it's a student or a teacher, the name leads — bold, and a clear step larger than anything under it. The role or school sits smaller and quiet, and the bio smaller again. Our first version had the name, the role and the bio within a whisker of each other in size, with the role in red, so the loudest thing on the card was a job title (John, 2026-08-01).

• Name 17px Euclid Bold navy (15px on the compact video card). Role / school 13px, --ink-soft, never red. Bio / quote 13px, --ink-soft.
• Portraits are circles and stay small — 84px on a teacher card, 38px beside a name. A big portrait pushes the words that matter below the fold of the card.
• A video testimonial leads with the header row (avatar · name · school · score pill), then the quote in Euclid's real italic. No rule down the side: it competed with the header for attention and the italic already reads as a quote.
• One score pill, everywhere. Light ground, hairline border, navy text, sentence case — the same on a written quote and on a video card. A second, louder treatment for the same fact in two sections of one page reads as two different things.
• Size the portrait so the header resolves to the same number of lines on every card. A portrait wide enough to wrap the longest name runs one card deeper than its neighbours and the pills stop aligning across the row.

Batch-A additions (the six short promo pages)

Components added while building /one-week-trial, /promotions, /student-referral-programme, /punggol-coast-northshore-promo, /achievement-awards and /mentorship. Same rule as the rest of the kit: solve it once here, never inline on one page.

• IconList — the promo pages' workhorse list: filled navy circle carrying a drawn tick or the item's number, text hanging right, hairlines between items, bold lead-in phrases in navy. The circle top-aligns against wrapped text, as live does. Ticks are drawn in CSS, never typed — a ✓ character leaks into the copy the text-parity gate reads.
• SubjectListCard — level card with subject chip-rows (/one-week-trial and the Punggol page's "Available Subjects"). The rule under the card title is full width — deliberately distinct from the section-heading device; live keeps the two apart on both pages. These grids stack to ONE column below desktop — a 2+1 row orphans the third card.
• PromoCard — offer card: value chip above a centred title, optional big red offer line (red marks money on these cards, matching live), left-aligned body, quiet note, red CTA pinned to the card foot so a row of unequal bodies still lines up. featured adds the navy border live uses to single out its biggest saving — at most one per grid.
• CampaignCta — the closing deep-navy band every promo page ends on (the flagship's treatment, extracted). ONE red conversion button; further actions render as ghost buttons. Give it id="register" and point the mobile StickyCta at it.
• CampaignHero pills — offer-value chips under the hero copy ("$107.91 / ($99 + 9% GST)", "FREE Trial Class / Limited time only"). Claims, not actions: hairline chips, never a red fill — a red chip beside the red Register button reads as two buttons.
• PersonCard initials — avatar fallback when there is no photo: a navy disc with the person's initials (the Punggol testimonials). Navy, not red.
• PersonCard layout="photo" — the one shape whose portrait is not a circle. A full-width 5:4 photo across the top of the card, a hairline under it, then the quote and the name. Use it when the photograph is the point — a student on results day, with their family — because an 84px circle throws that away (John, 2026-08-02, /registration). The crop is anchored near the TOP: several of these are portrait-format with faces in the upper third and a centred crop beheads them, the same lesson the /mentorship roster learned twice. Pair it with Carousel rather than a grid; five quotes of different lengths in a row need the carousel's equal-height stretch, which is why the variant overrides the base card's height: 100% back to auto. On phones the photo stays edge to edge and the body tightens to 16px. The generic phone card padding inset the photo 18px inside its own card, which on a 280px card reads as a picture in a frame in a frame, and 24px of side padding squeezed the quote into a column (John, 2026-08-02).
• ProofBand bare — renders the band as a bare row inside a CampaignSection (no padding or ground of its own) so a stat row can sit under a section heading without double-padding. Marquee reverse — scroll right instead of left, for two stacked photo rows drifting in opposite directions (/achievement-awards). FaqAccordion answers accept a box part — an inset tinted panel for worked examples (/one-week-trial).
• Emphasis translation on /mentorship: live's serif + gold become Euclid + our accents — the voice/data split is rebuilt from weight, size, case and Euclid's real italic; gold kickers and rules map to red, gold structure lines to hairlines. No new font families, no new hues.
• The one guest-brand exception: cher.ai (John, 2026-08-01, extended 2026-08-02). A real product with its own identity keeps it INSIDE its own card — cream ground, rust links, a black button, the pixel Nub + serif wordmark — on /final-sprint-to-psle. It is also the only place on the site running fonts that are not ours: cher.ai's own Lora + DM Sans, self-hosted and imported by that page alone, because a guest brand set in the host's typeface is not the guest brand. The exception is the card's edge: none of it leaks into the page around it, and no other section gets one. Everywhere else the no-new-fonts rule stands (see /mentorship above).
• Cards fill their rows. Grid rows stretch cards to equal height (CSS default — don't set align-items: start without cause): a short card beside a tall one reads as "random boxes" (John, 2026-08-01). Top-align only where ragged heights are the design, e.g. /mentorship's roster.
• DataTable spine + milestone rows: a first-column cell can render as a solid accent block filling the row (fill — Biology GAP's week column), and a full-width row can carry mark: 'alert' — a pale red wash with crimson text for exam dates and other checkpoints.

Offer card & comparison

Card chips carry different brand accents, one per card in order. Four chips in the same blue-grey read as dull and tell a scanning parent nothing apart. The chip is a 10% tint of the accent with the accent as its text colour — never a solid fill, which would compete with the red Register button. Available tones: navy, red, blue, orange, green, grey.

The offer card is the standard card plus two campaign additions: a tag chip, and an inset "what's included" list. The comparison table sets us against the alternatives — ours is the emphasised side; the other column stays quiet grey, never red (red is the brand's single accent and spending it on a competitor would be the wrong signal). Ticks and crosses are DRAWN, not typed, so they can't leak into the copy the text-parity gate reads.