QUADRATICQUADRATIC
TECHNOLOGY
● Prototype mode
Founder visualizer
Q
Quadratic visual language

Material, motion, wallpaper and brand

The design system combines controlled glassmorphism, restrained neumorphism, modular bento composition and wallpaper-aware theming.
Canonical application tokens

Same Quadratic identity, application-density execution

#53F1E8Primary teal#A9F7F1Soft accent#1C9A92Deep accentSpace GroteskDisplay / headingsInterInterface / bodyIBM Plex MonoTechnical / labels

Dark / Light / System controls appearance. Focus / Balanced / Immersive controls presentation density. Atmosphere and local wallpaper remain a third, independent layer.

Material hierarchy

Base → raised → inset → pressed → modal → active

Base
Raised
Inset
Active
Theme authority
  1. Semantic/safety colours
  2. Tenant/company brand locks
  3. Quadratic identity anchors
  4. Wallpaper ambient tokens

Focus / Balanced / Immersive

Critical data-entry and safety/security screens can force Focus mode; normal dashboards use Balanced; Life, Atlas, property, travel and executive overview surfaces can use Immersive.

Motion with purpose

Flow arrows show process direction, line charts draw into view, controls elevate or press, and loading uses the recovered Quadratic interlocking-gear concept. Reduced-motion preferences disable nonessential motion.

Brand rule

Quadratic borrows principles, not screens. Customer workspaces can feel strongly customer-branded, while component geometry, interaction behaviour, safety semantics and subtle platform signatures remain coherent.

Adaptive Theme Engine

Quadratic appearance & atmosphere

Appearance, presentation density and atmosphere are independent. Quadratic brand anchors and semantic guardrail colours remain protected.

Local prototype: uploaded images remain in the browser context and are not sent to a backend.