2TOX Design System • Living Tokens, Components & Hand-off

01 • Core Foundations

Deterministic Boundary Principles

The 2TOX design system reflects industrial precision: zero fuzzy shadows, strictly deterministic 0px border radiuses, 1px hairline borders, and mathematically verified contrast invariants.

Rule 01rounded-none

0px Border Radius

Strict square geometry across all cards, inputs, and buttons. Mirrors industrial hardware containers and German machine aesthetics.

Rule 02border border-white/12

No Black Outlines

Banned heavy black borders (border-2 border-[#242323]). Instead use hairline 1px borders with controlled opacity (border-white/10 or border-black/10).

Rule 03hover:-translate-y-0.5

No Glow Halos

Eliminated diffuse blur drop-shadows. Focus states and hover micro-interactions rely on clean 1px color transitions and -0.5px micro-lifts.

Rule 04WCAG AAA 7.8:1

BSI C5 & WCAG AAA

All text elements meet minimum 7:1 AAA contrast ratios. Color tokens guarantee auditable readability in mission-critical environments.

02 • Color Palette Tokens

Verified Palette Tokens

Click any swatch to copy its Hex code, CSS variable, or RGB value directly into your codebase.

7.8:1 AAA vs #141618

Signature 2TOX Orange

Primary brand accent, primary CTA buttons, active state indicators

HEX:

VAR:

8.2:1 AAA vs #FAF9F6

Sovereignty Blue

EU CRA compliance badges, enterprise architecture highlights

HEX:

VAR:

14.2:1 AAA vs #FAF9F6

Void Slate Background

Primary dark section canvas, high-contrast engineering backgrounds

HEX:

VAR:

12.8:1 AAA vs #FAF9F6

Elevated Container Slate

Card backgrounds, floating modules, modal backdrops

HEX:

VAR:

13.6:1 AAA vs #242323

Warm Canvas

Hero background, white section backgrounds, editorial light canvas

HEX:

VAR:

14.5:1 AAA vs #FAF9F6

Charcoal Ink

Primary typography color on light surfaces, headings, body text

HEX:

VAR:

4.5:1 AA

Grid Cross Default Grey

Resting coordinate grid cross markers in CrossGridBackground

HEX:

VAR:

6.2:1 AA vs #141618

Verification Emerald

BSI C5 certification checkmarks, live node latency indicator

HEX:

VAR:

03 • Typography Hierarchy

Type Hierarchy & Letter Spacing

Display Hero60px (3.75rem)tracking: -0.03em

Deterministic AI software.

Hero headlines

Heading 148px (3rem)tracking: -0.025em

Validated by enterprise technology leaders.

Section master titles

Heading 232px (2rem)tracking: -0.02em

Standardise AI coding across enterprise topologies.

Sub-section headings

Component H320px (1.25rem)tracking: -0.015em

How to Renovate? Architecture Audit

Card titles

Body Large16px (1rem)tracking: normal

Translate generative AI coding productivity into reliable, auditable, industrial-grade software.

Hero lead paragraphs

Geist Mono Code12px (0.75rem)tracking: 0.05em

APA_INVARIANT_ASSERT(code_boundary == STRICT_SANDBOX)

Metrics, tags, timestamps

04 • Spacing Scale

Spacing & Layout Tokens

4px base grid. All values are multiples of 4. Click a token to copy.