Design Tokens

Design tokens are the visual design atoms of the design system. They define colors, spacing, typography, and other visual properties as CSS custom properties.

Usage

Import tokens in your app's globals.css:

@import "@elcto/ui/styles/tokens.css";

Use tokens in your styles:

.my-component {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

Color System

Brand Colors

The primary brand color used for CTAs, links, and accents.

Token	Value	Usage
--brand	#14f5bf	Primary brand color
--brand-hover	#12d9a8	Hover state
--brand-muted	rgba(20, 245, 191, 0.1)	Backgrounds
--brand-border	rgba(20, 245, 191, 0.2)	Borders

.btn-brand {
  background-color: var(--brand);
  color: var(--text-inverse);
}
.btn-brand:hover {
  background-color: var(--brand-hover);
}

Background Layers

A layered background system for depth hierarchy.

Token	Value	Usage
--bg-0	#12141a	Topbar, deepest layer
--bg-1	#181b21	Sidebar, inputs
--bg-2	#1d2025	Base/page background
--bg-3	#272c32	Cards, elevated surfaces
--bg-4	#31383e	Hover states
--bg-5	#373d44	Active states

Semantic Aliases:

Token	Maps To	Usage
--bg-base	--bg-2	Page background
--bg-card	--bg-3	Card backgrounds
--bg-input	--bg-1	Input fields
--bg-topbar	--bg-0	Top navigation
--bg-hover	--bg-4	Hover states
--bg-elevated	--bg-3	Elevated elements
--bg-sidebar	--bg-1	Sidebar background

Text Colors

Token	Value	Usage
--text-primary	#ededf3	Primary text
--text-secondary	#7e828b	Secondary text
--text-muted	#5a5e66	Muted/disabled text
--text-inverse	#12141a	Text on light backgrounds

.heading {
  color: var(--text-primary);
}
.caption {
  color: var(--text-muted);
}

Border Colors

Token	Value	Usage
--border-default	rgba(126, 130, 139, 0.3)	Default borders
--border-subtle	rgba(126, 130, 139, 0.2)	Subtle borders
--border-focus	var(--brand)	Focus rings

Status Colors

Semantic colors for success, error, warning, and info states.

Status	Color	Background	Border
Error	--error #ff5859	--error-bg	--error-border
Warning	--warning #f59e0b	--warning-bg	--warning-border
Success	--success #14f5bf	--success-bg	--success-border
Info	--info #3b82f6	--info-bg	--info-border

.alert-error {
  background-color: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

Social Platform Colors

Colors for social login buttons and platform branding.

Token	Value	Platform
--discord	#5865f2	Discord
--twitch	#a970ff	Twitch
--twitter	#1da1f2	Twitter/X
--youtube	#ff0000	YouTube
--kick	#53fc18	Kick
--steam	#171a21	Steam
--trovo	#19d66b	Trovo
--github	#333333	GitHub

Shadows

Token	Usage
--shadow-sm	Subtle elevation
--shadow-md	Cards, dropdowns
--shadow-lg	Modals, popovers
--shadow-xl	Large overlays
--shadow-glow	Brand glow effect

.card {
  box-shadow: var(--shadow-md);
}
.modal {
  box-shadow: var(--shadow-xl);
}

Border Radius

Token	Value	Usage
--radius-sm	4px	Small elements
--radius-md	8px	Buttons, inputs
--radius-lg	12px	Cards
--radius-xl	16px	Modals
--radius-2xl	20px	Large containers

Component Classes

Import component utility classes:

@import "@elcto/ui/styles/components.css";

Button Classes

.btn-brand      /* Primary brand button */
.btn-secondary  /* Secondary button */
.btn-ghost      /* Ghost/transparent button */
.btn-twitch     /* Twitch-branded button */
.btn-discord    /* Discord-branded button */
.btn-kick       /* Kick-branded button */

Card Classes

.card           /* Elevated card with border */
.card-flat      /* Flat card without border */

Badge Classes

.badge          /* Base badge */
.badge-success  /* Green/success badge */
.badge-warning  /* Yellow/warning badge */
.badge-error    /* Red/error badge */
.badge-info     /* Blue/info badge */
.badge-neutral  /* Gray/neutral badge */

Text Classes

.text-primary   /* Primary text color */
.text-secondary /* Secondary text color */
.text-muted     /* Muted text color */
.text-brand     /* Brand accent color */

Input Classes

.input          /* Base input styling */
.input-field    /* Input field variant */

Navigation Classes

.nav-item         /* Navigation item */
.nav-item.active  /* Active navigation item */

Table Classes

.table-row      /* Table row with hover */

Animation Classes

/* Brand animations */
.animate-pulse-brand  /* Pulsing brand opacity */
.animate-heartbeat    /* Heartbeat scale animation */

/* Toast animations */
.toast-enter-top      /* Slide in from top */
.toast-exit-top       /* Slide out to top */
.toast-enter-bottom   /* Slide in from bottom */
.toast-exit-bottom    /* Slide out to bottom */
.toast-enter-right    /* Slide in from right */
.toast-exit-right     /* Slide out to right */

Utility Functions

cn() - Class Name Merger

Combines clsx and tailwind-merge for conditional class names:

import { cn } from "@elcto/ui/utils";

<button className={cn(
  "btn-brand",
  isDisabled && "opacity-50 cursor-not-allowed",
  className
)}>
  Click me
</button>

Dark Mode

The design system is optimized for dark mode. All tokens are designed for dark backgrounds. Light mode is not currently supported.

Tailwind Integration

The tokens are designed to work seamlessly with Tailwind CSS. Use CSS variables in your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: 'var(--brand)',
        'brand-hover': 'var(--brand-hover)',
      },
      backgroundColor: {
        base: 'var(--bg-base)',
        card: 'var(--bg-card)',
      },
    },
  },
};

Or use arbitrary values directly:

<div class="bg-[var(--bg-card)] text-[var(--text-primary)]">
  Content
</div>