Design system
One set of tokens and reusable components behind every screen, for every role. Change the theme or accent here and see every component follow.
Colour tokens
Semantic tokens, never raw colours. Each has a light and a dark value. Status colours always come with a text label, so colour is never the only signal.
Accent themes
People pick their own accent in Settings → Appearance. Each accent has a light and dark value checked for at least 4.5:1 contrast with button text.
Spacing, density and motion
--card-pad, --gap, --cell-y and --ctl-h drive spacing; the compact density swaps them for smaller values. Motion uses --ease and --dur, and is switched off when someone asks for reduced motion.
Buttons
One primary action per area. Icon-only buttons always have an accessible label.
Status and labels
Form controls
Labels sit above fields. Errors are shown inline next to the field, as well as announced.
Cards and numbers
Insights and focus
Automated insights use a tone (good, info, warn, bad), an icon, one plain sentence and one action.
Insights
Guidance
The setup checklist shows progress as a ring and ticks steps off as people use the app.
Get started with Allurus
A few quick steps to make it work for you.
Feedback
Every action gets an instant confirmation. Destructive actions and decisions can be undone for a few seconds.
Tables
| Employee | Status | Net pay |
|---|---|---|
DR Daniel Reyes Senior Software Engineer | Paid | RM 9,282.18 |
LR Leila Rahimi Marketing Lead | Draft | RM 7,981.60 |
Principles
Human first
Write like a helpful colleague. Greet people, celebrate wins, and nudge gently about rest and money.
Accessible by default
Keyboard paths for everything, visible focus, labelled icons, 4.5:1 text contrast, and respect for reduced motion.
One system
Build new screens from these tokens and components. If something is missing, add it here first.