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.
rounded-none0px Border Radius
Strict square geometry across all cards, inputs, and buttons. Mirrors industrial hardware containers and German machine aesthetics.
border border-white/12No 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).
hover:-translate-y-0.5No Glow Halos
Eliminated diffuse blur drop-shadows. Focus states and hover micro-interactions rely on clean 1px color transitions and -0.5px micro-lifts.
WCAG AAA 7.8:1BSI C5 & WCAG AAA
All text elements meet minimum 7:1 AAA contrast ratios. Color tokens guarantee auditable readability in mission-critical environments.
Verified Palette Tokens
Click any swatch to copy its Hex code, CSS variable, or RGB value directly into your codebase.
Signature 2TOX Orange
Primary brand accent, primary CTA buttons, active state indicators
Sovereignty Blue
EU CRA compliance badges, enterprise architecture highlights
Void Slate Background
Primary dark section canvas, high-contrast engineering backgrounds
Elevated Container Slate
Card backgrounds, floating modules, modal backdrops
Warm Canvas
Hero background, white section backgrounds, editorial light canvas
Charcoal Ink
Primary typography color on light surfaces, headings, body text
Grid Cross Default Grey
Resting coordinate grid cross markers in CrossGridBackground
Verification Emerald
BSI C5 certification checkmarks, live node latency indicator
Type Hierarchy & Letter Spacing
Deterministic AI software.
Validated by enterprise technology leaders.
Standardise AI coding across enterprise topologies.
How to Renovate? Architecture Audit
Translate generative AI coding productivity into reliable, auditable, industrial-grade software.
APA_INVARIANT_ASSERT(code_boundary == STRICT_SANDBOX)