Northstar Academy

The Northstar design system.

A calm, premium foundation for an adaptive KS2 maths platform — built on the same primitives that power Stripe, Linear, and Notion, then warmed up for children and the parents who guide them.

Fraunces + Inter4-px gridWCAG AA contrastTailwind + React

foundations

Principles

The handful of rules that keep every screen consistent.

Calm by default

No bouncing animations, no streak shame, no harsh contrast. Soft cream backgrounds let content lead.

Readable for 8-year-olds

Question stems start at 28px. Body never drops below 14px. Inter's open shapes preserve legibility at every size.

One focal element

Every screen has exactly one primary action. Secondary options are always one tone quieter.

typography

Typography

Fraunces brings warmth to display copy; Inter handles all UI text. Keep semantic level and visual size independent.

Display 2xl — 64 / 600 · Fraunces

Maths confidence.

Display xl — 48 / 600 · Fraunces

Grown gently, every week.

Display lg — 36 / 600 · Fraunces

What is 3/4 of 24?

Display md — 28 / 600 · Fraunces

Section headings & card titles

Display sm — 22 / 600 · Fraunces

Small card titles, modal heads

Body lg — 18 / 400 · Inter

Hero subheads. Up to ~3 lines, max 60ch.

Body — 16 / 400 · Inter

Default paragraph size for content blocks and forms.

Body sm — 14 / 400 · Inter

Compact UI text: card metadata, list rows, helper copy.

Caption — 13 / 500

Inline tags, secondary metadata

Eyebrow — 11 / 600 · UPPERCASE 0.06em

color

Color

Cream backgrounds reduce eye strain. Ink for text. Northstar blue is reserved for emphasis. Mint / sun / coral signal status.

Foundation

ink

#0F1729

ink-soft

#1E2742

ink-muted

#6B7393

ink-subtle

#9AA0B8

cream

#FBFAF7

cream-warm

#F5F2EC

cream-deep

#EFEAE0

white

#FFFFFF

Brand · Northstar

#F0F4FF

100

#DDE5FF

200

#BCC9FF

300

#94A8FF

400

#6B83F5

500

#4A63E0

600

#3B4FBA

700

#303F94

800

#243070

900

#1A2354

Mint · success

mint-50

#E9F7F1

mint-500

#3DBE8A

mint-600

#2FA374

Sun · attention

sun-50

#FEF6E4

sun-500

#E8A93C

sun-600

#C98C20

Coral · focus

coral-50

#FCEDE9

coral-500

#E97A5E

coral-600

#C95E45

spacing

Spacing & layout

4-pixel base grid. Semantic aliases describe how space is used in practice.

Base scale (4 px)

Semantic aliases

Card padding

28 px

Card padding (compact)

20 px

Section gap

32 px

Section gap (marketing)

80 px

Page gutter (mobile)

24 px

Page gutter (desktop)

48 px

Max width (app)

1152 px

Max width (prose)

672 px

buttons

Buttons

Five variants × three sizes. Use primary once per screen; everything else is secondary or quieter.

Variants

Sizes

With icons

States

cards

Cards

One radius (20 px), one shadow. Variants change tone, not structure.

Default

White surface · soft shadow

The everyday container. Used for dashboard widgets, forms, and result panels.

Subtle

Cream-warm surface · no shadow

Quieter container for secondary information that shouldn't compete with default cards.

Elevated

White · lifted shadow

Reserved for hero modules and the focal card in marketing layouts.

Brand

Northstar-50 · 100 border

Promotes a recommended next step or suggested path forward.

Inverse

Used sparingly — for the progress insights moment.

Dark backgrounds draw attention. We only use them once per screen.

forms

Form inputs

A single shared field height (44 px) keeps form rhythm consistent. All inputs use the same focus ring.

We'll never share your email.

Password

Must be at least 8 characters.

Year group

Disabled

Note to teacher

Optional — 500 characters max.

Checkboxes

Weekly parent emailA 2-minute summary every Sunday evening.Adaptive difficultyLet Northstar adjust hardness automatically.Disabled option

Radios

GentleBuild confidenceBalancedAdaptive (recommended)StretchChallenge mode

Radio cards

Gentle

Build confidence

BalancedRecommended

Adaptive (recommended)

Stretch

Challenge mode

progress

Progress indicators

One bar, one ring, one stepper, one spinner. Together they cover every progress moment in the product.

Linear bars

Fractions

82%

Geometry

54%

Ratio

28%

Circular

72%

mastery

92%

Steps

Account
2Learner profile
3First test
4All set

charts

Charts

Lightweight placeholders that share the system's visual language. Swap for Recharts/Visx when real data wiring lands.

Bar chart

Mon

62%

Tue

78%

Wed

—

Thu

84%

Fri

71%

Sat

90%

Sun

—

Line chart

Sparklines

Northstar

Strong

Slipping

scores

Score displays

Three sizes of the same idea: a numeral first, context second. We round to whole percentages — children don't need 73.42%.

ScoreNumber · inline

78%92%31%

Use inside larger compositions (modals, banners) where a ring would be too heavy.

ScoreRing · focal

78%

Overall mastery

The hero number on session results and weekly reports.

ScoreCard · summary

Average score

78%

+4% vs last week

Ratio & proportion

31%

−3% vs last week

mastery

Strengths & focus indicators

Three named levels — strong, growing, focus — keep tone gentle. Never pass/fail; always 'where to go next'.

Mastery pill

StrongGrowingNeeds focus

Mastery row

Number & Place Value

Confident across this topic

78%

Fractions & Decimals

Building consistency

52%

Ratio & Proportion

Worth a few short sessions

31%

Strength tile

Measurement

81% mastery

Strong

Number & Place Value

78% mastery

Strong

Weakness tile

Geometry

Suggested: 2–3 short sessions this week

39%

Ratio & Proportion

Suggested: 2–3 short sessions this week

31%

Combined: StrengthsWeaknesses

Strengths

Measurement

81% mastery

Strong

Number & Place Value

78% mastery

Strong

Focus areas

Geometry

Suggested: 2–3 short sessions this week

39%

Ratio & Proportion

Suggested: 2–3 short sessions this week

31%

question

Test question components

The heart of the product. Generous type, one focal element, calm feedback. Never penalising.

Live preview · default state

Exit session

FractionsQuestion 3 of 12

08:24

Question

What is 3/4 of 24?

Marking states

Great work!

Correct

Your answer: 18

Spot on. 3/4 of 24 = (3 × 24) ÷ 4 = 18. You can also think of it as three quarters: 24 ÷ 4 = 6, then 6 × 3 = 18.

Not quite — let's look at this together

Try again next time

Your answer: 20 · Correct: 18

Almost — 20 would be 5/6 of 24. For 3/4, divide 24 by 4 first (6), then multiply by 3.

Answer option states

default

selected

correct

incorrect