Tokens

Spacing, radius, and shadows tokens that power every Olyx component.

Olyx ships a flat set of CSS custom properties — no Tailwind, no utility classes, no preprocessor. Every component references these tokens directly, so overriding one variable propagates everywhere.

Spacing

A linear pixel scale. Names match values — --spacing-8 is 8px.

Border Radius

Semantic names from sharp corners to full circles. The -inc variants ("increment") sit between main stops for tighter control.

Shadows

Five elevation levels. Each shadow uses a two-layer approach — a tight key shadow and a wider ambient shadow — for realistic depth.

Motion

Olyx motion tokens follow Material Design 3's physics-based motion system. On the web, springs are approximated using cubic-bezier curves — the tokens below translate M3's spring parameters (stiffness, damping, velocity) into CSS timing functions.

Motion splits into two dimensions: motion scheme (personality) and token type (what's being animated).

Motion Schemes

Material 3 defines two preset schemes that determine how your interface feels:

Expressive is M3's opinionated default and should be used for most interactive elements. Standard is more functional and subdued.

Token Types

Tokens are split by what they animate:

Speed Tiers

Each scheme × type combination has three speeds:

  • Fast — Small components, quick interactions (buttons, switches)
  • Default — Medium elements, standard transitions (cards, panels)
  • Slow — Large elements, full-screen motion (drawers, sheets)

Expressive Tokens

Spatial — Noticeable overshoot and bounce for physical movement:

Effects — Smooth curves without overshoot for color/opacity:

Standard Tokens

Spatial — Subtle overshoot for more functional motion:

Effects — Identical to expressive effects (no overshoot in either scheme):

Usage Pattern

Token names follow this structure:

--transition-{scheme}-{speed}-{type}

Examples:

/* Button press — expressive spatial movement + fast effect for background */
[data-ui="button"] {
  transition: 
    transform var(--transition-expressive-fast-spatial),
    background-color var(--transition-expressive-fast-effects);
}
 
/* Accordion expand — standard spatial for layout shifts */
[data-ui="accordion-panel"] {
  transition: height var(--transition-standard-default-spatial);
}
 
/* Dialog entrance — expressive spatial for movement, fast effect for fade */
[data-ui="dialog"] {
  transition: 
    transform var(--transition-expressive-default-spatial),
    opacity var(--transition-expressive-fast-effects);
}
 
/* Navigation drawer — slow spatial for large surface */
[data-ui="drawer"] {
  transition: transform var(--transition-standard-slow-spatial);
}

Customizing Tokens

Override any token in your global CSS:

:root {
  --spacing-8: 0.5rem;      /* switch to rem */
  --radius-md: 8px;          /* tighter corners */
  --shadow-3: 0 4px 12px rgb(0 0 0 / 10%);  /* softer shadows */
}

For component-scoped overrides:

[data-ui="card"] {
  --radius-md: 20px;  /* only affects cards */
}

Source

styles/_base/tokens.css