Design Tokens
Relevant source files
The following files were used as context for generating this wiki page:
Design Tokens are the foundational atoms of the PCSTYLE design system. They represent the small, reusable values used to build consistent user interfaces across the library, covering typography, spacing, border radii, and transitions. These tokens ensure that visual styles remain synchronized and maintainable across both "cyber" and "minimal" theme modes.
The system utilizes a central tokens object for layout-related constants and a specialized colors object to manage theme-specific palettes. These tokens are consumed by components and injected into the DOM as CSS variables via the UIProvider.
Sources: src/theme/tokens.ts, src/theme/colors.ts, src/provider/index.tsx:32-41
Core Token Architecture
The design system architecture separates static layout tokens (typography, spacing) from dynamic, themeable tokens (colors). Static tokens are defined as a TypeScript object, while theme-specific colors are selected based on the active ThemeMode.
The following diagram illustrates how tokens flow from definitions into the application environment.
This diagram shows the distribution of static tokens directly to components and the processing of color tokens through the UIProvider to create CSS variables.
Sources: src/theme/tokens.ts:5-60, src/theme/colors.ts:5-35, src/provider/index.tsx:28-44
Typography and Spacing
Typography tokens define the font families, sizes, weights, and letter spacings. The system prioritizes a "mono" aesthetic for the cyber theme and a "sans" aesthetic for the minimal theme, though both options are available through the token set.
Typography Scales
| Token Group | Values / Keys | Description |
|---|---|---|
| Font Family | mono, sans | Includes "JetBrains Mono" and "Inter". |
| Font Size | xs to 4xl | Rem-based scale from 0.75rem to 2.25rem. |
| Font Weight | 400, 500, 700, 900 | Normal, Medium, Bold, and Black. |
| Letter Spacing | tight, normal, wide, widest | Em-based scale for specialized tracking. |
Sources: src/theme/tokens.ts:7-35
Layout and Motion
The spacing and radii tokens follow a numeric or t-shirt size scale to ensure consistency in padding, margins, and corner rounding.
- Spacing: A numeric scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16) where 1 unit equals
0.25rem. - Radii: Defines corner rounding from
none(0) tofull(9999px). Components likeBadgeusefullfor minimal styles butnonefor cyber styles. - Transitions: Uses
cubic-bezier(0.4, 0, 0.2, 1)forfast,normal, andslowdurations.
Sources: src/theme/tokens.ts:36-59, src/components/feedback/Badge.tsx:25-29
Color Systems and Theming
The system supports two primary modes: cyber and minimal. These are defined in src/theme/colors.ts and managed by the UIProvider.
Theme-Specific Palettes
| Token | Cyber (Aggressive) | Minimal (Clean) |
|---|---|---|
| Primary | #ff00ff (Neon Pink) | #0a0a0a |
| Secondary | #00ffff (Cyan) | #666666 |
| Background | #000000 | #ffffff |
| Success | #00ff00 | #10b981 |
| Error | #ff0000 | #ef4444 |
Sources: src/theme/colors.ts:7-35
Token Application Logic
Components implement tokens conditionally based on the active theme. The UIProvider synchronizes these values to the document root as CSS variables prefixed with --pc-.
This sequence shows how the UIProvider updates both the React context state and the global CSS environment when a theme change occurs.
Sources: src/provider/index.tsx:23-41, src/components/buttons/Button.tsx:25-50
Component Implementation
Design tokens are consumed within components to determine styles. In many cases, components define local style maps that reference the visual intent of the tokens.
Example: Button Variant Logic
The Button component maps its variant prop to specific hex values or Tailwind classes derived from the token philosophy.
const cyberStyles = {
primary: "bg-[#ff00ff] text-black font-black hover:shadow-[0_0_20px_#ff00ffaa]",
secondary: "bg-[#00ffff] text-black font-black hover:shadow-[0_0_20px_#00ffffaa]",
outline: "bg-transparent text-[#ff00ff] border border-[#ff00ff]/40",
};
Sources: src/components/buttons/Button.tsx:38-42
Input and Feedback Tokens
Components like Input and Badge utilize typography tokens (like font-mono) and color tokens for error states and focus rings.
- Input: Uses
text-[10px]andtracking-widestfor labels, andborder-[#ff00ff]/20for its cyber variant. - Badge: Uses
text-[9px]andfont-blackfor an aggressive uppercase look.
Sources: src/components/forms/Input.tsx:27-29, src/components/feedback/Badge.tsx:17-17
Conclusion
The Design Token system in @pcstyle/ui provides a structured way to manage the visual language of the library. By centralizing values for typography, spacing, and color, and distributing them through a React-aware provider, the system achieves a high degree of flexibility, enabling complex visual effects like neon glows and CRT scanlines to coexist with clean, minimal layouts.
Sources: src/provider/index.tsx, src/theme/tokens.ts, src/effects/crt-overlay.tsx