Design system

Colour

Ratios are measured against --paper. Text needs 4.5:1 (AA); large text and UI boundaries need 3:1. Orange is never a text colour on paper — use --accent-700 — and text on orange is always navy (5.69:1), never white (3.06:1).

Brand

--brand-900#0b2545Ink, rail, headings14.74:1 on paper · AAA
--brand-800#13315cHover on ink12.41:1 on paper · AAA
--brand-700#1d4271Links, chart series9.72:1 on paper · AAA
--brand-100#e3e9f2Avatar ground1.17:1 on paper · surface only
--brand-50#f0f3f8Quiet tint1.07:1 on paper · surface only
--accent-500#f26a1bThe pen: one primary action, top marks2.94:1 on paper · surface only
--accent-600#d9560bActive tab icon3.81:1 on paper · AA large / UI
--accent-700#b84508Orange text on light5.17:1 on paper · AA
--accent-100#fbdcc6Selection1.25:1 on paper · surface only
--accent-50#fdeedeHighlighted row1.09:1 on paper · surface only

Paper & ink

--paper#fbfaf7Page ground1.00:1 on paper · surface only
--paper-2#f3efe7Table heads, tracks1.10:1 on paper · surface only
--sheet#ffffffCards, inputs1.04:1 on paper · surface only
--ink-1#1a1f2bBody text15.78:1 on paper · AAA
--ink-2#4a5263Secondary text7.51:1 on paper · AAA
--ink-3#5f6675Placeholders, captions5.52:1 on paper · AA
--line#e6e1d8Hairlines1.25:1 on paper · surface only
--line-2#d9d2c5Stronger hairlines1.44:1 on paper · surface only
--border-input#857f73Input borders3.81:1 on paper · AA large / UI
--margin-rule#e8b4b8Answer-sheet margin1.73:1 on paper · surface only

States

--success#1f7a4dPresent, paid, saved5.09:1 on paper · AA
--warn#8a5a00Late, due soon5.68:1 on paper · AA
--danger#b42424Absent, overdue, errors6.25:1 on paper · AA
--info#2b5ea8Notes, information6.15:1 on paper · AA

Data ramp

--d1#dbe4f0Ramp 11.23:1 on paper · surface only
--d2#9fb3cfRamp 2, low bars2.05:1 on paper · surface only
--d3#5b7aa6Ramp 3, bars4.21:1 on paper · AA large / UI
--d4#2f4f7fRamp 47.90:1 on paper · AAA
--d5#0b2545Ramp 514.74:1 on paper · AAA

Pairs we rely on

AaNavy on orange5.69:1 · AA
AaWhite on navy15.39:1 · AAA
AaSuccess on its tint4.67:1 · AA
AaWarn on its tint5.37:1 · AA
AaDanger on its tint5.57:1 · AA
AaInfo on its tint5.60:1 · AA

Type

Sora for headings, numbers and buttons; Inter for body at 16px (dense tables 14px); Noto Sans Tamil with a taller 1.7 line-height. Numbers are always tabular.

--t-48 · Sora 700: 688/720
--t-36 · Sora 700: Full mock test 6
--t-30 · h1: Good morning, Meena
--t-24 · figures: 412 students
--t-20 · h2: Needs you today
--t-18 · h3, sheet titles: Latest full mock
--t-16 · Inter body: Anjali has climbed from rank 14 to rank 1 over the last 5 mock tests.
--t-14 · tables, labels: NEET Long-term A · 42 students · 4 teachers
--t-12 · hints, captions: Held Sunday 27 September · results published today

Spacing, radii, shadows

A 4px scale. Tight inside a group, generous between groups.

Spacing

--s14
--s28
--s312
--s416
--s520
--s624
--s832
--s1040
--s1248
--s1664

Radii

--r-sm 8 --r-md 12 --r-lg 18 --r-pill

Shadows

--sh-1 sheets --sh-2 raised --sh-3 dialogs

Buttons

One .btn-primary per view. Labels say the action. Icon-only buttons need an aria-label.

Variant	Default	Small	Disabled	Loading
`.btn-primary`
`.btn-secondary`
`.btn-ink`
`.btn-ghost`
`.btn-danger`

Hover, focus (Tab to see) and pressed states are built in.

Inputs & forms

Every input has a real label. Hints sit under the field; errors name the problem and the fix.

Student nameDefault with placeholder and hint.

Admission no.Filled.

Parent's phone Phone number should be 10 digits.

BatchDisabled — set by the office.

Search

.input-icon

MarksOut of 180. Type A for absent.

Note to parent

Selects, checks, segmented, chips

Course

Class levelDisabled select.

Checks Send result to parents by SMS Include absentees in the rank list Rank by total marks Rank by percentile

Segmented · .seg

Chips · .chips (multi-select)

Tabs

Arrow keys move between tabs. The orange underline marks the current one.

Six tests this term. Latest: 688/720 in Full mock test 6.

Pills & status

Status is never colour alone: always a word, usually an icon.

Present 3 days late Absent Marks pending Not signed in Admin Paper ready BatchNEET Long-term A ActiveDue soonArchived

Avatars

ASASAS MIDLRKKM AMArvind MenonBiology · 3 batches

Rank seals

The signature stamp. Orange only for ranks 1–3; ties shown as “=3”.

RANK14

.seal

RANK1

.seal.top

RANK=3

tie

RANK9

.seal-lg

RANK1

.seal-xl.top

Marks

Set like a teacher's margin: the marks column carries the red rule, improvement gets the orange pen underline, and one best value can be circled.

498/720 688/720 +24 since last test 355/360

Subject	Marks	Note
Physics	162/180
Chemistry	171/180	improved
Biology	355/360	Strongest subject

Table

Sortable headers, tabular numerals, and .cards turns rows into cards under 640px.

				Status
ASAnjali SureshHVA-2026-0142	NEET LT A	RANK1	688/720	Active
MIMohammed IrfanNEET Repeaters	Repeaters	RANK2	671/720	Active
KMKavya MuruganNEET LT B	NEET LT B	RANK98	402/720	Absent 3 days

List & timeline

.list

SNDr. Sreeja NairChemistry3 batches
APArun PrakashPhysics4 batches
FBFathima BeeviBiology, Foundation2 batches

.timeline

Results published for Full mock test 6Today, 8:42 · Meena Raj
New admission · Kavin R. joined NEET RepeatersYesterday, 17:10
Marks entered · Biology unit test 4Yesterday, 15:02

Alerts & empty state

Full mock test 7 is on Sunday 11 Oct. The paper is ready to print.

Marks saved. 38 of 38 entered for Physics unit test 4.

Marks are 3 days late for Physics unit test 4. Parents are waiting.

Couldn't publish results. Two students have no marks yet — enter them or mark absent, then publish again.

No enquiries to call back today

New enquiries from the website and walk-ins will appear here.

Toast & dialog

Toasts confirm without interrupting. Dialogs only when focus must be protected — a destructive confirm, for instance.

Kavya Murugan · NEET LT B

File viewer

One viewer for every file a teacher or student shares: video, images, PDF, Excel and CSV, Word and PowerPoint. It opens full screen (Esc closes, arrow keys move between files) or sits inline in a page. Each file type's library downloads only the first time that type is opened. Downloads are off unless a screen turns them on.

<!-- no script needed: any link or button with data-hv opens the viewer -->
<a href="notes.pdf" data-hv data-hv-title="Class notes">Open notes</a>
<button data-hv="slides.pptx" data-hv-group="week-40">Slides</button>

// from script (View is the viewer's global API; see the developer docs)
const v = View.open('notes.pdf', { title: 'Class notes', allowDownload: false,
  onPage: e => console.log(e.page, 'of', e.pages), onClose: () => {} });
v.close();

View.mount(document.querySelector('#box'), file /* URL, File or Blob */, { height: 520 });
View.gallery(['a.jpg', { source: 'b.mp4', startAt: '1:20' }, 'c.xlsx'], 0);

Meters & chart

Navy series; orange only for the one value that matters. Every chart has a caption sentence and a table fallback.

Meters

Attendance 96%

Marks entered 22 of 38

Attendance 61%

Paper total 540 of 720

Anjali's rank over five full mock tests, climbing from 14 to 1. Rank 1 is at the top.

View as table

Test	Rank
Full mock 2	14
Full mock 3	9
Full mock 4	6
Full mock 5	3
Full mock 6	1

Insight line

The one plain sentence that explains a student's progress. Facts in bold, no adjectives the numbers don't support.

Anjali has climbed from rank 14 to rank 1 over the last 5 mock tests. Biology is her strongest subject.

Tamil

Noto Sans Tamil at the same size with a 1.7 line-height. Only reviewed phrases are used on student and parent screens.

கடந்த 5 மாதிரித் தேர்வுகளில் அஞ்சலியின் தரவரிசை 14-இலிருந்து 1-ஆக உயர்ந்துள்ளது. உயிரியல் அவரது வலுவான பாடம்.

Home: முகப்பு
Results: முடிவுகள்
Marks: மதிப்பெண்கள்
Rank: தரவரிசை
Attendance: வருகை
Fees: கட்டணம்
Present: வந்தார்
Absent: வரவில்லை

688/720-க்கு செலுத்தப்பட்டது நிலுவை