Aigent Design System
A unified visual language for the Aigent contact center intelligence platform — covering foundations, components, and usage guidelines for consistent, accessible product experiences.
About this system. Built for a B2B enterprise SaaS platform, this system prioritizes clarity, data density, and trust. Components were versioned in Figma with explicit changelog notes and archived states.
Component inventory
| Component | Version | Status |
|---|---|---|
| Breadcrumbs | v1.1 | Stable |
| Alert / Pop-up | v2.1 | Stable |
| Radio Button | v1.1 | Stable |
| Dropdown | v1.0 | Stable |
| Transcription Menu | v1.0 | Specialized |
| Option | v1.0 | Stable |
| Pagination | v1.0 | Stable |
| Buttons | v1.0 | Stable |
| Loading | v1.0 | Stable |
| Audio Scrubber | v1.0 | Stable |
| Modals / Pop-ups | v1.0 | Stable |
| Inputs | v1.0 | Stable |
| Toggles | v1.0 | Stable |
| Date Picker | v1.0 | Stable |
| Links | v1.0 | Stable |
| Labels / Tabs | v1.0 | Stable |
| Tables | v1.0 | Stable |
| Dark / Light Mode | v1.0 | Utility |
| Dividers | v1.0 | Utility |
| Templates | v1.0 | Specialized |
Colors
The Aigent color system uses semantic ramps across 8 palettes. Always reference colors by ramp + step — never hardcode hex values in components.
Neutral
50
#F9F9F9
100
#F4F6FA
200
#F2F2F2
300
#E3E3E3
400
#CBCBCB
600
#9E9E9E
700
#787878
800
#535353
900
#202944
Primary
50
#68A4FF
300
#408CFF
500
#0066FF
700
#0254D2
900
#0041A4
Secondary
50
#6960EB
500
#574FBF
900
#413C8B
Semantic
Success
50
#00EA73
500
#06B95E
900
#007A3C
Error
50
#FF4854
500
#E10412
900
#9C010B
Warning
50
#FFF1B7
500
#FADC63
900
#E1B400
Tertiary
500
#2FB88A
Typography
Two-weight scale (Semi Bold / Extra Bold) across Display, Heading, and Paragraph roles.
Scale
Display 01
Display 02
Heading 01
Heading 02
Heading 03
It is a long established fact that a reader will be distracted by the readable content of the page.
It is a long established fact that a reader will be distracted by the readable content of the page.
Grids
Three-tier responsive grid. Gutter is consistent at 20px across all breakpoints.
Breakpoints
Desktop
Range: 1280px – 1728px · 12 columns · Margins: 120px · Gutter: 20px
Tablet
Range: 744px – 1024px · 6 columns · Margins: 60px · Gutter: 20px
Mobile
Range: 320px – 428px · 4 columns · Margins: 30px · Gutter: 20px
Icons
Custom icon set built for the Aigent platform. All icons render at 24px. Always pair icons with a visible text label in navigation.
Icon library
Drop Shadows
Five elevation levels define depth. Use the lowest elevation that communicates the component's relationship to the content beneath it.
Elevation scale
shadow-def
Cards at rest
shadow-md
Hover states
shadow-lg
Dropdowns
shadow-xl
Modals
shadow-xxl
Top layer
Token values
| Token | CSS value | Usage |
|---|---|---|
| shadow-def | 0 1px 3px rgba(0,0,0,0.12) | Cards, list items at rest |
| shadow-md | 0 4px 8px rgba(0,0,0,0.10) | Hovered cards, selected states |
| shadow-lg | 0 10px 20px rgba(0,0,0,0.10) | Dropdown menus, popovers |
| shadow-xl | 0 20px 30px rgba(0,0,0,0.10) | Modals, dialogs |
| shadow-xxl | 0 30px 60px rgba(0,0,0,0.14) | Top-layer overlays only |
Buttons
Buttons communicate action. Properties: state (default, hover, pressed, disabled), type (primary, secondary), size (small, medium, large), left icon, right icon.
Variants
Primary / Secondary / Ghost / Danger filled / Danger outline
Sizes
Small / Medium / Large
States
Enabled / Disabled
Dark / Light mode toggle
Segmented control — light selected / dark selected
View button
Default / Active
Inputs & Forms
Form controls share a common height of 36px. States: default, focused, error, warning, disabled. Sizes: small, medium.
Text inputs
Default
Focused
Error
Hint
Warning
Hint
Disabled
Search
Password field
Enter New Password
Enter New Password
Dropdown
Default
Dropdown...
Open state
Dropdown...
Disabled
Dropdown...
Checkbox
Radio button
Toggle switch
Active — On
Active — Off
Disabled
Alerts & Labels
Alerts communicate system-level feedback. Labels tag content states. Both strictly follow the semantic color system.
Alert variants (v2.1)
Alert title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alert title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Alert title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Alert title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Labels / Badges
PrimarySuccessWarningErrorNeutral
No data state
No data available
Option
Option is a selectable pill used for single-choice selections within a set. Three states: default, selected, and selected-hover.
States
Option A
Option A
Option A
Use Option when the user must choose one item from a small set (2–5 options) visible all at once. For longer lists, use Dropdown instead.
Modals & Overlays
Modals interrupt flow for high-priority actions. Use sparingly. The system includes general-purpose dialogs, the Aigent coach card pop-up, templates, and utility overlays.
Alert modal (v2.1)
Alert title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Action is required to continue.
Delete confirmation
Delete item?
This action cannot be undone. All associated data will be permanently removed.
Change profile picture
Add Profile Picture
Drag & drop photo here
- or -
Version copied confirmation
Coach Name: Change Password
Current Version - 08/12/2022 duplicated
Aigent coach card pop-up
+aigent×
Account Balance Inquiry
It looks like the caller is inquiring about their Account Balance.
+aigent×
Long Call Notice
This call is taking too long. If not resolved in 2 minutes, escalate to Senior Management for PACE review.
+aigent×
Regulatory Complaint Risk
It looks like this customer is at risk of complaining. Transfer immediately to a supervisor.
Template selector
Lorem Ipsum
Suspendisse sapien ligula, rutrum quis metus sit amet, pulvinar sollicitudin felis.
Lorem Ipsum
Suspendisse sapien ligula, rutrum quis metus sit amet, pulvinar sollicitudin felis.
Lorem Ipsum
Suspendisse sapien ligula, rutrum quis metus sit amet, pulvinar sollicitudin felis.
Dividers
Horizontal divider
Vertical divider
Underline accent (blue)
Pop-up nav bar
+
aigent
×
Date Picker
The date picker system includes a dual-month calendar panel, date button pills, date links, day selectors, and a full date picker container.
Dual calendar
September ▾ 2022 ▾
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
June ▾ 2022 ▾
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
Date button pills
Date link
Days selector
Transcription Menu
A specialized panel for the call review interface. Surfaces call intelligence data in collapsible sections alongside the audio scrubber. Only instantiate in transcription views.
Expanded state
Collapsed state
Data Display
Data components cover tables, loading states, and the audio scrubber. These are central to Aigent's core product value.
Table (v1.0)
Loading indicator
Frame 1
Frame 2
Frame 3
Frame 4
Loading position property: top right, bottom right, bottom left, top left — indicating the arc position in the animation cycle.
Audio scrubber
0:00
5:22
Modern token architecture
This system was built before design tokens were widely adopted. The section below maps existing decisions to a W3C-compliant two-tier token layer.
Context. The original system uses hardcoded hex values and Figma styles. A token layer enables multi-brand theming, dark mode, and AI-assisted component generation from a single source of truth.
Tier 1 — Primitive tokens
| Token name | Value | Category |
|---|---|---|
| color.primary.500 | #0066FF | Color / Brand |
| color.primary.700 | #0254D2 | Color / Brand |
| color.neutral.900 | #202944 | Color / Neutral |
| color.success.500 | #06B95E | Color / Semantic |
| color.error.500 | #E10412 | Color / Semantic |
| color.warning.500 | #FADC63 | Color / Semantic |
| shadow.def | 0 1px 3px rgba(0,0,0,0.12) | Elevation |
| radius.md | 8px | Border radius |
| font.size.body | 14px | Typography |
Tier 2 — Semantic tokens
| Token name | References | Usage |
|---|---|---|
| color.interactive.default | color.primary.500 | All clickable elements at rest |
| color.interactive.hover | color.primary.700 | Hover state for interactive elements |
| color.surface.default | color.neutral.50 | Default page / card background |
| color.text.primary | color.neutral.900 | Body and heading text |
| color.text.secondary | color.neutral.600 | Supporting / muted text |
| color.feedback.success | color.success.500 | Success alerts, confirmations |
| color.feedback.error | color.error.500 | Error states, destructive actions |
| elevation.card | shadow.def | Default card elevation |
| elevation.modal | shadow.xl | Modal and dialog elevation |
AI tooling integration
Token-to-component generation
AI tools generate spec-accurate components by referencing token names — reducing design–dev drift.
Multi-brand theming
Swap Tier 1 primitives per brand while semantic tokens stay constant. Zero component changes needed.
Automated dark mode
Semantic tokens map to mode-specific values automatically — dark mode becomes a config, not a rebuild.
Figma Variables migration
Maps directly to Figma Variables: primitive tokens become Variable collections, semantic tokens use aliasing.
Migration path. (1) Export Figma styles to JSON via Tokens Studio. (2) Restructure into primitive → semantic layers. (3) Sync back to Figma Variables. (4) Update component references to token aliases. Estimated: 2–3 days.