Architecture

Built with SYX

This entire experience � every color, every spacing value, every typographic decision � runs on the SYX Design System token architecture. Three themes. Zero component rewrites. Native CSS @layer throughout.

Multi-theming

Switch Themes Live

Three completely different identities. One component codebase. Change the theme � watch how zero component CSS changes.

Editorial

Limpio, tipogr�fico, period�stico. Ink & paper. Baseline arquitect�nico.

Event

Energ�tico, deportivo. Verde campo FIFA + dorado trofeo. Alta energ�a.

Immersive

Oscuro, cinematogr�fico. Noche de estadio bajo los focos. Cyan neon.

Click any card above or use the theme selector in the nav to switch themes instantly. The component markup never changes � only token values are redefined.

Token System

7-Layer Token Architecture

A strict cascade � from raw values to component contracts. Components only consume the layer above them.

Layer 1 Primitives Raw values � colors, spacing, scale. No semantic meaning. Source of truth.
--primitive-color-blue-500 --primitive-space-base --mun-primitive-green-500
Layer 2 Theme / Arch Structural decisions shared across components. Radius, focus ring, transition speed.
--theme-radius --theme-focus-ring-width --theme-transition-speed
Layer 3 Semantic Tones Contextual meaning � primary actions, success states. Redefined per-theme.
--semantic-color-primary --semantic-tone-success-bg --semantic-color-bg-primary
Layer 4 Component Aliases Per-component stable contracts. Components only read these � never raw primitives.
--mun-match-card-bg --mun-pill-groups-bg --mun-hero-overlay-start
CSS @layer

The Cascade Under Control

All specificity in SYX is managed via native CSS @layer. No !important. No hacks.

/* SYX + Mundial 2026 � @layer stack */
highest priority syx.utilities � Display, spacing helpers
syx.organisms � Complex layouts
syx.molecules � Atom combinations
syx.atoms � Minimal UI: buttons, pills, inputs
syx.tokens � CSS Variables: Primitive ? Semantic ? Component
syx.base � Typography, base HTML elements
lowest priority syx.reset � Global CSS reset
Atomic Design

Component Inventory

SYX atoms + molecules + organisms, extended with proyecto-specific components.

Atoms (SYX) Minimal UI btn, pill, label, icon, link, title, table, form, check, radio, switch, breadcrumb, pagination
Molecules (SYX) Atom Combinations btn-group, form-field, form-field-set, label-group, code-snippet, feature-card
Mundial 2026 Project-specific match-card, team-header, stage-pill, data-strip, compare-stat, stage-timeline, editorial-hero, featured-match-banner
Live Preview

Components in Context

Stage Pills
Groups R32 R16 QF SF Final
Match Status
Live Full Time Upcoming
Data Strip
6Pts
2Won
0Draw
0Lost
+4GD
Tech Stack

What Powers This

Design System SYX v4 7-layer tokens, @layer, Atomic Design, Dart Sass, multi-theming.
Bundler Vite 5 Multi-page app, SCSS via loadPaths, HMR, ES modules.
Animation GSAP 3 Reveals, scroll storytelling, stage timeline, compare bars.
3D Accent Three.js Hero scene only � icosahedron sphere, particles, mouse parallax.