Flux CSS — Lightweight Design System

Color System

15 hues × 10 shades. One line of config.

Every color is generated from a single hue angle via oklch(). Change --h-blue:250 to --h-blue:220 and your entire blue palette shifts — perceptually uniform, no manual tuning.

Red (hue 25)

0

1

2

3

4

5

6

7

8

9

Cyan (hue 195)

0

1

2

3

4

5

6

7

8

9

Blue (hue 250)

0

1

2

3

4

5

6

7

8

9

Green (hue 150)

0

1

2

3

4

5

6

7

8

9

Purple (hue 300)

0

1

2

3

4

5

6

7

8

9

Slate (hue 260, soft chroma)

0

1

2

3

4

5

6

7

8

9

Your Call

Attributes vs Classes — same engine.

Both approaches use the same oklch() generation. Pick the one that reads better to you. They can coexist in the same project.

Approach A — Attributes

<div bg="cyan" s="3">Dark cyan</div> <div bg="blue" s="7">Light blue</div> <div bg="red">Red (shade 5 default)</div>  <span tc="cyan" s="7">Bright cyan text</span>  <div bg="blue" s="1" tc="cyan" s="7"> Card with blue bg, cyan text </div>

Pros

Readable. Short. Feels like HTML, not a framework. Shade defaults to 5 if omitted.

Cons

Non-standard attributes. Some linters may warn. Can't target [s] for both bg and tc on same element (share the attribute).

Approach B — Classes

<div class="bg-cyan-3">Dark cyan</div> <div class="bg-blue-7">Light blue</div> <div class="bg-red-5">Red shade 5</div>  <span class="tc-cyan-7">Bright cyan text</span>  <div class="bg-blue-1 tc-cyan-7"> Card with blue bg, cyan text </div>

Pros

Standard CSS classes. No linter issues. bg and tc are independent — no shared shade conflict.

Cons

More CSS rules generated (15 hues × 10 shades = 150 classes per property). Larger file. Tailwind-ish feel.

Live Comparison

Attribute approach

bg="cyan" s="2"

bg="blue" s="7"

bg="purple" s="4"

bg="green" s="8"

bg="red" s="1"

Class approach

class="bg-cyan-2"

class="bg-blue-7"

class="bg-purple-3"

class="bg-green-8"

class="bg-red-1"

Layout

Grid, flex, wrap. No ceremony.

Modern CSS grid and flexbox utilities. Responsive by default. .grid-auto uses auto-fit with 280px minimum — no breakpoint config needed.

grid-auto (responsive cards)

0.27%

Hawking radiation error

175

SPARC galaxies validated

60

Orders of magnitude

137

Fine structure constant

grid-3 (equal columns)

GeoNum Precision

2048-shade zone/shade architecture. Drift compartments track error at every step.

Domain-Tuned Zones

One GeoNum class, domain-specific zone configs. Theory, Quantum, Fluids, Plasma, Materials.

Transparent Uncertainty

getUncertainty() on every result. No black box. Every computation auditable.

row (flex with justify-between)

GDBS Pro + HPC Lab

Full platform. All 8 domains. Source code available.

$175k/yr

Typography

Fluid type scale. 8 stops.

clamp()-based sizing that works from phone to 4K. No breakpoints needed for text.

.t-3xl The database that knows.

.t-2xl Precision computing.

.t-xl HPC-grade. Browser-native.

.t-lg Seven physics domains validated.

.t-md Every computation carries its error.

.t-base Standard body text at fluid default size.

.t-sm Captions, labels, secondary information.

.t-xs Fine print, badges, metadata.

Monospace

const result = GeoNum.compute(hawking);
// value: 6.169 × 10⁻⁸ K
// drift: 0.345 shades
// error: 0.27%

Components

Just enough to ship.

Cards, buttons, badges, stats, tables, nav. Built from the utility layer. No component JS. No framework lock-in.

Buttons

Badges

Default Live Beta New

Table

Benchmark	GDBS Result	Reference	Error
Diamond Bulk Modulus	443 GPa	442 GPa	0.23%
ITER βN Stability	~1.8	~1.8	<1%
Planck Ωdm	0.261	0.2607	0.12%
Fine Structure α⁻¹	137	137.036	0.026%

Pricing Layout

Free

$0

Explore all 8 domains. No credit card.

✓ 8 physics modules

✓ Interactive visualisations

✓ GeoNum precision display

✗ HPC Lab

✗ Batch sweeps

Pro

Popular

$25k/yr

All domains + HPC Lab + batch sweeps.

✓ Everything in Free

✓ HPC Lab sandbox

✓ Batch parameter sweeps

✓ Priority support

✓ Export results

Enterprise

$175k/yr

Source code. Commercial license. SLA.

✓ Everything in Pro

✓ Source code access

✓ Commercial license

✓ Dedicated support SLA

✓ Usage analytics

Why Flux

What you're not shipping.

~8KB

Flux CSS (this file)

~25KB

Bootstrap (minified)

~300KB

Tailwind (full build)

Design system.Not a dependency.

Design system.
Not a dependency.