From cb913eca6d569d9245928bff3309dac02fcc5bae Mon Sep 17 00:00:00 2001 From: Mary Rocheleau <11203401+mmmary314@users.noreply.github.com> Date: Thu, 16 Apr 2026 17:43:34 +0530 Subject: [PATCH 1/3] Add Connect design system styleguide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds docs/styleguide.html as a living reference for the Connect design system — covering color tokens, typography, spacing, and all UI components. Co-Authored-By: Claude Sonnet 4.6 --- docs/styleguide.html | 2700 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2700 insertions(+) create mode 100644 docs/styleguide.html diff --git a/docs/styleguide.html b/docs/styleguide.html new file mode 100644 index 000000000..b0544bcda --- /dev/null +++ b/docs/styleguide.html @@ -0,0 +1,2700 @@ + + + + + +Connect — Design System + + + + + + + + + +
+

Connect Design System

+

Design tokens, components, and usage guidelines for CommCare Connect web UI.

+ + +
+

Colors

+

All colors are available as CSS custom properties on :root.

+ +

Brand / Primary

+
+
+
+
Primary
--color-primary · #3A42C7
+
+
+
+
Primary Light
--color-primary-light · #EEF0FF
+
+
+
+
Sidebar BG
--color-sidebar-bg · #1A1F6E
+
+
+
+
Sidebar Deep
--color-sidebar-deep · #0D1147
+
+
+ +

Semantic

+
+
+
+
Success FG
--color-success-fg · #218079
+
+
+
+
Success BG
--color-success-bg · #E6F5E5
+
+
+
+
Warning FG
--color-warning-fg · #BC950F
+
+
+
+
Warning BG
--color-warning-bg · #FFF4CD
+
+
+
+
Error FG
--color-error-fg · #900000
+
+
+
+
Error BG
--color-error-bg · #FAD4D4
+
+
+ +

Gray Scale

+
+
Gray 50
#F8F9FA
+
Gray 100
#F0F1F3
+
Gray 200
#E2E4E9
+
Gray 300
#C8CDD6
+
Gray 400
#9BA3B2
+
Gray 500
#6B7280
+
Gray 600
#4B5563
+
Gray 700
#374151
+
Gray 800
#1F2937
+
Gray 900
#111827
+
+
+ + +
+

Typography

+

Font: DM Sans. Web unit: rem (base 16px). Android unit: sp (×16). Conversion ratio: 0.0625.

+ +
+
+
+
Display Large
3.75rem · 60sp
fw-bold
+
Connect
+
+
+
Display Medium
3rem · 48sp
fw-bold
+
Frontline
+
+
+
Display Small
2.25rem · 36sp
fw-semibold
+
1M+ Workers
+
+
+
Header Large
1.75rem · 28sp
fw-bold
+
Header Large
+
+
+
Header Medium
1.375rem · 22sp
fw-semibold
+
Header Medium
+
+
+
Header Small
1.125rem · 18sp
fw-semibold
+
Header Small
+
+
+
Title Large
1rem · 16sp
fw-semibold
+
Title Large
+
+
+
Title Medium
0.9375rem · 15sp
fw-medium
+
Title Medium
+
+
+
Body Large
0.875rem · 14sp
fw-regular
+
Body Large — table cell content, general text
+
+
+
Table Column Header
0.875rem · 14sp
fw-medium
+
Column Header
+
+
+
Body Small
0.75rem · 12sp
fw-regular
+
Body Small — secondary text, hints, timestamps
+
+
+
Label Large Medium
0.8125rem
fw-medium
+
Label Large Medium
+
+
+
Label Large Bold
0.8125rem
fw-bold
+
Label Large Bold — User ID, ConnectID
+
+
+
Label Medium
0.6875rem
fw-medium
+
Label Medium — captions, metadata
+
+
+
Caption
0.625rem · 10sp
fw-regular
+
CAPTION TEXT
+
+
+
+ +

Font Weights

+
+
+
300 · fw-light
--fw-light
Light weight text
+
400 · fw-regular
--fw-regular
Regular weight text
+
500 · fw-medium
--fw-medium
Medium weight text
+
600 · fw-semibold
--fw-semibold
Semibold weight text
+
700 · fw-bold
--fw-bold
Bold weight text
+
800 · fw-extrabold
--fw-extrabold
Extra Bold weight text
+
+
+
+ + +
+

Spacing & Radius

+ +

Spacing Scale (4px base)

+
+
+
+
+ 1 · 4px +
+
+
+ 2 · 8px +
+
+
+ 3 · 12px +
+
+
+ 4 · 16px +
+
+
+ 5 · 20px +
+
+
+ 6 · 24px +
+
+
+ 8 · 32px +
+
+
+ 10 · 40px +
+
+
+ 12 · 48px +
+
+
+ 16 · 64px +
+
+
+ +

Border Radius

+
+
+
+
+ sm · 4px +
+
+
+ md · 8px +
+
+
+ lg · 12px +
+
+
+ xl · 16px +
+
+
+ full · pill +
+
+
+
+ + +
+

Buttons

+ +

Variants

+
+
+ + + + + + +
+
+ .btn-primary.btn-secondary.btn-ghost.btn-danger.btn-success.btn + .disabled +
+
+ +

Sizes

+
+
+ + + +
+
+ .btn-sm · 10px 12px paddefault · 8px 18px.btn-lg · 11px 24px +
+
+
+ + +
+

Chips & Status Badges

+ +

Worker / Opportunity Status

+
+
+ active + inactive + invited + applied + rejected + ended +
+
+ .chip-active.chip-inactive.chip-invited.chip-applied.chip-rejected.chip-ended +
+
+ +

Payment Status

+
+
+ paid + unpaid + raised +
+
+ .chip-paid.chip-unpaid.chip-raised +
+
+
+ + +
+

Message Banners

+

Inline feedback messages. Use the × button to dismiss. Tokens directly from Figma spec.

+ +
+
+ + + + +
+
+ Info: FG #3A42C7 · BG #EEF0FF · Border #3A42C7 + Success: FG #218079 · BG #E6F5E5 · Border #7ABFB4 + Warning: FG #BC950F · BG #FFF4CD · Border #DBB646 + Error: FG #900000 · BG #FAD4D4 · Border #900000 +
+
+
+ + +
+

Text Inputs

+ +
+
+
+ + +
+
+ + + Helper text goes here +
+
+ + + This field is required +
+
+ + +
+
+ + +
+
+
+ Border: 1.5px solid --gray-300 + Focus ring: 3px rgba(58,66,199,0.12) + Error: border --color-error-fg +
+
+
+ + +
+

Toggles

+ +
+
+ + +
+
+ Track: 40×22px · Thumb: 16×16px · --color-primary when on + Click to toggle demo +
+
+
+ + + + + +
+

Progress Steps

+

Multi-step flow indicator (e.g. opportunity creation: Create → Payment Units → Verification Flags → Budgets).

+ +
+
+ +
+
+
+
1
+ Create +
+
+
+
+
+
2
+ Payment Units +
+
+
+
+
+
3
+ Verification Flags +
+
+
+
+
+
4
+ Budgets +
+
+
+ +
+
+
+
✓
+ Create +
+
+
+
+
+
✓
+ Payment Units +
+
+
+
+
+
3
+ Verification Flags +
+
+
+
+
+
4
+ Budgets +
+
+
+
+
+ done: bg --color-primary · active: bg --color-primary + ring + connector done: --color-primary · connector todo: --gray-200 +
+
+
+ + +
+

Cards

+ +
+
+
+
128
+
Total Deliveries
+
+
+
2,250,000
+
Worker | Total Accrued
+
+
+
1M+
+
Health Services Delivered
+
+
+
10+
+
Countries
+
+
+
+ bg #fff · border --gray-200 · border-radius --radius-lg · shadow --shadow-sm +
+
+
+ + +
+

Dialogs / Popups

+ +
+
+ +
+
⚠
+
Restore History
+
Restoring the version will make you lose current data.
+
+ + +
+
+ +
+
✓
+
Payment Success
+
Payment has been done successfully!
+
+ +
+
+ +
+
✕
+
Payment Failed
+
Payment submit failed!
+
+ +
+
+
+
+ max-width 360px · border-radius --radius-xl · shadow --shadow-lg +
+
+
+ + +
+

Tooltips

+ +
+
+
+ +
Tooltip text
+
+
+ +
Only authorized users can join
+
+
+
+ bg --gray-800 · color #fff · border-radius --radius-sm · shown on :hover +
+
+
+ + + + + + + + + + + +
+

Tabs

+

Horizontal tab bar with orange accent underline (--color-accent: #E8632B) on active tab — distinct from the blue primary. Tabs can include a count badge.

+
+
+
+
+ + + + + +
+
+
+
+ + + + + + +
+
+
+
+ Active underline: 2.5px solid --color-accent (#E8632B) + Active text: --color-primary + fw-semibold + Count badge: bg --gray-200 · active bg --color-primary-light +
+
+
+ + +
+

Action Button Strip

+

Blue pill buttons with icon, label, and a count badge. Used on the Opportunity detail page (Learn App, Deliver App, Payment Units).

+
+
+
+ + + +
+
+
+ bg --color-primary · border-radius --radius-md · count badge: rgba(255,255,255,0.25) +
+
+
+ + +
+

Progress Bar

+

Horizontal bar with label, percentage badge, track, fill, and count. Used in Verification and Payments panels.

+
+
+ +
+
+
+ Approved + 100% +
+ 7 +
+
+
+
+
+
+ +
+
+
+ Rejected + 0% +
+ 0 +
+
+
+
+
+
+ +
+
+
+ Paid + 15% +
+ INR 210.00 +
+
+
+
+
+
+
+
+ Track: 8px · bg --gray-200 · radius --radius-full + Fill: bg --color-primary + 0% badge: bg --gray-300, color --gray-600 + Active badge: bg --color-primary, color #fff +
+
+
+ + +
+

Stat Cards (Blue)

+

Filled blue cards with icon, label, value, delta badge, and external link. Used in the opportunity dashboard grid. Warning variant uses orange tint for inactive/alert states.

+
+
+ +
+
+
Services Delivered Total
+
+
7
+ 0 ↑ +
+
+
+ 📋 + ↗ +
+
+ +
+
+
Payments Earned
+
+
1,400
+ 0 ↑ +
+
+
+ 💳 + ↗ +
+
+ +
+
+
Payments Due
+
1,190.00
+
+ 💳 +
+ +
+
+
Connect Workers Inactive last 3 days
+
6
+
+
+ 📋 + ↗ +
+
+
+
+ Standard: bg --color-primary · border-radius --radius-lg + Warning: bg #FFF5EC · border 1.5px #F5B78E · text --color-accent + Delta badge: .delta-up (green) / .delta-down (red) / .delta-flat (gray) +
+
+
+ + +
+

Avatar Initials

+

Colored circle with 1–2 letter initials. Color is assigned per-user (not semantic). Sizes: sm (32px), default (48px), lg (56px).

+
+
+
+
MR
+ sm · 32px +
+
+
MR
+ default · 48px +
+
+
MR
+ lg · 56px +
+
+
AA
+ .avatar-blue +
+
+
SG
+ .avatar-teal +
+
+
NM
+ .avatar-purple +
+
+
+ .avatar-initials · border-radius 50% · fw-bold · color #fff + .avatar-orange #E8632B · .avatar-blue --color-primary · .avatar-teal --color-success-fg · .avatar-purple #7C3AED +
+
+
+ + +
+

Delta Badges

+

Pill showing change direction. Always paired with a stat value inside stat cards.

+
+
+ 0 ↑ + +12 ↑ + -3 ↓ + 0 +
+
+ .delta-up: bg #22C55E · .delta-down: bg --color-error-fg · .delta-flat: bg --gray-300 +
+
+
+ + +
+

Empty State

+

Used when a table or panel has no data for the current filter.

+
+
+
+
+
📭
+ No Visits for this filter. +
+
+
+
+ color --gray-400 · font-size --text-body-lg · centered in parent +
+
+
+ + +
+

Metadata Strip

+

Horizontal row of icon + label + value cells. Used below the opportunity title to show Delivery Type, Start/End Date, Max Workers, Max Budget, Status.

+
+
+
+
+ 📋 +
+
Delivery Type
+
Kangaroo Mother Care
+
+
+
+ 📅 +
+
Start Date
+
2026-02-16
+
+
+
+ 📅 +
+
End Date
+
2026-04-30
+
+
+
+ 👥 +
+
Max Connect Workers
+
0
+
+
+
+ 💰 +
+
Max Budget
+
INR 390,000
+
+
+
+ Active +
+
+
+
+ bg #fff · border --gray-200 · dividers --gray-100 · items flex:1 minWidth 140px + Last cell can contain a chip (status badge) instead of label+value +
+
+
+ + +
+

Worker Profile Banner

+

Full-width blue header strip shown on a worker's detail page. Contains avatar, name, ID, phone, and key stat columns.

+
+
+
+
MR
+
+
+ + March Release +
+
5f60e1f16c4d62be6ec1
+
📞 +74268417417
+
+
+
+
📋
+
0
+
Total Deliver Units
+
+
+
🚩
+
0
+
Flagged Deliver Units
+
+
+
✕
+
0
+
Rejected Deliver Units
+
+
+
💰
+
0
+
Accrued Amount (INR)
+
+
+
💳
+
0.00
+
Paid Amount (INR)
+
+
+
+
+
+ bg --color-primary · border-radius --radius-lg · padding 20px 24px + Stats separated by rgba(255,255,255,0.2) dividers +
+
+
+ + +
+

Data Table

+

Striped-on-hover table with sortable column headers (blue text + sort icon), checkbox selection, row number, status icon, name+ConnectID subtext cell, and em-dash for empty values.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#StatusName ⇅Phone Number ⇅Invited Date ⇅Last Active ↓Completed Learn ⇅
1✓ +
Sani
+
5PQXH5ZJIDTJG68SS2JK
+ 		+91832038142317-Feb-2026 09:13——
2⏱ +
-
+ 		+74269988000———
3✓ +
March Release
+
5f60e1f16c4d62be6ec1
+ 		+74268417417—09-Mar-2026 09:0709-Mar-2026 09:07
7■ +
Test
+
e90a7c91ca5ede94d249
+ 		+74269898980—17-Feb-2026 09:3816-Feb-2026 06:13
+
+
+ Header: bg --gray-50 · color --color-primary · fw-semibold · sortable + Row hover: bg --gray-50 · dividers --gray-100 + Status icons: .ok (green ✓) · .pending (warning clock) · .block (gray filled square) + ConnectID subtext: .cell-id · color --color-primary · DM Mono · font-size --text-body-sm + Empty cell: em dash (—) in .cell-muted color --gray-400 +
+
+
+ + +
+

Split Layout (Table + Detail Panel)

+

Two-column layout with a scrollable data table on the left and a contextual detail panel on the right. Used on Visits and similar pages.

+
+
+
+
+ + + + + + + + + + + + + + + + +
Date ⇅Entity Name ⇅Deliver Unit ⇅FlagsLast Activity ⇅
+
+
📭
+ No Visits for this filter. +
+
+
+
+
Details
+
+ Please select a visit to load details. +
+
+
+
+
+ Grid: 1fr 320px · main border-right --gray-200 + Detail panel: padding 20px · title border-bottom --gray-100 +
+
+
+ + +
+

All Tokens Reference

+

Copy-paste ready. All defined on :root in the CSS.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueUsage
--color-accent#E8632BTab active underline, sidebar active bar
--color-accent-light#FFF0E8Accent hover backgrounds
--color-primary#3A42C7CTA buttons, active states, links
--color-primary-light#EEF0FFHover backgrounds, info banners
--color-sidebar-bg#1A1F6EApp sidebar background
--color-success-fg#218079Success text, active chips
--color-success-bg#E6F5E5Success banner background
--color-success-border#7ABFB4Success banner border
--color-warning-fg#BC950FWarning text, applied chips
--color-warning-bg#FFF4CDWarning banner background
--color-warning-border#DBB646Warning banner border
--color-error-fg#900000Error text, rejected chips
--color-error-bg#FAD4D4Error banner background
--text-display-lg3.75rem / 60spHero headings
--text-body-lg0.875rem / 14spDefault UI text, table cells
--text-body-sm0.75rem / 12spHints, timestamps, captions
--fw-regular400Body text
--fw-medium500Labels, buttons
--fw-semibold600Subheadings, nav items
--fw-bold700Headings, stat values
--radius-sm4pxChips, small badges, tooltip
--radius-md8pxButtons, inputs, dropdowns
--radius-lg12pxCards, panels
--radius-xl16pxDialogs, modals
--radius-full9999pxChips/status pills, toggles
--shadow-sm0 1px 3px …Cards
--shadow-md0 4px 12px …Dropdowns, popovers
--shadow-lg0 8px 24px …Dialogs
--sidebar-width220pxExpanded sidebar
--header-height56pxApp topbar height
--transition-fast120ms easeHover states
--transition-base200ms easeToggle, modal transitions
+
+
+ +
+ + + + From 37b9a46c9ee7712e0b4c19291cf1d033069940da Mon Sep 17 00:00:00 2001 From: Mary Rocheleau <11203401+mmmary314@users.noreply.github.com> Date: Thu, 16 Apr 2026 17:44:39 +0530 Subject: [PATCH 2/3] Revert "Add Connect design system styleguide" This reverts commit cb913eca6d569d9245928bff3309dac02fcc5bae. --- docs/styleguide.html | 2700 ------------------------------------------ 1 file changed, 2700 deletions(-) delete mode 100644 docs/styleguide.html diff --git a/docs/styleguide.html b/docs/styleguide.html deleted file mode 100644 index b0544bcda..000000000 --- a/docs/styleguide.html +++ /dev/null @@ -1,2700 +0,0 @@ - - - - - -Connect — Design System - - - - - - - - - -
-

Connect Design System

-

Design tokens, components, and usage guidelines for CommCare Connect web UI.

- - -
-

Colors

-

All colors are available as CSS custom properties on :root.

- -

Brand / Primary

-
-
-
-
Primary
--color-primary · #3A42C7
-
-
-
-
Primary Light
--color-primary-light · #EEF0FF
-
-
-
-
Sidebar BG
--color-sidebar-bg · #1A1F6E
-
-
-
-
Sidebar Deep
--color-sidebar-deep · #0D1147
-
-
- -

Semantic

-
-
-
-
Success FG
--color-success-fg · #218079
-
-
-
-
Success BG
--color-success-bg · #E6F5E5
-
-
-
-
Warning FG
--color-warning-fg · #BC950F
-
-
-
-
Warning BG
--color-warning-bg · #FFF4CD
-
-
-
-
Error FG
--color-error-fg · #900000
-
-
-
-
Error BG
--color-error-bg · #FAD4D4
-
-
- -

Gray Scale

-
-
Gray 50
#F8F9FA
-
Gray 100
#F0F1F3
-
Gray 200
#E2E4E9
-
Gray 300
#C8CDD6
-
Gray 400
#9BA3B2
-
Gray 500
#6B7280
-
Gray 600
#4B5563
-
Gray 700
#374151
-
Gray 800
#1F2937
-
Gray 900
#111827
-
-
- - -
-

Typography

-

Font: DM Sans. Web unit: rem (base 16px). Android unit: sp (×16). Conversion ratio: 0.0625.

- -
-
-
-
Display Large
3.75rem · 60sp
fw-bold
-
Connect
-
-
-
Display Medium
3rem · 48sp
fw-bold
-
Frontline
-
-
-
Display Small
2.25rem · 36sp
fw-semibold
-
1M+ Workers
-
-
-
Header Large
1.75rem · 28sp
fw-bold
-
Header Large
-
-
-
Header Medium
1.375rem · 22sp
fw-semibold
-
Header Medium
-
-
-
Header Small
1.125rem · 18sp
fw-semibold
-
Header Small
-
-
-
Title Large
1rem · 16sp
fw-semibold
-
Title Large
-
-
-
Title Medium
0.9375rem · 15sp
fw-medium
-
Title Medium
-
-
-
Body Large
0.875rem · 14sp
fw-regular
-
Body Large — table cell content, general text
-
-
-
Table Column Header
0.875rem · 14sp
fw-medium
-
Column Header
-
-
-
Body Small
0.75rem · 12sp
fw-regular
-
Body Small — secondary text, hints, timestamps
-
-
-
Label Large Medium
0.8125rem
fw-medium
-
Label Large Medium
-
-
-
Label Large Bold
0.8125rem
fw-bold
-
Label Large Bold — User ID, ConnectID
-
-
-
Label Medium
0.6875rem
fw-medium
-
Label Medium — captions, metadata
-
-
-
Caption
0.625rem · 10sp
fw-regular
-
CAPTION TEXT
-
-
-
- -

Font Weights

-
-
-
300 · fw-light
--fw-light
Light weight text
-
400 · fw-regular
--fw-regular
Regular weight text
-
500 · fw-medium
--fw-medium
Medium weight text
-
600 · fw-semibold
--fw-semibold
Semibold weight text
-
700 · fw-bold
--fw-bold
Bold weight text
-
800 · fw-extrabold
--fw-extrabold
Extra Bold weight text
-
-
-
- - -
-

Spacing & Radius

- -

Spacing Scale (4px base)

-
-
-
-
- 1 · 4px -
-
-
- 2 · 8px -
-
-
- 3 · 12px -
-
-
- 4 · 16px -
-
-
- 5 · 20px -
-
-
- 6 · 24px -
-
-
- 8 · 32px -
-
-
- 10 · 40px -
-
-
- 12 · 48px -
-
-
- 16 · 64px -
-
-
- -

Border Radius

-
-
-
-
- sm · 4px -
-
-
- md · 8px -
-
-
- lg · 12px -
-
-
- xl · 16px -
-
-
- full · pill -
-
-
-
- - -
-

Buttons

- -

Variants

-
-
- - - - - - -
-
- .btn-primary.btn-secondary.btn-ghost.btn-danger.btn-success.btn + .disabled -
-
- -

Sizes

-
-
- - - -
-
- .btn-sm · 10px 12px paddefault · 8px 18px.btn-lg · 11px 24px -
-
-
- - -
-

Chips & Status Badges

- -

Worker / Opportunity Status

-
-
- active - inactive - invited - applied - rejected - ended -
-
- .chip-active.chip-inactive.chip-invited.chip-applied.chip-rejected.chip-ended -
-
- -

Payment Status

-
-
- paid - unpaid - raised -
-
- .chip-paid.chip-unpaid.chip-raised -
-
-
- - -
-

Message Banners

-

Inline feedback messages. Use the × button to dismiss. Tokens directly from Figma spec.

- -
-
- - - - -
-
- Info: FG #3A42C7 · BG #EEF0FF · Border #3A42C7 - Success: FG #218079 · BG #E6F5E5 · Border #7ABFB4 - Warning: FG #BC950F · BG #FFF4CD · Border #DBB646 - Error: FG #900000 · BG #FAD4D4 · Border #900000 -
-
-
- - -
-

Text Inputs

- -
-
-
- - -
-
- - - Helper text goes here -
-
- - - This field is required -
-
- - -
-
- - -
-
-
- Border: 1.5px solid --gray-300 - Focus ring: 3px rgba(58,66,199,0.12) - Error: border --color-error-fg -
-
-
- - -
-

Toggles

- -
-
- - -
-
- Track: 40×22px · Thumb: 16×16px · --color-primary when on - Click to toggle demo -
-
-
- - - - - -
-

Progress Steps

-

Multi-step flow indicator (e.g. opportunity creation: Create → Payment Units → Verification Flags → Budgets).

- -
-
- -
-
-
-
1
- Create -
-
-
-
-
-
2
- Payment Units -
-
-
-
-
-
3
- Verification Flags -
-
-
-
-
-
4
- Budgets -
-
-
- -
-
-
-
✓
- Create -
-
-
-
-
-
✓
- Payment Units -
-
-
-
-
-
3
- Verification Flags -
-
-
-
-
-
4
- Budgets -
-
-
-
-
- done: bg --color-primary · active: bg --color-primary + ring - connector done: --color-primary · connector todo: --gray-200 -
-
-
- - -
-

Cards

- -
-
-
-
128
-
Total Deliveries
-
-
-
2,250,000
-
Worker | Total Accrued
-
-
-
1M+
-
Health Services Delivered
-
-
-
10+
-
Countries
-
-
-
- bg #fff · border --gray-200 · border-radius --radius-lg · shadow --shadow-sm -
-
-
- - -
-

Dialogs / Popups

- -
-
- -
-
⚠
-
Restore History
-
Restoring the version will make you lose current data.
-
- - -
-
- -
-
✓
-
Payment Success
-
Payment has been done successfully!
-
- -
-
- -
-
✕
-
Payment Failed
-
Payment submit failed!
-
- -
-
-
-
- max-width 360px · border-radius --radius-xl · shadow --shadow-lg -
-
-
- - -
-

Tooltips

- -
-
-
- -
Tooltip text
-
-
- -
Only authorized users can join
-
-
-
- bg --gray-800 · color #fff · border-radius --radius-sm · shown on :hover -
-
-
- - - - - - - - - - - -
-

Tabs

-

Horizontal tab bar with orange accent underline (--color-accent: #E8632B) on active tab — distinct from the blue primary. Tabs can include a count badge.

-
-
-
-
- - - - - -
-
-
-
- - - - - - -
-
-
-
- Active underline: 2.5px solid --color-accent (#E8632B) - Active text: --color-primary + fw-semibold - Count badge: bg --gray-200 · active bg --color-primary-light -
-
-
- - -
-

Action Button Strip

-

Blue pill buttons with icon, label, and a count badge. Used on the Opportunity detail page (Learn App, Deliver App, Payment Units).

-
-
-
- - - -
-
-
- bg --color-primary · border-radius --radius-md · count badge: rgba(255,255,255,0.25) -
-
-
- - -
-

Progress Bar

-

Horizontal bar with label, percentage badge, track, fill, and count. Used in Verification and Payments panels.

-
-
- -
-
-
- Approved - 100% -
- 7 -
-
-
-
-
-
- -
-
-
- Rejected - 0% -
- 0 -
-
-
-
-
-
- -
-
-
- Paid - 15% -
- INR 210.00 -
-
-
-
-
-
-
-
- Track: 8px · bg --gray-200 · radius --radius-full - Fill: bg --color-primary - 0% badge: bg --gray-300, color --gray-600 - Active badge: bg --color-primary, color #fff -
-
-
- - -
-

Stat Cards (Blue)

-

Filled blue cards with icon, label, value, delta badge, and external link. Used in the opportunity dashboard grid. Warning variant uses orange tint for inactive/alert states.

-
-
- -
-
-
Services Delivered Total
-
-
7
- 0 ↑ -
-
-
- 📋 - ↗ -
-
- -
-
-
Payments Earned
-
-
1,400
- 0 ↑ -
-
-
- 💳 - ↗ -
-
- -
-
-
Payments Due
-
1,190.00
-
- 💳 -
- -
-
-
Connect Workers Inactive last 3 days
-
6
-
-
- 📋 - ↗ -
-
-
-
- Standard: bg --color-primary · border-radius --radius-lg - Warning: bg #FFF5EC · border 1.5px #F5B78E · text --color-accent - Delta badge: .delta-up (green) / .delta-down (red) / .delta-flat (gray) -
-
-
- - -
-

Avatar Initials

-

Colored circle with 1–2 letter initials. Color is assigned per-user (not semantic). Sizes: sm (32px), default (48px), lg (56px).

-
-
-
-
MR
- sm · 32px -
-
-
MR
- default · 48px -
-
-
MR
- lg · 56px -
-
-
AA
- .avatar-blue -
-
-
SG
- .avatar-teal -
-
-
NM
- .avatar-purple -
-
-
- .avatar-initials · border-radius 50% · fw-bold · color #fff - .avatar-orange #E8632B · .avatar-blue --color-primary · .avatar-teal --color-success-fg · .avatar-purple #7C3AED -
-
-
- - -
-

Delta Badges

-

Pill showing change direction. Always paired with a stat value inside stat cards.

-
-
- 0 ↑ - +12 ↑ - -3 ↓ - 0 -
-
- .delta-up: bg #22C55E · .delta-down: bg --color-error-fg · .delta-flat: bg --gray-300 -
-
-
- - -
-

Empty State

-

Used when a table or panel has no data for the current filter.

-
-
-
-
-
📭
- No Visits for this filter. -
-
-
-
- color --gray-400 · font-size --text-body-lg · centered in parent -
-
-
- - -
-

Metadata Strip

-

Horizontal row of icon + label + value cells. Used below the opportunity title to show Delivery Type, Start/End Date, Max Workers, Max Budget, Status.

-
-
-
-
- 📋 -
-
Delivery Type
-
Kangaroo Mother Care
-
-
-
- 📅 -
-
Start Date
-
2026-02-16
-
-
-
- 📅 -
-
End Date
-
2026-04-30
-
-
-
- 👥 -
-
Max Connect Workers
-
0
-
-
-
- 💰 -
-
Max Budget
-
INR 390,000
-
-
-
- Active -
-
-
-
- bg #fff · border --gray-200 · dividers --gray-100 · items flex:1 minWidth 140px - Last cell can contain a chip (status badge) instead of label+value -
-
-
- - -
-

Worker Profile Banner

-

Full-width blue header strip shown on a worker's detail page. Contains avatar, name, ID, phone, and key stat columns.

-
-
-
-
MR
-
-
- - March Release -
-
5f60e1f16c4d62be6ec1
-
📞 +74268417417
-
-
-
-
📋
-
0
-
Total Deliver Units
-
-
-
🚩
-
0
-
Flagged Deliver Units
-
-
-
✕
-
0
-
Rejected Deliver Units
-
-
-
💰
-
0
-
Accrued Amount (INR)
-
-
-
💳
-
0.00
-
Paid Amount (INR)
-
-
-
-
-
- bg --color-primary · border-radius --radius-lg · padding 20px 24px - Stats separated by rgba(255,255,255,0.2) dividers -
-
-
- - -
-

Data Table

-

Striped-on-hover table with sortable column headers (blue text + sort icon), checkbox selection, row number, status icon, name+ConnectID subtext cell, and em-dash for empty values.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#StatusName ⇅Phone Number ⇅Invited Date ⇅Last Active ↓Completed Learn ⇅
1✓ -
Sani
-
5PQXH5ZJIDTJG68SS2JK
- 		+91832038142317-Feb-2026 09:13——
2⏱ -
-
- 		+74269988000———
3✓ -
March Release
-
5f60e1f16c4d62be6ec1
- 		+74268417417—09-Mar-2026 09:0709-Mar-2026 09:07
7■ -
Test
-
e90a7c91ca5ede94d249
- 		+74269898980—17-Feb-2026 09:3816-Feb-2026 06:13
-
-
- Header: bg --gray-50 · color --color-primary · fw-semibold · sortable - Row hover: bg --gray-50 · dividers --gray-100 - Status icons: .ok (green ✓) · .pending (warning clock) · .block (gray filled square) - ConnectID subtext: .cell-id · color --color-primary · DM Mono · font-size --text-body-sm - Empty cell: em dash (—) in .cell-muted color --gray-400 -
-
-
- - -
-

Split Layout (Table + Detail Panel)

-

Two-column layout with a scrollable data table on the left and a contextual detail panel on the right. Used on Visits and similar pages.

-
-
-
-
- - - - - - - - - - - - - - - - -
Date ⇅Entity Name ⇅Deliver Unit ⇅FlagsLast Activity ⇅
-
-
📭
- No Visits for this filter. -
-
-
-
-
Details
-
- Please select a visit to load details. -
-
-
-
-
- Grid: 1fr 320px · main border-right --gray-200 - Detail panel: padding 20px · title border-bottom --gray-100 -
-
-
- - -
-

All Tokens Reference

-

Copy-paste ready. All defined on :root in the CSS.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TokenValueUsage
--color-accent#E8632BTab active underline, sidebar active bar
--color-accent-light#FFF0E8Accent hover backgrounds
--color-primary#3A42C7CTA buttons, active states, links
--color-primary-light#EEF0FFHover backgrounds, info banners
--color-sidebar-bg#1A1F6EApp sidebar background
--color-success-fg#218079Success text, active chips
--color-success-bg#E6F5E5Success banner background
--color-success-border#7ABFB4Success banner border
--color-warning-fg#BC950FWarning text, applied chips
--color-warning-bg#FFF4CDWarning banner background
--color-warning-border#DBB646Warning banner border
--color-error-fg#900000Error text, rejected chips
--color-error-bg#FAD4D4Error banner background
--text-display-lg3.75rem / 60spHero headings
--text-body-lg0.875rem / 14spDefault UI text, table cells
--text-body-sm0.75rem / 12spHints, timestamps, captions
--fw-regular400Body text
--fw-medium500Labels, buttons
--fw-semibold600Subheadings, nav items
--fw-bold700Headings, stat values
--radius-sm4pxChips, small badges, tooltip
--radius-md8pxButtons, inputs, dropdowns
--radius-lg12pxCards, panels
--radius-xl16pxDialogs, modals
--radius-full9999pxChips/status pills, toggles
--shadow-sm0 1px 3px …Cards
--shadow-md0 4px 12px …Dropdowns, popovers
--shadow-lg0 8px 24px …Dialogs
--sidebar-width220pxExpanded sidebar
--header-height56pxApp topbar height
--transition-fast120ms easeHover states
--transition-base200ms easeToggle, modal transitions
-
-
- -
- - - - From cb8e19ac31f050835e9e6931652ecfd81a1df7ce Mon Sep 17 00:00:00 2001 From: Mary Rocheleau <11203401+mmmary314@users.noreply.github.com> Date: Thu, 16 Apr 2026 17:48:29 +0530 Subject: [PATCH 3/3] Add Connect design system styleguide Co-Authored-By: Claude Sonnet 4.6 --- docs/styleguide.html | 2700 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2700 insertions(+) create mode 100644 docs/styleguide.html diff --git a/docs/styleguide.html b/docs/styleguide.html new file mode 100644 index 000000000..b0544bcda --- /dev/null +++ b/docs/styleguide.html @@ -0,0 +1,2700 @@ + + + + + +Connect — Design System + + + + + + + + + +
+

Connect Design System

+

Design tokens, components, and usage guidelines for CommCare Connect web UI.

+ + +
+

Colors

+

All colors are available as CSS custom properties on :root.

+ +

Brand / Primary

+
+
+
+
Primary
--color-primary · #3A42C7
+
+
+
+
Primary Light
--color-primary-light · #EEF0FF
+
+
+
+
Sidebar BG
--color-sidebar-bg · #1A1F6E
+
+
+
+
Sidebar Deep
--color-sidebar-deep · #0D1147
+
+
+ +

Semantic

+
+
+
+
Success FG
--color-success-fg · #218079
+
+
+
+
Success BG
--color-success-bg · #E6F5E5
+
+
+
+
Warning FG
--color-warning-fg · #BC950F
+
+
+
+
Warning BG
--color-warning-bg · #FFF4CD
+
+
+
+
Error FG
--color-error-fg · #900000
+
+
+
+
Error BG
--color-error-bg · #FAD4D4
+
+
+ +

Gray Scale

+
+
Gray 50
#F8F9FA
+
Gray 100
#F0F1F3
+
Gray 200
#E2E4E9
+
Gray 300
#C8CDD6
+
Gray 400
#9BA3B2
+
Gray 500
#6B7280
+
Gray 600
#4B5563
+
Gray 700
#374151
+
Gray 800
#1F2937
+
Gray 900
#111827
+
+
+ + +
+

Typography

+

Font: DM Sans. Web unit: rem (base 16px). Android unit: sp (×16). Conversion ratio: 0.0625.

+ +
+
+
+
Display Large
3.75rem · 60sp
fw-bold
+
Connect
+
+
+
Display Medium
3rem · 48sp
fw-bold
+
Frontline
+
+
+
Display Small
2.25rem · 36sp
fw-semibold
+
1M+ Workers
+
+
+
Header Large
1.75rem · 28sp
fw-bold
+
Header Large
+
+
+
Header Medium
1.375rem · 22sp
fw-semibold
+
Header Medium
+
+
+
Header Small
1.125rem · 18sp
fw-semibold
+
Header Small
+
+
+
Title Large
1rem · 16sp
fw-semibold
+
Title Large
+
+
+
Title Medium
0.9375rem · 15sp
fw-medium
+
Title Medium
+
+
+
Body Large
0.875rem · 14sp
fw-regular
+
Body Large — table cell content, general text
+
+
+
Table Column Header
0.875rem · 14sp
fw-medium
+
Column Header
+
+
+
Body Small
0.75rem · 12sp
fw-regular
+
Body Small — secondary text, hints, timestamps
+
+
+
Label Large Medium
0.8125rem
fw-medium
+
Label Large Medium
+
+
+
Label Large Bold
0.8125rem
fw-bold
+
Label Large Bold — User ID, ConnectID
+
+
+
Label Medium
0.6875rem
fw-medium
+
Label Medium — captions, metadata
+
+
+
Caption
0.625rem · 10sp
fw-regular
+
CAPTION TEXT
+
+
+
+ +

Font Weights

+
+
+
300 · fw-light
--fw-light
Light weight text
+
400 · fw-regular
--fw-regular
Regular weight text
+
500 · fw-medium
--fw-medium
Medium weight text
+
600 · fw-semibold
--fw-semibold
Semibold weight text
+
700 · fw-bold
--fw-bold
Bold weight text
+
800 · fw-extrabold
--fw-extrabold
Extra Bold weight text
+
+
+
+ + +
+

Spacing & Radius

+ +

Spacing Scale (4px base)

+
+
+
+
+ 1 · 4px +
+
+
+ 2 · 8px +
+
+
+ 3 · 12px +
+
+
+ 4 · 16px +
+
+
+ 5 · 20px +
+
+
+ 6 · 24px +
+
+
+ 8 · 32px +
+
+
+ 10 · 40px +
+
+
+ 12 · 48px +
+
+
+ 16 · 64px +
+
+
+ +

Border Radius

+
+
+
+
+ sm · 4px +
+
+
+ md · 8px +
+
+
+ lg · 12px +
+
+
+ xl · 16px +
+
+
+ full · pill +
+
+
+
+ + +
+

Buttons

+ +

Variants

+
+
+ + + + + + +
+
+ .btn-primary.btn-secondary.btn-ghost.btn-danger.btn-success.btn + .disabled +
+
+ +

Sizes

+
+
+ + + +
+
+ .btn-sm · 10px 12px paddefault · 8px 18px.btn-lg · 11px 24px +
+
+
+ + +
+

Chips & Status Badges

+ +

Worker / Opportunity Status

+
+
+ active + inactive + invited + applied + rejected + ended +
+
+ .chip-active.chip-inactive.chip-invited.chip-applied.chip-rejected.chip-ended +
+
+ +

Payment Status

+
+
+ paid + unpaid + raised +
+
+ .chip-paid.chip-unpaid.chip-raised +
+
+
+ + +
+

Message Banners

+

Inline feedback messages. Use the × button to dismiss. Tokens directly from Figma spec.

+ +
+
+ + + + +
+
+ Info: FG #3A42C7 · BG #EEF0FF · Border #3A42C7 + Success: FG #218079 · BG #E6F5E5 · Border #7ABFB4 + Warning: FG #BC950F · BG #FFF4CD · Border #DBB646 + Error: FG #900000 · BG #FAD4D4 · Border #900000 +
+
+
+ + +
+

Text Inputs

+ +
+
+
+ + +
+
+ + + Helper text goes here +
+
+ + + This field is required +
+
+ + +
+
+ + +
+
+
+ Border: 1.5px solid --gray-300 + Focus ring: 3px rgba(58,66,199,0.12) + Error: border --color-error-fg +
+
+
+ + +
+

Toggles

+ +
+
+ + +
+
+ Track: 40×22px · Thumb: 16×16px · --color-primary when on + Click to toggle demo +
+
+
+ + + + + +
+

Progress Steps

+

Multi-step flow indicator (e.g. opportunity creation: Create → Payment Units → Verification Flags → Budgets).

+ +
+
+ +
+
+
+
1
+ Create +
+
+
+
+
+
2
+ Payment Units +
+
+
+
+
+
3
+ Verification Flags +
+
+
+
+
+
4
+ Budgets +
+
+
+ +
+
+
+
✓
+ Create +
+
+
+
+
+
✓
+ Payment Units +
+
+
+
+
+
3
+ Verification Flags +
+
+
+
+
+
4
+ Budgets +
+
+
+
+
+ done: bg --color-primary · active: bg --color-primary + ring + connector done: --color-primary · connector todo: --gray-200 +
+
+
+ + +
+

Cards

+ +
+
+
+
128
+
Total Deliveries
+
+
+
2,250,000
+
Worker | Total Accrued
+
+
+
1M+
+
Health Services Delivered
+
+
+
10+
+
Countries
+
+
+
+ bg #fff · border --gray-200 · border-radius --radius-lg · shadow --shadow-sm +
+
+
+ + +
+

Dialogs / Popups

+ +
+
+ +
+
⚠
+
Restore History
+
Restoring the version will make you lose current data.
+
+ + +
+
+ +
+
✓
+
Payment Success
+
Payment has been done successfully!
+
+ +
+
+ +
+
✕
+
Payment Failed
+
Payment submit failed!
+
+ +
+
+
+
+ max-width 360px · border-radius --radius-xl · shadow --shadow-lg +
+
+
+ + +
+

Tooltips

+ +
+
+
+ +
Tooltip text
+
+
+ +
Only authorized users can join
+
+
+
+ bg --gray-800 · color #fff · border-radius --radius-sm · shown on :hover +
+
+
+ + + + + + + + + + + +
+

Tabs

+

Horizontal tab bar with orange accent underline (--color-accent: #E8632B) on active tab — distinct from the blue primary. Tabs can include a count badge.

+
+
+
+
+ + + + + +
+
+
+
+ + + + + + +
+
+
+
+ Active underline: 2.5px solid --color-accent (#E8632B) + Active text: --color-primary + fw-semibold + Count badge: bg --gray-200 · active bg --color-primary-light +
+
+
+ + +
+

Action Button Strip

+

Blue pill buttons with icon, label, and a count badge. Used on the Opportunity detail page (Learn App, Deliver App, Payment Units).

+
+
+
+ + + +
+
+
+ bg --color-primary · border-radius --radius-md · count badge: rgba(255,255,255,0.25) +
+
+
+ + +
+

Progress Bar

+

Horizontal bar with label, percentage badge, track, fill, and count. Used in Verification and Payments panels.

+
+
+ +
+
+
+ Approved + 100% +
+ 7 +
+
+
+
+
+
+ +
+
+
+ Rejected + 0% +
+ 0 +
+
+
+
+
+
+ +
+
+
+ Paid + 15% +
+ INR 210.00 +
+
+
+
+
+
+
+
+ Track: 8px · bg --gray-200 · radius --radius-full + Fill: bg --color-primary + 0% badge: bg --gray-300, color --gray-600 + Active badge: bg --color-primary, color #fff +
+
+
+ + +
+

Stat Cards (Blue)

+

Filled blue cards with icon, label, value, delta badge, and external link. Used in the opportunity dashboard grid. Warning variant uses orange tint for inactive/alert states.

+
+
+ +
+
+
Services Delivered Total
+
+
7
+ 0 ↑ +
+
+
+ 📋 + ↗ +
+
+ +
+
+
Payments Earned
+
+
1,400
+ 0 ↑ +
+
+
+ 💳 + ↗ +
+
+ +
+
+
Payments Due
+
1,190.00
+
+ 💳 +
+ +
+
+
Connect Workers Inactive last 3 days
+
6
+
+
+ 📋 + ↗ +
+
+
+
+ Standard: bg --color-primary · border-radius --radius-lg + Warning: bg #FFF5EC · border 1.5px #F5B78E · text --color-accent + Delta badge: .delta-up (green) / .delta-down (red) / .delta-flat (gray) +
+
+
+ + +
+

Avatar Initials

+

Colored circle with 1–2 letter initials. Color is assigned per-user (not semantic). Sizes: sm (32px), default (48px), lg (56px).

+
+
+
+
MR
+ sm · 32px +
+
+
MR
+ default · 48px +
+
+
MR
+ lg · 56px +
+
+
AA
+ .avatar-blue +
+
+
SG
+ .avatar-teal +
+
+
NM
+ .avatar-purple +
+
+
+ .avatar-initials · border-radius 50% · fw-bold · color #fff + .avatar-orange #E8632B · .avatar-blue --color-primary · .avatar-teal --color-success-fg · .avatar-purple #7C3AED +
+
+
+ + +
+

Delta Badges

+

Pill showing change direction. Always paired with a stat value inside stat cards.

+
+
+ 0 ↑ + +12 ↑ + -3 ↓ + 0 +
+
+ .delta-up: bg #22C55E · .delta-down: bg --color-error-fg · .delta-flat: bg --gray-300 +
+
+
+ + +
+

Empty State

+

Used when a table or panel has no data for the current filter.

+
+
+
+
+
📭
+ No Visits for this filter. +
+
+
+
+ color --gray-400 · font-size --text-body-lg · centered in parent +
+
+
+ + +
+

Metadata Strip

+

Horizontal row of icon + label + value cells. Used below the opportunity title to show Delivery Type, Start/End Date, Max Workers, Max Budget, Status.

+
+
+
+
+ 📋 +
+
Delivery Type
+
Kangaroo Mother Care
+
+
+
+ 📅 +
+
Start Date
+
2026-02-16
+
+
+
+ 📅 +
+
End Date
+
2026-04-30
+
+
+
+ 👥 +
+
Max Connect Workers
+
0
+
+
+
+ 💰 +
+
Max Budget
+
INR 390,000
+
+
+
+ Active +
+
+
+
+ bg #fff · border --gray-200 · dividers --gray-100 · items flex:1 minWidth 140px + Last cell can contain a chip (status badge) instead of label+value +
+
+
+ + +
+

Worker Profile Banner

+

Full-width blue header strip shown on a worker's detail page. Contains avatar, name, ID, phone, and key stat columns.

+
+
+
+
MR
+
+
+ + March Release +
+
5f60e1f16c4d62be6ec1
+
📞 +74268417417
+
+
+
+
📋
+
0
+
Total Deliver Units
+
+
+
🚩
+
0
+
Flagged Deliver Units
+
+
+
✕
+
0
+
Rejected Deliver Units
+
+
+
💰
+
0
+
Accrued Amount (INR)
+
+
+
💳
+
0.00
+
Paid Amount (INR)
+
+
+
+
+
+ bg --color-primary · border-radius --radius-lg · padding 20px 24px + Stats separated by rgba(255,255,255,0.2) dividers +
+
+
+ + +
+

Data Table

+

Striped-on-hover table with sortable column headers (blue text + sort icon), checkbox selection, row number, status icon, name+ConnectID subtext cell, and em-dash for empty values.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#StatusName ⇅Phone Number ⇅Invited Date ⇅Last Active ↓Completed Learn ⇅
1✓ +
Sani
+
5PQXH5ZJIDTJG68SS2JK
+ 		+91832038142317-Feb-2026 09:13——
2⏱ +
-
+ 		+74269988000———
3✓ +
March Release
+
5f60e1f16c4d62be6ec1
+ 		+74268417417—09-Mar-2026 09:0709-Mar-2026 09:07
7■ +
Test
+
e90a7c91ca5ede94d249
+ 		+74269898980—17-Feb-2026 09:3816-Feb-2026 06:13
+
+
+ Header: bg --gray-50 · color --color-primary · fw-semibold · sortable + Row hover: bg --gray-50 · dividers --gray-100 + Status icons: .ok (green ✓) · .pending (warning clock) · .block (gray filled square) + ConnectID subtext: .cell-id · color --color-primary · DM Mono · font-size --text-body-sm + Empty cell: em dash (—) in .cell-muted color --gray-400 +
+
+
+ + +
+

Split Layout (Table + Detail Panel)

+

Two-column layout with a scrollable data table on the left and a contextual detail panel on the right. Used on Visits and similar pages.

+
+
+
+
+ + + + + + + + + + + + + + + + +
Date ⇅Entity Name ⇅Deliver Unit ⇅FlagsLast Activity ⇅
+
+
📭
+ No Visits for this filter. +
+
+
+
+
Details
+
+ Please select a visit to load details. +
+
+
+
+
+ Grid: 1fr 320px · main border-right --gray-200 + Detail panel: padding 20px · title border-bottom --gray-100 +
+
+
+ + +
+

All Tokens Reference

+

Copy-paste ready. All defined on :root in the CSS.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueUsage
--color-accent#E8632BTab active underline, sidebar active bar
--color-accent-light#FFF0E8Accent hover backgrounds
--color-primary#3A42C7CTA buttons, active states, links
--color-primary-light#EEF0FFHover backgrounds, info banners
--color-sidebar-bg#1A1F6EApp sidebar background
--color-success-fg#218079Success text, active chips
--color-success-bg#E6F5E5Success banner background
--color-success-border#7ABFB4Success banner border
--color-warning-fg#BC950FWarning text, applied chips
--color-warning-bg#FFF4CDWarning banner background
--color-warning-border#DBB646Warning banner border
--color-error-fg#900000Error text, rejected chips
--color-error-bg#FAD4D4Error banner background
--text-display-lg3.75rem / 60spHero headings
--text-body-lg0.875rem / 14spDefault UI text, table cells
--text-body-sm0.75rem / 12spHints, timestamps, captions
--fw-regular400Body text
--fw-medium500Labels, buttons
--fw-semibold600Subheadings, nav items
--fw-bold700Headings, stat values
--radius-sm4pxChips, small badges, tooltip
--radius-md8pxButtons, inputs, dropdowns
--radius-lg12pxCards, panels
--radius-xl16pxDialogs, modals
--radius-full9999pxChips/status pills, toggles
--shadow-sm0 1px 3px …Cards
--shadow-md0 4px 12px …Dropdowns, popovers
--shadow-lg0 8px 24px …Dialogs
--sidebar-width220pxExpanded sidebar
--header-height56pxApp topbar height
--transition-fast120ms easeHover states
--transition-base200ms easeToggle, modal transitions
+
+
+ +
+ + + +