FluxOps — Component Library

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

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

Spacing

Tailwind-compatible 4px base scale. All padding, margin, and gap values must reference a token — 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

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