ISCO Design System
One system for the entire transportation network
A single source of truth for the ISCO Transportation Management System. It defines the tokens, components, and rules shared across the student app, supervisor app, and admin dashboard — engineered to scale to 100+ screens and future modules.
Student App
Booking, QR pass, schedule, announcements, complaints.
Supervisor App
Fast attendance, offline scanning, large touch targets.
Admin Dashboard
Students, routes, schedules, payments, analytics.
Primary
#D71920
Single brand accent
Grid
8pt
Consistent rhythm
Max taps
3
To any key feature
Contrast
WCAG AA
Minimum standard
Foundations
Design principles
Four rules that resolve every ambiguity. When in doubt, choose the option that is faster, clearer, and more accessible.
Design for speed
Every task is optimized for the fewest taps. Peak usage happens in seconds, outdoors, in a hurry.
Clarity over decoration
Mostly white surfaces, generous spacing, and one confident accent. No gradients, glass, or noise.
One primary action
Each screen has a single, obvious next step. Secondary actions never compete with it.
Accessible by default
AA contrast, 44px targets, visible focus, and full keyboard and screen-reader support.
Foundations
Color system
The interface stays predominantly white. Red is reserved for primary actions, highlights, and notifications — never for large fills. Status colors are functional and used sparingly.
Brand
Neutrals
Functional status
Foundations
Typography
Inter is the single typeface across all products; JetBrains Mono is used only for codes, IDs, and tokens. Body copy uses 1.6 line-height for comfortable reading.
Foundations
Spacing & 8-point grid
All spacing is a multiple of 4px, aligned to an 8-point grid. This keeps layouts rhythmic and predictable across every screen and breakpoint.
Foundations
Radius & elevation
Soft, rounded corners and low, diffuse shadows give surfaces a calm, corporate feel. Elevation communicates hierarchy — the higher the layer, the softer and larger the shadow.
Corner radius
Elevation
Flat
Inline surfaces, table rows
Level 1
Cards, list items
Level 2
Dropdowns, popovers
Level 3
Dialogs, bottom sheets
Foundations
Iconography
A single icon set (Lucide) keeps visuals consistent. Icons use a 1.5px stroke, align to 24px, and match the current text color. Never use emoji as icons.
16px
Inline / dense
20px
Default UI
24px
Buttons / nav
32px
Feature
Components
Inputs & forms
Consistent 40px controls with clear labels, hints, and error messaging. Every input has a visible focus ring and 4.5:1 label contrast for accessibility.
Printed on your ISCO card
Enter a valid university email
Optional · 120 characters
Components
Badges & chips
Status badges give tables and cards scannable meaning. Tone maps to a fixed semantic — success is confirmed, warning is pending, danger is cancelled or overdue.
Components
Alerts & toasts
Inline alerts explain a state in context; toasts confirm an action and dismiss automatically. Icon and color reinforce meaning together — never color alone.
Schedule updated
The evening line now departs at 6:15 PM.
Booking confirmed
Seat 14 reserved for tomorrow’s morning line.
Subscription expiring
Your monthly pass ends in 3 days.
Payment failed
We could not process your renewal. Try another method.
Attendance saved for 42 students
Components
Data tables
Admin tables support search, filtering, sorting, pagination, and bulk actions. Selecting rows reveals a contextual action bar; destructive actions always require confirmation.
| Route | Status | Seats | ||
|---|---|---|---|---|
Layla Hassan 2021-04421 | Morning · Gate A | Active | 1 | |
Omar Nasser 2020-03318 | Evening · Library | Pending | 2 | |
Sara Khalil 2022-05910 | Morning · North | Active | 1 | |
Yousef Adel 2019-02214 | Weekend · Gate B | Suspended | 0 |
Components
Statistics & charts
KPI cards lead every dashboard, followed by focused visualizations. Charts use the neutral ramp with a single red series for emphasis, and always include labels and values.
Active students
3,842
+4.2% vs last weekTrips today
186
+12 vs last weekAttendance rate
94%
+1.8% vs last weekOpen complaints
7
-3 vs last weekWeekly ridership
Trips completed per day
Components
Dialogs & bottom sheets
Web uses centered modal dialogs for confirmation; mobile uses bottom sheets that rise within thumb reach. Both trap focus, dim the background, and close on Escape or scrim tap.
Components
UI states
Every data surface is designed for all of its states — not just the happy path. Loading, empty, error, and offline states keep users oriented and confident.
Skeleton loading
No bookings yet
Your upcoming trips will appear here once you book a seat.
Something went wrong
We couldn’t load your schedule. Check your connection and try again.
You’re offline
Scans are saved on your device and will sync automatically when you reconnect.
12 scans queuedPatterns
Domain cards
Reusable card patterns encode the core objects of the platform — bookings, payments, and complaints — so they look and behave the same everywhere they appear.
Morning Line
Gate A → Main Campus
Date
Mon, 14 Jul
Departs
07:30 AM
Seat
14
Bus
ISCO-08
Monthly Pass
Semester subscription
$45/mo
Complaint #2041
Late departure
“The evening bus from the library left 20 minutes late without any notice on the app.”
Patterns
QR & scanning
The student pass presents a large, high-contrast QR code. The supervisor scanner is built for speed outdoors: a full-bleed camera frame, a single target reticle, and immediate success feedback that works offline.
Digital pass
Valid2021-04421
Layla Hassan · Morning Line · Seat 14
Patterns
Maps
Live tracking pairs a map surface with a route timeline. Production uses a dedicated mapping library (e.g. Mapbox or Leaflet); this placeholder documents the framing, marker, and route-progress treatment.
Morning Line
ETA 12 minGate A — Main Campus
07:30Library Stop
07:42North Housing
07:55Engineering Block
08:05Sports Complex
08:15
Guidelines
Accessibility
Accessibility is a baseline requirement, not an enhancement. Every component ships meeting WCAG 2.1 AA so all students, supervisors, and admins can complete their tasks.
Color contrast
Text meets WCAG 2.1 AA — 4.5:1 for body, 3:1 for large text and UI borders.
Touch targets
Interactive elements are at least 44×44px, critical for supervisors working outdoors.
Focus visible
Every interactive element shows a 2px ring in ISCO red on keyboard focus.
Never color alone
Status is always paired with an icon or label so it is legible for color-blind users.
Semantic markup
Landmarks, headings, labels, and ARIA roles describe structure to screen readers.
Motion respect
Animations honor prefers-reduced-motion and never block interaction.
Guidelines
Interaction & motion
Motion is functional: it confirms actions and guides attention without slowing anyone down. Transitions are short, eased, and consistent across platforms.
Feedback
Buttons depress 1px on press; every tap has an immediate visual response.
Timing
Micro-interactions 150ms, overlays 200ms, using an ease-out curve.
Predictable
The same action always animates the same way in every product.
Guidelines
Responsive rules
Design mobile-first, then enhance. Layouts reflow from a single column into multi-column arrangements, and navigation adapts from a bottom bar to a persistent sidebar.
Mobile
0 – 767px
Student & supervisor apps · single column · bottom nav
Tablet
768 – 1023px
Two-column layouts · condensed sidebar
Desktop
1024px +
Admin dashboard · persistent sidebar · dense tables
Guidelines
Dark mode (future)
The token architecture is dark-mode ready. Every color is referenced through a semantic variable, so a future dark theme only needs to swap the values under a .dark scope — no component changes required.
Token strategy
:root { --primary: #D71920; --background: #FFFFFF; }
.dark { --primary: #EF4444; --background: #0D0E10; }
/* Components only reference tokens — never raw colors */
bg-primary → var(--primary)
bg-background → var(--background)