FourIA Brand Styling

On this page

Brand Identity
- Colors
- Typography
- Shape & Accent Application
Color Palette
- Brand / Action
- Backgrounds
- Typography
- Semantic
- Borders & Shadows
Typography
Layout
Components
- Buttons (.btn)
- Status Badges (.gateway-status-badge)
- Banners
- Device Cards (.device-card)
- Modals
- Model Selector (.model-select)
- Spinner
- Report Items (.report-item)
- Transitions
Scrollbar
Responsive Breakpoints

Design tokens, brand identity, and component patterns for the FourIA Dashboard. Source: apps/fouria/src/client/index.css and component stylesheets.

Brand Identity

Colors

FourIA uses a warm, dark-first palette rooted in deep burgundy and soft earth tones. The palette conveys professionalism with warmth, avoiding the cold clinical feel of pure grays.

Main Colors:

Dark: #1a1515 — Page backgrounds, text areas, primary surface
Surface: #111111 — Card backgrounds, elevated surfaces
Text Primary: #ede8e3 — Body text, headings, active content
Text Muted: #6b6560 — Labels, placeholders, timestamps

Accent Colors:

Burgundy (Primary): #7c323e — Buttons, active states, focus rings, brand accent
Burgundy Hover: #98404e — Interactive hover states
Green (Success): #4ade80 — Running status, success indicators
Amber (Warning): #95aa69 — Pending states, caution indicators
Red (Error): #ef4444 — Error states, destructive actions

Supporting Colors:

Border: #2a2525 — Dividers, card edges, section separators
Surface Hover: #1e1a1a — Hovered items, secondary backgrounds
Sidebar BG: rgba(17, 17, 17, 0.92) — Fixed sidebar backdrop

Typography

Headings & Body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif — System font stack for native feel across platforms
Monospace: 'Fragment Mono', 'Courier New', monospace — Code editors, textareas, technical content
Line height: 1.6 for comfortable reading
Font smoothing: antialiased / grayscale for crisp rendering
Links: Brand primary color with 0.15s ease transitions, underline on hover

Shape & Accent Application

Non-text shapes (badges, borders, dots) use accent colors with rgba backgrounds at 0.15–0.2 opacity
Cards use subtle shadows and 10px border-radius for depth without harshness
Status indicators cycle through green/amber/red with animated pulses for active states
Gradient overlays (linear-gradient(135deg, surface → rgba(17,17,17,0.95)) add depth to sections

Color Palette

All tokens are defined as CSS custom properties on :root and consumed across the UI via var(--token).

Brand / Action

Token	Value	Usage
`--primary-color`	`#7c323e`	Buttons, active nav items, links, focus rings, accent borders
`--primary-hover`	`#98404e`	Primary button/active nav hover state

Backgrounds

Token	Value	Usage
`--bg-color`	`#1a1515`	Page background, textarea/input background
`--surface-color`	`#111111`	Card backgrounds, accordion, select, section bases
`--surface-hover`	`#1e1a1a`	Hovered items, secondary button bg, accordion content
`--sidebar-bg`	`rgba(17, 17, 17, 0.92)`	Fixed sidebar backdrop

Typography

Token	Value	Usage
`--text-primary`	`#ede8e3`	Body text, headings, active content
`--text-secondary`	`#a09890`	Subtle text, descriptions, loading indicators
`--text-muted`	`#6b6560`	Labels, placeholders, timestamps, section titles
`--header-color`	`#b8b2b0`	Header-level text

Semantic

Token	Value	Usage
`--success-color`	`#4ade80`	Running status, paired badges, success banners, success buttons
`--warning-color`	`#95aa69`	Starting/pending status, warning banners, mismatch hints
`--error-color`	`#ef4444`	Stopped/error status, error banners, danger buttons, remove actions

Borders & Shadows

Token	Value	Usage
`--border-color`	`#2a2525`	Card borders, dividers, section edges, select borders
`--border-radius`	`10px`	Card, button, section border radius
`--shadow`	`0 4px 6px -1px rgba(0,0,0,0.5)`	Card shadows
`--shadow-lg`	`0 10px 40px -8px rgba(0,0,0,0.6)`	Modal shadows

Typography

Font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
Monospace: 'Fragment Mono', 'Courier New', monospace (used in code editors and textareas)
Line height: 1.6 (body)
Font smoothing: antialiased / grayscale
Links: --primary-color with 0.15s ease transition, underline on hover

Layout

Pattern	Details
Sidebar	Fixed left, 56px collapsed / 200px expanded, `cubic-bezier(0.4,0,0.2,1)` 0.3s transition
Content	`margin-left: 56px`, `padding: 2rem`, `max-width: 1200px`
Mobile	At ≤768px sidebar moves to bottom (60px horizontal nav), content padding shrinks to 1rem
Cards	`--surface-color` bg, `1px solid --border-color`, `--border-radius`, `--shadow`
Gradient	`linear-gradient(135deg, var(--surface-color) 0%, rgba(17,17,17,0.95) 100%)` for section backgrounds

Components

Buttons (`.btn`)

.btn {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.875rem;
}
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Variant	BG	Text	Hover
`.btn-primary`	`--primary-color`	white	`--primary-hover`
`.btn-secondary`	`--surface-hover`	`--text-primary`	`--border-color`
`.btn-success`	`--success-color`	`--bg-color`	brightness(1.1)
`.btn-danger`	`--error-color`	white	brightness(1.1)
`.btn-warning`	`--warning-color`	`#1a1a1a`	brightness(1.1)

Status Badges (`.gateway-status-badge`)

Pill-shaped (border-radius: 9999px), uppercase, letter-spacing: 0.025em, font-size: 0.75rem.

State	Class	Text Color	BG
Running	`.running`	`--success-color`	`rgba(74,222,128,0.15)`
Starting	`.starting`	`--warning-color`	`rgba(251,191,36,0.15)`
Stopped	`.stopped`	`--error-color`	`rgba(239,68,68,0.15)`

Each includes a .status-dot (8px circle) — the starting state has a pulse animation.

Banners

Type	BG	Border
Error	`rgba(239,68,68,0.15)`	`--error-color`
Warning	`rgba(251,191,36,0.15)`	`--warning-color`
Success	`rgba(74,222,128,0.15)`	`--success-color`

Device Cards (`.device-card`)

Cards with .pending (2px --warning-color border) and .paired (--success-color border) variants. Device status badges use rgba backgrounds matching the semantic color at 0.2 opacity.

Modals

Overlay: rgba(0,0,0,0.75) + backdrop-filter: blur(4px), z-index 1000
Content: --surface-color bg, --border-radius, --shadow-lg, max-width 700px, max-height 90vh
Header: border-bottom: 1px solid var(--border-color), padding 1.5rem
Body: padding 1.5rem, scrollable
Footer: border-top: 1px solid var(--border-color), right-aligned actions

Model Selector (`.model-select`)

Select inputs with --surface-color bg, --border-color border, focus ring using --primary-color. Tier badges use colored rgba backgrounds at 0.2 opacity.

Spinner

40px circle, 3px --border-color border with --primary-color top segment, spin 1s linear infinite. .spinner.sm variant: 20px, 2px border.

Report Items (`.report-item`)

Colored left border (3px solid) based on type:

--warning-color for warnings
--primary-color for changes
--success-color for successes

Transitions

Property	Duration	Easing
color, background, border	0.15s	ease
sidebar width	0.3s	cubic-bezier(0.4,0,0.2,1)
accordion content	0.25s	ease
chevron rotate	0.2s	ease
sidebar label opacity	0.2s	ease

Scrollbar

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

Responsive Breakpoints

Breakpoint	Behavior
≤768px	Sidebar collapses to bottom nav, content padding shrinks to 1rem, bottom padding adds 60px for nav
≤640px	Section padding shrinks to 1rem, grids go single column