Design system foundation

Notion-restrained substance, nLearn-warm chrome. Plus Jakarta Sans + JetBrains Mono. 10px card radius, 6px buttons. Brand blue threads through interactive states; brand orange reserved for terminal CTAs only.

Typography

Plus Jakarta Sans · JetBrains Mono

Display 32 / 600 / -0.02em 9 hours 32 minutes saved

H1 24 / 600 / -0.01em Aarav Sharma · Final Review

H2 18 / 600 / 0 Section A — MCQs · 20 questions

Body Large 16 / 500 / 0 AI confidence is HIGH on all 20 answers.

Body 14 / 400 / 0 Student wrote the final answer correctly but did not include the constant of integration +C.

Small 13 / 500 / 0 Add a note about this answer…

Micro 11 / 600 / .06em / UPPER Low confidence · Needs review

Mono JetBrains Mono Q24 4/5 Roll 12 67/80

Color tokens

Brand · Neutrals · Semantic

Brand

brand-blue

#1E7CE8

brand-blue-soft

#E8F2FF

brand-orange

#F37920

brand-orange-soft

#FFF1E5

subject-maths

#F4A04A

Neutrals — Notion-warm

gray-50

#FAFAF9

gray-100

#F4F4F2

gray-200

#E7E5E0

gray-300

#D4D2CC

gray-400

#A8A6A0

gray-500

#6B6964

gray-600

#4A4844

gray-700

#2C2A26

gray-900

#0F0E0C

Text contrast rule. Teachers may be reading dense numerics for hours; some are older. Treat gray-400 as a decoration-only token — dividers, dashed borders, status dots, icon outlines. Never use it for text. Default secondary text uses gray-500 (5.5:1 on white, WCAG AA), and small monospace metadata — roll numbers, denominators, table cell labels — uses gray-600 (9:1, WCAG AAA) since small thin type is hardest to read.

gray-400 — decoration only · 2.9:1 gray-500 — secondary text · 5.5:1 AA gray-600 — small numerics · 9:1 AAA

Semantic

success

#16A34A

success-soft

#DCFCE7

warning

#F37920

warning-soft

#FFF1E5

danger

#DC2626

danger-soft

#FEE2E2

Buttons

6px radius · never pill

Variants — primary is brand-blue; terminal orange is reserved for Submit / Publish / Final Approve (max one per screen).

Sizes

Status pills

11 / 600 / .06em / UPPER · fully rounded

Reviewed In progress Low confidence Not reviewed Not started

Pills are the only fully-rounded element in the system. Used for state, not decoration.

Card

10px radius · flat by default · hover lifts

Question 21 · 5 marks

Integration by parts

Reviewed

Evaluate ∫ x²e^x dx using integration by parts. Student showed correct method but omitted the constant of integration.

4/5

Question 28 · 6 marks

Alternative substitution

Low confidence

Student's working uses a substitution method not explicitly covered in the answer key. Provisional marks awarded.

4/6

Data table

Dense · monospace numerics · row hover

Student Roll Score Status Reviewed Action

Aarav Sharma 12 76/80 Reviewed 4 min

Priya Patel 18 — In progress —

Rohan Mehta 07 61/80 Low confidence 6 min

Sneha Iyer 22 — Not started —

Kavya Reddy 25 Absent Absent —

Arjun Kapoor 03 22/80 Below pass 7 min

Elevation

Flat default · subtle resting · blue-tinted hover

No elevation

Default surface. No border, no shadow.

Resting

1px hairline + 1px subtle shadow.

Hover / focus

Lifted, with blue-tinted ring.

Spacing & radii

4px base unit

radius-card 10px

radius-btn 6px

radius-input 6px

pill 999px

padding-card 16px

section-gutter 24px

page-padding 32px

left-panel 280px