Design Tokens

Cotton uses semantic design tokens for colors, spacing, typography, and more. Tokens are available as CSS custom properties and JavaScript exports.

Using Tokens

Tokens are automatically available when using Cotton UI components. For custom styling:

.my-component {
  background: var(--cotton-color-surface-default);
  color: var(--cotton-color-text-default);
  padding: var(--cotton-spacing-4);
  border-radius: var(--cotton-radius-md);
}

Color Tokens

Surface Colors

--cotton-color-surface-default — Default background
--cotton-color-surface-layer-01 — Elevated layer
--cotton-color-surface-layer-02 — Higher elevation
--cotton-color-surface-interactive — Interactive elements

Text Colors

--cotton-color-text-default — Primary text
--cotton-color-text-secondary — Secondary text
--cotton-color-text-muted — Muted text
--cotton-color-text-primary — Brand/accent text

Status Colors

--cotton-color-status-success — Success state
--cotton-color-status-warning — Warning state
--cotton-color-status-error — Error state
--cotton-color-status-info — Info state

Spacing Tokens

Spacing uses a consistent scale:

--cotton-spacing-1 — 4px
--cotton-spacing-2 — 8px
--cotton-spacing-3 — 12px
--cotton-spacing-4 — 16px
--cotton-spacing-6 — 24px
--cotton-spacing-8 — 32px
--cotton-spacing-12 — 48px

Typography Tokens

--cotton-font-size-xs — 12px
--cotton-font-size-sm — 14px
--cotton-font-size-md — 16px
--cotton-font-size-lg — 18px
--cotton-font-size-xl — 20px
--cotton-font-size-2xl — 24px
--cotton-font-size-3xl — 30px

Radius Tokens

--cotton-radius-sm — 4px
--cotton-radius-md — 8px
--cotton-radius-lg — 12px
--cotton-radius-xl — 16px
--cotton-radius-full — 9999px

Standalone Package

For projects not using Cotton UI, install tokens separately:

npm install @akrade/cotton-tokens

Import in your CSS:

@import '@akrade/cotton-tokens/css';