System overview
A reusable neon-glass visual system for VibeIRL product engineering.
This internal tool translates the reference direction into a practical design system: semantic color tokens, construction guidance, reusable components, exportable code, and mobile UI references that stay consistent under one cinematic visual language.
Guide surfaces
12 linked pages
Visual stance
Cosmic glass + neon restraint
Build rule
Tokens before hardcoded styles
Contents
Everything engineers need, organized by implementation task.
Use the overview to orient quickly, then jump directly into colors, glass construction, component recipes, playground tuning, mobile references, or copy-ready export snippets.
Overview
System philosophy, implementation rules, and where each guide lives.
Color System
Semantic pigments, gradients, and glass surface recipes.
Glass Construction
Layer-by-layer breakdown for neon glassmorphism surfaces.
Typography
Poppins-led type scale, product usage examples, and implementation guidance.
Stroke Lab
Configurable imported stroke recipes, component sandboxing, and shared-token handoff.
Components
Reusable widgets, states, code snippets, and spacing notes.
Stroke / Glow Lab
Animated light fields plus live control of blur, glow, tint, and glass optics.
Vibe Layer
Live emotional presets for ambient aura, glass tint, strokes, and localized interaction cues.
Mobile UI Reference
Phone-scale mockups that translate the design language into product screens.
Engineering Tokens
Raw constants, theme mappings, and reusable engineering values.
Flutter Exporter
Export VibeIRL tokens, widgets, and mobile screens into Flutter-ready code.
Export / Copy Tools
One-click snippets for CSS variables, Tailwind config, and component markup.
Design philosophy
Depth first, glow second.
The system is designed to feel premium and cinematic without becoming noisy. Dark surfaces establish focus, layered transparency creates depth, and neon glows work as hierarchy signals rather than decoration.
Atmospheric depth
Treat every surface like a pane suspended in a luminous field. The background should feel alive, but the content must stay readable.
Neon with discipline
Glows are perimeter accents and state indicators, not full-surface floods. Use them to signal interactivity, hierarchy, and status.
Token-first build
Colors, radii, blur, shadow, and motion all map to centralized values so VibeIRL product surfaces can evolve without page-by-page rewrites.
Active radius
Blur baseline
Glow policy
Engineer summary
What engineers should use
These are the defaults to adopt when building new VibeIRL surfaces. They keep the experience coherent across internal tools and customer-facing product modules.
Reach for semantic tokens before inventing a one-off color or shadow.
Recommended system behavior
Keep glass surfaces between 0.62 and 0.78 opacity for readable content.
Recommended system behavior
Use neon glows on active states, hero accents, and chart focal points only.
Recommended system behavior
Prefer layered borders and highlights over thick opaque strokes.
Recommended system behavior
Animate position and opacity subtly; avoid large elastic motion for this system.
Recommended system behavior
Glass Chart
Live mock market momentum
VibeIRL Ops
Design systems runner
Activity
142 events
Health
Stable