0 KBExternal UI frameworks
8Interface scenes
7Theme profiles
Native interaction coverage92%
Framework-free visual playground
One system. Many worlds.
Travel, commerce, editorial, media, operations, and productivity scenes share one native HTML and CSS foundation without collapsing into one house style.
01 · Scene library
Distinct products, shared discipline.
Each specimen changes pacing, language, density, and visual character while preserving familiar controls and resilient behavior.
Night Train
A calm itinerary with departure cues, saved places, and a quiet midnight palette.
Field Notes
Warm paper tones, strong captions, and deliberate long-form reading rhythm.
Command Center
Dense status, fast scanning, restrained color, and unmistakable incident states.
Sunday Market
Friendly product cards, warm accents, quick choices, and confident purchase actions.
Solstice Radio
Playback energy, live presence, and ambient motion that remains secondary to controls.
Quiet Desk
Focused work surfaces, low visual noise, compact navigation, and clear completion states.
02 · Color and atmosphere
Palettes with a point of view.
Color carries context, while stable surfaces preserve contrast and reading continuity.
platform lights · 23:40food · culture · peopletrails · weather · field datafinance · focus · precisionNight market, 8:30 PM
Lanterns, street food, live cumbia, and a saved route back to the hotel.
Gate B12 · 18 min
Boarding begins soon. Seat 14A. The walk is six minutes.
03 · Mixed UI kit
Real interface moments, not isolated controls.
Checkout, planning, system health, metrics, tables, and workspace navigation share one predictable component grammar.
Checkout actions
Operations pulse
Live trafficCheckout APIHealthyElevated latencyInvestigating
Plan a weekend escape
98.4%On-time arrivals this week
Your table is held for seven minutes.
Complete the reservation now or release it for another guest.
Trip workspace
Three views7:15 PMCourtyard dinner
9:00 PMRooftop set
Three saved stops1.4 km walking · route available offline
Group noteMeet in the lobby at 7:00. Bring a light layer.
| Time | Place | Mood | Status |
|---|---|---|---|
| 5:30 PM | Riverside walk | Golden hour | Saved |
| 7:15 PM | Courtyard dinner | Quiet table | Held |
| 9:00 PM | Rooftop set | Live music | Tickets ready |
| 11:20 PM | Walk home | Cool streets | Route offline |
04 · Touch and state
Small interactions that make choices feel real.
Direct manipulation, selection, continuity, color, progress, and disclosure work across touch, mouse, pen, keyboard, and assistive technology.
Choose your base
Move through time
Today
Three events · one open evening.
Save the itinerary
Action feedback confirms intent without shifting the surrounding layout.
Ready to save.
Questions before you go
Can I change the schedule later?
Yes. Saved artists, venues, and reminders can be rearranged until the event begins.
Will the guide work offline?
Saved schedules, tickets, addresses, and the walking map remain available without a signal.
What if a venue changes?
The event card updates, the route recalculates, and the previous details remain visible in activity history.
05 · Native layers
Quick decisions above the current scene.
Popover and dialog primitives provide reliable top-layer behavior without a custom stacking framework.
Share this guide
Copy the link, save it offline, or send it to the group.
Save the evening
Review dinner, music, and the route home before adding it to the group plan.
06 · Motion
Movement with a defined job.
A live signal drifts, a member card catches light, and loading feedback remains legible on mobile.
Early access opens Friday
Members receive the first room release and a private sunset session.
07 · Design lens
One event, three intentions.
The same semantic structure can become practical, editorial, or immersive without changing what the user must learn.
September 18–21 · Waterfront District
Plan the night.The city stays awake.Follow the light.
Four venues, one late-summer weekend. Build a schedule, save artists, and find the next stage without relearning the interface.
Open the research notesStandards, award frameworks, performance guidance, red-team findings, and primary sources.
One signature idea
A repeated motif or interaction gives an experience memory and authorship.
Participation over decoration
The strongest interactions help people compare, configure, discover, understand, or complete something.
Choreographed restraint
Motion shares timing, easing, direction, and intent instead of becoming unrelated hover effects.
Technical invisibility
Fast loading, stable layout, accessible fallbacks, and cross-device behavior keep attention on the concept.
08 · Resilience
The scenes still work when spectacle steps back.
Quiet motion, solid surfaces, high contrast, print, zoom, keyboard access, and coarse-pointer sizing preserve the same information and decisions.
Quiet motion
Signals stop drifting while selections, confirmations, and progress remain clear.
Solid surfaces
Translucent layers become opaque without changing their placement or meaning.
High contrast
Decorative color falls away while labels, focus, boundaries, and state remain explicit.
Validation checklist
- Keyboard focus remains clearly visible.
- Text remains readable across every gradient region.
- Effects never communicate state by themselves.
- Sticky surfaces do not clip focus or overlays.
- Zoom to 200% without page-level overflow.
- Test low-power mobile devices for scroll smoothness.
- Verify light, dark, print, and forced-color modes.
- Keep continuous motion limited to showcase regions.