Components & fragments
Interactive building blocks mapped 1:1 to Figma components. They inherit soft elevation, loosening gravity on hover, and the temperatures of an eternal sunset.
Drift Button
Interactive buttons with floating physics. On hover, they drift upward against gravity and emit a soft glow.
Do
Use Action (Blush Pink) for the primary conversion or next step. Use Secondary (semi-transparent outline) for passive, non-critical choices to keep the view quiet.
Don't
Avoid stacking multiple saturated buttons closely. In a dream, visual density causes panic; leave vast spaces around interaction points.
| Variant | Token Class | Behavior |
|---|---|---|
| action | bg-action | Glows with shadow-glow-action on hover |
| primary | bg-primary | Glows with shadow-glow-primary on hover |
| secondary | bg-surface/60 border-primary/40 | Slightly sharpens outline and glows soft blue |
Floating Card
Containers detached from the fog background. Utilizing glassmorphism and extreme roundness to signify structure.
Static Card
A room with no windows
A default container holding static components. Soft drop shadow separates it from the backdrop gradient.
Hoverable Card
Gravity looses here
Hover to see the card rise further. Shadow stretches from shadow-float to shadow-float-far using ease-drift.
Do
Use cards to group closely related information. Let the backdrop blur (`backdrop-blur-md`) settle down the moving fog blobs underneath for better text readability.
Don't
Do not nest multiple hoverable cards inside one another. Floating hierarchy should never exceed two levels of depth.
Void Modal
A dialog surfacing from the deep. The void backdrop dims the eternal sunset into gravity and focus, while the panel drifts upward with ease-drift.
esc / backdrop click to close
Do
Reserve the modal for decisions that deserve full attention — the void backdrop (#030027 at 45%) is the strongest gravity in the system. Always offer a quiet secondary exit next to the action.
Don't
Never stack modals or use them for passive information. A dream interrupted twice collapses; prefer inline cards or badges for anything that can wait.
| Layer | Token / Technique | Behavior |
|---|---|---|
| panel | bg-surface/90 rounded-dreamy shadow-float-far | Rises 28px with ease-drift via @starting-style |
| backdrop | color-void/45 + blur(8px) | Crossfades with ease-fade, blurring the sunset |
| semantics | native <dialog> | Focus trap, Esc and inert background for free |
Whisper Toast
Passive feedback that never demands attention. A whisper rises from below with ease-drift, lingers for a breath, then melts back into the fog.
melts away after 4.8s
Do
Whisper only what can be safely missed — saves, sync states, gentle warnings. Keep the copy to one soft sentence, and let every whisper dissolve on its own.
Don't
Never whisper something that requires a decision — that is the Void Modal's gravity. Avoid letting more than three whispers stack; a chorus of whispers becomes noise.
| Variant | Dot Token | Meaning |
|---|---|---|
| drifting | bg-primary + glow | Default — a neutral passing thought |
| stable | bg-mint + glow | Success — the connection held |
| fading | bg-gold + glow | Gentle warning — act before it fades |
Input / Form
Quiet input fields designed to feel secondary. On focus, they sharpen details and glow softly, signaling active consciousness.
Do
Always use uppercase uppercase mono labels (like email address) to annotate inputs. Keep placeholders descriptive but slightly mysterious to align with the design theme.
Don't
Never use heavy borders or thick dark outlines. Form fields should look like soft recesses (wells) in the canvas rather than hard physical boxes.
Dream Avatar
Identity markers wrapped in a soft gradient glow. The presence dot breathes while the dreamer is connected.
Do
Use stable (mint) for connected dreamers and void for those who have faded. Omit the status dot entirely when presence is irrelevant.
Don't
Do not place avatars on saturated backgrounds — the glow ring needs the quiet blush canvas to breathe.
Drift Slider
A range control over a sky-to-bloom gradient. The glowing knob swells gently on hover, like a slow breath.
Do
Label both ends with quiet uppercase mono text describing the sensory poles (e.g. sky memory → soft bloom), not numbers.
Don't
Avoid tick marks or numeric readouts beside the track. Precision belongs to machines; the dream prefers a feeling.
Status / Badge
Small indicators equipped with a breathing pulse dot. Used to represent state or category in the dream realm.
Do
Use status badges to clarify status differences immediately. Use the default pulsing dot for active background connections, as it adds dynamic micro-animation to static pages.
Don't
Avoid using badges for non-status text labels. If you need tags, use static uppercase mono text instead of a pill with an active pulsing indicator.
Vapor Tabs / Segmented Control
Segmented control with floating glassmorphic physics. A sliding vapor pill drifts across tabs using the ease-drift bezier curve.
Interactive Segmented Control
Active Panel Context
Overview View
High-level entry into the dream state, displaying core tokens and telemetry.
Iconic Atmosphere Tabs
Do
Use glass on the blush canvas and voidagainst midnight surfaces, so the pill's glow always has somewhere to breathe. Keep labels to two or three words — the pill needs room to drift.
Don't
Avoid more than five tabs in one track — the segmented control loses its floating stillness once it has to scroll. Don't pair minimal with a busy background; it has no glow to separate itself from the noise.
| Prop | Type | Description |
|---|---|---|
| items | TabItem[] | Array of tabs with id, label, icon, badge, and disabled states |
| variant | "glass" | "void" | "minimal" | Visual texture and glow intensity for track & sliding indicator |
| size | "sm" | "md" | "lg" | Scale of padding, typography, and indicator offset |