Flovoo Design System
The single source of truth for Flovoo's product and marketing surfaces — tokens, typography, components, and bilingual rules.
Brand & Logo
The Flovoo wordmark is localized — Latin in English, Arabic in Arabic. It never flips, rotates, or recolors.
Wordmark
Gradient
135° #2EA8FF → #4D6BFB → #7A5AF8
Do & Don't
Use the gradient wordmark on light or navy surfaces with clear space equal to the cap height.
Never mirror, rotate, stretch, outline, or recolor the mark — including in RTL layouts.
Use WhatsApp green #25D366 only as channel identity: icons, channel chips, channel filters.
Never use WhatsApp green for buttons, links, or any UI action — primary actions are Flovoo Blue.
Color
Click any hex to copy it.
Brand
Flovoo Sky
--flovoo-sky
Accents, highlights, gradient start
Flovoo Blue
--flovoo-blue
Primary actions, focus ring, outbound bubbles
Blue Hover
--flovoo-blue-hover
Hover state for primary blue
Flovoo Violet
--flovoo-violet
AI surfaces, gradient end
Flovoo Navy
--flovoo-navy
Deep brand surfaces, shadows
Heading Navy
--flovoo-heading
Headings, shadow tint
Neutrals
Background
--background
Base surface
Page
--bg-page
App page background
Foreground
--foreground
Body text
Muted Foreground
--muted-foreground
Secondary text
Text Muted
--text-muted
Placeholders, meta
Border
--border
Borders, dividers, inputs
Semantic
Success
--success
Delivered, active states
Warning
--warning
Pending, quota alerts
Danger
--danger
Errors, destructive actions
Channel identity only — never buttons
Typography
Plus Jakarta Sans for UI, JetBrains Mono for numbers and IDs, Noto Sans Arabic for Arabic (+1px, line-height 1.7).
Display / 48 / 800
Conversations that convert
Title / 30 / 700
Unified team inbox
Body / 16 / 400
Reply faster with shared context across every channel.
Label / 12 / 600
Channel status
Mono / 14 / 500
+966 55 123 4567 · FLV-20482 · 1,204,983
Arabic / Noto Sans Arabic
محادثات أذكى تتحول إلى مبيعات
ردّ أسرع على عملائك مع سياق موحّد عبر كل القنوات.
Foundations
Radii, navy-tinted elevation, motion tokens, and the focus ring.
Radius
Elevation
rgba(23,36,79,…) — never black
Motion & Focus
- micro — 150ms
- standard — 200ms
- large — 280ms
- cubic-bezier(.16,1,.3,1)
Components
Live components from the production library — not screenshots.
Buttons
Inputs
Badges
Tabs & Table
| Contact | Phone | Status |
|---|---|---|
| Sara Al-Amir | +966 55 123 4567 | Delivered |
| Omar Haddad | +971 50 998 2211 | Pending |
| Lina Farouk | +20 100 445 7788 | Failed |
Overlays & Feedback
No conversations yet
Connect a channel to start receiving messages.
Messaging Pattern
Inbound bubbles are neutral, outbound are Flovoo Blue, AI replies carry the violet AI badge.
Your order shipped and arrives in 2 days. Tracking TRK-99213
Dark Mode
Dark surfaces are navy-tinted — never neutral gray.
Card surface
Muted text on card background.
Your order shipped and arrives in 2 days. Tracking TRK-99213
RTL
Layout mirrors with logical properties. Phone numbers, IDs, and URLs always stay LTR.
Your order shipped and arrives in 2 days. Tracking TRK-99213
Downloads
Brand assets for partners and press.
