Brand
The mark
Logo lockup
The mark plus the wordmark. Ink on light; white on the dark band. Never re-colour the mark to the accent.
The mark alone
A graduation cap reduced to two strokes. Used as the app icon, the favicon and the sidebar mark.
Clear space & misuse
Keep clear space equal to the height of the mark on every side.
- ✓Ink
#17191Con light surfaces, white on the dark band. - ✓Scale the mark and wordmark together — they are one lockup.
- ✕Don't tint the mark with the brand blue — the mark is ink, always.
- ✕Don't add a shadow, gradient, outline or rotation.
- ✕Don't place the lockup on a busy image without a solid plate behind it.
Colour
Colour
Ink & text
Three greys do all the work. Text is never pure black.
ink
#17191C
headings, primary text
body
#4C4C4C
body copy
muted
#777B86
meta, captions
Bands — the rhythm
The marketing page is a sequence of full-bleed bands. The pale blue and the near-black each appear exactly once — that scarcity is what gives them weight.
white
#FFFFFF
band-offwhite
#FAFAFB
band-gray
#F2F2F3
band-blue
#D3E3FC
band-dark
#121212
Brand blue
ONE blue, shared by the marketing site and the ERP product — so the two never look like different companies. It earns its place on the primary key, on icons and on small marks. It is never a headline colour and never a large fill.
brand
#2563EB
one blue — marketing + product
tint
rgba(4,23,43,0.05)
tertiary button / chip fill
brand-lo
#1A4ED0
the pressed lip on a key
Status
Used in the product only — never on marketing.
success
#16A34A
warning
#F59E0B
error
#EF4444
Type
Typography
Display — Sana Sans
The voice of the brand. Set at weight 500 and a tight 1.1 line-height — a sans display needs to be packed, where a serif wants air. Sana Sans is a licensed font: self-host the woff2 files (or serve it from your font provider). Until it is served, the stack falls back to Instrument Sans so nothing breaks.
Run your entire school.
Sana Sans · 500 · line-height 1.1 · tracking −0.03em (hero) / −0.02em (sections)
UI — Instrument Sans
Everything that isn't a headline: leads, body, labels, and the entire ERP product.
Admissions, attendance, exams, timetable and fees — one system for the whole institution, with a private database per school.
Instrument Sans · 400/500 · line-height 1.6
Type scale
Six roles. If a size isn't here, it doesn't exist.
| Role | Size | Line-height | Tracking | Font |
|---|---|---|---|---|
| Display / hero | 84px | 1.1 | -0.03em | Sana Sans 500 |
| Display / section | 52px | 1.1 | -0.02em | Sana Sans 500 |
| Display / small | 36px | 1.1 | -0.02em | Sana Sans 500 |
| Lead | 18px | 1.6 | 0 | Instrument Sans 400 |
| Body | 15–16px | 1.6 | 0 | Instrument Sans 400 |
| Meta / eyebrow | 13px | 1.5 | 0.08em | Instrument Sans 400, uppercase |
Layout
Layout
Colour bands
The page is built from full-bleed bands in a fixed order. Each band carries exactly one display headline.
Container & grid
Content is capped at 1220px with 24px page padding. Module grids run 3-up on desktop, 2-up on tablet, 1-up on mobile.
Effects
Effects
Glass nav
The only glass surface in the system. Fixed, 64px tall, translucent white with a 16px blur — glassy from the very top, and it does not change on scroll.
position: fixed · h: 64px · bg: rgba(255,255,255,.8) · backdrop-filter: blur(16px)
Borders & elevation
Depth comes from hairline borders and band contrast — not shadows. Marketing uses no box-shadow at all.
Motion
Motion
Motion language
Motion is restrained and never decorative. Two behaviours only.
- ✓Reveal — content rises 14px and fades in once as it enters view. Headlines stagger word by word (~55ms apart).
0.7s cubic-bezier(0,0,.2,1) - ✓Rotating headline — the tail of the hero line swaps on a timer; the phrase rises in and the slot animates its width so the line never jumps.
0.5s rise · 0.45s width - ✓Everything respects
prefers-reduced-motion, and reveals fail open — content is never left invisible. - ✕No parallax, no counters, no bouncing, no looping background video.
Interaction states
Hover is a quiet opacity or tint change — never a lift or a scale.
Spacing
Spacing & radius
Radius scale
Buttons are pills. Cards and panels are 24px. Nothing is square.
pill
9999px
buttons, chips
card
24px
cards, panels
md
16px
sm
12px
Spacing scale
Sections breathe: 112px of vertical padding on desktop. Inside a section, related things sit 8–24px apart and unrelated things 40px+.
8
16
24
40
64
112
Rules
Guardrails
What keeps it Eduhost
If a new page follows these, it will look like it belongs. If it breaks one, it won't.
- ✓Headlines are Sana Sans at weight 500, with a tight 1.1 line-height and negative tracking. Packed, not airy.
- ✓One display headline per band. Let it be large and let it breathe.
- ✓Near-monochrome. The pale-blue and near-black bands each appear once.
- ✓Accent is for small marks — an icon, a dot. Never a headline, never a large fill.
- ✓Depth from hairlines and band contrast, not shadows.
- ✕No bold display type. Never set a headline at 600/700 to "make it pop".
- ✓Exactly ONE gradient exists: the hero wash — deep brand blue at the very top, resolving into white before the product shot. The nav sits transparent on top of it and only turns to glass once you scroll.
- ✕No other gradient washes behind sections, and no glassmorphism outside the scrolled nav.
- ✕No invented social proof. We don't claim customer counts, logos or testimonials we don't have. If a strip has nothing true to say, it is deleted rather than filled.