Vibe layer

Vibe Response Lab

Select an emotional preset and inspect how it subtly influences atmosphere, glass tint, strokes, maps, messages, profiles, and interactive states without recoloring readable content.

Presets

4 expandable vibes

Appearances

Dark + Light

Scope

Local preview

How vibe influences the UI

One neutral system, emotionally nuanced.

Appearance and vibe remain separate. The page previews either dark or light at one time, and nothing leaves this lab unless you explicitly apply it globally.

Primary override#ffd866Secondary override#ff9a4dAccent override#b974ff

Current vibe

Curious

Vibe-aware Surface Preview

● Live

Glass surfaces react with subtle, system-wide visual nuance.

Active Insight

Your selected vibe favors discovery, clarity, and forward momentum.

Engagement72%

Exploration48%

Momentum62%

Focus area

✦

System Message

2m ago

Curious mode highlights points of interest.

✦

Scout Bot

5m ago

Found three new patterns worth exploring.

✦

Team Pulse

12m ago

Two teammates are active in this rhythm.

Quick Actions

Ambient Aura

Soft radial color sits behind surfaces so atmosphere changes before content.

Glass Tint

Neutral glass picks up a low-alpha wash from the selected vibe.

Stroke Accent

Thin edges guide hierarchy with primary and secondary color.

Interactive Glow

Active buttons, focus, and hover receive a localized emphasis.

Localized Bloom

Stronger color stays near maps, avatars, CTAs, and focal cards.

Readable Content

Text zones remain neutral and contrast-led in every vibe.

Background contrast

Test glass against environment, solid, or gradient fields.

Base background#070b18Environment visibility72%

Stop 1#071225Position 0%Opacity 100%

Stop 2#16102bPosition 46%Opacity 100%

Stop 3#07131ePosition 100%Opacity 100%

Vibe influence system

Keep color emotionally legible and operationally restrained.

Vibe intensity50%Background aura14%Glass tint10%Stroke highlight28%Interactive glow30%Localized bloom42%Bloom radius58pxTransition speed510ms

Blend mode

Identity

Profile Ring

Richer gradient reserved for a person or relationship.

Notification

Message Accent

Color appears at icon, dot, and edge, not behind the copy.

Discovery

Map Glow

Strongest semantic glow identifies routes and focus points.

Navigation

Active Tab

Selected state uses a compact tint and restrained halo.

Action

Vibe CTA

Interaction receives localized bloom without flooding the surface.

Context

Ambient Surface

The base card stays neutral while atmosphere shifts behind it.

Runtime tokens

One generated variable map drives every response.

The selected preset supplies behavior, appearance supplies safe ranges, and custom colors only replace palette values. No page component owns independent vibe math.

Primary#ffd866Secondary#ff9a4dAccent#b974ff

:root {
  --vibe-layer-primary: #ffd866;
  --vibe-layer-secondary: #ff9a4d;
  --vibe-layer-accent: #b974ff;
  --vibe-layer-primary-soft: rgba(255, 216, 102, 0.160);
  --vibe-layer-secondary-soft: rgba(255, 154, 77, 0.140);
  --vibe-layer-background: linear-gradient(145deg, rgba(4,7,19,0.18), rgba(7,9,22,0.34));
  --vibe-layer-aura: radial-gradient(circle at 14% 18%, rgba(255, 216, 102, 0.070), transparent 34%), radial-gradient(circle at 82% 24%, rgba(255, 154, 77, 0.055), transparent 32%), radial-gradient(circle at 64% 82%, rgba(185, 116, 255, 0.032), transparent 28%);
  --vibe-layer-surface: linear-gradient(145deg, rgba(255, 216, 102, 0.036), rgba(255, 154, 77, 0.023)), rgba(14,18,34,0.62);
  --vibe-layer-surface-neutral: rgba(14,18,34,0.62);
  --vibe-layer-surface-elevated: rgba(18,22,41,0.72);
  --vibe-layer-surface-soft: rgba(255,255,255,0.035);
  --vibe-layer-border: rgba(205,225,255,0.16);
  --vibe-layer-edge: color-mix(in srgb, #ffd866 14%, rgba(205,225,255,0.16));
  --vibe-layer-text-primary: #f7f8ff;
  --vibe-layer-text-secondary: #d2dcff;
  --vibe-layer-text-tertiary: #9db1e5;
  --vibe-layer-text-muted: #7087b6;
  --vibe-layer-ambient-opacity: 0.070;
  --vibe-layer-glass-tint-opacity: 0.050;
  --vibe-layer-edge-opacity: 0.140;
  --vibe-layer-interactive-opacity: 0.150;
  --vibe-layer-bloom-opacity: 0.210;
  --vibe-layer-bloom-radius: 58px;
  --vibe-layer-transition-duration: 510ms;
  --vibe-layer-blend-mode: soft-light;
  --vibe-layer-environment-opacity: 0.720;
  --vibe-layer-gradient: linear-gradient(135deg, #ffd866, #ff9a4d 62%, #b974ff);
  --vibe-layer-map-glow: 0 0 32px rgba(255, 216, 102, 0.118), 0 0 58px rgba(255, 154, 77, 0.063);
  --vibe-layer-message-glow: 0 0 20px rgba(255, 216, 102, 0.108), 0 10px 32px rgba(255, 154, 77, 0.042);
  --vibe-layer-profile-ring: conic-gradient(from 210deg, #ffd866, #ff9a4d, #b974ff, #ffd866);
  --vibe-layer-localized-shadow: 0 0 32px rgba(255, 216, 102, 0.118), 0 0 58px rgba(255, 154, 77, 0.063);
  --vibe-layer-interactive-shadow: 0 0 20px rgba(255, 216, 102, 0.108), 0 10px 32px rgba(255, 154, 77, 0.042);
}

Flutter mapping

BackdropFilter plus scoped Vibe resolution.

Web aura maps to positioned DecoratedBox layers; glass maps to ClipRRect + BackdropFilter; Vibe state maps to VibeMood, VibePalette, VibeRecipe, and VibeScope.

Figma mapping

Core appearance and Vibe collections stay separate.

Dark/Light belongs to VibeIRL Core. Chill/Hype/Curious/Family belongs to VibeIRL Vibes. Effect recipes document blur, bloom, and blending that variables cannot encode alone.

Best practices

Atmosphere first

Place the strongest wash behind content, never over body copy.

Localize energy

Concentrate bloom near profiles, maps, selected controls, and CTAs.

Preserve meaning

Status colors and readable content remain semantic and neutral.

Vibe Layer