Export / copy tools
Lift the system directly into product code.
This page is optimized for engineers who want to reuse the style guide immediately. Each block below is copy-ready: CSS variables, Tailwind extension, TypeScript tokens, and example markup for a token-driven glass panel.
Snippets
4 copy blocks
Output style
Ready to paste
Audience
Engineers + design tooling
Reuse flows
Choose the output that matches your integration path.
If you are styling in raw CSS, start with variables. If you are building app primitives with Tailwind, copy the extension snippet. If you are wiring a shared token package, use the TypeScript object.
Variables first
Best when you need cross-framework compatibility or a design-token package.
Tailwind extension
Best when your product team wants semantic utility classes immediately.
Component markup
Best when you need a working reference for glass panels or new components.
Markdown export
Generate a readable handoff document from the live stylizer state.
The export includes design philosophy, runtime tokens, stroke and glow rules, eyebrow label guidance, component recipes, mobile heuristics, and the current CSS Lab values for AI training or engineering handoff.
Export source
Draft theme
Captures the values currently tuned in CSS Lab, including opacity, stroke width, glow radius, motion speed, and eyebrow tint.
Applied shell
Records whether Theme Repaint is ON, so the document explains whether draft values are global or only local to the lab preview.
# VibeIRL UI Stylizer Export
Generated:
## Design Philosophy
VibeIRL uses a premium neon-glass system: translucent surfaces over animated ambient light, thin luminous strokes, restrained bloom, readable typography, and subtle state-driven motion. Depth comes first, glow second.
## Application Routes
- Overview: `/`
- Color System: `/color-system`
- Glass Construction: `/glass-guide`
- Typography: `/typography`
- Stroke Lab: `/animated-strokes`
- Components: `/components`
- CSS Lab: `/css-lab`
- Vibe Layer / Vibe Response Lab: `/vibe-layer`
- Mobile Reference: `/mobile-reference`
- Engineering Tokens: `/engineering-tokens`
- Flutter Exporter: `/flutter-exporter`
- Export Tools: `/export-tools`
## Vibe Layer
The Vibe Layer keeps neutral glass and readable content as the foundation, then introduces emotion through ambient aura, low-opacity glass tint, thin edge accents, localized bloom, and interactive emphasis. It does not indiscriminately recolor text, every card, or the full environment.
- Selected vibe: Curious
- Appearance: Dark glass
- Influence intensity: 50%
- Scope: Local preview
- Enabled: yes
- Background mode: environment
- Blend mode: soft-light
- Custom primary: preset value
- Custom secondary: preset value
- Custom accent: preset value
### Vibe Presets
- Chill: Calm, relaxed, soft Primary #6ed6ff, secondary #8af5d0, accent #7fa8ff.
- Hype: Energetic, bold, vivid Primary #ff6ec7, secondary #9d6cff, accent #ff3fa4.
- Curious: Intrigued, playful, bright Primary #ffd866, secondary #ff9a4d, accent #b974ff.
- Family: Warm, caring, inviting Primary #6fe0a7, secondary #a78bfa, accent #75e6d1.
### Background Contrast Controls
- Environment, solid, or gradient base
- Linear or radial gradient with up to four stops
- Per-stop color, position, and opacity
- Vibe wash visibility and environment-base intensity
- Dark/Light appearance switch without a split-screen comparison
### Vibe Influence Controls
- Ambient aura: 14%
- Glass tint: 10%
- Stroke accent: 28%
- Interactive glow: 30%
- Localized bloom: 42%
- Bloom radius: 58px
- Surface radius: inherited from the shared glass token
- Transition duration: 510ms
### Component Response Rules
- Profile rings, selected tabs, map highlights, CTA emphasis, messages, and notifications may use the active vibe.
- Long copy zones, primary text, and dense neutral surfaces stay readable and mostly neutral.
- Stroke Lab may import the active Vibe palette only after explicit confirmation; positions and per-stop opacity remain intact.
## Global Theme Tokens
Theme Repaint: OFF - global shell is using the baseline theme
Current applied environment: Aurora
Current draft environment: Aurora
- `--vibe-colors-accent-magenta`: `#ff62cf`
- `--vibe-colors-accent-purple`: `#be92e1`
- `--vibe-colors-accent-cyan`: `#53dfff`
- `--vibe-colors-accent-blue`: `#7cdcda`
- `--vibe-colors-accent-gold`: `#ffd166`
- `--vibe-colors-accent-green`: `#40eaca`
- `--vibe-colors-glass-surface`: `linear-gradient(165deg, rgba(255,255,255, 0.116) 0%, rgba(255,255,255, 0.032) 12%, rgba(255, 98, 207, 0.013) 18%, rgba(18, 24, 48, 0.127) 44%, rgba(7, 10, 24, 0.198) 100%)`
- `--vibe-colors-glass-elevated`: `linear-gradient(160deg, rgba(255,255,255, 0.130) 0%, rgba(190, 146, 225, 0.017) 16%, rgba(83, 223, 255, 0.011) 38%, rgba(16, 22, 42, 0.154) 62%, rgba(6, 9, 20, 0.222) 100%)`
- `--vibe-colors-glass-overlay`: `radial-gradient(circle at 14% 10%, rgba(255, 98, 207, 0.021) 0%, transparent 24%), radial-gradient(circle at 84% 18%, rgba(83, 223, 255, 0.018) 0%, transparent 20%), radial-gradient(circle at 68% 92%, rgba(255, 209, 102, 0.015) 0%, transparent 18%)`
- `--vibe-colors-glass-border`: `rgba(255, 255, 255, 0.187)`
- `--vibe-colors-glass-borderStrong`: `rgba(255, 255, 255, 0.306)`
- `--vibe-colors-glass-highlight`: `rgba(255, 255, 255, 0.269)`
- `--vibe-gradients-aurora`: `linear-gradient(135deg, rgba(255, 98, 207, 0.760) 0%, rgba(190, 146, 225, 0.700) 28%, rgba(83, 223, 255, 0.780) 58%, rgba(255, 209, 102, 0.680) 100%)`
- `--vibe-gradients-prism`: `linear-gradient(135deg, rgba(64, 234, 202, 0.720) 0%, rgba(83, 223, 255, 0.800) 34%, rgba(124, 220, 218, 0.820) 64%, rgba(190, 146, 225, 0.740) 100%)`
- `--vibe-gradients-neon-beam`: `linear-gradient(90deg, rgba(255, 98, 207, 0.840) 0%, rgba(83, 223, 255, 0.880) 48%, rgba(255, 209, 102, 0.840) 100%)`
- `--vibe-gradients-emotion-loop`: `conic-gradient(from 210deg, rgba(255, 98, 207, 0.840), rgba(190, 146, 225, 0.800), rgba(83, 223, 255, 0.880), rgba(255, 209, 102, 0.800), rgba(64, 234, 202, 0.760), rgba(255, 98, 207, 0.840))`
- `--vibe-gradients-notification-arc`: `linear-gradient(90deg, rgba(255, 209, 102, 0.840) 0%, rgba(83, 223, 255, 0.900) 34%, rgba(255, 98, 207, 0.820) 100%)`
- `--vibe-gradients-cosmic-wash`: `radial-gradient(circle at 14% 18%, rgba(255, 98, 207, 0.179) 0%, transparent 28%), radial-gradient(circle at 84% 16%, rgba(83, 223, 255, 0.160) 0%, transparent 24%), radial-gradient(circle at 56% 84%, rgba(255, 209, 102, 0.102) 0%, transparent 20%), radial-gradient(circle at 34% 72%, rgba(255,255,255,0.06), transparent 16%), linear-gradient(180deg, rgba(5,8,22,0.98) 0%, rgba(4,6,18,1) 40%, rgba(2,4,12,1) 100%)`
- `--vibe-shadows-panel`: `0 24px 66px rgba(2, 5, 16, 0.48), 0 10px 30px rgba(2,5,16,0.26), 0 0 20px rgba(83, 223, 255, 0.085), inset 0 1px 0 rgba(255,255,255,0.159)`
- `--vibe-shadows-bloom`: `0 0 0 1px rgba(255,255,255,0.06), 0 0 37px rgba(255, 98, 207, 0.142), 0 0 48px rgba(83, 223, 255, 0.122), 0 20px 66px rgba(2,5,16,0.3)`
- `--vibe-shadows-neon`: `0 0 16px rgba(83, 223, 255, 0.182), 0 0 24px rgba(255, 98, 207, 0.162), 0 14px 38px rgba(14,18,38,0.28)`
- `--vibe-radii-md`: `20px`
- `--vibe-radii-lg`: `28px`
- `--vibe-radii-xl`: `36px`
- `--vibe-blur-md`: `20px`
- `--vibe-blur-bloom`: `72px`
- `--vibe-motion-orbit`: `11.12s`
- `--vibe-motion-pulse`: `4.12s`
- `--vibe-motion-notification`: `2.10s`
- `--vibe-runtime-motion-background`: `14.48s`
- `--vibe-runtime-stroke-orbit`: `7.84s`
- `--vibe-runtime-stroke-sweep`: `3.87s`
- `--vibe-runtime-stroke-notification`: `1.94s`
- `--vibe-runtime-panel-surface-soft`: `rgba(255,255,255, 0.034)`
- `--vibe-runtime-panel-surface-raised`: `linear-gradient(180deg, rgba(255,255,255, 0.075), rgba(255,255,255, 0.020) 100%)`
- `--vibe-runtime-panel-border-soft`: `rgba(255,255,255, 0.158)`
- `--vibe-runtime-panel-border-bright`: `rgba(255,255,255, 0.257)`
- `--vibe-runtime-panel-border-accent`: `rgba(169, 161, 231, 0.225)`
- `--vibe-runtime-panel-highlight`: `linear-gradient(180deg, rgba(255,255,255, 0.147), rgba(255,255,255, 0.011) 24%, transparent 56%)`
- `--vibe-runtime-panel-bloom`: `radial-gradient(circle at 16% 12%, rgba(255, 98, 207, 0.085) 0%, transparent 28%), radial-gradient(circle at 84% 18%, rgba(83, 223, 255, 0.085) 0%, transparent 24%), radial-gradient(circle at 68% 88%, rgba(255, 209, 102, 0.057) 0%, transparent 18%)`
- `--vibe-runtime-border-glow-radius`: `34px`
- `--vibe-runtime-border-glow-shadow`: `0 0 14px rgba(255, 98, 207, 0.077), 0 0 21px rgba(83, 223, 255, 0.071), 0 0 16px rgba(255, 209, 102, 0.042)`
- `--vibe-runtime-stroke-width`: `1.2px`
- `--vibe-runtime-stroke-visibility`: `0.660`
- `--vibe-runtime-opacity`: `0.340`
- `--vibe-runtime-glow-intensity`: `0.420`
- `--vibe-runtime-border-glow`: `0.480`
- `--vibe-runtime-tint-strength`: `0.180`
- `--vibe-runtime-highlight-strength`: `0.420`
- `--vibe-runtime-eyebrow-color`: `#c0e0f9`
- `--vibe-runtime-eyebrow-shadow`: `0 0 13px rgba(83, 223, 255, 0.128), 0 0 14px rgba(255, 98, 207, 0.083)`
- `--vibe-runtime-eyebrow-tint`: `0.440`
## Surface Rules
- Use translucent glass fills, never opaque slabs.
- Preserve visible background light through cards.
- Keep panel blur tied to `--vibe-blur-md`.
- Use `--vibe-runtime-panel-surface-soft` for nested controls and dense rows.
- Use `--vibe-runtime-panel-surface-raised` for card interiors that need extra readability.
## Stroke and Glow Rules
- Stroke width comes from `--vibe-runtime-stroke-width`.
- Border glow intensity comes from `--vibe-runtime-border-glow`.
- Border glow radius comes from `--vibe-runtime-border-glow-radius`.
- Animated stroke visibility comes from `--vibe-runtime-stroke-visibility`.
- Stroke color is derived from Gradient A/B/C through the shared emotion-loop gradient.
- Keep animated strokes for selected, hover, notification, avatar, and hero states.
## Environment Rules
- Supported background modes: Aurora, Swirl, Shift, Coalesce, Pipeline.
- All environment modes are Canvas 2D ambient backgrounds.
- Motion speed should affect the active background timing without changing the app layout.
- Backgrounds should sit behind glass UI and never intercept pointer events.
## Typography and Eyebrow Labels
- Primary font family: var(--font-display-loaded), "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif
- Body font family: var(--font-body-loaded), "IBM Plex Sans", "Segoe UI", sans-serif
- Eyebrow labels use small uppercase text, wide tracking, and `--vibe-runtime-eyebrow-color`.
- Eyebrow labels should be visibly tinted but never brighter than primary headings.
## Component Recipes
- Pink -> cyan button: primary social action.
- Magenta -> gold button: review, swap, or decision action.
- Cyan -> violet button: navigation or exploratory action.
- Teal -> lime button: success or confirmation action.
- Outline glow button: secondary action with perimeter emphasis.
- Soft ghost glass button: low-emphasis cancellation or dismissal.
- Cyan card glow: analytics and chart containers.
- Pink card glow: notifications, hover cards, and unread states.
- Gold card glow: review and warning panels.
- Token rows should stay calmer than cards so stacked lists remain readable.
- Modal samples may use stronger bloom and inner highlight because they isolate focus.
## Mobile UI Heuristics
- Use realistic phone proportions and consistent bezels.
- Keep hero balance surfaces and primary actions brightest.
- Keep token rows, tab bars, and activity cells calmer than CTAs.
- Reduce glow density on small screens so text and icons stay crisp.
- Pin bottom navigation and keep safe-area spacing consistent.
## Current CSS Lab Values
- Environment: Aurora
- Radius: 28px
- Blur: 22px
- Stroke width: 1.4px
- Border glow intensity: 62%
- Border glow radius: 42px
- Animated stroke speed: 52% (3.38s sweep)
- Animated stroke visibility: 76%
- Glass opacity: 40%
- Tint strength: 24%
- Inner highlight: 54%
- Eyebrow label tint: 58%
- Motion speed: 48% (12.72s background timing)
- Gradient A: #ff56d6
- Gradient B: #46e3ff
- Gradient C: #ffd166
## Engineering Notes
- Runtime path: CSS Lab controls -> draft theme -> runtime CSS variables -> shared UI primitives.
- Global repaint ON applies draft variables to the app shell.
- Global repaint OFF restores baseline variables while the CSS Lab preview can still use draft values.
- Vibe path: preset/custom colors -> versioned Vibe runtime state -> local preview variables -> optional global variables.
- Vibe persistence uses a versioned local-storage payload so future schemas can migrate safely.
- Export this document when handing off recipes to another engineer, designer, or AI agent.
## Flutter Export System
- Compatibility profiles: Legacy Vibe App (Flutter 3.7.12 / Dart 2.19.6) and Modern Flutter.
- Core output is zero-dependency and uses ChangeNotifier/InheritedNotifier; optional state adapters are additive.
- Full kits are modular by theme, vibe, glass, stroke, components, screens, and demo files.
- Dark and Light are distinct recipes rather than color inversion.
## Figma Export System
- **VibeIRL Core** collection contains Dark/Light appearance modes.
- **VibeIRL Vibes** collection contains Chill/Hype/Curious/Family modes.
- Primitive values export as variables; gradients, layered shadows, Canvas environments, and animated strokes export as named recipes.
- The recommended import path is a local Figma plugin. Writable Variables REST access is not assumed.
## Known Platform Differences
- Web: CSS masks, backdrop filters, Canvas environments, and blend stacks are first-class.
- Flutter: glass maps to BackdropFilter/ImageFilter.blur; gradient strokes use decorated wrappers or a focused CustomPainter.
- Figma: primitive variables map directly, while dynamic effects require paints, effect styles, or recipe documentation.
Figma export
Export variables, modes, and complex-effect recipes without flattening the Vibe system.
Appearance and Vibe modes stay in separate collections. Primitive values map to variables; gradients, layered bloom, Canvas environments, and animated strokes remain structured recipes for a local plugin.
Core Variables
VibeIRL Core primitive variables and current runtime values.
{
"schemaVersion": 1,
"collection": "VibeIRL Core",
"modes": [
"Dark",
"Light"
],
"variables": {
"color": {
"background": {
"base": "#040713",
"canvas": "#091126",
"aurora": "#121739",
"haze": "#0e2244"
},
"glass": {
"surface": "rgba(11, 16, 33, 0.46)",
"elevated": "rgba(14, 20, 40, 0.58)",
"overlay": "rgba(146, 123, 255, 0.08)",
"border": "rgba(205, 225, 255, 0.16)",
"borderStrong": "rgba(255, 255, 255, 0.26)",
"highlight": "rgba(255, 255, 255, 0.26)"
},
"text": {
"primary": "#f7f8ff",
"secondary": "#d2dcff",
"tertiary": "#9db1e5",
"muted": "#7087b6",
"icon": "#e5ecff"
},
"accent": {
"magenta": "#ff4fd8",
"purple": "#9a68ff",
"cyan": "#3fe8ff",
"blue": "#4d82ff",
"gold": "#ffd166",
"green": "#32f2a4"
},
"status": {
"success": "#20d68f",
"warning": "#ffba57",
"danger": "#ff657e",
"info": "#53b7ff"
}
},
"radius": {
"card": "28px",
"panel": "34px",
"pill": "999px"
},
"blur": {
"sm": "14px",
"md": "22px",
"lg": "36px"
},
"stroke": {
"width": "1.4px",
"visibility": 0.76,
"glowIntensity": 0.62,
"glowRadius": "42px"
},
"opacity": {
"glass": 0.4,
"tint": 0.24,
"highlight": 0.54
},
"motion": {
"environmentSpeed": 0.48,
"strokeSpeed": 0.52
},
"typography": {
"display": "var(--font-display-loaded), \"SF Pro Display\", \"Avenir Next\", \"Segoe UI\", sans-serif",
"body": "var(--font-body-loaded), \"IBM Plex Sans\", \"Segoe UI\", sans-serif",
"mono": "var(--font-mono-loaded), \"SFMono-Regular\", monospace"
}
}
}Workflow note: The exporter intentionally recommends a local Figma plugin importer. Writable Variables REST access is not assumed because availability can depend on plan and permissions.
CSS Variables
Drop the full variable sheet into a global stylesheet or design token package.
CSS Variables
:root {
--vibe-fonts-display: var(--font-display-loaded), "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
--vibe-fonts-body: var(--font-body-loaded), "IBM Plex Sans", "Segoe UI", sans-serif;
--vibe-fonts-mono: var(--font-mono-loaded), "SFMono-Regular", monospace;
--vibe-colors-background-base: #040713;
--vibe-colors-background-canvas: #091126;
--vibe-colors-background-aurora: #121739;
--vibe-colors-background-haze: #0e2244;
--vibe-colors-glass-surface: rgba(11, 16, 33, 0.46);
--vibe-colors-glass-elevated: rgba(14, 20, 40, 0.58);
--vibe-colors-glass-overlay: rgba(146, 123, 255, 0.08);
--vibe-colors-glass-border: rgba(205, 225, 255, 0.16);
--vibe-colors-glass-border-strong: rgba(255, 255, 255, 0.26);
--vibe-colors-glass-highlight: rgba(255, 255, 255, 0.26);
--vibe-colors-text-primary: #f7f8ff;
--vibe-colors-text-secondary: #d2dcff;
--vibe-colors-text-tertiary: #9db1e5;
--vibe-colors-text-muted: #7087b6;
--vibe-colors-text-icon: #e5ecff;
--vibe-colors-accent-magenta: #ff4fd8;
--vibe-colors-accent-purple: #9a68ff;
--vibe-colors-accent-cyan: #3fe8ff;
--vibe-colors-accent-blue: #4d82ff;
--vibe-colors-accent-gold: #ffd166;
--vibe-colors-accent-green: #32f2a4;
--vibe-colors-status-success: #20d68f;
--vibe-colors-status-warning: #ffba57;
--vibe-colors-status-danger: #ff657e;
--vibe-colors-status-info: #53b7ff;
--vibe-gradients-aurora: linear-gradient(135deg, rgba(255,79,216,0.92) 0%, rgba(154,104,255,0.88) 32%, rgba(63,232,255,0.95) 64%, rgba(255,209,102,0.9) 100%);
--vibe-gradients-prism: linear-gradient(135deg, rgba(52,242,164,0.9) 0%, rgba(63,232,255,0.88) 34%, rgba(77,130,255,0.9) 68%, rgba(154,104,255,0.92) 100%);
--vibe-gradients-neon-beam: linear-gradient(90deg, rgba(255,79,216,0.92) 0%, rgba(63,232,255,0.98) 46%, rgba(255,209,102,0.92) 100%);
--vibe-gradients-emotion-loop: conic-gradient(from 180deg, rgba(255,79,216,0.98), rgba(154,104,255,0.96), rgba(63,232,255,0.98), rgba(255,209,102,0.94), rgba(50,242,164,0.92), rgba(255,79,216,0.98));
--vibe-gradients-notification-arc: linear-gradient(90deg, rgba(50,242,164,0.95) 0%, rgba(63,232,255,0.92) 32%, rgba(154,104,255,0.96) 68%, rgba(255,79,216,0.96) 100%);
--vibe-gradients-cosmic-wash: radial-gradient(circle at 18% 18%, rgba(255,79,216,0.28), transparent 38%), radial-gradient(circle at 82% 12%, rgba(63,232,255,0.22), transparent 34%), radial-gradient(circle at 50% 84%, rgba(255,209,102,0.16), transparent 28%), linear-gradient(180deg, rgba(10,16,36,0.96) 0%, rgba(6,8,22,1) 100%);
--vibe-gradients-success: linear-gradient(135deg, rgba(32,214,143,0.9) 0%, rgba(83,183,255,0.92) 100%);
--vibe-font-sizes-xs: 0.75rem;
--vibe-font-sizes-sm: 0.875rem;
--vibe-font-sizes-base: 1rem;
--vibe-font-sizes-lg: 1.125rem;
--vibe-font-sizes-xl: 1.375rem;
--vibe-font-sizes-2xl: 1.75rem;
--vibe-font-sizes-3xl: 2.5rem;
--vibe-font-sizes-4xl: 3.5rem;
--vibe-spacing-2xs: 0.25rem;
--vibe-spacing-xs: 0.5rem;
--vibe-spacing-sm: 0.75rem;
--vibe-spacing-md: 1rem;
--vibe-spacing-lg: 1.5rem;
--vibe-spacing-xl: 2rem;
--vibe-spacing-2xl: 3rem;
--vibe-radii-sm: 14px;
--vibe-radii-md: 20px;
--vibe-radii-lg: 28px;
--vibe-radii-xl: 36px;
--vibe-radii-pill: 999px;
--vibe-blur-sm: 10px;
--vibe-blur-md: 20px;
--vibe-blur-lg: 30px;
--vibe-blur-bloom: 48px;
--vibe-shadows-panel: 0 22px 54px rgba(2, 5, 16, 0.48), 0 8px 22px rgba(2, 5, 16, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
--vibe-shadows-bloom: 0 0 0 1px rgba(255,255,255,0.06), 0 18px 62px rgba(77,130,255,0.16), 0 0 38px rgba(255,79,216,0.14);
--vibe-shadows-neon: 0 0 18px rgba(63,232,255,0.22), 0 0 28px rgba(255,79,216,0.18), 0 12px 34px rgba(14,18,38,0.42);
--vibe-shadows-inset: inset 0 1px 0 rgba(255,255,255,0.18);
--vibe-stroke-subtle: 1px solid rgba(185, 214, 255, 0.12);
--vibe-stroke-standard: 1px solid rgba(185, 214, 255, 0.22);
--vibe-stroke-emphasis: 1.5px solid rgba(255, 255, 255, 0.28);
--vibe-stroke-animated: 1.5px solid rgba(255,255,255,0.22);
--vibe-motion-fast: 160ms;
--vibe-motion-base: 220ms;
--vibe-motion-slow: 320ms;
--vibe-motion-orbit: 7.8s;
--vibe-motion-pulse: 2.8s;
--vibe-motion-notification: 1.8s;
--font-display: var(--font-display-loaded), "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
--font-body: var(--font-body-loaded), "IBM Plex Sans", "Segoe UI", sans-serif;
--font-mono: var(--font-mono-loaded), "SFMono-Regular", monospace;
}Tailwind Extension
Extend Tailwind with semantic names that point at the centralized variables.
Tailwind Extension
extend: {
colors: {
cosmic: {
bg: 'var(--vibe-colors-background-base)',
panel: 'var(--vibe-colors-glass-surface)',
border: 'var(--vibe-colors-glass-border)',
text: 'var(--vibe-colors-text-primary)'
}
},
backgroundImage: {
aurora: 'var(--vibe-gradients-aurora)',
prism: 'var(--vibe-gradients-prism)',
beam: 'var(--vibe-gradients-neon-beam)',
emotion: 'var(--vibe-gradients-emotion-loop)',
notify: 'var(--vibe-gradients-notification-arc)'
},
boxShadow: {
panel: 'var(--vibe-shadows-panel)',
bloom: 'var(--vibe-shadows-bloom)',
neon: 'var(--vibe-shadows-neon)'
},
borderRadius: {
glass: 'var(--vibe-radii-lg)',
panel: 'var(--vibe-radii-xl)',
pill: 'var(--vibe-radii-pill)'
},
backdropBlur: {
glass: 'var(--vibe-blur-md)'
}
}TypeScript Token Object
Import this constant into app code, design tooling, or token transformation scripts.
TypeScript Token Object
export const vibeTokens = {
meta: {
name: "VibeIRL UI Stylizer",
style: "Neon glassmorphism",
version: "1.0.0"
},
fonts: {
display: "var(--font-display-loaded), \"SF Pro Display\", \"Avenir Next\", \"Segoe UI\", sans-serif",
body: "var(--font-body-loaded), \"IBM Plex Sans\", \"Segoe UI\", sans-serif",
mono: "var(--font-mono-loaded), \"SFMono-Regular\", monospace"
},
colors: {
background: {
base: "#040713",
canvas: "#091126",
aurora: "#121739",
haze: "#0e2244"
},
glass: {
surface: "rgba(11, 16, 33, 0.46)",
elevated: "rgba(14, 20, 40, 0.58)",
overlay: "rgba(146, 123, 255, 0.08)",
border: "rgba(205, 225, 255, 0.16)",
borderStrong: "rgba(255, 255, 255, 0.26)",
highlight: "rgba(255, 255, 255, 0.26)"
},
text: {
primary: "#f7f8ff",
secondary: "#d2dcff",
tertiary: "#9db1e5",
muted: "#7087b6",
icon: "#e5ecff"
},
accent: {
magenta: "#ff4fd8",
purple: "#9a68ff",
cyan: "#3fe8ff",
blue: "#4d82ff",
gold: "#ffd166",
green: "#32f2a4"
},
status: {
success: "#20d68f",
warning: "#ffba57",
danger: "#ff657e",
info: "#53b7ff"
}
},
gradients: {
aurora: "linear-gradient(135deg, rgba(255,79,216,0.92) 0%, rgba(154,104,255,0.88) 32%, rgba(63,232,255,0.95) 64%, rgba(255,209,102,0.9) 100%)",
prism: "linear-gradient(135deg, rgba(52,242,164,0.9) 0%, rgba(63,232,255,0.88) 34%, rgba(77,130,255,0.9) 68%, rgba(154,104,255,0.92) 100%)",
neonBeam: "linear-gradient(90deg, rgba(255,79,216,0.92) 0%, rgba(63,232,255,0.98) 46%, rgba(255,209,102,0.92) 100%)",
emotionLoop: "conic-gradient(from 180deg, rgba(255,79,216,0.98), rgba(154,104,255,0.96), rgba(63,232,255,0.98), rgba(255,209,102,0.94), rgba(50,242,164,0.92), rgba(255,79,216,0.98))",
notificationArc: "linear-gradient(90deg, rgba(50,242,164,0.95) 0%, rgba(63,232,255,0.92) 32%, rgba(154,104,255,0.96) 68%, rgba(255,79,216,0.96) 100%)",
cosmicWash: "radial-gradient(circle at 18% 18%, rgba(255,79,216,0.28), transparent 38%), radial-gradient(circle at 82% 12%, rgba(63,232,255,0.22), transparent 34%), radial-gradient(circle at 50% 84%, rgba(255,209,102,0.16), transparent 28%), linear-gradient(180deg, rgba(10,16,36,0.96) 0%, rgba(6,8,22,1) 100%)",
success: "linear-gradient(135deg, rgba(32,214,143,0.9) 0%, rgba(83,183,255,0.92) 100%)"
},
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.375rem",
2xl: "1.75rem",
3xl: "2.5rem",
4xl: "3.5rem"
},
spacing: {
2xs: "0.25rem",
xs: "0.5rem",
sm: "0.75rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem",
2xl: "3rem"
},
radii: {
sm: "14px",
md: "20px",
lg: "28px",
xl: "36px",
pill: "999px"
},
blur: {
sm: "10px",
md: "20px",
lg: "30px",
bloom: "48px"
},
shadows: {
panel: "0 22px 54px rgba(2, 5, 16, 0.48), 0 8px 22px rgba(2, 5, 16, 0.24), inset 0 1px 0 rgba(255,255,255,0.12)",
bloom: "0 0 0 1px rgba(255,255,255,0.06), 0 18px 62px rgba(77,130,255,0.16), 0 0 38px rgba(255,79,216,0.14)",
neon: "0 0 18px rgba(63,232,255,0.22), 0 0 28px rgba(255,79,216,0.18), 0 12px 34px rgba(14,18,38,0.42)",
inset: "inset 0 1px 0 rgba(255,255,255,0.18)"
},
stroke: {
subtle: "1px solid rgba(185, 214, 255, 0.12)",
standard: "1px solid rgba(185, 214, 255, 0.22)",
emphasis: "1.5px solid rgba(255, 255, 255, 0.28)",
animated: "1.5px solid rgba(255,255,255,0.22)"
},
motion: {
fast: "160ms",
base: "220ms",
slow: "320ms",
orbit: "7.8s",
pulse: "2.8s",
notification: "1.8s"
}
};Component Example Markup
Reference implementation for a base glass panel that stays token-driven.
Component Example Markup
<div className="relative overflow-hidden rounded-[var(--vibe-radii-lg)] border border-[color:var(--vibe-colors-glass-border)] bg-[color:var(--vibe-colors-glass-surface)] p-6 shadow-panel backdrop-blur-glass">
<div className="pointer-events-none absolute inset-0 opacity-15 blur-3xl" style={{ backgroundImage: 'var(--vibe-gradients-aurora)' }} />
<div className="pointer-events-none absolute inset-px rounded-[26px] border border-white/10" />
<h3 className="font-display text-xl text-[color:var(--vibe-colors-text-primary)]">Glass Card</h3>
<p className="mt-2 text-sm text-[color:var(--vibe-colors-text-secondary)]">
Use semantic token variables instead of hardcoded colors.
</p>
</div>