Foundations
Design Tokens
The primitives every InnovaFlow product is built from. Colors, type, spacing, radius, elevation and motion — one source of truth, mirrored into CSS variables and Tailwind utilities.
Color
Six tonal ramps (50→950). Semantic tokens (surface, border, primary…) resolve from these per theme.
brandFocus Roxo — primary
50
100
200
300
400
500
600
700
800
900
950
successVerde — success / secondary
50
100
200
300
400
500
600
700
800
900
950
warningÂmbar — warning (never red)
50
100
200
300
400
500
600
700
800
900
950
dangerRed — error / destructive only
50
100
200
300
400
500
600
700
800
900
950
infoBlue — neutral notices
50
100
200
300
400
500
600
700
800
900
950
neutralViolet-tinted gray — surfaces & text
50
100
200
300
400
500
600
700
800
900
950
Background
--bg
Surface
--surface
Surface raised
--surface-raised
Border
--border
Primary
--primary
Success
--success
Warning
--warning
Danger
--danger
Typography
Inter variable. A fluid clamp()-based scale — disciplined display sizes, comfortable body.
displayLgShip it with InnovaFlow
displayMdShip it with InnovaFlow
heading1Ship it with InnovaFlow
heading2Ship it with InnovaFlow
heading3Ship it with InnovaFlow
bodyLgShip it with InnovaFlow
bodyMdShip it with InnovaFlow
bodySmShip it with InnovaFlow
labelShip it with InnovaFlow
overlineShip it with InnovaFlow
Radius
Card = 24px, input = 14px, buttons = 12px — the load-bearing brand corners.
0.5rem
sm0.75rem
md0.875rem
input1rem
lg1.25rem
xl1.5rem
card2rem
2xl9999px
pillElevation & Glow
Layered, low-opacity shadows. The roxo glow is the signature accent, used sparingly.
sm
md
lg
xl
2xl
glow
glowStrong
glowSuccess
Spacing
4px base grid. Keys are unit counts — space[4] = 16px.
10.25rem
20.5rem
30.75rem
41rem
61.5rem
82rem
123rem
164rem