Ledgerline Design System

Enterprise data-dense component library — Carbon/Ant Design-inspired, WCAG 2.1 AA compliant

Colour Palette

Brand & Interactive

Primary
#0f62fe
Primary Hover
#0353e9
Secondary
#393939
Accent
#0043ce

Backgrounds & Surfaces

Background
#ffffff
Surface
#f4f4f4
Raised Surface
#ffffff
Border
#e0e0e0

Text

Text Primary
#161616
Text Secondary
#525252
Text Muted
#8d8d8d

Semantic / Status

Success
#198038
Warning
#b28600
Error
#da1e28
Info
#0043ce

Typography

3xl / 2rem / BoldLedgerline Dashboard
2xl / 1.5rem / SemiBoldSection Heading
xl / 1.25rem / SemiBoldCard Title
lg / 1.125rem / MediumSubsection Label
base / 1rem / RegularBody text — IBM Plex Sans
sm / 0.875rem / RegularTable cells, form labels
xs / 0.75rem / RegularCaptions, helper text, timestamps
Mono / 0.875remRecord IDs, code, tokens

Buttons

Variants

Sizes

Form Inputs

Helper text for context
This field is required.
Active monitoring

Badges & Tags

● Pending ● Synced ● Amended ● Failed ● Rejected
CRM ERP Accounting Customer/Account

Data Table

Work OrderRecordSourceTargetStatusReviewerUpdated
WO-2024-0012Acme CorpCRMERP Accounting● Pending—14 Aug 2026 09:32
WO-2024-0011Globex IncCRMERP● SyncedJ. Chen14 Aug 2026 08:15
WO-2024-0010Initech LtdCRMAccounting● FailedS. Patel13 Aug 2026 17:44

Alerts & Toasts

ℹ
Information — 3 new change events detected from CRM.
✓
Success — Work order WO-2024-0012 approved successfully.
⚠
Warning — Work order is incomplete: missing billing_address field.
✕
Error — Sandbox execution failed after 3 retries.

Navigation

Tabs

ERP target write details would appear here.

Breadcrumbs

Accordion

Maps CRM field account_name to ERP field company_name. No transformation applied — direct 1:1 copy.
Concatenates CRM fields street, city, postal_code, country into ERP billing_address.
Copies CRM vat_number to Accounting tax_id. Validated against EU VAT format.

Modal Dialog

Dropdown Menu

Avatars & Tooltips

JCJane Chen — Approver
SPSam Patel — Coordinator
MRMaria Rodriguez — Observer

Spacing Scale (4px grid)

4px (--spacing-1)
8px (--spacing-2)
12px (--spacing-3)
16px (--spacing-4)
24px (--spacing-6)
32px (--spacing-8)
48px (--spacing-12)
64px (--spacing-16)
96px (--spacing-24)

Elevation / Shadows

Shadow SM
Shadow MD
Shadow LG
Shadow XL

Loading States

Border Radius

sm 2px
md 4px
lg 8px
full
✓ Work order WO-2024-0012 approved successfully.