The oscilloscope aesthetic - motion made visible on phosphor and volt.
Oscilla reads motion.dev as a bench instrument: a phosphor green-black screen, one electric volt-yellow trace, and mono labels etched beside every reading. Corners are square like lab equipment, weight lives in exactly two stops, and hierarchy comes from size, spacing and light - never bold. The system spends its color like a scope spends its beam: one hot trace on a dark tube, mint and signal-blue reserved for secondary channels. And because the source is an animation library demonstrating itself, motion is the loudest section here: clip-path sweeps, self-running diagnostics, blips and waves that make every surface feel like it is measuring something live.
re-imagined from https://motion.dev/
Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.
npx synthesisui@latest init --styles tailwind --ds oscillanpx synthesisui@latest connectnpx synthesisui@latest connectUse the "Oscilla" design system (slug: oscilla) to: build the UI I describe next First make sure it's installed: run `npx synthesisui add oscilla` if `_synthesisui/ds/oscilla/` isn't in the project yet. Read these files first (highest authority first): - _synthesisui/ds/oscilla/rules.md - project rules for this system (if present); obey them above everything else - _synthesisui/ds/oscilla/philosophy.md - the mission, voice and principles (if present); let it shape every screen - _synthesisui/ds/oscilla/v9/GUIDE.md - how to apply the system, the recipes and the token vocabulary Follow this contract (target framework: next): - First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new. - Scope the markup with `data-ds="oscilla"` (or rely on it at the app root). - Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale. - Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply"). - Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS. Composition (make it look composed, not just correct): - Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge. - Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen. Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.
Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use oscilla "…".
What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
npm i lucide-reactComponents reference Lucide icon names. Install it (or swap in your own icon set) to render them.
npm i rechartsCharts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).
Color
Named scales forged by the synthesis; semantic roles only ever point at them.
color.veil
500#060b09b3
color.volt
200#ffe97a
300#ffe14d
400#ffd60a
500#edc400
600#c7a400
700#8f7a00
800#7a6200
color.alarm
400#f0564a
500#d94437
600#c2372b
color.trace
300#7fe6b1
400#4cd694
500#2fbf7d
600#1f9163
700#187047
color.signal
400#5b9bff
500#3f7ef0
600#2b64d9
color.phosphor
50#f2f1e9
100#e7e6dd
200#d2d2c8
300#a5aca4
400#7d8780
500#5d675f
600#3a4440
700#232c28
800#1a211e
900#101614
950#0a100d
975#050b08
color.semantic - resolved live via CSS variables
info
{color.signal.400}
faint
{color.phosphor.500}
muted
{color.phosphor.300}
scrim
{color.veil.500}
accent
{color.trace.400}
border
{color.phosphor.700}
canvas
{color.phosphor.950}
danger
{color.alarm.400}
raised
{color.phosphor.800}
overlay
{color.phosphor.700}
primary
{color.volt.400}
success
{color.trace.400}
surface
{color.phosphor.900}
warning
{color.volt.300}
foreground
{color.phosphor.50}
color.series - categorical data-viz palette (bg-series-*)
series-1
series-2
series-3
series-4
series-5
series-6
series-7
series-8
Foundations
Corner radius, spacing rhythm and elevation - the physical feel of the system.
radius
spacing
shadow
Typography
Display: Schibsted Grotesk · Body: Schibsted Grotesk · Mono: Geist Mono
Motion
Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.
keyframes - 10 live
easings
durations
interaction patterns
Panels sweep in left-to-right like a console printing its output.
Content rises 8px into place - short, exact, no bounce.
Live indicators pulse like a point on a scope trace.
Demo blocks run their self-test choreography - translate, tilt, magnify, return.
Controls answer presses with an expo-out snap, 160ms flat.
A phosphor sheen drifts across highlighted readouts.
Components · 9
Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.
The floating terminal - the deepest surface in the system, one dramatic shadow, mono type. Where Oscilla shows work being done.
Flat instrument panel - hairline border over surface, softly radiused like a bench module. No theatrical lift: hover sharpens the border to the trace color.
padding
A card wearing this system.
A card wearing this system.
emphasis
A card wearing this system.
A card wearing this system.
Filter token as an instrument label - square corners, mono caps, volt tint when active (data-active="true"). Optional ds-chip-remove.
active
Square readout label - mono caps with wide tracking, etched beside whatever it measures.
tone
Square terminal field - mono text on the deep tube, focus snaps the border to volt.
Identity plate - square like bench equipment, a 1px phosphor ring, initials etched in mono caps. Image via the ds-avatar-img part.
size
Square-cornered instrument control. Mono caps label; the primary intent is the volt trace itself, the contrast intent is the dark key that sits on volt panels.
intent
Measurement chip - a mono caps label and its live value, square like a scope bezel legend.
channel
Overlapping identity plates - hard square edges separated by a crisp canvas gap, like modules racked side by side.
Engagement blocks · 1
Optional gamification blocks the AI advisor can propose - token-only, so they re-skin to any base. A library to compose from, not a parallel product.
Consecutive-day streak as a charge reading - in Oscilla the spark is voltage, not flame.
Icons · lucide
Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.
Pages · 1
Full-page layouts assembled only from blueprints and tokens - every region re-themes to the system automatically. Icons and media render as placeholders until their adapters land.
Production-grade animation on a system that reads like a bench instrument.
Every panel demonstrates itself: sweeps print like console output, bars fill on a loop, blips mark the live channels.
Calibrate once. Animate forever.
Charts · 4
Chart blueprints themed entirely from token refs - series, grid, axes and fills re-paint to the system automatically. Sample data; the theming is the point.