Skip to main content
Design tokens are the fundamental building blocks of the Conty Design System. They provide a consistent, scalable way to manage design decisions across platforms and frameworks.

​
Philosophy

Conty’s token system is built on three core principles:
  1. Semantic Naming - Tokens describe purpose, not appearance
  2. Cross-Platform Support - Tokens work in CSS, JavaScript, and native platforms
  3. Theme-Aware - All tokens automatically adapt to light and dark modes

​
Token Architecture

Conty uses a three-layer token architecture that promotes maintainability and consistency:
1

Core Tokens

Raw values defined in OKLCH color space and rem units. These are the primitive values that never change based on context.
oklch(0.6248 0.2042 257.0818) // A specific blue color
0.25rem // A specific spacing value
2

Semantic Tokens

Purpose-driven tokens that reference core tokens. These describe intent rather than appearance.
semanticTokens.color.brand.primary
semanticTokens.space[4]
semanticTokens.typography.text.base
3

Component Tokens

Component-specific tokens that consume semantic tokens, mapped to CSS custom properties.
--color-primary: var(--primary)
--color-border: var(--border)

​
Token Categories

Conty organizes tokens into logical categories:

Colors

Surface, text, brand, border, and status colors with OKLCH support

Spacing

Consistent spacing scale using rem units for accessibility

Typography

Font families, text sizes, and type scale definitions

Theming

Light/dark mode implementation and custom theme creation

​
Why OKLCH?

Conty uses the OKLCH color space for several advantages:
  • Perceptually Uniform - Equal changes in values result in equal visual differences
  • Wider Gamut - Access to more vibrant colors on modern displays
  • Predictable Lightness - Lightness values directly correspond to perceived brightness
  • Better Accessibility - Easier to maintain WCAG contrast ratios
OKLCH is supported in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+). For older browsers, Conty provides fallback values.

​
Usage

Tokens can be accessed in multiple ways depending on your use case:
Import tokens directly from the package:
import { semanticTokens, colors, spacing } from '@conty/tokens'

// Use semantic tokens (recommended)
const primaryColor = semanticTokens.color.brand.primary
const baseSpacing = semanticTokens.space[4]

// Use legacy aliases for compatibility
const background = colors.background
const mediumSpace = spacing.md

​
Semantic vs Legacy Tokens

Conty provides both semantic tokens (recommended) and legacy aliases for backward compatibility: 
// Semantic (recommended) - describes purpose
semanticTokens.color.brand.primary
semanticTokens.color.text.default
semanticTokens.space[4]

// Legacy aliases - maintained for compatibility
colors.primary
colors.foreground
spacing.md
New projects should use semantic tokens. Legacy aliases are maintained for teams migrating from older versions.

​
Migration Guide

If you’re using legacy token paths, migrate to semantic tokens: 
import { colors, spacing } from '@conty/tokens'

const buttonStyle = {
  backgroundColor: colors.primary,
  color: colors.primaryForeground,
  padding: spacing.md
}

​
Next Steps

Explore Color Tokens

Learn about surface, text, brand, border, and status colors

Understand Spacing

Master the spacing scale and layout tokens

Typography System

Discover font families and text size tokens

Theme Configuration

Set up light/dark modes and create custom themes

Build docs developers (and LLMs) love

Get started for freeTalk to us