Component style guide
Reusable widget patterns with notes engineers can implement directly.
Every component below is shown as a live preview, variant reference, and code snippet. The goal is not just to show how the UI should look, but to document the tokens, spacing, border logic, and state behavior that make the system consistent.
Components
10 core primitives
Preview style
Live + token-aware
Reuse mode
Copy into app code
Catalog
Widgets, states, and implementation notes
Start from these primitives when building new flows. Each section keeps the logic and visual recipe together so handoff between design and engineering stays tight.
Recipe distinction
Global theme controls vs component recipes
The CSS Lab controls the shared system language. These recipes are optional implementation examples for specific product states, so engineers can choose a local button or card treatment without changing the entire app theme.
Card glow
Cyan data pane
Analytics, chart shells, and telemetry panels.
Card glow
Pink notification pane
Unread, hover, or active message surfaces.
Card glow
Gold review pane
Review, warning, and decision confirmation cards.
Pink -> Cyan
Primary social action. Use when one CTA owns the card.
Magenta -> Gold
Decision or review moment where warm confirmation is helpful.
Cyan -> Violet
Exploratory navigation, dashboard affordances, and feature entry.
Teal -> Lime
Success or safe-progress state. Keep it calmer than warning actions.
Outline Glow
Secondary action with visible edge energy but no filled gradient.
Ghost Glass
Low-emphasis action. Use when the primary action is nearby.
Success
Completed state. Good for confirmations and handoff status.
Warning / Review
Use for caution, review, or incomplete handoff without danger styling.
Vibe-aware recipes
Emotional influence patterns for shared product components
These recipes extend the existing component catalog. They consume the selected Vibe palette while keeping surfaces, text, status, and accessibility responsibilities separate.
Local control
VibeSelector
Choosing an emotional preset
Dark
Light
Shared
VibeAwareGlassSurface
Primary content and preview panels
Dark
Light
Global opt-in
VibeAmbientLayer
Behind-panel atmosphere
Dark
Light
Local
VibeLocalizedBloom
Maps, avatars, CTAs, focal cards
Dark
Light
Shared
VibeStrokeAccent
Selected and focused edges
Dark
Light
Local
VibeProfileRing
Identity and relationship signaling
Dark
Light
Local
VibeMessageAccent
Notification icon, dot, and rail
Dark
Light
Local
VibeMapGlow
Routes, nodes, and focus areas
Dark
Light
Shared
VibeActiveTab
Selected navigation state
Dark
Light
Local
VibeCTA
Primary interaction emphasis
Dark
Light
Glass panel
System summary
Use the shared panel shell for most surfaces, then layer on gradients or glows only when the card needs extra hierarchy.
Variants
Component
Glass Card
Primary content wrapper used for charts, stat groups, profile blocks, and export surfaces.
Token references
Notes
- Default card padding is 24px on desktop and 20px on compact surfaces.
- Use the outer glow only when the card is selected, hovered, or featured.
- Keep content aligned to a 12px internal rhythm to avoid muddy spacing.
<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>Variants
Component
Active / Inactive Pill
Compact state indicator for tabs, filters, and segmented controls.
Token references
Notes
- Pills should remain lightweight; reserve button styling for actual actions.
- Use active pill treatment to show one selected route or mode at a time.
<div className="flex gap-3">
<StatusPill label="Wallet" active />
<StatusPill label="Swap" />
</div>Glass Chart
Live mock market momentum
Variants
Glass Chart
Live mock market momentum
Use chart cards for quick trend reads.
Keep axes quiet and let the line glow do the storytelling.
Component
Chart Card
Glass panel optimized for time-series data, small analytics, and trend callouts.
Token references
Notes
- Chart backgrounds should stay dark enough for the line glow to remain readable.
- Avoid heavy grid lines; use subtle dashed guides only when needed.
- Chart labels should use tertiary text so the data line stays dominant.
<LineChartCard title="Glass Chart" />Treasury Value
Liquidity Flow
Variants
Success Rate
Response Time
Component
Stats Tile
Compact numeric summary card for balances, rates, and system telemetry.
Token references
Notes
- Use display typography only for the main number, not the label.
- Keep supporting trend chips small and quiet compared to the value.
<StatsTile label="Treasury Value" value="$75.3M" trend="+8.4%" />VibeIRL Ops
Design systems runner
Activity
142 events
Health
Stable
Variants
Component
Profile Card
User identity surface that combines avatar, meta text, and supporting actions or stats.
Token references
Notes
- Use gradient fills in the avatar or outline, not behind the full card.
- Metadata should stay secondary so the user name and state carry the hierarchy.
<ProfileCard />QXL
Primary utility token
ETH
Staked position
BTC
Spot balance
Variants
Security
Surface rule
Settings
Account actions
Component
Token Row / List Row
Reusable row pattern for assets, activity events, settings lists, and export tables.
Token references
Notes
- Rows should be calmer than cards so they can stack without overwhelming the page.
- Use value chips to carry status, trend, or quantity emphasis.
<TokenRow label="QXL" sublabel="Primary utility token" value="+13.52%" />Modal
Confirm export
Copy the current glass recipe as CSS variables and a Tailwind config extension.
Variants
Component
Modal
Overlay dialog for confirmation, export flows, or high-focus tasks.
Token references
Notes
- Modals can tolerate a little more glow and blur because they isolate focus.
- Always keep a dark backdrop scrim behind the glass shell.
<ModalPreview />Variants
Component
Input Field
Dark glass input surface with focus glow and clear placeholder hierarchy.
Token references
Notes
- Inputs use a slightly tighter radius than cards so forms feel denser.
- Focus should brighten the edge and halo, not replace the fill color entirely.
- Placeholder and helper text should sit at the tertiary tier.
<input className="w-full rounded-[var(--vibe-radii-md)] border border-[color:var(--vibe-colors-glass-border)] bg-white/5 px-4 py-3 text-sm text-[color:var(--vibe-colors-text-primary)] outline-none transition focus:border-cyan-300/60 focus:shadow-[0_0_0_1px_rgba(63,232,255,0.24),0_0_24px_rgba(63,232,255,0.18)]" placeholder="Wallet alias" />