Design System — Backup Power

Foundations

Brand palettes, typography and logo lockups.

Logo

Brand Gold — Primary

50

#FEF8ED

100

#FDF1DA

200

#FBE4B5

300

#F8D691

400

#F6C96C

500

#F4BB47

600

#C39639

700

#92702B

800

#624B1C

900

#31250E

950

#251D0A

Corporate Neutral Dark — Secondary

50

#F6F5F5

100

#EAE8E7

200

#D5D2D0

300

#BAB5B2

400

#908884

500

#2D2926

600

#252220

700

#1E1B19

800

#161413

900

#0F0E0D

950

#080707

Typography — Manrope

Display / 5xl Bold

Heading / 3xl Bold

Subtitle / xl Semibold

Body / base — the quick brown fox jumps over the lazy dog.

Small / sm — supporting copy and helper text.

Buttons

Variants, sizes, icons and states.

Radio Button Group

Single-select radio filter bar with smaller size and neutral count pills.

Forms

Inputs and the custom dropdown field.

Full name

As it appears on the contract.

Email

Account ID

This account ID was not found.

Disabled

Plan

Status

Start date

Renders as DD/MM/YYYY.

Due date

Controls

Custom checkbox, radio and animated toggle atoms built on the primary gold token.

Badges

Soft fills and the outline line variant.

Soft

ActiveCanceledOverdueAnnual6-monthNeutral

Outline

ActiveCanceledOverdueAnnual6-monthNeutral

Layouts

Structural blocks abstracted into the COMMON layout repository — previewed here in isolation.

Sidebar — expanded & collapsed

DataTable

Scroll the table horizontally to reveal the sticky Action column's left-edge shadow.

Single line: every cell renders on one line (whitespace-nowrap); text-heavy fields use truncate with an ellipsis and a native hover tooltip for the full value.
Alignment: right-align numeric/currency columns, left-align descriptive/text columns, center-align status badges.
Pagination (mandatory): all data tables must paginate via the built-in footer (pageSize defaults to 10) with Previous, numbered pages, and Next controls.
Sort indicator: the sort icon always sits to the right of the column title (inline-flex items-center gap-1.5), even on right-aligned columns.
Row navigation: open a record's detail via a single onRowClick on the row — rows show cursor-pointer + hover affordance. A "View" option is forbidden in the action dropdown.
Action dropdown: the three-dot menu holds only transactional tasks (Edit, Duplicate, Change Status, Delete) and renders through a portal atz-[9999] so it is never clipped by the table container.


Marcus Lee	Annual	Active
Sophia Martinez	6-month	Overdue
Liam O'Connor	Annual	Annual

Showing 1–3 of 3

Rows per page

FormLayout

General Info