V2.0 · April 2026 · Production Ready
Carivo Design System
A production-grade design system for a real-world SaaS platform. Inspired by Anthropic warmth, Stripe precision, and Fleetio operational density.
Anthropic-inspired Stripe precision Fleetio density WCAG 2.1 AA Dark mode ready Dev tokens
01 — Principles
Design principles
Six non-negotiable principles that govern every decision in this system — from color choices to interaction timing.
01 · Simplicity first
Every element must earn its place. If it doesn't help the user complete a task faster, remove it. Maximum signal, minimum noise.
Rule
Max 3 competing visual elements per view.
02 · Data-first density
Operational SaaS users need dense, scannable information. Design for efficiency, not decoration. Stripe-style data tables over cards when data > 5 rows.
Rule
48px row height. 12px table font. Sticky header always.
03 · Accessible by default
WCAG 2.1 AA minimum at every touch point. 4.5:1 text contrast. 3:1 UI components. All interactive elements keyboard-navigable.
Rule
Always use 2px focus ring + 2px offset in brand color.
04 · Responsive structure
12-column fluid grid. Sidebar collapses at 1024px. Tables scroll horizontally below 768px. No layout breaks on resize.
Breakpoints
sm:640 · md:768 · lg:1024 · xl:1280 · 2xl:1440
05 · Performance-oriented
Use CSS animations over JS. Skeleton loaders for any async > 300ms. No layout shifts. Transitions max 350ms — never animate layout properties.
Rule
Only animate: opacity, transform, box-shadow, border-color.
06 · AI-native patterns
Progressive disclosure. Inline AI suggestions with soft purple accents. Streaming text uses mono font. AI actions are always reversible and clearly labeled.
Rule
AI UI uses --p-500 + italic mono for generated content.
02 — Colors
Color system
A warm, purposeful palette inspired by Anthropic's earthy tones with a vivid electric purple primary. Color encodes meaning — not decoration.
Brand palette — Full scales
Primary — Electric Purple
50
100
200
300
400
500
600
700
800
900
Terracotta — Anthropic Accent
Sage — Nature Green
Neutrals — Warm Gray (Anthropic DNA)
Semantic colors
Success
#3D7A2C · success-500
Active Completed
Warning
#C47B1A · warning-500
Due soon Pending
Error
#C0392B · error-500
Overdue Critical
Info
#2B6CB0 · info-500
Reserved Update
Contextual usage rules
ContextLightDarkTokenNotes
Page background#F4F2ED#111009--bg-baseWarm cream, never pure white
Card / elevated surface#FFFFFF#1C1A14--bg-elevatedCards float 1 level above base
Sunken / input bg#EFECE6#0C0B07--bg-sunkenInner fields, code blocks
Default border#E4E0D8#2E2C28--border-defaultAll standard dividers
Focus ring#533AFD--border-focus2px solid, 2px offset
Primary text#1A1814#F0EDE6--text-primary≥4.5:1 contrast ratio
Secondary text#6B6860#9C9790--text-secondaryLabels, descriptions
Disabled text#D0CCC2#4A4844--text-disabledNever interactive
03 — Typography
Typography system
Inter for UI — clean, neutral, highly legible at all sizes. JetBrains Mono for code, tokens, and data values.
Primary — Inter
Aa Bb Cc
The quick brown fox jumps
Inter · 300 / 400 / 500 / 600 / 700
Use for: all UI text, labels, headings, body copy, navigation, buttons
Mono — JetBrains Mono
1234567890
token.color.primary
JetBrains Mono · 400 / 500
Use for: code, tokens, plate numbers, IDs, prices, data values
Type scale
Display XL
48px · 700 · -0.04em · 1.1
Dashboard
Display L
36px · 700 · -0.03em · 1.15
Fleet Analytics
H1
28px · 700 · -0.025em · 1.2
Revenue Recovery
H2
22px · 600 · -0.02em · 1.3
Active Rentals
H3
18px · 600 · -0.015em · 1.4
Vehicle registry
H4
16px · 600 · -0.01em · 1.5
Fleet maintenance
Body large
16px · 400 · 0 · 1.7
Track vehicle contracts, revenue recovery, maintenance schedules and fleet utilization across all your branches.
Body default
14px · 400 · 0 · 1.6
The vehicle is currently running under contract. Return expected April 10, 2026. Assigned to Benali Ahmed.
Body small
13px · 400 · 0 · 1.55
Contract #CR-2026-001 · Sandero 71471 · Walk-in · Active
Caption / Label
12px · 500 · +0.01em · 1.4
Last updated 3 minutes ago
Overline
10px · 600 · +0.08em · 1.4 · uppercase
Fleet management
Mono data
JetBrains · 13px · 400 · 0 · 1.5
41,300 MAD · 71470-A-09 · #533AFD
04 — Spacing
Spacing & layout system
4px base unit. 8px standard grid. Consistent scale prevents arbitrary spacing decisions.
Spacing scale
space-1
2px
2px
space-2
4px
4px
space-3
6px
6px
space-4
8px
8px
space-6
12px
12px
space-8
16px
16px
space-10
20px
20px
space-12
24px
24px
space-16
32px
32px
space-20
40px
40px
space-24
48px
48px
space-32
64px
64px
space-48
96px
96px
12-column grid
1
1
1
1
1
1
1
1
1
1
1
1
span-4 (KPI card)
span-4
span-4
span-6 (chart, left)
span-6 (donut, right)
span-8 (main table)
span-4 (sidebar)
Border radius
xs·4px
sm·6px
md·8px
lg·12px
xl·16px
2xl·20px
pill
full
05 — Elevation
Elevation & shadows
Level 0
no shadow
Base surface, sunken inputs
Level 1
shadow-xs
Cards, table rows
Level 2
shadow-sm
Dropdowns, popovers
Level 3
shadow-md
Drawers, side panels
Level 4
shadow-xl
Modals, dialogs
06 — Components
Buttons
Four intent variants × three sizes × multiple states. Always communicate the action and its consequence.
Variants
Sizes
States
With icons
Button rules
PropertyValueToken
Border radius8px default, 6px sm, 12px lg--r-md
Focus ring2px solid --p-400, offset 2px--border-focus
Hover transition200ms ease-out + translateY(-1px)--dur-normal
Active statetranslateY(0) + darken 10%—
Disabled opacity38%opacity: .38
Min touch target44×44px (WCAG 2.5.5)—
07 — Forms
Inputs & forms
Text inputs
Format must be: 12345-A-00
Valid entry
Select & combined
Days
MAD
08 — Status
Badges, tags & labels
Semantic badges
Active Completed Due soon Returning Overdue Expired Reserved Pending AI suggested Archived
Brand accent badges
Fleet management Terracotta tag Sage category Profit positive Loss detected
Tags (inline content)
Walk-in Phone Corp #CR-2026-001 WhatsApp
09 — Cards
Card system
Standard card
Contract #CR-2026-001
Sandero 71471 · Benali Ahmed
Active 750 MAD · 5 days
Interactive card (hover me)
Dacia Logan 71470
82% utilization · 18 trips this month
Running 5,000 MAD revenue
KPI tile (colored)
Revenue
41.3k
Active
11/15
Profit
12.4k
Util
79%
10 — Tables
Data tables
Stripe-inspired precision. Sticky headers. Sortable columns. Inline status. Row states. Pagination.
Customer Vehicle Days Amount Source Status
Benali Ahmed
+212 661 234 567
 Sandero 71471 5 750 MAD Walk-in Active
Qualid Lamti
+212 677 890 123
 Logan 71470 3 480 MAD Phone Returning
Sanaa Baourir
+212 655 432 109
 Clio 5 73591 7 1,120 MAD Corp Overdue 4h
El Filali M.
+212 622 000 111
 Duster 71468 4 640 MAD WhatsApp Overdue 1h30
Aarab Said
+212 699 876 543
 i10 71465 2 280 MAD Online Reserved
Showing 1–5 of 47 contracts
11 — Overlays
Modals & drawers
Modal (centered overlay)
Confirm rental extension
Extend Sandero 71471 contract for Benali Ahmed by 2 days? New return date: April 9, 2026. Additional charge: 300 MAD.
Right drawer
Contract details
Click to toggle the detail drawer →
Dacia Logan
71470-A-09
StatusRunning
Mileage89,200 km
Utilization82%
Revenue5,000 MAD
Utilization82%
12 — Feedback
Alerts & feedback
Contract created successfully
Contract #CR-2026-048 for Benali Ahmed has been saved and SMS sent to customer.
Insurance due in 3 days
Clio 5 (73591-A-34) insurance expires on April 10, 2026. Renew before contract renewal.
Payment declined
The deposit payment for Duster (71468) failed. Customer card ending in 4242 was declined.
Carivo AI suggestion
Dacia Logan is your most profitable vehicle at 82% utilization. Consider ordering a second unit.
Tooltips
Vehicle detail panel opens on right
RPD
Revenue Per Day — avg. daily revenue per vehicle
Empty states
No vehicles yet
Add your first vehicle to start tracking contracts, mileage, and revenue.
Skeleton loader state
13 — Progress
Progress & status indicators
Linear progress bars
Fleet utilization82%
Revenue target68%
Maintenance due91% urgent
Days rented (Apr)18 / 30
Fleet status bar
Running 11 Reserved 2 Maintenance 1 Available 1
Circular progress
79%
82%
28%
Activity spinners
Saving...
14 — Interactions
Interaction & animation system
Fast · 100ms
Hover feedback, tooltips, badge updates
ease-out · 100ms
Normal · 200ms
Button states, input focus, dropdown open
ease-out · 200ms
Slow · 350ms
Sidebar collapse, drawer slide, page transitions
ease-out · 350ms
Focus states (accessibility)
Focus visible ≠ focus
Only show ring on keyboard nav, not mouse click
15 — Charts
Data visualization system
Minimal, readable charts using the brand palette. Tooltips match the dark card style from Stripe's dashboard.
Revenue trend (30d)
Revenue
Expenses
Profit
Vehicle utilization
Revenue by source
Phone call34%
Walk-in28%
WhatsApp22%
Marketplace10%
Corporate6%
Daily revenue (area)
16 — Icons
Iconography system
Outline style, 1.2px stroke, rounded caps and joins. Sizes: 14px (inline), 16px (UI), 20px (feature), 24px (decorative).
Dashboard
Vehicle
Calendar
Chart
Customers
Watchlist
Settings
Contract
AI
Shield
Rating
Search
Icon sizing rules
SizeContextStrokeExample
14pxInline with text, inside badges1.2pxButton icon, alert icon
16pxDefault UI icon, sidebar items1.2pxNav icon, table action
20pxFeature icons, section headers1.4pxCard header, filter
24pxDecorative, empty states1.5pxIllustration accent
32px+Hero, onboarding, stub pages2pxEmpty state illustration
17 — Dark mode
Dark mode system
Not a simple color inversion. Each layer shifts independently. Use the toggle in the top-right to preview.
Light mode layers
Base — #F4F2ED
Page background, sunken areas
Elevated — #FFFFFF
Cards, sidebars, modals
Sunken — #EFECE6
Inputs, table rows, code
Dark mode layers
Base — #111009
Page background, sunken areas
Elevated — #1C1A14
Cards, sidebars, modals
Sunken — #0C0B07
Inputs, table rows, code
Dark mode rules
RuleReason
Never pure #000000 backgroundHarsh contrast causes eye strain. Use #111009 (warm near-black).
Text contrast ≥ 4.5:1F0EDE6 on 111009 = 14.8:1. 9C9790 on 111009 = 4.8:1. ✓
Brand purple shifts lighter--p-500 (#533AFD) stays same. Use --p-300 (#8C7EFF) for text on dark.
Shadows in dark modeUse elevation via background lightness (layers), not box-shadow.
Charts in dark modeIncrease opacity of fills to 0.25. Gridlines: rgba(255,255,255,.06).
Colored tile KPIsReduce saturation by 15% in dark mode. Terra 500 → Terra 600 bg.
⬡ Navigation System
Topbar navigation
The topbar is the primary navigation surface of Carivo. It is config-driven, fully responsive, and accessible. It adapts across desktop, tablet, and mobile using a priority-based overflow system.
Anatomy
Dashboard
Daily view
Fleet chart
Service planner
Search...
MB
Sidebar toggle
Collapses nav panel
Nav tabs
Config-driven, priority overflow
Search bar
Expands on focus, mobile overlay
Notification bell
Badge + dropdown
Avatar
Role badge + dropdown
Responsive breakpoints
BreakpointWidthBehavior
desktop≥ 1024pxAll tabs visible · Full search bar · Avatar + name
tablet640–1023pxOverflow tabs → More dropdown · Search narrows to 160px
mobile< 640pxTabs hidden · Hamburger → slide-in drawer · Search icon → overlay
⬡ Dashboard Patterns
KPI mosaic tiles
4 solid-color tiles arranged in a responsive grid. Each carries icon chip, label, large number, delta line, and sparkline. Colors use the Carivo brand palette: Purple · Terracotta · Sage · Sand.
Tile palette
Revenue
41,300 MAD
↑ +18% vs last month
Expenses
8,200 MAD
↓ −5% vs last month
Net profit
33,100 MAD
↑ +19% vs last month
RPD
320 MAD/d
↑ +12 MAD vs last month
Tile structure rules
ElementSpec
Containerborder-radius:14px · padding:18px · overflow:hidden
Decorative orb80px circle · rgba(255,255,255,.10) · right:-18px bottom:-18px
Icon chip32px · border-radius:9px · rgba(255,255,255,.20) bg
Label10px · 700 · uppercase · letter-spacing:.1em · opacity:.7
Value24–28px · 700 · letter-spacing:-.04em · color:#fff
Unit13px · weight:400 · opacity:.7
Delta11px · opacity:.8 — ↑ or ↓ prefix, no separate color
SparklineSVG polyline · rgba(255,255,255,.5) stroke · 22px height
Hovertransform:translateY(-2px) · box-shadow:0 8px 28px rgba(0,0,0,.18)
Responsive grid
BreakpointColumns
≥ 640px4 columns (default)
< 640px2 columns
< 420px2 columns (compact padding)
⬡ Dashboard Patterns
Alert banners
Full-width contextual banners that appear below the date filter. Each banner has a colored dot, a descriptive message with real data (customer names, vehicle plates, amounts), and a right-aligned action button.
All variants
2 contracts overdue — ELFILALI MOUNIA · Sandero 71469 · 4h overdue  ·  AARAB SAID · Logan 71470 · 1h 30min overdue.
3 vehicles idle 7+ days — Sandero 71469 (12d) · Hyundai i10 (9d) · Logan 71470 (7d).
Outstanding client debt — 2,850 MAD — BENALI AHMED 1,075 MAD · SANAA BAOURIR 1,000 MAD.
Banner anatomy rules
ElementSpec
Containerborder-radius:10px · padding:11px 16px · border:1px solid
Dot8×8px circle · semantic color (red / amber / blue / green)
Textfont-size:13px · line-height:1.5 · bold for the summary, plain for details
Action buttonGhost style · border:1px solid [banner-border-color] · same text color as banner
ToggleBell icon in date filter row · hides/shows all banners · icon switches to crossed-out bell when hidden
⬡ Dashboard Patterns
Date filter & date picker
Pill-style preset buttons + a custom range date picker. The picker shows a two-month calendar with start/end selection, range highlighting, and preset shortcuts.
Filter bar
Today
Last 7 days
Last 30 days
Last 6 months
Custom
Active pill: border-color:var(--p-500) · background:var(--p-50) · color:var(--p-500) · font-weight:600
Inactive pill: border-color:var(--border-default) · color:var(--text-secondary)
Date picker panel — interaction states
StateCSS classStyle
Default day.dp-dayPlain number, hover → purple-lt bg
Today.dp-todayBold · purple text · inset ring box-shadow:inset 0 0 0 1.5px var(--p-500)
Start / End.dp-start .dp-endFilled circle · purple bg · white text
In range.dp-in-rangePurple-lt bg · purple text · square (no radius)
Start of range.dp-start.dp-in-rangeLeft half circle border-radius:50% 0 0 50%
End of range.dp-end.dp-in-rangeRight half circle border-radius:0 50% 50% 0
⬡ Dashboard Patterns
Data masking (privacy mode)
A toggle in the dashboard page header allows the operator to hide all financial and operational numbers. This is useful when presenting the screen to clients or in shared office environments.
Behavior
Visible state
41,300 MAD
↑ +18% vs last month
Masked state
•••••• MAD
↑ +18% vs last month
Implementation
DetailValue
TriggerEye icon button in page header (toggle)
MethodJS text swap — replaces content with '•'.repeat(n) where n = digit count (4–7)
RestorationOriginal value stored in el.dataset.orig, restored on second click
TargetsAll .mv elements + .fc-num .agent-rev .bw-val .tv-val .bk-val .util-big
Why not blur?CSS blur is easily inspected. Text replacement is true masking and screen-reader safe
Eye icon statesOpen eye = data visible · Crossed eye = data masked
18 — Tokens
Design token reference
CSS custom properties structured for CSS, Tailwind config, or Style Dictionary. All values are production-ready.
CSS custom properties (root)
/* Carivo Design System V2 — CSS Tokens */
:root {
  /* ── Brand ── */
  --color-primary:        #533AFD;   /* Purple 500 */
  --color-primary-hover:  #3D25D4;   /* Purple 600 */
  --color-primary-light:  #EDEAFF;   /* Purple 50 */
  --color-terra:          #C15F3C;   /* Terracotta 500 */
  --color-sage:           #6B8C5A;   /* Sage 500 */
  --color-sand:           #C4956A;   /* Sand 500 */

  /* ── Semantic ── */
  --color-success:        #3D7A2C;
  --color-warning:        #C47B1A;
  --color-error:          #C0392B;
  --color-info:           #2B6CB0;

  /* ── Surfaces ── */
  --surface-base:         #F4F2ED;
  --surface-elevated:     #FFFFFF;
  --surface-sunken:       #EFECE6;
  --surface-overlay:      rgba(26,24,20,.55);

  /* ── Text ── */
  --text-primary:         #1A1814;
  --text-secondary:       #6B6860;
  --text-tertiary:        #B8B3A8;
  --text-disabled:        #D0CCC2;
  --text-inverse:         #FFFFFF;

  /* ── Borders ── */
  --border-default:       #E4E0D8;
  --border-strong:        #C8C4BA;
  --border-focus:         #533AFD;

  /* ── Spacing (4px grid) ── */
  --space-1: 2px;   --space-2: 4px;   --space-3: 6px;
  --space-4: 8px;   --space-6: 12px;  --space-8: 16px;
  --space-12: 24px; --space-16: 32px; --space-24: 48px;
  --space-32: 64px; --space-48: 96px;

  /* ── Radius ── */
  --radius-xs: 4px;   --radius-sm: 6px;
  --radius-md: 8px;   --radius-lg: 12px;
  --radius-xl: 16px;  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(26,24,20,.06);
  --shadow-sm: 0 1px 4px rgba(26,24,20,.08),0 1px 2px rgba(26,24,20,.06);
  --shadow-md: 0 4px 12px rgba(26,24,20,.08),0 2px 4px rgba(26,24,20,.06);
  --shadow-xl: 0 16px 48px rgba(26,24,20,.12),0 8px 16px rgba(26,24,20,.06);

  /* ── Animation ── */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ── Typography ── */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 10px;   --leading-xs: 1.4;
  --text-sm: 12px;   --leading-sm: 1.5;
  --text-base: 14px; --leading-base: 1.6;
  --text-lg: 16px;   --leading-lg: 1.7;
  --text-xl: 18px;   --text-2xl: 22px;
  --text-3xl: 28px;  --text-4xl: 36px;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] {
  --surface-base:     #111009;
  --surface-elevated: #1C1A14;
  --surface-sunken:   #0C0B07;
  --border-default:   #2E2C28;
  --border-strong:    #4A4844;
  --text-primary:     #F0EDE6;
  --text-secondary:   #9C9790;
  --text-tertiary:    #6B6860;
}