FlexOS
Version v0.4 Modes Dark · Light Owner FlexOS · Liftit April 2026
Design System · Dark mode

The visual language of autonomous logistics.

One system, two modes. Dark is for operators who live inside the product. Light is for enterprise shippers and reports. The tokens are the same — the surfaces invert.

Space Grotesk
Wordmark
Plus Jakarta Sans
UI & body
OKLCH
Color model
4pt
Spacing grid
2 themes
Dark + Light
01 · Principles

What the system is designed to feel like.

Every visual choice defers to these. When they conflict, we choose in this order: truthful first, then quiet, then ambitious.
Pillar 01

Operational, not promotional.

FlexOS is a working surface. Dense by default, with real numbers, real names, real truck plates. Decorations earn their place or they leave.

Pillar 02

Dark first, light companion.

Operators stare at this for hours. The canvas is near-black. Enterprise shippers invert to white. The same components work in both, driven by one token swap.

Pillar 03

Type does the heavy lifting.

Plus Jakarta Sans at every scale: editorial at 104px, interface at 14px, telemetry in mono. Layouts are built from type first, decoration second.

02 · Brand

One mark, built from four bars.

The FlexOS mark reads as a loading strength meter, an equalizer, a stack of trucks in motion. Always four rectangles, always ascending in opacity.
FlexOS
Dark surface · Cyan mark
FlexOS
Light surface · Blue mark
FlexOS
Monochrome · Print · Co-brand
Wordmark spec · v0.4
FlexOS
Four ascending bars + the wordmark. "OS" always carries the accent. Never substitute the typeface, never space the letters, never color "Flex".
Typeface
Space Grotesk
Weight
700 · Bold
Tracking
−0.02em
Case
Title · Flex + OS
"OS" color
--accent · cyan / primary
Min size
20px · digital
03 · Color · Dark palette

OKLCH, because monitors don't lie.

Perceptually uniform scales. Primary is deep blue; cyan is the accent that carries voice, streams, liveness. Dark canvas goes near-black.
Canvas
App background
#05070d--bg
Surface
Cards · Raised planes
#0f1729--surface
Primary
Brand · CTA · Focus
oklch(.62 .18 240)--primary
Cyan
Accent · Live
#67e8f9--accent
Mint
Success · Winning bid
#34d399--mint
Amber
Warning · Countdown
#f59e0b--amber
Rose
Destructive · Live dot
#f43f5e--rose
Text
Primary on dark
rgba(248 250 252 / .72)
InkDark neutrals
50
100
300
400
500
600
700
800
900
950
PrimaryOKLCH
50
100
300
400
500
600
700
800
900
950
CyanAccent · Voice
50
100
200
300
400
500
600
700
800
900
MintSuccess
50
100
200
300
400
500
600
700
800
900
03.4 · Gradient policy

Un gradient solo debe cambiar lo mínimo necesario para comunicar su intención.

Cambios de hue fuera de la banda azul → cian leen como decoración, restan profesionalismo y compiten con el dato real. Esta regla aplica a backgrounds, halos, auroras, accents de texto, chips y mockups.

OK · Profundidad
Luminosidad monocromática
Misma hue, varía lightness. Para surfaces, cards, overlays.
OK · Accent
Azul → Cian, banda fría
Hue 240 → 200 máximo. Para text accents y highlights.
OK · Ambient
Halo sutil · opacity ≤ 0.15
Monocromático frío, blur alto. Nunca domina la lectura.
No · Hue drift
Azul → violeta → magenta
Cruzar fuera de azul-cian lee como decoración, no como sistema.
Regla 01
Profundidad → solo cambia lightness.
Regla 02
Accent → azul → cian. Hue 240 ↔ 200, nada más.
Regla 03
Ambient → opacity ≤ 0.15, blur alto, mono frío.
Regla 04
Nunca violeta, magenta ni verde en un gradient decorativo.
04 · Typography

Four families, one voice.

Space Grotesk is the wordmark. Plus Jakarta runs the UI. Fraunces italic carries editorial weight on display headlines. JetBrains Mono is telemetry — IDs, timers, code. Each family has a role; no overlap.
Aa Ag 123
Wordmark
Space Grotesk · 700 · −0.02em
UI & Body
Plus Jakarta Sans · 300–800
Editorial
Fraunces · italic 400
Telemetry
JetBrains Mono · 400/500/600
Wordmark
Space Grotesk 700 / −0.02
FlexOS
Display
Jakarta + Fraunces · 104 / 0.98 / −0.045
Autonomous logistics.
Title
Jakarta 700 · 56 / 1.02 / −0.035
The freight operating system.
Headline
Jakarta 700 · 32 / 1.15 / −0.02
Seven agents, one orchestrator.
Subtitle
Jakarta 600 · 22 / 1.3 / −0.015
A reverse auction, closed in hours.
Body
Jakarta 400 · 15 / 1.55 / 0
Shippers publish a route. Agents cascade the offer through carriers. Bids arrive in real time; the best price wins and the trip executes over WhatsApp.
Mono
JBM 600 · 12 / 0.12em
TRIP #A48-0291 · BOG → MDE · 03:41:12 REMAINING
05 · Spacing, Radius & Elevation

4-point grid. Six radii. Five elevations.

Every gap, padding, margin is a multiple of 4. Corners get softer as components get larger.
s-14
s-28
s-312
s-416
s-520
s-624
s-832
s-1040
s-1248
s-1664
s-2080
sm
6
md
10
lg
14
xl
18
2xl
24
full
∞
Elevation
E0
flat
E1
border
E2
card
E3
popover
E4
modal+glow
06 · Components

The atoms that build FlexOS.

Every component works on dark and light. Every state is a token swap, not a redesign.
Buttons
atom
h 32 / 40 / 48r mdfw 600
Inputs
atom
h 44r mdfocus ring primary
Badges & pills
atom
LIVE✓ Winning bidAuction open3 rounds left
h 22r fullfs 12
Bid row
molecule
LE
Transportes La Estrella128 viajes · 4.8★
$2.15M
Best
TN
TransNorte Colombia84 viajes · 4.6★
$2.22M
2m
cols 36·1fr·auto·autogap 14
Card
molecule
Agent · Dispatch

Tracking trip #A48-0291

Cargue confirmed at 09:42. Next checkpoint expected at km 87 in ~2h.

p 24r xl
WhatsApp bubbles
organism
bg #ECE5DDin #fffout #DCF8C6
07 · Motion

Fast, physical, never performative.

Transitions are short and eased. We don't animate to entertain — we animate to confirm a state changed.
Instant
State flip
0ms
Snap
Micro-interactions
120ms · ease-out
Smooth
Layout shifts
260ms · ease-out
Dwell
Panel reveal
400ms · ease-in-out
08 · Iconography

24px stroke. 1.5 weight. No exceptions.

Every icon is a 24×24 stroke at 1.5px. Cyan on dark, primary blue on light.
truck
trip
pin
trend
timer
check
chat
agent
pay
verified
dispatch
driver
shipper
list
alert
info
09 · Changelog

What changed, when.

System revisions tracked here. When in doubt, this is the source of truth for what version any artifact is on.
v0.5 · current
19 Apr 2026
Gradient policy codificada · violeta removido del sistema

Paralelo al cambio ya mergeado en dev.flexos.ai: todos los gradients que cruzaban hue fuera de la banda azul → cian fueron remapeados a monocromáticos fríos. Auroras, halos y covers bajan de opacity 0.22–0.38 a 0.05–0.15 con blur más alto — menos performativo, más ambiental. El token Violet (#A78BFA) se elimina de la paleta extendida del Brand Manual (el rol "IA · agente" lo absorbe el cyan, consistente con voice/streams/liveness). Aplicado aquí, Brand Manual, Pitch Deck, Logo Explorations y versiones print. Nueva subsección 03.4 · Gradient policy documenta las 4 reglas.

v0.4
18 Apr 2026
Wordmark retipografiado · Space Grotesk 700

El wordmark "FlexOS" pasa de Plus Jakarta 800 a Space Grotesk 700 con tracking −0.02em. "OS" conserva el cyan (dark) / primary-700 (light). Aplicado aquí, en Brand Manual (28 instancias) y Pitch Deck (16). Sección 04 Typography reescrita para reflejar las 4 familias (Space Grotesk · Jakarta · Fraunces · JetBrains Mono).

v0.3
19 Apr 2025
Símbolo · 4 barras ascendentes confirmado

Lockup oficial = símbolo de cuatro rectángulos ascendentes (opacidad 0.35 · 0.62 · 0.88 · 1.0). Se descartan las exploraciones de marca monogramática y el mix con JetBrains Mono. El tratamiento "OS cyan" queda como regla — no como opción.

v0.2
Mar 2025
Light mode añadido · paleta paper

Dark sigue siendo primario; light se añade como modo compañero para shippers, reportes y print. Un solo atributo data-theme controla el swap completo.

v0.1
Feb 2025
Primer draft · tokens OKLCH + grid 4pt

Base del sistema: paleta en OKLCH, spacing de 4 puntos, seis radios, cinco niveles de elevación. Plus Jakarta Sans + JetBrains Mono. Dark mode solamente.

FlexOS Dark Mode

End of dark theme documentation. Light theme follows below — same tokens, inverted surfaces.

Tokens

  • --bg · #05070d
  • --surface · #0f1729
  • --text · rgba(248 250 252 / .96)
  • --border · rgba(255 255 255 / .08)
  • --accent · #67e8f9

When to use dark

  • Operator dashboards
  • Live dispatch screens
  • Agent admin consoles
  • Marketing surfaces (landing, deck)
Theme 02 · Companion
Light mode.
For enterprise shippers, reports, PDFs, and contexts where operators need the document — not the product. Same tokens, inverted surfaces. Primary blue replaces cyan as the accent.
FlexOS
Theme Light · Companion Owner FlexOS · Liftit April 2026
Design System · Light mode

Clear, calm, document-ready.

Light mode is the companion theme for enterprise shippers, printable reports, PDFs and partner integrations. It inherits every token from dark; only the surface, text, and accent colors invert.

#ffffff
Canvas
Primary blue
Accent
Paper-safe
For print
Same atoms
Zero redesign
01 · Principles

Inherit the system. Soften the volume.

Light mode is not a separate brand. It's the same design system with three specific overrides.
Rule 01

Invert the canvas, not the hierarchy.

Text still strongest on titles; telemetry still mono. Only the surface and text colors flip.

Rule 02

Primary blue replaces cyan as accent.

Cyan is bright on black, invisible on white. On light, the primary becomes the voice color — links, labels, live dots.

Rule 03

Earn contrast with weight, not shadow.

Borders do most of the separation work. Elevation is subtle. We don't stack glows on white paper.

02 · Color · Light palette

Paper, ink, one blue.

Four surface colors and one accent carry the whole mode. Mint and rose are reused unchanged.
Canvas
Page background
#ffffff--bg
Surface
Cards · Raised planes
#f8fafc--surface
Border
Dividers · Outlines
#e2e8f0--border
Primary
Brand · CTA · Accent
oklch(.48 .17 245)--primary
Text
Primary text on paper
#0b1220--text
Muted
Captions · Secondary
#64748b--text-3
Success
Winning bid · Confirmed
#059669mint-600
Warning
Countdown · Attention
#b45309amber-700
PaperNeutrals for light
0
50
100
200
300
400
500
600
700
900
PrimaryOn light: use 600–800
50
100
300
400
500
600
700
800
900
950
SemanticsMint & Rose
50
200
400
600
700
800
50
300
500
700
03 · Typography

Same family. Tuned for paper.

On white, body text sits at #334155 rather than 100% black — easier on eyes over long documents.
Aa Ag 123
Family
Plus Jakarta Sans
Body color
#334155
Headings
#0b1220
Pair
JetBrains Mono
Display
104 / 0.98 / −0.045
Autonomous logistics.
Title
56 / 1.02 / −0.035
The freight operating system.
Headline
32 / 1.15 / −0.02
Seven agents, one orchestrator.
Body
15 / 1.55
Shippers publish a route. Agents cascade the offer through carriers. Bids arrive in real time; the best price wins.
Mono
JBM 12 / 0.12em
TRIP #A48-0291 · BOG → MDE · 03:41:12 REMAINING
04 · Components · Light

Same atoms. Paper surface.

The buttons, inputs, pills, cards and bid rows are rendered unchanged — only tokens invert.
Buttons
atom
primary unchangedsecondary paper bg
Inputs
atom
bg #fffborder slate-200
Badges & pills
atom
LIVE✓ Winning bidAuction open3 rounds left
text darkens on light
Bid row
molecule
LE
Transportes La Estrella128 viajes · 4.8★
$2.15M
Best
TN
TransNorte Colombia84 viajes · 4.6★
$2.22M
2m
best mint-600 text
Card
molecule
Agent · Dispatch

Tracking trip #A48-0291

Cargue confirmed at 09:42. Next checkpoint expected at km 87 in ~2h.

bg #fffshadow subtle
WhatsApp bubbles
organism
unchanged always WA native
05 · Elevation on paper

Shadow is a whisper.

On white, elevation is achieved with soft 10% slate shadows — not glows. E4 keeps a faint primary tint for active modals only.
E0
flat
E1
border
E2
card
E3
popover
E4
modal
Snap
Micro-interactions
120ms · ease-out
Smooth
Layout shifts
260ms · ease-out
Dwell
Panel reveal
400ms · ease-in-out
Instant
State flip
0ms
06 · Surfaces across modes

Three audiences, two themes, one system.

Operators get dark. Shippers get light. Drivers get WhatsApp, which is neither.
Operator · Dark
Trip dispatch
For dispatchers monitoring dozens of trips. Near-black canvas, cyan for state changes, mono for telemetry.
LE
La Estrella4.8★
$2.15M
Win
Shipper · Light
Publish a load
For Walmart / Pepsi / Bimbo dispatchers. Paper-white canvas, clear hierarchy, no dense telemetry.
Bogotá → Medellín
3 ton · Turbo · mañana 8:00
Driver · WhatsApp
MiCarga agent
For 280K truck owners. No app, no login. Native to WhatsApp. Spanish, conversational, fast.
07 · Switching modes

One attribute, one swap.

Mode is a single data-theme attribute on the root. No classes fork. No component rewrites.
Usage
<!-- Operator dashboard -->
<div data-theme="dark">
  <App />
</div>

<!-- Shipper portal · PDF report -->
<div data-theme="light">
  <App />
</div>

// Tokens invert automatically — components stay the same.
// --bg, --surface, --text, --text-2, --text-3, --border,
// --accent, --accent-soft, --input-bg, --stage-bg re-resolve.
FlexOS Light Mode

The companion theme. Same grammar, inverted surface. Use when the audience is enterprise, the output is print, or the operator needs the document — not the product.

Tokens (inverted)

  • --bg · #ffffff
  • --surface · #f8fafc
  • --text · #0b1220
  • --border · #e2e8f0
  • --accent · primary-700

When to use light

  • Shipper web portal
  • PDF reports & invoices
  • Partner co-branded pages
  • Printed documentation