The Rechaj color system is built around semantic roles and full-spectrum scales.
Each family has a light and dark variant with 12 steps, ranging from near-white to near-black,
giving you flexible control over surfaces, states, and themes.
Click any swatch to copy its hex value.
Brand
Core brand tokens used for primary actions, highlights, and interactive states across all surfaces.
Green [9], Primary#01E46FCTAs, active states, focus rings, highlights
Use Green [9] (#01E46F) for all primary interactive elements including buttons, links, focus rings, and active indicators.
Avoid placing green text on white or very light backgrounds. Contrast falls short below Grey-Light [4].
At reduced opacity (12 to 20%) the brand green works well for hover surfaces and selected state backgrounds.
Greyscale
Neutral tones for backgrounds, borders, text, and non-interactive elements. This is the foundational palette you reach for surfaces, dividers, and secondary content.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Light [1–3] are best for page backgrounds and sheet surfaces on light themes.
Light [4–7] cover borders, dividers, and disabled states.
Light [8–12] work for body text, labels, and secondary icons on light backgrounds.
Dark [1–4] are the go-to for app shell backgrounds and bottom sheets in dark themes.
Dark [5–8] suit elevated card surfaces and sidebar fills.
Dark [9–12] are for secondary text, ghost icons, and muted labels on dark backgrounds.
Tomato
A warm, vivid red-orange for destructive actions, critical alerts, and error states that need immediate attention from the operator.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Steps [9–10] are the primary tones for this family. Reach for them on delete buttons, critical banners, and destructive confirmations.
Steps [1–4] make good tinted backgrounds for error toasts and warning surfaces on light themes.
Dark [1–4] provide the right surface backgrounds for error states in dark mode.
Red
A cooler, more saturated red for validation errors, form field errors, and system-level failure indicators.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Use Red for inline form validation errors and helper text beneath input fields.
Step [9] (#E32627) is the canonical error color. Pair it with Light [2] as a background for error banners.
Keep Tomato for action-level destruction and Red for state-level errors like a lost connection or a failed upload.
Purple
For roles, permissions, and feature-tier labeling. Also works well for event categories, calendar highlights, and secondary accent uses.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Step [9] (#8E4EC6) is the main purple for badges and labels.
Steps [1–3] work as subtle tinted backgrounds for purple-tagged categories or role chips.
Keep purple out of status indicators. It belongs to classification and categorization contexts only.
Blue
Informational states, links, telemetry data, connectivity indicators, and secondary interactive elements. This is the info semantic color in the system.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Step [9] (#0090FF) is the go-to for informational text and links in body copy contexts.
Light [2–4] work well as info banner backgrounds on light surfaces.
Dark [10–11] are good choices for link colors inside dark-mode prose or table cells.
Use Blue for online and connected status indicators across the dashboard.
Green
Success states, confirmation messages, and healthy system indicators. Think battery charged, unit online, inverter running.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Step [9] (#30A46C) is the success state tone. Use it on confirmation toasts and completed badges.
The brand green (#01E46F) lives outside this scale. Use this palette for status semantics and the brand green for interaction semantics.
Dark [10–11] are good for success text and check icons inside dark surfaces.
Yellow
Warning states, caution indicators, and in-progress processes that need attention but have not yet become failures.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Reach for Yellow on low battery, pending swap, or weak signal status indicators in the dashboard.
Step [9] (#FFE629) is very vivid. Use it sparingly and never as a body text color since the contrast is poor.
Light [2–4] backgrounds pair nicely with Dark [12] text inside warning callout boxes.
Amber
A warmer golden warning tone. Use it alongside Yellow when you need two levels of warning severity. Amber reads as moderate, Yellow reads as high urgency.
Light scale, 12 steps
Dark scale, 12 steps
Usage
Step [9] (#FFC53D) is the main amber accent. It works well on attention-needed tags and moderate-urgency badges.
Light [3–4] make good alert banner backgrounds in cases where Yellow feels too aggressive.
Pick either Amber or Yellow within a single component. Using both together creates noise.
Base
Foundational surface tokens for the app canvas and pure white fills. Base BG sets the outermost page background; Base / White fills cards, sheets, and elevated surfaces on top of it.
Light mode
Base BG#fbfbfdPage canvas · app background
Base / White#ffffffCard fills · modal surfaces · inputs
Dark mode
Base BG · dark#111111Page canvas · app background
Base / White · dark#151517Card fills · modal surfaces · inputs
Usage
Base BG (#fbfbfd) is the outermost page canvas. Apply it to the body or the root container sitting behind all cards and sheets.
Base / White (#ffffff) elevates surfaces above the canvas. Use it on cards, modals, inputs, and bottom sheets to create visible layer separation.
In dark mode the values flip: Base BG → #111111 and Base / White → #151517, keeping the same 1-step separation in perceived lightness.
Never apply Base / White to the page background — keeping BG slightly darker than the card surface is what gives components their floating appearance.
Typography
Rechaj uses General Sans as its sole typeface across all interfaces.
The scale is split into Display styles for headings and hero text, and Text styles for body copy and UI labels.
Every style ships in four weights: Regular, Medium, Semibold, and Bold.
For headings, hero text, and prominent UI labels. Use Display styles to anchor page hierarchy and draw the eye to key content.
display-2xl
72px / 90 lh −2% tracking
The quick fox
display-xl
60px / 72 lh −2% tracking
The quick brown fox
display-lg
48px / 60 lh −1% tracking
The quick brown fox jumps
display-md
36px / 44 lh
The quick brown fox jumps over
display-sm
30px / 38 lh
The quick brown fox jumps over the lazy dog
display-xs
24px / 32 lh
The quick brown fox jumps over the lazy dog
Text
For body copy, UI labels, captions, and supporting text. Optimized for readability at smaller sizes across interfaces.
text-xl
20px / 30 lh
The quick brown fox jumps over the lazy dog. Rechaj moves fast.
text-lg
18px / 28 lh
The quick brown fox jumps over the lazy dog. Rechaj moves fast.
text-md
16px / 24 lh
The quick brown fox jumps over the lazy dog. Rechaj moves fast and scales reliably.
text-sm
14px / 20 lh
The quick brown fox jumps over the lazy dog. Rechaj moves fast and scales reliably across all surfaces.
text-xs
12px / 18 lh
The quick brown fox jumps over the lazy dog. Rechaj moves fast and scales reliably across all surfaces.
Logos
The Rechaj mark is a two-part polygon — a dark body and a green counterform — paired with a custom wordmark.
Always use the approved files. Never redraw, recolour, or distort the mark.
Primary logo
The horizontal lockup is the default usage — mark and wordmark together.
Light background default
Dark background inverted
Symbol
Use the symbol alone only when the Rechaj wordmark is already present nearby, or in very constrained spaces such as favicons or app icons.
Default · Light
Default · Dark
Mono · Light
Mono · Dark
Wordmark
The wordmark may be used without the symbol in editorial or co-brand contexts where the mark has already been established.
Light background
Dark background
Clear space
Always maintain a minimum clear space equal to the cap-height of the wordmark on all four sides of the lockup.
1× cap-height1× cap-height1×1×
Usage
Follow these rules to preserve the integrity and legibility of the Rechaj mark.
Use the approved lockup on clean, contrasting backgrounds.
Don't recolour the mark — the green and dark fills are fixed.
Don't distort, stretch, or skew the logo in any direction.
Don't place the logo on busy gradients or low-contrast backgrounds.
Icons
Rechaj uses the Magicoon icon library — Regular style. 1,366 icons across 378 categories.
Click any icon to copy its SVG to the clipboard.
1,366 icons
Shadows & Blurs
Elevation tokens communicate hierarchy and depth. Use shadows sparingly — only to separate interactive or floating surfaces from the content beneath them.
Box shadows
Six levels of elevation from hairline to deep — each maps to a specific surface type.
xxsmall-shadow
xsmall-shadow
small-shadow
medium-shadow
large-shadow
xlarge-shadow
xxlarge-shadow
xxxlarge-shadow
Background blurs
Used with semi-transparent surfaces to create a frosted glass effect. Apply via backdrop-filter.
blur-sm
Subtle tinting, chip backgrounds
backdrop-filter: blur(4px)
blur-md
Sticky headers, floating nav
backdrop-filter: blur(8px)
blur-lg
Modals, side sheets, popovers
backdrop-filter: blur(16px)
blur-xl
Full-screen overlays, lock screens
backdrop-filter: blur(24px)
Usage guidelines
Rules
Only use shadows to separate floating or interactive layers from the base surface — never for decoration.
Stick to one elevation step per component. Don't stack shadows from multiple tokens on a single element.
Dark mode note: On dark surfaces, reduce shadow opacity by 30–40%. The default tokens above are tuned for light themes.
Pair blur-md with background: rgba(17,17,17,0.7) for dark-mode frosted surfaces.
Grids & Spacing
All spacing is built on a 4px base unit. Prefer multiples of 8px for layout-level spacing and multiples of 4px for component-level padding and gaps.
Spacing scale
Token names follow a numeric scale. Each step is a named alias for a pixel value — always a multiple of 4.
TokenValueScale
space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-832px
space-1040px
space-1248px
space-1664px
space-2080px
space-2496px
Column grids
Layout columns adapt per breakpoint. Content always sits inside the column grid — never bleeds into the margins.
Mobile — 4 columns, 16px margin, 8px gutter≤ 768px
Breakpoints are min-width based. Design mobile-first and layer up.
Name
Token
Min width
Columns
Margin
Mobile
xs
0px
4
16px
Mobile L
sm
480px
4
20px
Tablet
md
768px
8
24px
Laptop
lg
1024px
12
32px
Desktop
xl
1280px
12
48px
Wide
2xl
1600px
12
80px
Usage guidelines
Rules
4px base: All spacing values must be multiples of 4. Never use arbitrary values like 7px, 11px, or 15px.
Component padding: Use space-2 (8px) to space-4 (16px) for inner padding on interactive components.
Section spacing: Use space-8 to space-12 between major sections on a page.
Always use the column grid for page-level layout. Never position content relative to the viewport directly.
components / buttons
Buttons
Six hierarchies from high-emphasis Primary to low-emphasis Link, five sizes from sm to 2xl, and destructive variants for irreversible actions.
Variants
Choose the hierarchy based on the importance of the action relative to other actions on the same surface.
Primary
The single most important action on a screen. Use once per view — pairing two primaries kills hierarchy.
.ds-btn-primary
Secondary
Supporting actions that need visibility but less emphasis than primary — Cancel, Back, Export.
.ds-btn-secondary
Tertiary Color
Low-emphasis brand-colored actions. Stays accessible without competing with primary CTAs on the page.
.ds-btn-tertiary-color
Tertiary Gray
Neutral low-emphasis actions — settings, collapse, dismiss. Blends into the UI until hovered.
.ds-btn-tertiary-gray
Review the before continuing.
Link Color
Inline contextual actions inside body text or dense layouts. No border — blends with prose.
.ds-btn-link-color
Posted 3 days ago ·
Link Gray
Minimal inline actions with no brand emphasis. Use for metadata, timestamps, secondary actions in lists.
.ds-btn-link-gray
Sizes
Heights are fixed per size. Width is content-driven unless explicitly constrained. Use the smallest size that reads comfortably in context.
sm
36px
Tables, toolbars
md default
40px
Forms, dialogs, cards
lg
44px
Page headers, hero CTAs
xl
48px
Prominent onboarding CTAs
2xl
60px
Full-width mobile CTAs
States
Hover the live buttons to see interactive states. Disabled and Loading are shown statically — both block pointer events.
Primary
Default
Hover
Focused
Disabled
Loading
Secondary
Default
Hover
Focused
Disabled
Loading
Tertiary Color
Default
Hover
Focused
Disabled
Loading
With Icons
Icons reinforce actions and reduce reliance on text alone. Use 16 px for md/lg sizes, 14 px for sm. Icon-only buttons require an accessible label.
Icon positions
Leading
Trailing
Dot
Icon only
Icon only (secondary)
Icon-only across all sizes
sm
md
lg
xl
2xl
Destructive
Use for irreversible or high-risk actions — deleting data, revoking access, cancelling subscriptions. Always confirm before executing.
Variants
States — solid destructive
Default
Hover
Focused
Disabled
Usage Guidelines
Rules
One Primary per view. Never place two Primary buttons side-by-side. Use Secondary or Tertiary for the supporting action.
Destructive actions require confirmation. Show a confirmation dialog or popover before executing delete or revoke operations.
Loading state blocks re-submission. Set pointer-events: none on the loading button to prevent double-submit.
Icon-only buttons need accessible labels. Always add a title or aria-label attribute.
Size matches context. Use md for most UI, sm for tables and toolbars, lg/xl/2xl for primary CTAs in page-level sections.
components / button groups
Button Groups
Button groups combine multiple related actions into a connected, cohesive control. They reduce visual noise and communicate that the actions are mutually related — use them for segmented navigation, multi-option selectors, and paired controls.
Segmented Groups
Buttons share a border and are visually connected. The first and last items carry border-radius; middle items have none.
2 items
3 items
4 items
Sizes
Icon Groups
Compact connected icon-only buttons. Ideal for toolbars and action bars where space is limited.
Alignment
View toggle
Stepper / Counter
A paired button group for numeric input — decrement, value display, and increment. Common in quantity selectors and pagination.
Default
1
Small
3
With min (1)
1
Radio Button Groups
Single-selection groups styled as connected buttons. Clicking any item activates it and deactivates the others — a more compact alternative to radio inputs.
Filter selection
Time range
Priority
Mixed Icon + Label Groups
Leading icon paired with a text label inside each button in the group, for additional context without losing the connected visual relationship.
States
Groups follow the same state model as individual buttons — disabled items remain visually connected to the group.
Default
One active
One disabled
All disabled
Usage Guidelines
When to use
Segmented groups for switching between related views or modes where only one can be active at a time (e.g. Grid / List, Day / Week / Month).
Radio groups as a compact alternative to radio inputs in filter bars, toolbars, and settings panels.
Icon groups in dense toolbars where label text would consume too much space.
Stepper for numeric quantity input (items, pages, units) where a full number input feels heavy.
Rules
Keep groups to 5 items maximum. Beyond 5 items the group loses clarity — use a dropdown or select instead.
Always show one active state in a radio group. A group with no selection indicates an error state.
Maintain consistent sizing. Never mix button sizes within a single group.
Icon-only groups must have accessible labels. Add title or aria-label on every icon-only button.
Don't mix hierarchies. All items in a group must share the same button hierarchy (Secondary is the standard; Primary groups are not permitted).
components / badges
Badges
Badges highlight status, counts, labels, and contextual metadata. They are typically used non-interactively as decorators attached to other UI elements or as standalone category labels in lists and tables.
Color Variants
Each color carries semantic meaning. Use color consistently across the product — don't repurpose red for non-error states or green for non-success states.
Brand
SolidSubtleOutline
Grey
SolidSubtleOutline
Red
SolidSubtleOutline
Orange
SolidSubtleOutline
Yellow
SolidSubtleOutline
Blue
SolidSubtleOutline
Purple
SolidSubtleOutline
Pink
SolidSubtleOutline
Sizes
Three sizes for different information density contexts. Use sm in tables and dense lists, md as the default, and lg for prominent status labels in cards and page headers.
Small
Active
Medium (default)
Active
Large
Active
With Dot Indicator
A leading dot reinforces the semantic color, especially useful for status labels where color may not be sufficient alone.
OnlineIdleOfflineWarningSyncingPendingBeta
With Icon
Leading or trailing icons add iconographic context. Keep icons at 10–12 px and use the same stroke style as the rest of the system.
Verified
Error
Warning
Info
Featured
Design System
Dashboard
Count Badges
Circular numeric badges used to show unread counts or quantity indicators. Truncate at 99+.
1 digit
4
2 digit
12
Truncated
99+
Red
3
Grey
7
Dot only
Dot red
In Context
Badges attached to other UI elements — nav items, buttons, avatars, and table cells.
Navigation items
Alerts
5
Dashboard
New
Users
24
Table cells
Unit ID
Status
Battery
Inverter
VCU-001
Online
87%
Running
VCU-002
Warning
23%
Running
VCU-003
Offline
—
Idle
VCU-004
Idle
54%
Standby
Usage Guidelines
Color semantics
Brand (green) — Success, active, verified, positive states.
Red — Errors, critical alerts, offline, destructive outcomes.
Badges are non-interactive by default. If a badge needs to be clickable (e.g. a filter chip or removable tag), use the trailing × icon variant and add focus/hover states.
Prefer subtle over solid. Subtle badges are easier to scan in tables and lists. Reserve solid for high-priority status that must stand out immediately.
Don't stack badges. Never place more than one badge in the same UI cell. If you need multiple attributes, use separate columns.
Keep labels concise. One or two words maximum. Avoid full sentences inside a badge.
Count badges cap at 99+. Never let a numeric badge show 3+ digits; truncate with "99+" to preserve the circular shape.
Chips
Interactive pills — the counterpart to the static Badge. Where a Badge decorates and only reads, a Chip is tappable: filter chips toggle a selection on and off, removable chips clear an applied filter or tag, and recent chips offer quick suggestions. All are pill-shaped with no borders. Used in the Retrofit and Kit Production flows.
Filter Chips
Multi-select toggles. An unselected chip is neutral; a selected one turns brand-tinted with a leading check. A danger variant flags an exclusionary or destructive filter.
Applied filters or tags, each with a trailing ✕ to clear it. Use these to show what's currently filtering a list, with a "Clear all" escape.
Line AThis weekStandard kit
applied filters with ✕ · clear-all escape
Recent & Suggestion Chips
Tappable neutral pills for recent searches or quick suggestions. Lighter weight than filter chips — they trigger an action rather than hold a selected state.
recent searches · tap to re-run
Usage Guidelines
Chip vs Badge: a Chip is interactive (tap to toggle, remove, or run); a Badge is a static decorator. If the user can't act on it, use a Badge.
Selected = brand tint + check. Make the toggled state unmistakable; don't rely on a subtle shade change alone.
Removable chips need a Clear all. When several filters are applied, always offer a one-tap escape alongside the individual ✕s.
Chips reuse the status vocabulary for tints — brand for selected, red for danger — the same palette as the status pill and Status Dots.
components / dropdowns
Dropdowns
Dropdowns surface a list of options from a trigger. They come in two forms — contextual menus attached to a button or icon, and input dropdowns that replace a native select element inside forms.
Menu Variants
Three content configurations: plain text, with a leading icon, and with a checkbox for multi-select. All menus support dividers and section headers.
Default
Actions
View details
Edit
Duplicate
Archive
Move to…
Delete
With icons
File
New file⌘N
Open folder
Save⌘S
Export as…
Delete
With checkboxes
Filter by status
Active
Pending
Archived
Draft
Deleted
With Avatars
User-centric dropdowns surface avatar and name together. Use for team member selection, assignee pickers, and account switchers.
Assignee picker
Assign to
RORidwan O.
AMAlex M.
JKJamie K.
SPSam P.
With status dot
Set status
Online
Away
Busy
Offline
Triggers
Click any trigger below to toggle a live dropdown. Triggers come as button, icon-only, or avatar.
Button
Edit
Duplicate
Delete
Icon
Edit
Copy link
Delete
Avatar
RO
Ridwan O.
ridwan@rechaj.com
Profile settings
Preferences
Sign out
Input Dropdowns
Select-style controls for form fields. Four leading types — Default, Icon, Avatar, Dot — each available with or without a label and supporting text.
Without label
Select option
Option A
Option B
Option C
Select region
Africa
Europe
Americas
Asia Pacific
Select status
Active
Paused
Offline
Assign user
RORidwan O.
AMAlex M.
JKJamie K.
With label & supporting text
Category
Select category
Design
Engineering
Product
Choose the category that best fits.
Priority
High
High
Medium
Low
Sets the task urgency level.
Open / focused state
Team member
AMAlex M.
Search
Lagos
Usage Guidelines
Rules
Keep lists scannable. Aim for 5–8 items before introducing a search or grouping. Never exceed 12 ungrouped items.
Use section headers sparingly. Only add a header when the items below it need context that isn't obvious from their labels.
Destructive items go last, below a divider. Delete, Remove, and Revoke must always be separated from safe actions.
Input dropdowns replace native selects in forms. Use them when you need custom leading content (icon, avatar, dot) or branded styling.
Close on outside click and Escape. Both must be handled for keyboard and pointer accessibility.
components / inputs
Inputs
Text inputs collect typed information from users. They come in multiple structural variants and carry clear state feedback — default, focused, filled, error, and disabled.
Variants
Six structural variants cover the most common form patterns — from a plain text field to search inputs, password fields, and textarea.
Label
Default
Plain text field with label and placeholder. The most common pattern in forms.
Label
Leading icon
Reinforces the purpose of the field. Common for search, email, and URL inputs.
Label
kg
Trailing adornment
Appends a unit, currency, or action icon to the right of the input.
Password *
Password
Trailing button toggles visibility. Required indicator on the label.
Label
⌘K
Hint text helps users understand the field purpose.
Both adornments + hint
Lead icon and trailing badge. Helper text sits below the field.
Notes
Use for multi-line text that can't fit in a single line.
Textarea
Multi-line input. Vertically resizable. Same label and hint pattern.
States
Inputs communicate their current interaction state through border color, shadow, and opacity changes.
Default
Hovered
Focused
Filled
Error
Enter a valid email.
Disabled
Sizes
Three sizes cover different density contexts — compact SM for data tables, default MD for most forms, and spacious LG for hero or marketing inputs.
SM
36px height
MD Default
44px height
LG
52px height
Full composition
A realistic form group combining label, required marker, leading icon, hint, and error state together.
Full name *
Email address *
Enter a valid email address.
Notes
This will be visible to all workspace members.
Usage guidelines
Always pair an input with a visible label. Placeholder text disappears on input and cannot substitute for a label. Screen readers rely on labels.
Show the error state inline. Place error messages directly below the field with an error icon. Never rely on a banner or toast to explain a form validation failure.
Use hint text proactively. If the expected format isn't obvious (date, phone, unit), add a hint below the field before the user has to guess.
Don't use LG inputs inside dense tables or sidebars. Match input size to the surrounding layout density. SM for tables, MD for standard forms, LG for full-page flows.
Textarea is not for rich content. Use textarea only for plain text notes or descriptions. If you need formatting, use a dedicated rich-text editor.
components / toggles
Toggles
Toggles switch a single setting on or off immediately — without requiring a submit action. Use them for binary preferences and feature flags, never for multi-step confirmations.
Sizes & states
Toggles come in three sizes. Each size has four states: off, on, disabled-off, and disabled-on.
SM
Off
On
Disabled off
Disabled on
MD
Off
On
Disabled off
Disabled on
LG
Off
On
Disabled off
Disabled on
With labels
Toggles can carry an inline label, a label with supporting description, or sit label-right in a settings list row.
Inline label
Toggle with a short action label to its right. Clicking the label also toggles.
Label + description
Stacked label and sub-text. Align the track to the top of the text block.
Auto-sync
Label left, toggle right
Preferred layout inside settings panels — label on the left, toggle on the right edge.
In context — settings list
The most common real-world pattern: a list of preference rows, each with a title, optional description, and a toggle on the trailing edge.
Push notifications
Receive alerts when a vehicle goes offline or battery drops below 20%.
Auto-assign riders
Automatically match available riders to unassigned VCUs at the start of a shift.
Maintenance mode
Lock all VCUs from rider assignment while servicing is in progress.
Data export
Allow telemetry data to be exported as CSV from the fleet dashboard.
Geofence alerts
Trigger an alert when a unit exits the configured operational zone.
Usage guidelines
Toggles take effect immediately. Don't use a toggle if the change needs a save or submit action — use a checkbox inside a form instead.
Label the state, not the action. Write "Dark mode" not "Enable dark mode". The toggle itself communicates on/off.
Use MD as the default size. SM is for dense tables or toolbars. LG is for prominent single-feature flows only.
Don't use toggles for multi-select. If the user can enable more than one option from a group, use checkboxes — not a row of toggles.
Disabled toggles need explanation. If a toggle is locked, add a hint or tooltip explaining why the setting cannot be changed at this time.
components / checkboxes
Checkboxes
Checkboxes let users select one or more items from a list, or toggle a single option on or off. Unlike toggles, they sit inside forms and require a submit action to take effect.
Variants
Five structural variants cover standalone options, labeled fields, indeterminate states, and grouped selections.
Standalone
No label. Used in table row selectors and compact list controls.
With label
Inline label to the right. Clicking anywhere on the label toggles the checkbox.
Label + description
Stacked label and supporting text for more complex options.
Indeterminate
Shown when a parent controls a partially-selected group of children.
Group
Multiple related options stacked vertically. Allow any combination of selections.
Disabled
Both unchecked and checked disabled states. Always pair with a tooltip explaining why.
States
All interactive states shown at once. Hover is shown statically — the border darkens to indicate pointer proximity.
Unchecked
Default
Hovered
Focused
Disabled
Checked
Default
Hovered
Focused
Disabled
Indeterminate
Default
Hovered
Focused
In context — permission list
A realistic use pattern from the KaaG dashboard: a list of notification permissions with a "select all" parent controlling child items.
Usage guidelines
Checkboxes are for forms, not instant actions. If the change takes effect immediately without a submit, use a Toggle instead.
Use indeterminate for partial parent selection. When a parent checkbox controls a group and only some children are checked, show the indeterminate (dash) state — never leave the parent unchecked.
Label every checkbox. In tables, add an aria-label even when there's no visible text.
Don't use checkboxes for mutually exclusive choices. If only one option can be selected at a time, use radio buttons.
Keep groups to 7 items or fewer. Longer lists should use a multi-select dropdown or a searchable list.
components / avatars
Avatars
Avatars represent users, teams, or entities. They display a profile photo, initials fallback, or a generic icon — with optional status indicators and grouping into stacks.
Sizes
Six sizes from XS (24px) to 2XL (72px). Use XS–SM in dense tables and lists, MD–LG in cards and profiles, XL–2XL for hero and account pages.
ROXS · 24
AMSM · 32
JKMD · 40
TFLG · 48
KNXL · 56
RO2XL · 72
Variants
Avatars use a photo when available, fall back to initials, and fall back again to a generic icon. Circles for people, rounded squares for teams or entities.
ROAMJKTF
Initials
Two-letter monogram on a coloured background. Assign colours consistently per user.
Icon fallback
When no photo or name is available. Uses a neutral grey background with a user icon.
KGFT
Rounded square
For teams, organizations, or system entities — distinguishes them from user avatars.
RO
Ridwan Odebiyi
Online
AM
Alex Mensah
Busy
With status dot
A coloured dot overlaid on the bottom-right corner indicates presence or operational state.
TFJKAMRO
5 members
+4JKAMRO
7 assigned
Stack
Overlapping row of avatars for compact group display. Overflow count shown as a "+N" chip.
RO
Ridwan Odebiyi
Fleet Manager
AM
Alex Mensah
Rider · VCU-004
With name row
Avatar paired with name and role or subtitle. Standard pattern for people lists and assignee pickers.
Status indicators
Status dots anchor to the bottom-right corner and scale with the avatar size. Four semantic states map to operational presence in the KaaG system.
RO
Online
#01E46F
AM
Busy
#ef4444
TF
Away
#f59e0b
Offline
text-muted
Usage guidelines
Always provide an initials or icon fallback. Never show a broken image placeholder when a photo fails to load.
Use circles for people, squares for entities. This visual distinction prevents users from confusing team or system avatars with individual profiles.
Cap stacks at 5 visible avatars. Anything beyond that becomes illegible. Use a "+N" overflow count and show the full list in a tooltip or popover.
Assign initials colours deterministically. Hash the user ID to a colour slot so the same person always gets the same colour across sessions and devices.
Status dots reflect real-time state. In the KaaG dashboard, map Online → active rider, Busy → on delivery, Away → break, Offline → not logged in.
components / tooltips
Tooltips
Tooltips surface brief contextual information on hover or focus. They're non-interactive — for richer content requiring actions, use a popover instead.
Placements
Four anchor positions — top, bottom, left, right. Always prefer top. Switch to bottom or sides only when screen edges would clip the tooltip.
Tooltip on top
Top
Tooltip on bottom
Bottom
Left
Left
Right
Right
Sizes
Three sizes. SM for dense UI like table cell hints, MD (default) for most controls, LG for key concepts that benefit from a slightly larger read area.
SM
Short hint
MD Default
Default tooltip
LG
Larger tooltip label
Variants
The default tooltip is dark and single-line. The rich variant supports a title, body text, and wraps at 220px — use it for concepts that need a sentence or two.
Tooltip label
Default
Battery state is updated every 30 seconds via the telemetry feed.
Multi-line
Battery Swap
The last recorded swap time for this VCU. Swaps are logged automatically when a new battery is detected.
Rich
Settings
On icon button
Usage guidelines
Tooltips are for supplemental info only. Never put information a user needs to complete an action inside a tooltip — it disappears on touch devices.
Always label icon-only buttons with a tooltip. Every icon button must have a tooltip (or aria-label) for accessibility.
Keep copy under 10 words. If you need more than a sentence, switch to the rich variant or a popover.
Tooltips must not contain interactive elements. No links, buttons, or form fields — that belongs in a popover with focus trapping.
Default to top placement. Top is the safest — it avoids overlap with the element the user is hovering and clears most navigation bars.
components / progress indicators
Progress Indicators
Progress indicators communicate the status of an ongoing operation — a file upload, a form submission, a multi-step flow. Use the right type for the context: linear bars for determinate progress, spinners for indeterminate waits, rings for compact numerics, and steps for multi-stage workflows.
Linear bar
Use when progress can be measured as a percentage. Show the percentage value alongside the bar. Animate the fill width on value changes.
Uploading telemetry log68%
Battery charge100%
Storage capacity87%
Sync failedError
Processing route data—
Indeterminate — animated stripe pattern
Bar sizes
Three heights. SM (4px) for inline contexts like table cells. MD (8px) default. LG (12px) for prominent upload or onboarding flows.
SM4px
MD Default8px
LG12px
Circular ring
Compact numeric progress. Use in cards, stats panels, and anywhere a bar would be too wide. The centre can hold a percentage or an icon.
72%
Battery
38%
Low charge
12%
Critical
Complete
Spinner
For indeterminate waits where no percentage can be derived — API calls, live sync, and background processing. Three sizes match button and container contexts.
SM · 20px
MD · 36px
LG · 52px
In button
Step indicator
For multi-stage workflows — onboarding, setup wizards, checkout flows. Completed steps show a check, the active step is highlighted, future steps are muted.
Account
Fleet setup
3
VCU config
4
Riders
5
Review
In context — fleet sync status
Linear bars used inside a list to show per-VCU battery and data sync state in the KaaG dashboard.
VCU-001 — Ridwan O.94%
VCU-002 — Alex M.31%
VCU-003 — Jamie K.9%
VCU-004 — Syncing…—
Usage guidelines
Use a bar when you know the percentage; use a spinner when you don't. Never fake progress with an animated bar that isn't tied to real state.
Always show a percentage or label with a bar. A bar alone gives no absolute sense of where things stand.
Use semantic colour. Green for healthy, amber for warning (<40%), red for critical (<20%). Apply these thresholds consistently across the KaaG dashboard.
Step indicators belong in wizards, not dashboards. Avoid exposing step progress inside dense operational views — reserve it for setup and onboarding flows.
components / sliders
Sliders
Sliders let users select a value from a continuous or stepped range. Use them for settings like volume, brightness, thresholds, and budget — where the exact number matters less than the relative position.
Default
A single-handle slider on a labelled track. The value updates live as the thumb is dragged.
Brightness70%
Alert threshold20%
Amber — values below this trigger a low-battery warning
Critical threshold10%
Red — values below this trigger a critical alert
Sizes
Three track heights. SM for inline or compact settings, MD (default) for standard forms, LG for prominent controls in settings panels.
SM
3px track
MD Default
5px track
LG
8px track
Stepped with tick labels
Discrete steps with visible tick labels beneath the track. Use when the set of valid values is small and named.
Refresh interval30s
5s10s30s1m5m
Geofence radius500m
100m250m500m1km2km
States
Default, focused (green ring on thumb), and disabled.
Default
Disabled
Usage guidelines
Always show the live value. Display the current number next to the slider so users know exactly what they've selected without having to guess from the thumb position.
Use stepped sliders for named values. If the valid options are a small discrete set (5s, 10s, 30s…), use step and add tick labels.
Don't use sliders for precise numeric input. If the user needs to type an exact value, pair the slider with a number input or use a number input alone.
Semantic colours for thresholds. In the KaaG dashboard, use amber for warning thresholds and red for critical ones — consistent with the badge and progress colour system.
components / nav bar
Nav Bar
Navigation bars orient users within the product and provide quick access to top-level destinations. The KaaG dashboard uses a sidebar nav for its operational density. A top nav pattern is also provided for lighter contexts.
Sidebar — expanded
The primary nav pattern for the KaaG dashboard. Groups related destinations, shows an active state, and supports badges for live counts.
Main content area
Sidebar — collapsed
Collapsed to icon-only at 56px wide. Labels are hidden; tooltips must be present on each icon button for accessibility.
Collapsed sidebar — icons only
Item states
Four states — default, hover, active, and with a badge. The active item uses brand-dim background with brand text.
Use sidebar for operational dashboards. The vertical layout accommodates more destinations, group labels, and badges without wrapping.
Only one active item at a time. The active state communicates the current location. Never highlight two items simultaneously.
Collapsed sidebar requires tooltips. When labels are hidden, every icon button must have a title or aria-label.
Badges are for live counts, not static labels. Green badges for counts (unassigned riders, pending tasks), red for alerts requiring immediate attention.
Keep top-level destinations to 7 or fewer. Beyond that, group into sections or move lower-priority items into a secondary nav.
Tabs
Tabs organise related content into panels accessible from a single surface. Three styles: Line tabs for page-level navigation, Pill tabs for prominent filtering, and Filter tabs for in-card / in-table filtering where the parent already carries hierarchy. Supports count badges, icon prefixes, and a disabled state.
Anatomy
A tab bar is a flex row of tab items. Each item holds an optional icon, a label, and an optional badge. An active indicator (2px green underline or filled pill) marks the selected item.
① Icon (optional) 16×16
② Label 13px/500
③ Badge (optional) 18px · green tint
④ Active indicator 2px · #01E46F
Variants
Line tabs for page navigation, pill tabs for prominent inline filtering, filter tabs for subtler in-card filters. All variants support optional badges and icons.
Line tabs
Default style. Bottom border bar + 2px active underline. For top-level screen navigation.
Pill tabs
Filled capsule container. Active item gets solid green background. For in-component filters.
With count badges
18px pill badge next to the label. Adapts colour on active (green tint on line, white-tinted on pill).
With icons
16×16 icon left of label. Inherits current tab colour so it shifts green on active automatically.
Filter tabs
Outlined pill container, subtler than the solid-green pill variant. Active item gets light-grey fill + dark-green text. Use inside cards or tables to filter content without competing with surrounding hierarchy. First used in the Identity Admin approvals queue and the Swap Support Resolution flow.
States
Both tab styles share the same four states — only the visual treatment differs.
Line tabs
Default
Hover
Active
Disabled
Pill tabs
Default
Hover
Active
Disabled
Live example — VCU detail
Click tabs to switch panels. The pill filter row is also interactive.
VCU-07
SN: VCU-SN-00724 · Assigned to Seiye A.
Live
Battery SoC
68%
Inverter
ON
Uptime today
96%
Last swap
6:34 PM
Voltage220 V
Current4.2 A
Temperature81°C
RSSI-72 dBm · Good
Data balance1.8 GB
Today, 6:34 PM
Alagbado Station 1 · SoC at swap: 18%
Yesterday, 5:20 PM
Alagbado Station 1 · SoC at swap: 21%
Mon, 2 Jun · 7:01 PM
Alagbado Station 2 · SoC at swap: 16%
Sun, 1 Jun · 6:55 PM
Alagbado Station 1 · SoC at swap: 19%
7-day avg depletion: 3.8% / hr
Total active hours: 67h 33m
Inverter window: 9 PM – 7 AM daily
Design Notes
Tab height
36px. Padding: 0 14px. Border-radius 8 8 0 0 for line tabs, 7px for pill tabs.
Active indicator
Line: 2px bottom, #01E46F, positioned at –1.5px to overlay the border. Pill: solid green fill.
Badge
18px height, 9px radius. Bg: var(--bg-hover) at rest. Active: brand-dim bg + brand text.
Border-radius 10px, bg var(--bg-surface), 4px padding all around, no bottom border.
Panel content
Hidden via display:none. No animation by default. Add fade/slide for mobile contexts.
Drop Zone
Drag-and-drop area for file selection. Supports click-to-browse fallback.
Drop files here to upload
Supports PDF, CSV, PNG, JPG — max 10 MB per file
Default drop zone · idle state
Drag-over State
Release to upload
Drop your files now
Drop zone · drag-over state · brand border + tinted bg
Uploading State
Progress bar shown while files transfer.
PDF
battery-report-april.pdf
2.4 MB · Uploading…
62%
CSV
rider-assignments-w16.csv
148 KB · Uploading…
88%
Upload in-progress · two files at different progress levels
File States
Completed, errored, and queued file rows in the upload list.
PNG
vcu-photo-unit-04.png
1.1 MB
Done
PDF
telemetry-export.pdf
18 MB · File exceeds 10 MB limit
Error
JPG
battery-swap-log.jpg
820 KB · Queued
Waiting
File states: done · error · queued
Usage Guidelines
Always show accepted file types and size limits in the drop zone subtitle so users don't need to guess.
Show per-file progress for uploads over 1 MB. For small files a spinner or instant completion is fine.
Error messages must be specific — "File too large" is better than "Upload failed".
Allow removal of any file — queued, uploading, done, or errored — with a clear ✕ target.
Photo Capture
Live photo-evidence capture for field and shop-floor flows — inspection checkpoints, defect proof, serial-bind photos. Unlike File Uploads (a form-style picker), capture tiles flip from a dashed empty affordance to a dark media thumbnail the moment a photo is taken, and report completion inline. Used across the Retrofit, Kit Production, and Inventory apps.
Tile States
A capture tile has two states. Empty shows a dashed border and camera icon; captured fills with the photo (dark media thumbnail) and reveals a circular remove control.
Empty
Captured
Empty · captured (with remove control)
Slot Grid
A fixed set of required shots laid out 3-up, each with a caption. When every slot is filled, an inline completion pill confirms the checkpoint is done — a small green pill, never a flooded-green card.
VIN plate
Serial label
Wide shot
Checkpoint complete
Three required shots, all captured · completion pill
Horizontal Strip
An open-ended set of photos — a persistent "add" tile leads a scrollable row of captured thumbnails, each with its own remove control. Use when the number of shots isn't fixed.
3 photos attached · tap a thumbnail to view full screen
Add tile + scrollable captured thumbnails
Evidence & Result
In QA contexts the captured set carries a verdict pill (pass / fail) and an optional note. The defect variant tints the note to flag a logged issue.
Passed
Torque values within spec. Both mount points verified.
Defect logged
Casing crack on lower-left mount. Re-work required before sign-off.
Pass verdict + note · fail verdict + defect note
Usage Guidelines
Use Photo Capture for evidence, File Uploads for documents. Capture is camera-first with fixed/visual slots; File Uploads is a form picker with a file list.
Slot grid for required shots, strip for open-ended. Caption every slot so the user knows what each shot is for; only the slot grid should drive a completion pill.
Captured thumbnails are the only rounded squares allowed — they are media, so the 14px radius is correct. The remove control stays circular.
Signal completion subtly. A small green pill or check confirms done — never flood the tile or card green.
Always allow removal of a captured photo with a clear circular ✕ on the thumbnail.
Carousel
A media viewer for stepping through a set of photos — the lightbox a captured-evidence thumbnail opens into. A 4:3 stage carries the image with an overlaid name and an "n of total" counter; a nav row below pairs circular prev/next controls with a dot pager whose active dot widens to a pill. The stage is always a dark media surface. Used in the Kit Production and Inventory flows.
Anatomy
The stage shows the current photo with a name pill (bottom-left) and a counter pill (bottom-right). Below, prev/next circular buttons flank the dot pager.
Serial plate2 / 5
Stage (name + counter) · prev/next · dot pager
Dot Pager
The active dot widens into a pill and tracks position. The counter pill carries the exact index for precision when there are many photos.
1 / 5
3 / 5
5 / 5
active dot widens · counter mirrors position
Usage Guidelines
It's the lightbox for captured evidence. Tapping a Photo Capture thumbnail opens this Carousel to that photo's index.
Always presented as an overlay, never inline. On mobile and tablet it opens inside a Bottom Sheet (backdrop + drag handle + a title like "Photo evidence"); on web it sits in a centered Dialog. Open it from a thumbnail and dismiss back to the list — don't embed the stage directly in a page.
Stage stays dark. Like the camera surfaces, the media stage is always dark regardless of theme — photos read against it, not a themed panel.
Dots for a few, counter for many. Keep the dot pager to ~8 photos; beyond that lean on the "n of total" counter and let the dots scroll or drop.
Always label the shot. The name pill says what the photo is ("Serial plate", "Wide shot") — a bare image with no caption forces guessing.
Default — No Leading Element
Items are connected in one block, separated by a bottom border. Active row gets a green underline and the chevron flips.
What is Rechaj?
Rechaj is an electric motorcycle fleet management platform that monitors VCU units, battery swaps, rider assignments, and real-time telemetry across your entire fleet.
How do I assign a rider to a VCU?
Navigate to the Riders section, select the rider profile, and use the "Assign Unit" dropdown to link them to an available VCU from the fleet.
What triggers a low battery alert?
A low battery alert fires when state of charge drops below 15%. It appears on the dashboard and sends a push notification to the assigned operator immediately.
How often does telemetry data refresh?
Telemetry refreshes every 5 seconds for active units. Units in sleep mode send a heartbeat every 60 seconds to confirm connectivity.
Default · chevron indicator · 4 items
Default — Leading Icon
Plus-circle when collapsed, minus-circle when expanded. Items connected with bottom-border separators.
Battery health overview
View the health score of all batteries in your fleet, including charge cycles, temperature ranges, and predicted remaining life.
Live map tracking
The live map shows real-time GPS position of all active units. Green = active, yellow = idle, red = offline.
Rider performance metrics
Track riding distance, average speed, braking patterns, and energy efficiency per rider. Export as CSV for deeper fleet analysis.
Geofence zone management
Define custom geofence zones per depot. Receive automatic alerts when a unit enters or exits a restricted boundary.
Default type · leading icon · plus/minus circle
Default — Leading Number
Step-by-step flow with a dark number pill. Active step turns green.
01
Set up your fleet
Register each VCU by scanning its QR code or entering the serial number. Assign a home depot and default rider to get started.
02
Configure alert thresholds
Define battery-low thresholds, speed limits, and geofence boundaries per unit or fleet-wide. Changes take effect within 30 seconds.
03
Invite your operations team
Add operators via email from Team Settings. Assign roles — Admin, Operator, or Viewer — to control access levels.
Default type · leading number · dark pill → green on active
Nested — No Leading Element
Each item is its own bordered card with 8px gap between them. Active card gets a full green border (#05853e) on all sides.
What is Rechaj?
Rechaj is an electric motorcycle fleet management platform that monitors VCU units, battery swaps, rider assignments, and real-time telemetry.
How do I assign a rider to a VCU?
Go to the Riders section, select the rider profile, and use the "Assign Unit" dropdown to link them to an available VCU.
What triggers a low battery alert?
A low battery alert fires when state of charge drops below 15%. It appears on the dashboard and sends a push notification immediately.
How often does telemetry data refresh?
Telemetry refreshes every 5 seconds for active units. Sleep mode units send a heartbeat every 60 seconds.
Nested type · card per item · 8px gap · green border on active
Nested — Leading Icon
Card-per-item with plus/minus circle leading icon. Active card has green border.
Battery health overview
View the overall health score of all batteries, charge cycles, temperature ranges, and predicted remaining life per unit.
Live map tracking
Real-time GPS position of all active units. Green = active, yellow = idle, red = offline. Click any pin for unit details.
Rider performance metrics
Track riding distance, average speed, braking patterns, and energy efficiency per rider. Export as CSV.
Geofence zone management
Define custom zones per depot. Receive alerts when a unit enters or exits a restricted boundary.
Nested type · leading icon · card per item
Nested — Leading Number
Step-by-step flow as individual cards. Active card gets a green border and green number pill.
01
Set up your fleet
Register each VCU by scanning its QR code or entering the serial number. Assign a home depot and default rider.
02
Configure alert thresholds
Define battery-low thresholds, speed limits, and geofence boundaries. Changes take effect within 30 seconds.
03
Invite your operations team
Add operators via email from Team Settings. Assign Admin, Operator, or Viewer roles to control dashboard access.
Nested type · leading number · green border + green pill on active
Usage Guidelines
Default type — items are connected in one block, separated by a bottom-border line. Use in dense lists or tables.
Nested type — each item is an independent card (border all sides, 10px radius, 8px gap). Use when items need visual separation.
One item open at a time per accordion group.
Icon type uses plus-circle (collapsed) and minus-circle (expanded) as the leading toggle.
Live Alert Triggers
Click any button below to fire a real toast notification. Toasts auto-dismiss after 4 seconds and can be manually closed.
Click to trigger live toast · auto-dismiss 4s · closable
Leading Badge — All Colors
Toast-style alert with badge on the left. Uses mix-blend-multiply for subtle integration on any background.
New feature
We've just released a new feature
New feature
We've just released a new feature
Error
There was a problem with that action
Warning
Just to let you know this might be a problem
Success
You've updated your profile and details
Leading badge · md size · 5 color variants
Trailing Badge — All Colors
Badge positioned after the message text.
We've just released a new feature
New feature
We've just released a new feature
New feature
There was a problem with that action
Fix now
Just to let you know this might be a problem
Warning
You've updated your profile and details
Success
Trailing badge · md size
Large Size
New feature
We've just released a new feature
Error
There was a problem with that action
Success
You've updated your profile and details
Large size · 13px text
Status Banner
A persistent, inline advisory that sits in the content flow — "kit requested", "bundle pending", "unit quarantined", "identity confirmed". Unlike Alerts, which are transient toasts that auto-dismiss, a status banner stays put until the underlying state changes. Tint-only (never bordered), with a neutral title and a tonal icon carrying the severity. Used across the Retrofit, Kit Production, and Inventory apps.
Tones
Four severities. The tint and tonal icon signal meaning; the title stays neutral text so it reads in both themes.
Bundle pending
Parts are being picked at the store. You'll be notified when the kit is ready.
Identity confirmed
Operator badge verified. You're cleared to start this work order.
Calibration due soon
This torque tool is within 3 days of its calibration window.
Unit quarantined
A defect was logged against this module. It cannot proceed until cleared.
Info · success · warn · danger
With Action
When the banner should route somewhere, make the whole row tappable and add a trailing call-to-action. Reserve this for banners that have a clear next step.
Tappable row + trailing CTA
Title Only
Drop the sub-line for a compact, single-line banner when the title says enough.
All checkpoints passed
Read-only — this work order is closed
Compact, single-line
Usage Guidelines
Banner vs Alert: use a banner for a state that persists ("quarantined", "pending"); use an Alert (toast) for a transient confirmation that auto-dismisses.
Tint only — never border. Severity is carried by the background tint and tonal icon, not a stroke.
Keep the title neutral. Let the icon and tint do the colour work; coloured title text reduces legibility in dark mode.
Only add an action when there's a next step. A banner with a CTA should route somewhere; otherwise leave it informational.
One banner per context. Stacking several competing banners dilutes them — surface the most important state.
Status Hero
The "current state" banner that sits at the top of a record detail screen — the answer to "what's the state of this thing right now?". It's a neutral white card with a 36px circular tonal icon that carries the status; the card itself never floods with colour. This formalises a long-standing rule into a named component. Used across every Inventory detail screen.
Anatomy
A tonal circular icon, a state label, and a one-line sub. The icon is the only coloured element — the surface stays neutral so the hero reads the same as any other card.
In serviceDeployed to Station 3 · last checked today
tonal icon · label · sub
Tones
The icon's tone signals the state; everything else stays neutral. Reuse the shared vocabulary — green healthy, blue informational, amber attention, red blocked, neutral inactive.
In serviceDeployed to Station 3
Awaiting QAIn the inspection queue · 2 ahead
Parked — shortageWaiting on BMS module · since Tue
QuarantinedDefect logged · cannot proceed
DecommissionedRetired from the fleet · archived
green · blue · amber · red · neutral
Usage Guidelines
White card, tonal icon — never a flooded card. The state colour lives only in the 36px icon tile; the surface stays neutral. This is the hard rule the component exists to enforce.
One per detail screen, at the top. The Status Hero answers "what state is this in?" — it sits above the record body, not repeated inline.
Status Hero vs Status Banner: the Hero is the screen's headline state (a card); a Banner is an inline advisory in the content flow (a tinted strip). Use one Hero and as many Banners as the content needs.
Sub-line gives the "why" or "since". Pair the state label with the reason or a timestamp — "Parked — shortage · since Tue" beats a bare "Parked".
Reconciliation
Surfaces an expected-vs-actual mismatch — a scanned serial that doesn't match the work order, a count that's off, a part that wasn't on the list — and routes the user to a resolution. A banner states the problem and shows the comparison; a three-up action grid offers the ways out. Used in the Retrofit and Kit Production scan flows.
Mismatch Banner
A neutral card with a red tonal icon — the title and the struck-through scanned value carry the alarm, not a flooded-red background. The comparison block lays expected against scanned.
Serial mismatch
The scanned unit doesn't match the work order. Resolve before continuing.
ExpectedSN-4821-77-A
ScannedSN-4820-19-C
red tonal icon · expected vs struck-through scanned
Resolution Actions
A three-up grid of ways out, icon tone signalling severity: green to retry the safe path, amber to proceed with caution, red to abandon. Each is a tappable tile.
green (retry) · amber (caution) · red (abandon)
Usage Guidelines
Always show expected vs actual. A mismatch the user can't see is one they can't fix — surface both values, with the wrong one struck through.
Route to a resolution, don't dead-end. Pair the banner with concrete actions; never leave a mismatch as a bare error message.
Tone the actions by severity. Green is the safe retry, amber proceeds with caution (often needs a co-sign), red abandons — make the risky path visually distinct.
Neutral card, red accents. Like every other surface, the card stays neutral — the red icon, title, and struck value carry the alarm, not a flooded background.
Live Dialog Triggers
Click a button to open the modal dialog. Close with the × button, Cancel, or press Escape — or click outside the dialog.
Click to open modal · closable via ×, Cancel, Escape, or backdrop
No Icon
Minimal dialog with title, body text, close button and action sheet.
Alert title
This action cannot be undone. This will permanently delete your account from our servers.
Alert dialog · No Icon · small action sheet
With Icon
Icon variant uses a red featured icon to draw attention to destructive actions.
Alert title
This action cannot be undone. This will permanently delete your account from our servers.
Alert dialog · With Icon · red featured icon
Full Action
Full-width action buttons span the entire footer — used for high-stakes confirmations.
Alert title
This action cannot be undone. This will permanently delete your account from our servers.
Alert dialog · Full action · wide buttons
Usage Guidelines
Use for destructive or irreversible actions only — deletion, permanent changes, or critical confirmations.
Red icon signals danger. Use the icon variant when the risk to the user is high.
Cancel always appears left, Continue right. Green (#01e46f) on Continue, white on Cancel.
Keep body text concise — 1–2 lines maximum. Users don't read long dialogs under stress.
Chevron Divider
Standard breadcrumb trail. Last item is active (green). Uses single chevron › as separator.
Active item is always green (#05853e) — represents the current page. All previous items are dark (#202020).
Use slash divider for file paths, chevron for navigation hierarchies.
Borders optional — use the bordered variant when the breadcrumb sits in a content area with clear separation needs.
Keep to 6 items max. Use a truncated "…" item in the middle for deeper hierarchies.
Anatomy
A bottom sheet slides up from the bottom of the mobile screen. It contains a drag handle, optional close button, content area, action buttons, and a home indicator.
Sheet title
Supporting description text that explains the action being requested from the user.
1
Drag handle — 59×4px pill, #f0f0f0, centered at top. Indicates the sheet can be dragged to dismiss.
Are you sure you want to proceed with this action?
Horizontal — side by side · 14px · Cancel left, Continue right
Examples
Common use-case variants showing how content adapts inside the bottom sheet — list picker, edit form, and success confirmation.
Select currency
🇺🇸US Dollar — USD
🇳🇬Nigerian Naira — NGN
🇬🇧British Pound — GBP
🇪🇺Euro — EUR
List Picker — selected item shows green checkmark
Edit profile
Full name
Phone number
Email
Edit Form — stacked fields with labels, Save + Discard actions
Payment successful
Your payment of ₦12,500 has been confirmed and processed.
ReferenceRCJ-20240429
Amount₦12,500.00
Success State — centered, green check icon, transaction summary
Design Tokens
Border radius
Sheet: 20px 20px 0 0
Buttons: 12px
Icon bg: 14px
Close btn: 50% (circle)
Spacing
Horizontal pad: 20px
Vertical pad: 16px
Content gap: 8px
Action gap: 10px
Colors
Sheet bg: #ffffff
Handle: #f0f0f0
Continue: #01e46f
Icon bg: #fff7c2
Typography
Heading: General Sans SemiBold, 20px / 30px
Body: Regular, 14px / 20px, #646464
Btn (vertical): SemiBold, 16px
Btn (horizontal): SemiBold, 14px
Usage Guidelines
Mobile-only component — Bottom sheets are designed for mobile viewports. Avoid using them on desktop; prefer modals or popovers instead.
Always include a drag handle — The 59×4px handle signals dismissal affordance. Never remove it.
Close button is optional — Include the close button (32px circle) when the sheet has no clear dismiss action, or when content is form-based.
Use vertical actions for primary confirmations, horizontal layout when both actions carry equal weight (e.g. Cancel / Confirm).
Featured icon uses amber #fff7c2 bg for warnings/confirmation. Use green (#e6faf0) for success states.
Home indicator is always present — the dark pill (134×5px) anchors the bottom and follows iOS/Android home gesture area standards.
Card
Cards are elevated surface containers that group related content and actions.
The system ships five variants: Metrics (vertical and horizontal) for compact data display,
Form for authentication and input flows, Small Card for condensed informational content,
and Image Card for rich media presentations.
Metrics · Vertical
Icon and metric text arranged side-by-side. Best for compact dashboard tiles where horizontal space is limited.
Active inventory1,342
Avg. ride time18 min
Weekly trips8,204
179px wide · 16px padding · row layout
Metrics · Horizontal
Icon stacked above the metric text. Use this when the card sits in a column layout or labels need more reading room.
Compact informational card with a contained content region. The inner grey area visually separates supporting copy from the card's title and primary action.
Small CardThis card uses the small size variant.
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Rich media card leading with a full-width image followed by a title, description, and an outlined action button. Use for articles, events, and feature spotlights.
Design systems meetupA practical talk on component APIs, accessibility, and shipping faster.
Full set side-by-side. Toggle dark mode to compare themed states.
Active inventory1,342
Active inventory1,342
Login to your accountEnter your email below to login to your account
Small CardThis card uses the small size variant.
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Design systems meetupA practical talk on component APIs, accessibility, and shipping faster.
All 5 variants · toggle dark mode to compare themes
Design Notes
Rules and token decisions to keep in mind when implementing or extending the card component.
Shadow — light mode only
Cards use a soft drop shadow in light mode to communicate elevation. In dark mode the shadow is removed — elevation is expressed through tonal layering instead. Never apply shadows to cards in dark mode.
Light — shadow on
Dark — shadow off
Metrics icon tokens
The icon container and stroke each have separate light and dark tokens. Always use the paired values together — never mix a light bg with a dark stroke.
BG · Green/2Stroke · Green/8BG dark · green-dark/3Stroke dark · green-dark/9
Preview surface contrast
When placing cards inside a preview or documentation surface, the container background must be noticeably different from the card. White-on-white makes the card invisible.
Container min · #f4f4f4Card · #ffffff
KPI Tile
A compact metric tile — a tonal icon, a big value, a label, and an optional footer — used to surface the few numbers that matter at the top of a dashboard. Where the metric Card is a standalone surface, KPI Tiles are built to sit three-up in a strip that overlaps the screen hero. Tiles are often tappable, drilling into the metric. The value is the one place 700 weight is sanctioned. Used across the Retrofit, Kit Production, and Inventory apps.
Anatomy
A tonal circular icon and label on top, the big value below, and an optional footer for context (delta, target, timeframe).
Kits closed
128
+12 vs. yesterday
Icon + label · value · footer
Tones
Five tonal icons. Use tone to signal the metric's character — green for healthy, blue for informational, amber for attention, red for breach, neutral for plain counts. Tiles are tappable when they drill into detail.
green · amber · red · (also blue + neutral) · tappable
Value Formats
The value takes a plain number, a number with a unit suffix, or a "done of total" denominator. Keep units and denominators lighter than the headline figure.
In stock
1,284
Avg. cycle
42min
Closed
5 of 8
plain · with unit · done-of-total
Overlap Strip
The signature layout: a three-up strip pulled up with a negative margin so it straddles the bottom edge of the screen hero, tying the headline metrics to the page header.
Production overview
Today · Line A
Kits
128
In QA
12
Parked
4
Hero header + 3-up strip overlapping via negative margin
Usage Guidelines
Three at a time. The strip is built for three headline metrics — more than that belongs in a Table or a Chart, not KPI tiles.
700 weight lives here. The KPI value is one of the few sanctioned uses of 700 — keep labels, units, and footers at 500.
Tone signals character, not decoration. Reserve red/amber for metrics that actually need attention; default to green or neutral.
Make tiles tappable only if they drill in. A KPI tile that opens a filtered list is a button; a read-only stat is not.
KPI Tile vs metric Card: use KPI tiles for the dashboard headline strip; use the metric Card when a single number needs more room or sits inline in content.
Charts
A comprehensive set of data visualisation components covering time-series, proportional,
relational, hierarchical, and spatial data. All charts respond to the active colour theme —
grid lines, axis labels, and backgrounds automatically adapt to light and dark mode while
the six series colours remain consistent across both.
Chart Color Palette
Six series colours drawn from the Rechaj colour system. Applied in order across any multi-series chart. Toggle dark mode — these colours hold across both themes.
Green / 10
#01E46F
Tomato / 9
#e54d2e
Purple / 9
#8e4ec6
Amber / 8
#e2a336
Red / 8
#f38a7f
Green / 8
#42c16c
Series 1–6 · consistent across light and dark themes
Line Charts
Multi-series line charts for time-series and trend data. Area variants add a translucent fill below the line. Step lines show discrete transitions.
Same structure as vertical bar charts but rotated. Suitable for long category labels and ranked lists where vertical reading is more natural.
Basic
Series A
Series B
Basic · Segmented
Sunburst
Hierarchical pie chart with concentric rings. Each ring represents a level of hierarchy. Sector angles are proportional to the node's value within its parent.
Node A
Node B
Node C
Node D
2 ring levels · sector angles proportional to value · 1.5° gaps
Inline Charts
Compact data viz sized to live inside a card or list row — the small counterpart to the full-size Charts. Three patterns cover the common shop-floor and inventory needs: a coverage bar with a reorder threshold, a demand sparkline, and a short forecast strip. Keep them embedded and glanceable; reach for full Charts when the data deserves its own surface. Used in the Inventory flows.
Coverage Bar
A thin fill bar with a dashed reorder-threshold marker and a min/max legend — "how much runway is left vs. the safety floor". Tone turns amber/red as cover drops below the threshold.
18 days of coverreorder at 8
4 days of coverreorder at 8
fill + dashed threshold + legend · tone by remaining cover
Demand Sparkline
A 14-day mini histogram of projected demand, embedded in a summary card. The current day is highlighted; the series tints with the card's tone.
14-day projected demand · today highlighted
Forecast Strip
A 7-day projection laid out as labelled number cells. Cells tint warn or danger when the projected level crosses a threshold, so the at-risk days jump out.
Mon16
Tue14
Wed11
Thu7
Fri6
Sat3
Sun1
7-day projection · warn / danger cells
Usage Guidelines
Inline Charts vs Charts: these live inside a card or row to add a glanceable trend; use full-size Charts when the data is the focus and earns its own surface.
A threshold needs a marker. The coverage bar's value is meaningless without the reorder line — always show the dashed marker and the legend.
Tone follows the data, not decoration. Bars and cells go amber/red only when the underlying number crosses a real threshold.
Keep the series short. Sparklines top out around 14 points and forecast strips around 7 — beyond that, promote to a full Chart.
Dialog
Modal dialogs interrupt the user with a focused task or message. Two main variants: Form — collects structured input; Content — presents scrollable information with a sticky action footer. All dialogs include a close button, title, description, and a two-button action bar.
Anatomy
The dialog is composed of four distinct regions.
Dialog title
Supporting description that provides context about the dialog's purpose and expected action.
Label
Label
① Header region
② Body / inputs
③ Action footer
④ Close button
4 regions · header · body · footer · close button
Variants
Two built-in dialog variants. Click Open dialog on any card to see the live interactive version.
Property 1 = form — Edit profile
Edit profile
Make changes to your profile here. Click save when you're done.
Email
Full name
Form inputs · Email + Full name · Cancel / Save changes
Property 1 = content — Terms and conditions
Terms and conditions
This dialog has a sticky footer that stays visible while the content scrolls.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
Scrollable body · sticky footer · Close / Yes, Agree
Additional Variants
Extended trigger contexts — destructive confirmation and password input.
Destructive confirmation
Delete account
This action cannot be undone. All your data will be permanently removed from our servers.
No body · red danger CTA · irreversible action
Password input
Change password
Enter your current password and choose a new one.
Current password
New password
Password fields · show/hide toggle · Update CTA
Live Example
Contextual usage inside a realistic app shell. Click "Add an item" to trigger the dialog.
WORKSPACE
Inventory
Analytics
Settings
Item Management
AJ
Add an item
Click on the button below to create items for the inventory
Trigger from app context · dialog overlays full viewport · ESC or Cancel to dismiss
Design Notes
Sizing
Fixed width 491px. Border radius 16px. Height is determined by content.
Spacing
Header padding 24px. Body gap 16px. Footer 18px 24px.
A right slide-over that opens on row click to show a rich record detail (rider, station, overdraft, cluster, user). Use it for records with tabs, cards and field rows; use the centered Dialog for a short confirmation, and a dedicated detail page for a very large record. Width is content-driven: 460px for forms and simple field lists, 600px only when the body has in-drawer tabs.
Anatomy
Head (eyebrow + close), a grey identity block, soft-grey card sections of icon key-value rows, and a footer that follows the Dialog action pattern.
Detail opens on row click. Click a row to slide the drawer in; ESC, the backdrop, or Close dismisses it.
OO
Olamilekan Oparanti
Retrofit completed
›
JO
Jacob Onele
Active
›
Row click → right slide-over · 460px (simple detail) · backdrop / ESC / Close to dismiss
Design Notes
Width
Content-driven: 460px default, 600px only with in-drawer tabs. max-width:94vw.
Sections
White panel; identity + content sections are soft-grey cards, no border. Radius 12px.
Field rows
Icon key (26px circle) on the left, value on the right. Entity values keep left-reading text.
In-drawer tabs
Pill tabs (never underline). Their presence is what widens the drawer to 600px.
Footer
Order [Close] [utility] [primary]. Close is plain (leftmost); utility actions carry icons; the green primary is rightmost. Never white-on-green.
Close button
30×30 soft-grey square, 15px icon. Top-right of the head.
Behaviors
Opens on row click (never pinned open). ESC + backdrop close; body scroll locks while open.
Source
Canonical in templates/web-flow-starter.html + PATTERNS.md. Empty tabs use the .empty-wrap state.
Item Card
A compact list row used to represent a single entity — battery, rider, station, or action. Combines an icon, title, optional sub-text, a status badge, and a right-side element (date or chevron).
Anatomy
Four distinct regions: left icon circle, body text area, optional badge, and right action/date.
Item title
Supporting subtext
Active
① Icon circle 40×40
② Title 14px Medium
③ Subtext 12px Regular
④ Right slot Date or →
Variants
Three right-slot configurations: date stamp, chevron for navigation, and a primary action button.
Battery #A041
Zone Lagos · 87%
Apr 28
Date stamp
Shows when the item was last updated or created. Use for logs and history views.
Ola Benson
VCU #D220 · Active
On duty
Chevron nav
Navigates to a detail page. Includes optional status badge below subtext.
Swap Station #S09
Lekki · 0 slots free
Full
Alert
Alert state
Icon, badge, and date text all shift to red tones to signal an actionable problem.
States
Default, hover (lift + brand border), and selected (green outline) states.
Default
Default state
No interaction
3 days ago
Hover
Hover state
Lifts up, brand border
3 days ago
Live example — Inventory list
Click any card to select it. The panel below reflects your selection.
Fleet Inventory · 4 units
None selected
Battery Pack #A041
Zone Lagos · 87% charge
Available
VCU Unit #D220
Assigned · Rider Ola B.
Today
Swap Station #S09
Lekki · 3 slots free
Online
Retrofit Kit #R003
Pending installation
Pending
Apr 28
— selected. Click again or another card to change selection.
Design Notes
Border radius
16px. Softer than buttons to reflect a list-item pattern.
Min height · Padding
73px minimum. 16px top/bottom, 20px left/right.
Icon circle
40×40px, 50% radius, #f4fbf5 background, green icon stroke.
A multi-row card that represents a single record — a work order, battery, tool, or rider. Where the Item Card is a one-line list row, the Record Card carries a type mark, an id with sub-text, a status pill, optional progress, and either a meta grid or key/value rows. A compact list-row variant covers lists of records. Used across the Retrofit, Kit Production, and Inventory apps.
Detail Card
The full record header: a type mark, id + context, a status pill, a progress row, and a three-up meta grid. Use it at the top of a record detail screen.
STD
WO-K-2407-0188
Standard kit · BOM v4 · Due today 5 PM
In progress
Kits closed5 of 8
Assemblers3 active
IssuedWed 8:14 AM
QA pending2 kits
Mark · id + sub · status pill · progress · meta grid
Key / Value Rows
When the body is a set of attributes rather than metrics, swap the meta grid for stacked label/value rows separated by hairlines.
KAAG
BAT-22-0917
48V module · received today
Awaiting QA
SupplierGogoro · PO-7741
State of health98%
Cell chemistryNMC
Assigned bayB-14
Card head + stacked key/value rows
List Row
A compact, tappable variant for lists of records: mark, id + sub, an inline progress block, and a chevron. Each row opens its detail card.
Compact tappable row · inline progress + chevron
Status States
The status pill follows a fixed colour vocabulary shared across every app, so a state reads the same wherever it appears.
ReadyIn progressAwaiting QAParkedDefectCompleted
green = ready/pass · blue = in-progress/awaiting · amber = parked/due · red = defect/blocked · grey = open/completed/closed
Usage Guidelines
Record Card vs Item Card: use a Record Card when an entity needs a header, status, progress, or several attributes; use an Item Card for a single compact list row.
No borders. Elevation comes from the shadow (light) and the lighter card surface (dark) — never a stroke, including accent stripes.
The mark is colour-keyed by type (e.g. standard vs KaaG) and shows a short code, not an avatar — entities aren't people.
Use the status vocabulary above consistently — don't invent new pill colours per screen.
Meta grid for metrics, key/value rows for attributes. Pick one body style per card; don't combine both.
List Picker
A single-select list of options. Each row shows an optional left icon, a label with supporting sub-text, and a radio indicator on the right. Used for rider assignment, zone selection, shift picking, and payment method choice.
Anatomy
Left icon (optional) → label + sub-label → radio on the right.
Option label
Supporting description text
① Left icon (optional)② Label + sub-label③ Radio (right)
Prop variants
Configurable with or without left icon, sub-label, and different content types.
Standard delivery
Express delivery
Label only
No icon, no sub-label. Most compact form for short options.
Morning shift
6:00 AM – 2:00 PM
Evening shift
2:00 PM – 10:00 PM
With sub-label
Adds a secondary line for extra context like time range, description, or a count.
Credit card
Visa / Mastercard
Bank transfer
1–3 business days
With left icon
Icon sits in a 36×36 pill. On selection the pill shifts to a green tint to reinforce the active state.
Unavailable rider
Off duty today
Available rider
Zone Lagos · On duty
Disabled row
A row can be disabled (opacity 0.45, pointer-events:none) to signal unavailability.
Live example — Assign rider to VCU
Single-select. Click any row to select it. Only one option can be active at a time.
Assign VCU #D220 to:
Select a rider from the available list below.
Ola Benson
ID #1042 · Zone Lagos
Tunde Adeyemi
ID #0881 · Zone Lekki
Fatima Sule
ID #0665 · Zone Abuja
Emeka Obi
ID #0443 · Off duty
Selection
Selected rider
Tunde Adeyemi
ID #0881 · Zone Lekki
Assigning to
VCU #D220
Design Notes
Row sizing
Full width. Padding 18px 16px. Radius 10px.
Radio — right side
20×20px circle, dot 10×10px #01e46f. Always on the right.
Selected border
#01e46f. Background shifts to #f9fffe (light) / #0d1f14 (dark).
Sign-off controls for gates that need a human to attest or approve — a QA pass, a calibration release, a high-value PO. Three parts: an attestation row (a large pressable checkbox beside the statement the signer acknowledges), an approver picker (choose who signs off), and a read-only signed state once it's done. Used in the Kit Production and Inventory flows.
Attestation
A large, easy-to-tap checkbox beside the statement being attested. Unchecked shows an outlined box; checked fills brand green with a dark check.
checked (brand + dark check) · unchecked (outlined)
Approver Picker
Choose who signs off. An empty row prompts a selection; a chosen approver shows their initials, name, and role. Opens a List Picker of eligible approvers.
empty (prompt) · selected (avatar + name + role)
Signed State
Once signed, the control becomes a read-only confirmation — a small green check, who signed, and when. The row stays neutral; success is the check, not a flooded-green panel.
Signed by Fatima AkpanProduction Manager · Today, 14:02
read-only confirmation · neutral row + green check
Usage Guidelines
The whole row is the target. The checkbox is large and the entire row is tappable — sign-off shouldn't require hitting a tiny box.
State what's being attested. The statement must be specific and consequential ("I verify all four QA checkpoints passed"), not a generic "I agree".
Capture who and when. Once signed, show the signer, their role, and a timestamp — sign-off is an audit record, not just a toggle.
Signed stays neutral. Signal completion with the small green check, never by flooding the row green.
Mobile Nav
Bottom navigation bar for mobile screens. Each tab has an icon and label. The active tab shows a green top border and highlighted icon/label. Supports 2, 4, or 5 tab configurations.
Anatomy
Tabs are distributed equally using flex. The active top border is 2.5px, coloured #01E46F. Icon and label both shift to #05853e.
Screen content
Home
Check-ins
Workflow
Profile
Active top border #01E46F · 2.5px
Active icon & label #05853e
Inactive #8d8d8d
Tab count variants
The nav distributes tabs equally across the full width. KaaG supports 2, 4, and 5-tab layouts.
Home
Profile
2 tabs
Minimal. Each tab is very wide, ideal for simple two-section apps.
Home
Check-ins
Workflow
Profile
4 tabs (default)
The standard KaaG configuration. Balances density and discoverability.
Home
Tasks
Grid
Explore
Profile
5 tabs
Maximum recommended. Labels may truncate below 360px screen widths.
Live example
Tap any tab to switch the active state. The screen content area updates to reflect the selected section.
HomeTap a tab to navigate
Home
Check-ins
Workflow
Profile
Tab states
Individual tab states side-by-side.
Inactive
Home
Default
Home
Hover
Active
Home
Selected
Design Notes
Active indicator
2.5px top border, #01E46F. Icon and label both #05853e.
Inactive colours
Icon and label both #8d8d8d. No background fill.
Icon size
24×24px SVG. Consistent across all tab counts.
Label
11px Medium, white-space: nowrap. Truncate only as last resort.
Tab padding
10px top, 12px bottom, flex:1 equal distribution.
Variants
2, 4 (default), or 5 tabs. Never exceed 5.
Mobile Header
The top chrome of a mobile screen. Comprises a 44px status bar (time + system icons) and a 56px navigation bar with optional back button and centred title. Total height: 100px.
Anatomy
Two layers: status bar (system info) and navigation bar (screen context).
9:41
Complete swap
① Status bar — 44px (time · signal · wifi · battery)② Back — 40px circle · 1px #d9d9d9③ Title centred — 20px/600
Variants
Four combinations of back button and right action presence.
9:41
Dashboard
Title only
Root-level screens with no parent to go back to. Title is the sole navigation element.
9:41
Complete swap
Back + title
Standard detail screen. Back button on left, title centred.
9:41
Rider profile
Back + title + action
Detail screens needing a contextual overflow menu or action button on the right.
9:41
Battery swap
Dark mode
Status bar and nav bar both use dark backgrounds. Back button uses #1a1a1a fill.
Live example
Edit the title, toggle the back button, and interact with the header.
9:41
Complete swap
Screen content area
Design Notes
Status bar height
44px. Shows time (left), signal+WiFi+battery (right).
Nav bar height
56px. Total header = 100px (44 + 56).
Back button
40×40px circle. 1px #d9d9d9 border. Left offset 20px.
Title
20px Semibold, centred. text-align: center.
Time label
15px Semibold #202020 (light) / #eeeeee (dark).
Right action
Optional 40×40px circle at right: 20px offset. Same size as back.
OTP Input
One-time password input field. Large, clearly separated boxes — one per digit — allow users to quickly enter verification codes. Supports 4 and 6 digit codes in three sizes (sm / md / lg) with text and bullet display types.
Anatomy
A group of single-character input boxes. Optional label above, hint text and resend link below.
#e54d2e border + rgba(229,77,46,.12) ring. Hint text turns red.
Font
sm 24px · md 32px · lg 40px · weight 500.
Auto-advance
Focus moves to the next box on input; Backspace returns to prev.
Bullet type
Uses type="password" on each input. Hides digit, shows dot.
Pagination
Divides large datasets into discrete pages. Composed of Previous/Next controls, a page-number list, optional ellipsis for long ranges, and supplemental go-to and per-page selectors.
outlined · ghost · brand (#01e46f) · dark (#202020).
Layouts
full-width · centre · left · right. Always 36px button height.
Sidebar
Vertical navigation panel fixed to the left of the app shell. Contains a logo, grouped menu items with icons, collapsible sub-menus, and a pinned footer. Also ships a mini (icon-only) collapsed variant.
Anatomy
Seven regions: logo, section labels, menu items (active & inactive), collapsible rows with chevron, sub-items, and footer area.
Rechaj
Main
Dashboard
Riders
Inventory
Items
Scanners
Battery pods
Settings
① Logo area — brand mark + name · 26×26px mark
② Section label — 10.5px/600 uppercase #b0b0b0
③ Active item — rgba(1,228,111,.1) bg · #05853e text
④ Inactive item — 36px height · transparent bg
⑤ Collapsible row — chevron rotates 180° on open
⑥ Sub-item — 32px height · 26px left indent
⑦ Footer area — pinned bottom · thin separator
Item states
Menu item in four states: inactive, hover, active, and disabled.
Inactive
Riders
Hover
Riders
Active
Dashboard
Disabled
Restricted area
Live example — Full sidebar
Click items to activate them. Items with a chevron expand/collapse. The content area reflects the selected page.
Dashboard
Click any sidebar item to navigate sections
Active units
42
Riders today
128
Swaps done
89
Alerts
3
Mini sidebar (collapsed)
52px wide, icon-only. Used when the user collapses the nav or on narrower sidebars. Tooltips surface labels on hover.
Dashboard
Hover icons for labels
Width: 52px
Icon container: 36×36px, 8px radius
Active: rgba(1,228,111,.1) bg
Hover: var(--bg-hover)
Logo mark at top, footer icons pinned bottom
Native title attribute shows label on hover
Design Notes
Width
Full: 256px · Mini (collapsed): 52px.
Item height
Full: 36px · Sub-item: 32px · Mini icon: 36×36px.
Active state
rgba(1,228,111,.1) bg · #05853e text · weight 500.
padding-left 26px. Height 32px. Active: #05853e text only.
Topbar
Sticky horizontal bar at the top of the app shell, sitting flush against the sidebar. Carries a sidebar toggle, breadcrumb trail, and a cluster of right-aligned actions: dark-mode toggle, notifications, and the user pill. 60px tall, white background with a 1px bottom rule.
Anatomy
Six regions: sidebar toggle · breadcrumb crumbs (with `›` separator) · current crumb · dark-mode toggle · notification bell (with red dot) · user pill (avatar + name + role).
InventoryOverview
EM
Erioluwa Morenikeji
Inventory Manager
Page content sits below — the topbar stays sticky as the body scrolls.
① Sidebar toggle — 32×32px ghost icon button
② Breadcrumb crumbs — 13px / 500 / muted
③ Current crumb — 13px / 600 / primary text
④ Dark-mode toggle — 36×36px outlined moon button
⑤ Notification bell — 36×36px with #E32627 red dot
⑥ User pill — 32px green-tinted avatar + name + role
Action states
Icon action button in four states: inactive, hover, with notification dot, and active.
Inactive
Hover
With dot
User pill
CN
Chidinma N.
Specialist
Layouts
Three breadcrumb variants — single crumb, two-level, and three-level. The actions cluster stays anchored to the right.
Dashboard
RE
Ridwan Egbeyemi
Swap Product Manager
SwapOverview
TA
Tunde Adebayo
Swap Support Specialist
Swap SupportIssues queueFunding not reflecting
EM
Erioluwa M.
Inventory Manager
Live example — Inventory shell
Click the breadcrumb crumbs to navigate the simulated trail. The notification dot dismisses on bell click. Hover any control to see its hover state.
InventoryOverview
EM
Erioluwa Morenikeji
Inventory Manager
Page: Inventory · Overview. Use the breadcrumb to navigate.
Design Notes
Height
60px fixed. Sticky to the top of the scroll container.
Breadcrumb
13px / 500 muted crumbs · 13px / 600 primary on the current crumb. Separators use a 10×10 chevron in the muted token.
Icon action
36×36px square · 9px radius · 1px var(--border) on var(--bg). Hover lifts to var(--bg-hover). Active dot uses #E32627 with a 2px var(--bg-surface) ring.
User pill
999px radius on var(--bg). 32px green-tinted avatar (rgba(1,228,111,0.10) bg, #05853e text). Name 13/600 primary, role 11/secondary.
Spacing
24px horizontal padding inside the bar. 12px gap between action items. 10px gap between breadcrumb crumbs.
Bottom rule
1px solid var(--border). No shadow — keeps the surface flat against the content below.
Stepper
A progress indicator for multi-step flows — onboarding, registration, checkout. Shows the user where they are, how many steps remain, and marks completed steps with a checkmark. Supports horizontal and vertical layouts.
Anatomy
Each step has a bubble (number/check/error icon), an optional connector line to the next step, a label beneath, and an optional sub-label for context.
Personal info
Completed
2
Vehicle setup
Current step
3
Documents
Upcoming
4
Complete
Upcoming
① Bubble 40×40 · 50% radius
② Connector 2px · flex:1
③ Label 12px / 600
④ Sub-label 11px / muted
Variants
Five Figma pattern types — Icons centered, Text with line, Minimal icons, Minimal icons connected — each available in sm / md / lg sizes and a mobile vertical breakpoint.
Your details
2
Company
3
Invite team
Progress — Icons centered
Bubble icon centred with label below. Connector fills between bubbles. 3-step desktop layout.
Profile
Company
3
Invite
4
Done
Progress — Icons centered (4 steps)
Two completed, step 3 active, step 4 upcoming. Labels shrink to 10.5px to avoid overflow.
Your details
Name & email
Company details
About your company
Invite your team
Collaborate
Progress — Text with line
4px bar replaces the icon bubble. Active step bar is brand colour. Label + sub-label sit below. No connector needed.
Profile
Company
Invite
Done
Progress — Text with line (4 steps)
Steps scale naturally — no bubbles, just bars. Compact label-only works up to 5 steps before text truncation.
Icon-only. No labels. "Minimal" uses solid dots; "Connected" uses checkmark/ring/empty to show state. Use for space-constrained headers.
Icons — vertical stacked
Your details
Name & email
2
Company details
About your company
3
Invite your team
Start collaborating
Mobile — Vertical stacked
Below 640 px, steps stack vertically. Connector becomes a 2×28px vertical rule. Label + sub-label sit right of the bubble.
Text with line — vertical
Your details
Name & email
Company details
About your company
Invite your team
Collaborate
Mobile — Text with line vertical
Text-with-line stacked vertically for mobile (343 px). Each step is full-width bar + label block.
Profile
Documents
Upload failed
3
Confirm
Error state
Bubble turns red with exclamation. Label + sub-label shift to red. Flow is paused at this step.
Progress bar & pill variants
Alternative stepper patterns from Figma — progress bars (solid and segmented), label-pill connectors, and dashed-dot minimal steps.
1 / 7 complete
4 / 7 complete
7 / 7 complete
Progress bar — solid
Single rounded track with a green fill. "X / N complete" label above. Best for long flows (5+ steps) where individual step bubbles would crowd.
1 / 7 complete
4 / 7 complete
Progress bar — segmented
Each segment maps to one step — pill fills green when complete. Gives the user a clearer sense of discrete steps while staying compact.
Sign up
Profile
Vehicle
Confirm
Label pill connector
Active step renders as a labelled pill (outlined brand border). Done steps show a filled green pill or a small dot. Incomplete steps are grey dots or ghost pills.
Step 1 active
Step 4 active
Dashed dot — minimal
Small 20px circles connected by a dashed line. No labels. Done steps fill green with a check, active step shows a brand ring. Used in compact mobile headers.
Bubble states
Five distinct bubble styles — upcoming, active (with ring), completed, error, and disabled.
No more than 5 on mobile. Above that, use a compact "Step 2 of 7" text pattern instead.
Vertical
Connector: 2×28px div, margin-left 19px (centre of 40px bubble). Label right of bubble.
Timeline
A vertical sequence joined by a connector rail. Two variants: a process timeline — icon nodes that move through done / active / pending states, for staged flows like onboarding or a work-order lifecycle — and an activity feed — dot nodes with timestamps, for event history. The Stepper is the horizontal counterpart; reach for a Timeline when steps stack vertically or each carries its own detail. Used across the Retrofit, Kit Production, and Inventory apps.
Process Timeline
Staged progress. Completed steps show a green check, the current step is an amber filled dot, and pending steps stay muted. The rail fills green up to the active node.
A history of events, newest first, each with a timestamp. Smaller dot nodes; use the fail tone for rejections or defects logged against the record.
Kit K-0188-05 passed QAAll 4 checkpoints cleared by A. Bello
2m ago
Kit K-0188-04 rejectedCasing crack on lower-left mount — sent for re-work
14m ago
Assembler I. Musa started kit K-0188-05Station 3
26m ago
Work order WO-K-2407-0188 issued8 kits · BOM v4
8:14 AM
Event history · timestamps · fail tone for rejections
Usage Guidelines
Timeline vs Stepper: use a Stepper for a short horizontal flow the user is actively completing; use a Timeline when steps stack vertically, carry their own detail, or represent a past sequence.
Exactly one active step. Everything above it is done, everything below is pending — the filled rail shows how far along the process is.
Node containers are circular, not rounded squares — they're icon containers, not media thumbnails.
Activity feeds run newest-first and always carry a timestamp. Reserve the fail tone for genuine rejections or defects, not routine steps.
Keep meta to one line. Time, actor, or count — not a paragraph. Link out for full detail.
Checklist
A pass / fail / defect inspection list. Two forms: an inspection checklist — rows in one card, each with a status icon that recolors as the item is checked — and numbered procedure steps as separate cards. A failed item can reveal an inline defect note. Distinct from Checkboxes, which is a form input; a Checklist reads back the outcome of an inspection. Used in the Retrofit QA and Kit Production QA flows.
Inspection Checklist
Check items grouped in one card. A pending item shows a neutral icon; a pass turns the icon solid green with a dark check; a fail turns it a red tint. The sub-line echoes the state.
Crack on lower-left mount, ~12mm. Re-work required before sign-off.
When the inspection is an ordered procedure, use numbered step cards. The number badge carries the same state colours; a completed step swaps the numeral for a check.
Checklist vs Checkboxes: a Checklist reads back inspection outcomes (pass/fail/defect); Checkboxes collect a user's selection in a form.
A failure must explain itself. Pair every fail/defect with an inline defect note — what's wrong, who logged it, and evidence — never just a red icon.
Pass is a small solid-green icon, not a flooded-green row — the success signal stays contained to the status marker.
Checklist for unordered items, numbered steps for a procedure. Use the step variant only when order matters.
Status Dots
Compact at-a-glance status indicators built from small dots. Three forms: a labelled gate sequence (the G1–G4 production gates, each pass / active / fail / pending), capacity dots showing how many slots in a workstation are in use, and a grid of workstation tiles each carrying a status dot. These summarise state in a tight space — they are indicators, not full controls. Used in the Retrofit and Kit Production flows.
Gate Sequence
A row of labelled gates a unit must clear in order — green for passed, blue for the active gate, red for a failed gate, neutral for not-yet-reached.
G1G2G3G4In progress · at G3
G1G2G3G4Failed at G2
pass · active · fail · pending
Capacity Dots
Occupancy at a glance — a filled dot per slot in use, an empty dot per free slot. Filled dots can carry a state colour (paused, in QA).
3 of 5 bays in use
2 active · 1 in QA · 1 paused
filled / empty · with state colours
Workstation Tiles
A floor map of stations, each a small tappable tile with its number and a status dot — green clear, amber attention, red blocked. Opens the station's detail.
Indicators, not controls. Status dots summarise state in a tight space — pair them with a label or a tappable surface that opens the detail.
Reuse the shared state vocabulary — green = clear/pass, blue = active/in-QA, amber = paused/attention, red = blocked/fail, neutral = pending. Same colours as the status pill.
Gate labels stay at 600, not 700 — 700 is reserved for KPI values. Keep gate codes short (G1–G4).
Capacity dots for small counts. Beyond ~8 slots a "3 / 12" fraction reads better than a long dot row.
Table
Data tables display structured datasets with sortable columns, optional row selection, status badges, and inline row actions. Used for fleet listings, rider management, swap logs, and order records.
Table container
The full card pattern from Figma — outer card wrapper with shadow and border-radius, grey circle avatars with name + sub-text, status badges, horizontal more icon, and built-in pagination footer.
CUSTOMER
PHONE NUMBER
STAFF
STATUS
DATE
KO
Kellie O'HaraMoshe_Rogahn12@yahoo...
09042114467
12
Active
Fri, June 24, 2022
EJ
Emma Johnsonemma.johnson@example...
01234567890
10
Active
Wed, August 30, 2022
LB
Liam Brownliam.brown@example.com
12345678901
8
Pending
Tue, September 13, 2022
JS
James Smithjames.smith@example.c...
09876543210
15
Inactive
Mon, July 18, 2022
NW
Noah Wilsonnoah.wilson@example.com
34567890123
20
Inactive
Sun, November 05, 2022
① Card — 16px radius · 16px padding · soft shadow② Avatar — 32px circle · grey or tinted by category③ Name + sub-text — stacked in one cell④ More icon — horizontal ··· in brand green⑤ Pagination footer — soft top border, built-in
Anatomy
Six regions: toolbar (search, filters, actions), header row with sort controls, body rows, status badges, row action buttons, and empty/loading states.
Rider
VCU ID
Status
Battery
SA
Seiye Amakiriseiye@kaag.ng
VCU-07
Active
68%
EW
Ebibere Waribokoebibere@kaag.ng
VCU-12
Failed
—
TS
Timipre Seiyefatimipre@kaag.ng
VCU-03
Warning
34%
① Header pill tinted · 48px tall
② Sort icon green on active
③ Avatar + name 32×32 · tinted
④ Status badge dot + label
⑤ Row action 28×28 · 7px r
Variants
Default, with checkboxes for multi-select, dense row height for data-dense views, and a skeleton loading state.
Rider
Status
SoC
OS
Oyintare S.oyintare@kaag.ng
Active
85%
AF
Abiodun F.abiodun@kaag.ng
Active
91%
WT
Wariso T.wariso@kaag.ng
Offline
—
Default
14px rows with 14px top/bottom padding. Hover shifts background to var(--bg-hover).
Rider
Status
OS
Oyintare S.oyintare@kaag.ng
Active
AF
Abiodun F.abiodun@kaag.ng
Active
WT
Wariso T.wariso@kaag.ng
Offline
With checkboxes
Header checkbox selects all. Selected row gets green left border + subtle green background tint.
VCU
Rider
Zone
SoC
VCU-07
Seiye A.
Alagbado
68%
VCU-03
Timipre S.
Alagbado
34%
VCU-19
Oyintare S.
Alagbado
85%
VCU-24
Abiodun F.
Ikeja
91%
Dense
8px row padding, 12px font. Used in dashboards with high row counts. No avatar in dense mode.
Rider
Status
SoC
Loading skeleton
Pulsing bg blocks replace content while data loads. Stagger animation-delay across rows.
Row states
Default, hover, selected, and error — all applied at the TR level.
State
Rider
Status
Note
Default
SA
Seiye A.
Active
Resting state
Hover
EW
Ebibere W.
Offline
Mouse over
Selected
OS
Oyintare S.
Active
Green tint + left border
Error
CE
Chukwuemeka E.
Failed
Red tint + left border
Status badges
Four semantic badge styles used inside table cells. Dot colour matches text colour via color:currentColor.
ActiveSuccess
WarningWarning
FailedError
OfflineNeutral
PendingIn progress
On dutyOutlined
Live example — Rider fleet table
Sort by any column, select rows with checkboxes, and use row action menus. Search filters the name column live.
Arrow icon at 30% opacity at rest. Active: 100% + brand colour. Asc/desc via rotate(180°).
Selection
Selected row: rgba(1,228,111,.05) bg + 2.5px brand left border. Header checkbox selects all visible rows.
Row actions
28×28px ghost button, 7px radius. Triggers a dropdown or sheet. Keep to ≤ 2 visible icons per row.
Empty state
Centre-aligned icon + message inside the table body. Min-height 160px. Don't show pagination.
Add an item
Fill in the details below to add a new item to your inventory.
Edit profile
Make changes to your profile here. Click save when you're done.
Terms and conditions
This dialog has a sticky footer that stays visible while the content scrolls.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Delete account
This action cannot be undone. All your data will be permanently removed from our servers. Are you absolutely sure?
