Institutional-grade, without being cold.
The University Modular Timetable & Analytics System runs on a strictly monochrome design language. Hierarchy through tone, weight and spacing.
16
Design tokens
7
Type roles
WCAG AA
Compliance
A monochrome system, intentionally restrained.
Hierarchy comes from tone, weight and spacing. The discipline is what makes the interface feel institutional-grade without being cold.
#ffffff
White Base
#f4f4f5
Off-White Surface
#e4e4e7
Light Elevated
#09090b
Near-Black Primary
#52525b
Dark Grey Secondary
#a1a1aa
Disabled
#e4e4e7
Subtle Border
#18181b
Focus Ring
Token Inspector
Near-Black Primary
--text-primary · #09090b
Body and heading text.
vs Base
19.90 : 1
vs Surface
18.10 : 1
Status Colours
DM Sans, three weights, seven sizes.
A single typeface across the entire system. Hierarchy through weight and size - never through colour or decoration. Drag the slider to see the scale at different base sizes.
Scale
1.00×A 4px base unit. Every margin and padding.
UMTAS displays scheduling data - modules, slots, days, venues. Density without crowding requires a strict spacing rhythm. Hover the tokens to see them applied to a live card.
Applied as Padding
padding: 16px;
COS301 · Lecture A
Software Engineering · 08:00–09:00
Card padding, row heights
Eight pixels, with three exceptions.
The shadcn radius system. Every element shares a single radius value unless explicitly listed below.
Cards
8px
Buttons
8px
Inputs
8px
Modals
12px
Badges
pill
Tooltips
6px
Grid cells
4px
Four levels. Subtle by default.
Cards feel lifted, never floating. In dark mode, shadow alpha is doubled for visibility against the charcoal base.
Both modes shown together
None
Flat surfaces
Low
Default cards
Medium
Modals, dropdowns
High
Floating overlays
Toggle light/dark mode via the nav above to see shadow visibility differences. Dark mode uses ~2× alpha values.
Motion is a design dimension.
Three durations, one easing curve. Click any button below to feel the difference. Layout-affecting properties are never animated - only opacity and transform.
Easing: cubic-bezier(0.4, 0, 0.2, 1) for all transitions. No linear, no ease-in, no ease-out.
Lucide, outline only, never independently coloured.
Icons inherit the colour of the text they accompany. 16px in body and tables, 20px in headings and navigation.
Components. All token-driven.
Every component shown using the active theme. Toggle light/dark via the nav bar. Nothing is hardcoded - all values come from the tokens above.
Buttons
Badges
Cards
Tabs
Form Inputs
Controls
Data Display & Feedback
Layout & Loading
Radix Primitives
An open-source UI component library.
Weekly Schedule Grid
The core UMTAS component. Cell background, session block and row-span behaviour all derive from the tokens above.
COS301
Lecture08:00 - 09:00
COS333
Lecture09:00 - 11:00
COS344
Lecture10:00 - 11:00
COS314
Lecture13:00 - 14:00
How UMTAS speaks.
Voice is constant personality. Tone adjusts to the situation. Together they make every message feel purposeful, never generic.
Onboarding / empty states
Warm, encouraging, action-oriented
“Add your first module to get started. UMTAS will build your best possible timetable.”
Informational labels / tooltips
Neutral, precise, no filler words
“Venue: CS Lecture Hall 1 · Capacity: 120”
Error messages
Honest, calm, tells the user what to do next
“Module code not found. Check the UP handbook or try COS301.”
Success feedback
Brief, affirmative, not over-celebratory
“Timetable saved.”
Security / destructive actions
Sober, direct, no softening language
“Delete this schedule? This cannot be undone.”
Writing Rules
Plain English only
No jargon unless domain-specific. 'Module', 'venue', 'timetable slot' are fine.
Errors explain and instruct
Every error message states the cause and the next action. Never 'Something went wrong.'
Descriptive placeholders
e.g. COS301 - not 'Enter something here'. Placeholder text is instructional.
Labels are nouns, buttons are verbs
'Save changes', 'Delete module', 'View timetable' - not 'Submit' or 'Click here'.
WCAG 2.2 AA. Baked in, not bolted on.
Accessibility is a system property. Every token, every component, every pattern is designed to meet AA by default.
Colour Contrast
WCAG 2.2 AA
Body text: 4.5:1 minimum. Large text (Display, H1, H2): 3:1 minimum. Never use --text-secondary for body copy.
Keyboard Nav
Tab-reachable
Every interactive element reachable by Tab. Focus ring always visible. No keyboard traps anywhere.
Semantics
Meaningful markup
Use <nav>, <main>, <section>, <button>. Icon-only buttons need aria-label. Inputs need <label>. Placeholder ≠ label.
Motion
prefers-reduced-motion
All CSS transitions suppressed at 0.01ms under reduced-motion. Only opacity and transform are ever animated.
Desktop-primary. Mobile-ready.
Three Breakpoint. The schedule grid and dense data views are designed for desktop first, but every screen reflowing correctly at tablet and mobile widths is a requirement.
Tailwind Prefix Reference
sm:640pxmd:768pxlg:1024pxxl:1280px