EasyGo Design System
Component library and design tokens for EasyGo — an accessible routing app for people with mobility and cognitive disabilities.
Overview
Brand personality & design principles
EasyGo's visual identity is built on clarity, trust, and empowerment. Every design decision prioritises low cognitive load — interactions are predictable, labels are explicit, and colour is used purposefully rather than decoratively.
The palette is anchored by a confident Navy Blue (#005299) that communicates reliability and authority, paired with a crisp white ground. A 4px grid governs all spacing. Lexend — chosen for its proven readability improvements for users with dyslexia — is the sole typeface used throughout the system.
Corner radii are generous (up to 32px) to give the UI a friendly, approachable character while remaining professional. Interactions always surface focus states to support keyboard and switch-access navigation.
Colors
Primitive palette and semantic token mappings from Figma variables
Background
Body Text
Heading Text
Dialog
Button
Toggle
Icons
Divider
Input
Route
Tooltip
Map Header
Typography
Lexend is the sole typeface — chosen for improved reading performance and dyslexia support.
Layout & Spacing
4px grid system — all spacing values are multiples of 4.
Shapes
Corner radius scale
8px
16px
32px
Button
button
Buttons should be used to indicate an action on a screen.
Types: 1. Primary — main CTA 2. Secondary — important but not primary 3. Tertiary — less critical actions 4. Disabled — action not currently available 5. Icon-only — action communicated through a widely recognised icon
Sizes: Primary (40px h, 8/16px padding, r16, 16px text) · Small (24px h, 4/8px padding, r8, 12px text)
States: Default · Hover · Focus
Toggle
toggle
The toggle component is used to visually represent whether something is on/off (true/false). This can apply to other elements such as settings. Has similar use to a checkbox input, however, it should not be used in form input groups, while a checkbox should be used in a form input group.
Expandable Card
expandable-card
The expandable card is a component that can be interacted with to expand and show more information on the card. On the default collapsed view, the card should only display the title of the card.
↑ Click to expand/collapse
Saved Card
saved-card
Displays a saved route in the user's library. Available in Primary (white) and Secondary (blue) variants, with Default, Hover, and Focus states. Supports Named and Address sub-variants.
Tooltip
tooltip
A tooltip displays information when a user clicks or focuses on different map-marker icons on the map. The message can be text (e.g., Accessible Crosswalk — Aloha St & Warren Ave N) or icons (e.g., multiple map-markers).
Text Inputs
input/text & input/text-area
Text inputs collect user input. States: Primary, Hover (blue/100 border glow), Focus (blue/400 border + blue/100 ring), Disabled (grey/100 background). Text area provides multi-line entry with the same visual language.
Select
select
Dropdown selector for choosing from a predefined list. States: Closed/Open × Primary/Hover/Focus/Disabled. 48px height. Options inherit Lexend, 16px, base/black on white background.
- Select an option
- Option A
- Option B
- Option C
Checkbox & Radio
input/checkbox & input/radio
Form selection controls for use within input groups. Checked/selected state uses blue/400 accent. Disabled state fills the control with input/background/disabled (grey/100).
Divider
divider
Dividers are used to separate content on a screen. Available in Horizontal and Vertical orientations, and three semantic colours: primary (blue/400), secondary (base/black), tertiary (base/white — for use on dark backgrounds).
Horizontal · Primary (blue/400)
Horizontal · Secondary (base/black)
Horizontal · Tertiary (base/white — dark bg)
Pagination
pagination
Navigation control for paginated content. Includes prev/next arrow controls and numbered page buttons. Current page uses primary blue fill. Disabled state applies to arrows at the first or last page.
Navigation
nav
The primary navigation menu. Five main app sections — each as a large, touch-friendly nav item with a 64px circular icon and a 24px bold label. Designed for maximum legibility and minimal cognitive overhead.
Header
header
Two header variants. Main — full-bleed navy header containing the full EasyGo logo, used on primary screens. Secondary — compact back-navigation bar with the alt-small logo flush right, used on sub-screens. Both use map-header/background/primary (blue/400).
Map Markers
map-markers
Icon markers placed on the map to communicate route and accessibility information. All markers are 32px × 32px unless noted.
Logo
logo
The full size logo is 800px × 264px and should keep that ratio on resize. The alt-small size logo is 264px × 264px and should keep the square ratio on resize.
Settings Section
setting-section
Two types: Toggle — label + sub-label + Toggle on the right (72px h); New Page — label + chevron-right navigates to a detail screen (64px h). Both use white background, grey/100 border, 16px radius.