Engineering tokens
Structured constants that can power any VibeIRL surface.
The token file is the canonical source of truth for color, gradient, blur, shadow, stroke, typography, spacing, and radii. Use these values directly in components or transform them into package-level design tokens later.
Theme source
/lib/tokens/theme.ts
Categories
8 token groups
Runtime hook
CSS variables injected globally
Theme architecture
One source of truth, two consumption paths.
The app consumes the same theme through both TypeScript imports and runtime CSS variables. That gives engineers ergonomic access in component logic while still allowing semantic Tailwind classes to point at the exact same values.
TypeScript access
Import `vibeTokens` anywhere you need typed values or token-driven component recipes.
CSS variable access
Runtime variables make the same values available inside Tailwind extensions and raw CSS.
import { vibeTokens } from '@/lib/tokens/theme';
export function getPanelRecipe() {
return {
radius: vibeTokens.radii.lg,
fill: vibeTokens.colors.glass.surface,
border: vibeTokens.stroke.standard,
shadow: vibeTokens.shadows.panel,
glow: vibeTokens.gradients.neonBeam
};
}Colors
4 entries| Token | Value | Usage |
|---|---|---|
| background.base | #040713 | Primary cosmic canvas |
| glass.surface | rgba(11, 16, 33, 0.46) | Default panel fill |
| accent.magenta | #ff4fd8 | Hot-path glow |
| status.success | #20d68f | Positive state |
Gradients
3 entries| Token | Value | Usage |
|---|---|---|
| gradients.aurora | Aurora spectrum | Primary hero gradient |
| gradients.prism | Cool spectrum | Charts and secondary cards |
| gradients.neonBeam | Action beam | Buttons and pills |
Spacing / Radii
4 entries| Token | Value | Usage |
|---|---|---|
| spacing.md | 1rem | Default internal spacing |
| spacing.xl | 2rem | Section padding |
| radii.md | 20px | Inputs and row elements |
| radii.lg | 28px | Cards and widgets |
Blur / Shadows / Stroke
4 entries| Token | Value | Usage |
|---|---|---|
| blur.md | 20px | Standard glass blur |
| shadows.panel | Panel shadow recipe | Depth + top specular |
| shadows.neon | Neon shadow recipe | Action glow |
| stroke.standard | 1px solid rgba(185, 214, 255, 0.22) | Main glass outline |