AriaNet Zero Manager
Design system
Every interface component, side by side in light and dark mode. Pop-ups (menus, tooltips, dialogs and toasts) open above the page, so they follow the theme switch in the top menu.
Inputs & selects
Always pair a visible label with the field. Field borders use #8A8A8A (light) / #737373 (dark) to reach 3:1. Placeholders are examples, never labels.
Light
Dark
Checkboxes, radios & switches
Checkboxes for independent options, radios for one choice among a few, switches for settings that apply immediately.
Light
Dark
Form validation
Show the error under the field in error text colour and give the field the solid error border (#D6402E, 3:1+ in both themes). Say what to do, not just what is wrong. Success messages are optional.
Light
Enter a number of 0 or more.
Inside the reporting period.
Confirm before submitting.
Dark
Enter a number of 0 or more.
Inside the reporting period.
Confirm before submitting.
Alerts
For messages that stay on the page. Soft background, matching border and readable text — never yellow text on white.
Light
Data approved
3 records pending review
New emission factors
Upload failed
Dark
Data approved
3 records pending review
New emission factors
Upload failed
Badges
Short statuses in tables and headers. Use the status set that matches the meaning; neutral for plain labels.
Light
Dark
Toasts
Brief confirmation after an action. They disappear on their own, so never put the only copy of important information in a toast.
Light
Dark
Tabs
Switch between views of the same data. Keep labels short; don't nest tabs.
Light
Dark
Cards & KPI tiles
Cards group related content. KPI tiles show one headline figure with its unit and the change; a reduction in emissions is good news, so it uses success colours.
Light
Total emissions
1,284 tCO₂e
8.2% vs. previous year
Energy consumed
14,993 kWh
2.1% vs. previous year
Dark
Total emissions
1,284 tCO₂e
8.2% vs. previous year
Energy consumed
14,993 kWh
2.1% vs. previous year
Modals, dropdowns & tooltips
Modals for a decision that blocks the task (confirm, short form). Dropdowns for secondary row actions. Tooltips only for extra hints — never for essential information.
Light
Dark
Skeleton loaders
Show the shape of the content while it loads, instead of a spinner, so the page doesn't jump.
Light
Dark
Charts
Series follow the scopes: green Scope 1, yellow Scope 2, blue Scope 3. Thin lines for Scope 2 use #A68800 on light backgrounds. Always add a legend or labels.
Light
Scope 2 trend (thin line)
Dark
Scope 2 trend (thin line)
Data table
Every list in the app uses the same table: search form above, rows per page (10/25/50/100), sortable columns, results summary and page switcher. Page, rows per page, sort and filters live in the address bar, so back and shared links restore the view. This demo loads 145 emission records page by page from a simulated server (with loading skeleton); both panels share the same view.
Light
| Quantity | |||||||
|---|---|---|---|---|---|---|---|
Loading items…
Dark
| Quantity | |||||||
|---|---|---|---|---|---|---|---|
Loading items…