SYX Builder

Real-time theme configurator

Advanced Mode Unlock deeper tokens

System Architecture Modules

SYX is a massive UI framework. Toggle these modular architectures to inject advanced semantic CSS into your export only when needed.

Fluid Typography & Spacing

Injects clamp() mathematical functions (--primitive-fluid-space-*, font-*). Perfect for responsive layouts that automatically scale across mobile and desktop without media queries.

Extended Color Palette

Generates and injects 5 complete 11-step color scales (Yellow, Red, Blue, Green, Purple) calculated from OKLCH math. Crucial for complex UIs, charts, or multiple semantic states.

Forms, Switches & Radios

Outputs hundreds of specific component variables (--component-form-*, --component-switch-*) required to perfectly render and align forms inside the SYX ecosystem.

Tables, Lists & Pagination

Injects structural tokens for complex data-grids, interactive components, active table states, and deep breadcrumb/pagination component UI alignments.

Disable Legacy Bridge

Opt-out of generating the backward compatibility layer for old SYX variables. Exports a strict, zero-bloat modern OKLCH token tree.

Architecture

Base Radius 0.75rem --theme-radius

Base Spacing 0.25rem --theme-spacing-base

Base Border 1px --theme-border-width

Container Max Width 1200px --theme-container-max-width

Focus Ring Width 3px --theme-focus-ring-width

Typography

Primary Font

Heading Font

Base Font Weight 400 --theme-font-weight-base

Heading Font Weight 700 --theme-font-weight-heading

Base Size 16px --theme-font-size-base

Base Line Height 1.5 --theme-line-height-base

Primary Color (OKLCH)

Hue 250 --theme-primary-h

Chroma 0.2 --theme-primary-c

Base Lightness (500) 0.55 --theme-primary-l

Secondary Color (OKLCH)

Hue 70 --theme-secondary-h

Chroma 0.16 --theme-secondary-c

Base Lightness (500) 0.60 --theme-secondary-l

Accent Color (OKLCH)

Hue 277 --theme-accent-h

Chroma 0.17 --theme-accent-c

Base Lightness (500) 0.60 --theme-accent-l

Neutral Color (OKLCH)

Hue 250 --theme-neutral-h

Chroma (Tint) 0.02 --theme-neutral-c

State Colors (Hue)

Success Hue 150

Warning Hue 90

Error Hue 30

Animation

Base Transition 0.2s --theme-transition-duration

Base Easing

Dark Mode Preview

Foundations

Theme Architecture

Explore how your token decisions cascade through the entire system. Adjust the sliders to see the underlying geometry of SYX adapt in real-time.

Color Anatomy

The core color scales generated via OKLCH interpolation. These primitives power the semantic roles.

Primary Scale

50500 (Base)950

Secondary Scale

50500 (Base)950

Accent Scale

50500 (Base)950

Neutral Scale

50500950

Semantic Tokens in Action

--semantic-color-bg-primary --semantic-color-border-subtle

Bg Secondary & Text Primary

This card uses secondary background and default borders.

--semantic-color-bg-secondary --semantic-color-border-default --semantic-color-text-secondary

--semantic-color-primary --semantic-color-text-tertiary

Typography Scale

.syx-type-h1Heading One

--semantic-font-size-h1

.syx-type-h3Heading Three

--semantic-font-size-h3

.syx-type-body-largeBody large text.

--semantic-font-size-body-large

.syx-type-bodyBody standard text.

--semantic-font-size-body

.syx-type-captionCaption — metadata.

--semantic-font-size-caption

Elevation & Radius

Shadow SM + Theme Radius --semantic-shadow-sm

Shadow MD + Theme Radius --semantic-shadow-md

Shadow LG + Theme Radius --semantic-shadow-lg