Untitled

Visual Design System

Color Palette

Primary Colors

Token	Value	Usage
@primary-color	#605DEC (purple)	Links, selections, active states, bot/agent accent
@primary-color-alt	#505776 (slate)	Primary button background, text color, headings
@primary-color-alt-hover	#626988	Primary button hover state

Status Colors

Token	Value	Usage
@success-color	#2DB28A	Success states, confirmations
@warning-color	#F3A702	Warnings, caution states
@error-color	#D23636	Errors, destructive actions, danger zones

Neutral Colors

Token	Value	Usage
@text-color	#505776 (= @primary-color-alt)	Default body text
@text-color-secondary	#8E97BC (@hbf-muted-color)	Secondary/muted text, placeholders
@layout-body-background	#F4F5F9	Page background, modal bodies
@border-color-base	rgba(194, 194, 232, 0.5)	Borders, dividers
@hbf-highlight-color	#B9BFFF	Highlight accent
@hbf-light-grey-color	#F5F5F5	Light gray backgrounds
@background-color-light	#F7F8FB	Subtle background variation
@table-row-hover-bg	#F8F8FA	Table row hover
@table-selected-row-bg	#F1F1F4	Table row selected/pressed

Feature / Lab Colors

Each major feature area has a dedicated color and hover variant:

Feature	Color	Hover
Organization	#505776	#E6EAF5
Bot / Agent	#605DEC	#E4E3F7
Live Chat	#F97330	#FFE7DD
Observatory	#2CDDD8	#D4FAF8

Bot Color Scale (10-step purple gradient)

Used for intensity variations in bot/agent UI elements:

Step	Value
25	#FDFDFF
50	#FAFAFF
100	#F8F8FF
200	#EFEFFF
300	#E0DFFF
400	#BCBBFF
500	#9E9CFF
600	#8D8BFF
700	#605DEC (base @bot-color)
800	#3D3AC8
900	#1A17A6

Interactive State Colors

Token	Value	Usage
@item-hover-bg	fade(@primary-color, 4%)	List/menu item hover background
@item-active-bg	fade(@primary-color, 8%)	List/menu item active/selected background
@disabled-color	fade(@text-color, 60%)	Disabled text and controls
@link-color	#605DEC (= @primary-color)	Hyperlinks

Sidebar

The sidebar uses a dark color scheme:

• Background: #252731 (defined as @org-menu-color-2 in layout.less)

Typography

Fonts

• Primary: Noto Sans — all 9 weights loaded (100 Thin through 900 Black) via local .ttf files
• Code: Cascadia Code — regular weight (400), loaded via .woff2
• Fallback stack: 'Noto Sans', 'Work Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

Font Sizes

Token	Size	Usage
@font-size-xs	10px	Tiny labels, badges
@font-size-sm	12px	Secondary text, captions
@font-size-base	14px	Default body text, inputs
@font-size-lg	16px	Subheadings, emphasized text
@font-size-xl	20px	Section headings
@font-size-xxl	24px	Page headings
@font-size-xxxl	32px	Large headings
@font-size-xxxxl	40px	Hero/display text

Font Weights

Token	Weight	Usage
@font-weight-regular	400	Default body text
@font-weight-medium	500	Slightly emphasized text
@font-weight-semiBold	600	Buttons, table headers, headings
@font-weight-bold	700	Strong emphasis

All 9 CSS weights (100–900) are available but 400 and 600 are the most commonly used.

Spacing

Base unit: @spacer: 4px

The spacing scale uses Ant Design's padding tokens (exposed as CSS custom properties):

Token	Value	Usage
--padding-xss	4px	Minimal spacing
--padding-xs	8px	Tight spacing
--padding-sm	12px	Small spacing
--padding-md	16px	Default spacing, content top padding
--padding-lg	24px	Large spacing, modal footer padding

Content area padding (when sidebar is present):

• Top: 16px
• Left/Right: 22px

Layout Dimensions

Element	Value
Header height	64px
Footer height	70px
Content height	calc(100vh - 64px) (full) or calc(100% - 64px) (with header)

Borders & Radius

Token	Value	Usage
@border-radius-base	8px	Default radius (buttons, inputs)
@border-radius-sm	4px	Small elements
@border-radius-lg	12px	Cards, tables, modals
@border-width-base	2px	Default border width
@border-color-base	rgba(194, 194, 232, 0.5)	Default border color

Shadows

Token	Value	Usage
@box-shadow-sm	0px 2px 4px rgba(80,87,118,0.2)	Small shadow
@box-shadow	0px 4px 4px rgba(80,87,118,0.2)	Default — cards, tables
@box-shadow-lg	0 6px 6px rgba(80,87,118,0.2)	Elevated elements
@box-shadow-soft	0px 4px 4px rgba(80,87,118,0.07)	Subtle shadow
@box-shadow-bottom	0 3px 2px 0px rgba(80,87,118,0.07)	Table header bottom edge
@box-shadow-top	0 -3px 3px rgba(80,87,118,0.07)	Top edge shadow

Animations & Transitions

Keyframe Animations

Name	Duration	Easing	Description
fadeIn	0.1s	ease-in-out	Opacity 0→1
fadeOut	0.1s	ease-in-out	Opacity 1→0
fadeInSlideRight	0.3s	ease	Slide in from right + fade in
slideRight	0.3s	ease	Slide from left to position
loadingCircle	2s	linear infinite	Spinner rotation

Timing Conventions

Use these timing tiers consistently to match the console's motion feel:

Tier	Duration	Easing	When to use
Micro	0.1s	ease-in-out	Fade in/out, hover state changes, font-weight transitions
Rotation	200ms	ease-in-out	Icon rotations (chevron expand/collapse)
Slide	0.3s	ease	Panel slides, element reveals, form field transitions
Layout	0.4s	ease-in-out	Width/flex-basis changes, sidebar collapse, large layout shifts

Global Base Styles

These overrides are applied at the root level and significantly affect the console's look. Apply them in any new app:

• Line height: 1.8 (more generous than typical 1.5)
• Font smoothing: text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
• Focus outlines: Removed globally (*:focus-visible { outline: none; })
• Overflow: html, body have overflow: hidden — scrolling is handled per-region
• Code blocks: font-size: 0.9em; background: #f2f4f5; border: 1px solid #eee; border-radius: 3px; padding: 0.2em 0.4em
• Chrome autofill: White background forced via box-shadow: 0 0 0 30px white inset

Scrollbars

Custom thin scrollbars that appear only on hover:

• Width: 6px
• Track: transparent
• Thumb: transparent by default, rgba(0, 0, 0, 0.15) on container hover
• Thumb radius: 8px
• Dark mode variant: rgba(255, 255, 255, 0.25) for dark backgrounds (sidebar)
• Hidden variant available: completely hides scrollbar via -ms-overflow-style: none / scrollbar-width: none

Tooltips

Tooltips are styled as white (not dark):

• Background: white
• Text: @text-color-secondary (#8E97BC)
• Font size: 12px (@font-size-sm)
• Links inside tooltips: @primary-color (#605DEC)

Skeleton / Loading States

Token	Value
@skeleton-color	rgba(203, 203, 225, 0.2)
@skeleton-to-color	rgba(179, 179, 214, 0.2)

---

Core Colors

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  PRIMARY           SLATE (buttons/text)   BACKGROUNDS           │
│  ███████████       ███████████            ░░░░░░░░░░░           │
│  #605DEC           #505776                #F4F5F9 (page)        │
│                    #626988 (hover)        #FFFFFF (cards)        │
│                                           #252731 (sidebar)     │
│                                                                 │
│  SUCCESS           WARNING            ERROR                     │
│  ███████████       ███████████        ███████████               │
│  #2DB28A           #F3A702            #D23636                   │
│                                                                 │
│  MUTED TEXT        BORDERS            HIGHLIGHT                 │
│  ███████████       ░░░░░░░░░░░        ███████████               │
│  #8E97BC           rgba(194,194,      #B9BFFF                  │
│                     232, 0.5)                                   │
│                                                                 │
│  FEATURE COLORS                                                 │
│  ███ Org #505776   ███ Bot #605DEC                              │
│  ███ Chat #F97330  ███ Observatory #2CDDD8                      │
│                                                                 │
│  PURPLE SCALE (bot/agent intensity gradient)                    │
│  ░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████        │
│  #FDFDFF → #F8F8FF → #E0DFFF → #9E9CFF → #605DEC → #1A17A6   │
│  (25)      (100)     (300)     (500)     (700)     (900)       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Component Patterns

Buttons (buttons.less):

• Height: 32px (Ant Design v4 default @btn-height-base)
• Primary: #505776 background, white text, 600 weight, 8px radius
• Primary hover: #626988
• Default (outline): white bg, #505776 border and text
• Disabled: 60% opacity
• All buttons: no text-shadow, no box-shadow, semiBold weight

Tables (tables.less):

• White background cells
• 12px border-radius (@border-radius-lg)
• Default box-shadow (@box-shadow)
• Header: white bg, semiBold weight, bottom shadow
• Row hover: #F8F8FA
• Row selected/pressed: #F1F1F4
• Row borders: rgba(239, 239, 253, 1)

Cards (cards.less):

• 12px border-radius
• Default box-shadow
• Variant: colored top border (5px) — primary (purple), success (green), error (red)
• Selected state: 4px solid purple outline with 0.1s ease-in-out transition
• Bordered variant uses @border-color-base

Modals (modals.less):

• 12px border-radius (.modal-border-radius)
• .ant-modal-dim variant: colored top border (5px), gray body (@layout-body-background), white footer
• Footer padding: 24px horizontal, 16px vertical
• Scrollable modals: max-height: 80vh

Side Drawers:

• Header background: @layout-body-background (#F4F5F9)
• Sticky footer pattern

Dropdowns:

• Item hover: #EEEEEE
• Disabled items: 60% opacity

List Items (clickable):

• Cursor: pointer
• Hover: font-weight 600 + @item-hover-bg (4% primary) background
• Transition: font-weight 0.1s ease-in-out

Tabs (card variant):

• Active tab: @layout-body-background (#F4F5F9)
• Inactive tab: white
• Content area below tabs: @layout-body-background with 16px padding, 8px radius
• No bottom border on tab bar

Pagination:

• Total text: 12px font, muted color (#8E97BC), right-aligned on small screens

UX Patterns

• Breadcrumb navigation in content headers
• Search + filter bars above tables
• Pagination at table bottom
• Confirmation dialogs for destructive actions
• Toast notifications for success/error feedback
• Collapsible "Danger Zone" sections in settings pages
• Empty states: illustration + descriptive text + CTA button
• Flow editor: React Flow canvas with color-coded node types