Theme navigation

Theme

Theme and Design Tokens

Every visual decision in Hulian UI is driven by design tokens in three layers: primitives, semantics, and preset utilities. Import two CSS files to enable components, themes, and breakpoints.

Three-layer token architecture

Changes flow upward; components consume only semantic tokens and utilities.

  1. 01

    Primitives

    @hulianui/tokens/primitives.css

    The shared OKLCH palette. It does not change between light and dark themes.

  2. 02

    Semantic tokens

    @hulianui/tokens/semantic.css

    Primitive colors named by purpose. Themes replace values without changing structure, and components consume this layer.

  3. 03

    Preset utilities

    @hulianui/tokens/preset.css

    The Tailwind CSS v4 theme maps semantic tokens to utilities and declares the dark variant, breakpoints, and radii.

How to consume the tokens

Import them once in any React application.

/* app/globals.css */
@import "@hulianui/tokens/tokens.css"; /* primitives and semantic tokens */
@import "@hulianui/tokens/preset.css"; /* Tailwind CSS v4 and utilities */

Explore each token group

ColorColor

Semantic colors, primitive palettes, and chart colors.

Dark ModeDark mode

Theme switching with data-theme and no visible flash.

TypographyTypography

Type sizes, font weights, and line-height ratios.

SpacingSpacing

Spacing scale based on a 0.25rem unit.

BreakpointsBreakpoints

Responsive breakpoints and usage guidance.

RadiusRadius

Base radius token and derived corner scales.

ShadowsShadows

Elevation and shadow scales.

MotionMotion

Easing, duration, and when motion is appropriate.

CursorsCursors

Pointer semantics for interactive states.