SmartBI Design System
Corporate Style Guide & Component Library — v1.0
The complete reference for SmartBI's design tokens, visual language, and reusable component patterns. Built for business-user-facing BI — prioritising clarity over complexity, and AI-first interaction over manual configuration.
Design Philosophy
The principles that drive every decision in this system.
AI-First Interaction
Natural language replaces complex UI. Business users ask questions — the system responds with visual answers.
Clarity Over Complexity
No raw SQL. No join syntax. Technical concepts are hidden; BI Brain translates intent into data visualisations.
High-Density Precision
Compact type scales, tight spacing, and crisp borders that pack maximum information into a premium, uncluttered layout.
Color System
All colors are registered as Tailwind theme tokens. Use them via class names like text-primary or bg-success-container.
Brand & Semantic
Primary
primary
Primary Container
primary-container
Success
success
Error / Danger
error
Surface
surface
Background
bg-[#fafbfc]
Text Primary
on-surface
Aura Glow
Page top blur effect
CSS Custom Properties
| Variable | Value | Usage |
|---|---|---|
| --primary | #7c3bed | Buttons, active states, focus rings |
| --primary-hover | #6d28d9 | Button hover darkening |
| --primary-container | #f3e8ff | Active nav, chip backgrounds |
| --success | #10b981 | Positive trends, live badges |
| --danger | #ef4444 | Error states, negative trends |
| --outline | #e2e8f0 | Card borders, dividers |
| --text-primary | #0f172a | Body copy, headings |
| --text-secondary | #64748b | Labels, metadata, descriptions |
Type Scale
Two font families: Outfit for display/headings, Inter for body copy. Both sourced from Google Fonts via global.css.
Display / H1
Outfit · 24px · 800
BI Brain
Headline / H2
Outfit · 18px · 700
Key Metrics
Section Title / H3
Outfit · 14px · 600
Quarterly Revenue Trajectory
Card Label
Inter · 9.5px · 700 · ALL CAPS
Revenue
Body Large
Inter · 13px · 400
Type your request: I'll search, answer, or build it for you.
Body Medium
Inter · 11px · 400
AI-curated business insights for your role and workspace.
Caption / Meta
Inter · 9px–9.5px · 400
BI Brain can make mistakes. Verify important financial details.
Metric Value
Outfit · 18px · 700
$124,523
Spacing & Border Radius
All spacing follows Tailwind's 4px base unit. Border radii are consistent across component hierarchy levels.
Border Radius
rounded-md 6px
Search bar, small filter chips
rounded-lg 8px
Nav items, buttons, icon containers
rounded-xl 12px
Cards, metric panels, popover menus
rounded-2xl 16px
Login card, modal dialogs
rounded-full 9999px
Status dots, avatar circles, pill badges
Key Spacing Values
Elevation & Depth
Three elevation tiers, plus glassmorphism for floating surfaces like the top bar.
Level 0
border onlyPage background cards
Level 1
shadow-smStandard metric & content cards
Level 2
shadow-mdPopovers, dropdowns, modals
Glassmorphism
.glass-panelSticky top bar, floating headers
Card Components
The core visual unit of the dashboard. All cards use bg-white · rounded-xl · border border-outline · shadow-sm.
Revenue
$124,523
On track to beat Q2 target by 8%
15 mins ago
Last Sync Completed
production_db
PostgreSQL Database
Form Controls
All inputs use focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary for consistent focus styling.
BI Brain Input Component
The signature component. An animated gradient border wraps a white card. Used on Dashboard (collapsed) and Insights (full-page).
Full AI Brain Input
Suggestion / Inspiration Cards
Chart Patterns
CSS + GSAP animated charts. No chart library dependency. Bars animate on scroll via ScrollTrigger.
Bar Chart Pattern
Used for Quarterly Revenue Trajectory on Dashboard.
Progress & Usage Bars
Feedback & Notifications
Toast notifications appear top-right, fade in/out with GSAP. Status badges appear inline on sync history rows.
Toast Notifications
Sync History Status Badges
© 2026 SmartBI Technologies. Design System v1.0