FluxOps: Component Library

01

Colours

Cool-neutral Zinc base for surfaces and structure; amber + violet for brand expression and feasibility tiers. Each swatch shows the light value (left) and dark value (right). Never use raw hex values in components.

FluxOps brand

Brand Primary--brand-primary#F59E0B / #FBBF24

Brand Accent--brand-accent#A78BFA / #C4B5FD

Brand Container--brand-container#FEF3C7 / #451A03

Zinc base palette

50
#fafafa 100
#f4f4f5 200
#e4e4e7 300
#d4d4d8 400
#a1a1aa 500
#71717a 600
#52525b 700
#3f3f46 800
#27272a 900
#18181b 950
#09090b

Surface

Background--background#FFF / #09090B

Card--card#FFF / #09090B

Muted--muted#F4F4F5 / #27272A

Accent--accent#F4F4F5 / #27272A

Text

Foreground--foreground#09090B / #FAFAFA

Muted FG--muted-foreground#71717A / #A1A1AA

Card FG--card-foreground#09090B / #FAFAFA

Interactive

Primary--primary#18181B / #FAFAFA

Primary FG--primary-foreground#FAFAFA / #18181B

Secondary--secondary#F4F4F5 / #27272A

Ring--ring#18181B / #D4D4D8

Structural

Border--border#E4E4E7 / #27272A

Input--input#E4E4E7 / #27272A

Destructive--destructive#EF4444 / #7F1D1D

Status

Successgreen-500#22C55E

Warningamber-500#F59E0B

Errorred-500#EF4444

Infoblue-500#3B82F6

Feasibility tier

Green--tier-green≥ 8.0 / 10

Amber--tier-amber5.0 – 7.9

Red--tier-red< 5.0

Colour tokens, semantic roles

CSS variable	Role	Light	Dark
--brand-primary	brand.primary	#F59E0B	#FBBF24
--brand-accent	brand.accent	#A78BFA	#C4B5FD
--brand-container	brand.container	#FEF3C7	#451A03
--background	surface.background	#FFFFFF	#09090B
--card	surface.card	#FFFFFF	#09090B
--muted	surface.muted	#F4F4F5	#27272A
--accent	surface.accent	#F4F4F5	#27272A
--foreground	text.foreground	#09090B	#FAFAFA
--muted-foreground	text.muted	#71717A	#A1A1AA
--card-foreground	text.card	#09090B	#FAFAFA
--primary	interactive.primary	#18181B	#FAFAFA
--primary-foreground	interactive.primary-fg	#FAFAFA	#18181B
--secondary	interactive.secondary	#F4F4F5	#27272A
--ring	interactive.ring	#18181B	#D4D4D8
--border	structural.border	#E4E4E7	#27272A
--input	structural.input	#E4E4E7	#27272A
--destructive	structural.destructive	#EF4444	#7F1D1D
--tier-green	feasibility ≥ 8.0	#22C55E	#22C55E
--tier-amber	feasibility 5.0–7.9	#F59E0B	#F59E0B
--tier-red	feasibility < 5.0	#EF4444	#EF4444

02

Typography

Inter for all UI text, chosen for clarity in data-dense decision interfaces. JetBrains Mono for code, tokens, and structured payloads where character distinction matters.

Font families

Inter

font-family: 'Inter', sans-serif
Weights used: 400 · 500 · 600 · 700
Role: All UI text (headings, body, labels, data)

JetBrains Mono

font-family: 'JetBrains Mono', monospace
Weights used: 400 · 500 · 600
Role: Code, tokens, JSON payloads, decision node IDs

Type scale

Display72px · 600 · −2px · lh 1.05

Aa

H148px · 600 · −1.5px · lh 1

Heading One

H232px · 600 · −1px · lh 1.15

Heading Two

H324px · 600 · −1px · lh 28.8px

Heading Three

Body16px · 400 · 0 · lh 24px

The quick brown fox jumps over the lazy dog.

Small14px · 400 · 0 · lh 20px

The quick brown fox jumps over the lazy dog.

XS / Label12px · 600 · 0.08em · lh 16px

Label Text

Font families

CSS variable	Stack	Weights	Role
--font-sans	'Inter', system-ui, sans-serif	400 · 500 · 600 · 700	All UI text
--font-mono	'JetBrains Mono', monospace	400 · 500 · 600	Code, tokens, payloads

Type scale

CSS variable	Size	Weight	Tracking	Line height
--text-display	72px	600	−2px	1.05
--text-h1	48px	600	−1.5px	1
--text-h2	36px	600	−1px	1.15
--text-h3	24px	600	−1px	28.8px
--text-body	16px	400	0	24px
--text-sm	14px	400	0	20px
--text-xs	12px	600	0.08em	16px

03

Spacing

Tailwind-compatible 4px base scale. All padding, margin, and gap values must reference a token, with no magic numbers in component code.

Space scale

--space-2xs4px

--space-xs8px

--space-md16px

--space-xl24px

--space-2xl32px

--space-page48px

--space-5xl64px

Border radius

--radius-sm4px

--radius-lg8px

border-radius: 9999pxpill

Spacing tokens

CSS variable	Value	rem	Usage
--space-2xs	4px	0.25rem	Icon gaps, tight padding
--space-xs	8px	0.5rem	Inner gaps, list rows
--space-md	16px	1rem	Default component padding
--space-xl	24px	1.5rem	Section gaps, modal padding
--space-2xl	32px	2rem	Between content blocks
--space-page	48px	3rem	Page horizontal gutter
--space-5xl	64px	4rem	Section vertical rhythm

Border radius

CSS variable	Value	Usage
--radius-sm	4px	Inputs, chips, small controls
--radius-lg	8px	Cards, swatches, containers
border-radius	9999px	Pills, avatars, toggles

04

States

All interactive components share a consistent state vocabulary. State is never communicated by colour alone. Shape, elevation, or label changes accompany every shift.

Button

Default

Hover

Active

Focus

Disabled

Input

Default

Focus

Filled

Error

Disabled

State treatments

State	Property	Treatment
default	background / border	--primary / --border
hover	transform / box-shadow	translateY(−1px) · 0 4px 10px
active	transform	scale(0.97)
focus	outline	2px solid --ring · offset 2px
error	border / color	--destructive (#EF4444)
disabled	opacity / pointer-events	0.4 · none