Style Guide¶
Design decisions that apply across all IsiOne components (web, Android, iOS, hardware).
Colours¶
Status Colours¶
Task status is communicated through colour across all platforms (web, mobile, hardware LEDs).
| Status | Colour | Hex | Usage |
|---|---|---|---|
| OK | #4ade80 |
Task completed within schedule | |
| Pending | #a78bfa |
Task due but not yet overdue | |
| Overdue | #f87171 |
Task past its due time |
Accent¶
| Name | Colour | Hex | Usage |
|---|---|---|---|
| Primary | #646cff |
Links, active states, primary buttons | |
| Primary hover | #535bf2 |
Hover state for primary elements |
Feedback¶
| Name | Colour | Hex | Usage |
|---|---|---|---|
| Success | #4ade80 |
Confirmation, complete actions | |
| Warning | #fbbf24 |
Warnings, caution states | |
| Error | #f87171 |
Errors, destructive actions |
Neutrals (Dark Theme)¶
| Name | Colour | Hex | Usage |
|---|---|---|---|
| Background | #1a1a1a |
Page/card backgrounds | |
| Surface | #2a2a2a |
Elevated elements (menus, dropdowns) | |
| Border | #333333 |
Dividers, card borders | |
| Text primary | #ffffff |
Main text | |
| Text secondary | #aaaaaa |
Descriptions, secondary info | |
| Text muted | #888888 |
Tertiary text, placeholders |
Task Identity¶
These elements identify tasks to users and must be consistent across all platforms.
Icons¶
All task icons use Lucide, an open-source icon library.
Task Label Font¶
The font used for task names/headings across all platforms.
Nunito - A sans-serif with rounded terminals, friendly and legible at small sizes.
- Use Medium (500) or Semi-Bold (600) weight
- Semi-Bold recommended for 3D printed hardware labels
Platform-Specific Styles¶
Fonts for body text, UI elements, and other non-task content are defined per-platform in their respective documentation.