Oscilla

v8 · published

The oscilloscope aesthetic - motion made visible on phosphor and volt.

kineticpreciseelectrictechnicalplayful

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.

Open the playground →Fork it · design a page →

re-imagined from https://motion.dev/

Use in your project

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.

1 · Authenticate

npx synthesisui@latest login

2 · Add this design system

npx synthesisui add oscilla --version 8

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/oscilla/tokens.css";
@import "_synthesisui/ds/oscilla/theme.css";

Ask your agent

Use 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/v8/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").
- Wire 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 "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Schibsted Grotesk, Geist Mono
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.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Chartsnpm i recharts
Charts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).

Color

Primitives and roles.

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

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs0.25rem

2xs0.5rem

xs0.75rem

sm1rem

md1.5rem

lg2rem

xl3rem

2xl4.75rem

3xl7rem

shadow

float

volt-glow

trace-glow

Typography

The voice of the system.

Display: Schibsted Grotesk · Body: Schibsted Grotesk · Mono: Geist Mono

xsDesign, set free0.6875rem / 1.3

smDesign, set free0.8125rem / 1.5

baseDesign, set free1rem / 1.6

lgDesign, set free1.125rem / 1.55

xlDesign, set free1.4375rem / 1.25

2xlDesign, set free2rem / 1.12

displayDesign, set free3.25rem / 1.04

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 10 live

blip

rise

scan

wave

flash

choreo

shimmer

bar-fill

calibrate

sweep-reveal

easings

standardcubic-bezier(0.25, 0, 0, 1)

snapcubic-bezier(0.16, 1, 0.3, 1)

glidecubic-bezier(0.25, 1, 0.5, 1)

durations

base · 220msfast · 160msslow · 400msdrift · 14ssweep · 1.2sambient · 2.8s

interaction patterns

enterreveal

Panels sweep in left-to-right like a console printing its output.

enterentrance

Content rises 8px into place - short, exact, no bounce.

looplive-blip

Live indicators pulse like a point on a scope trace.

loopdiagnostic

Demo blocks run their self-test choreography - translate, tilt, magnify, return.

presspress-snap

Controls answer presses with an expo-out snap, 160ms flat.

loopattention-shimmer

A phosphor sheen drifts across highlighted readouts.

Components · 44

Recipes, rendered live.

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.

ds-badge

Square readout label - mono caps with wide tracking, etched beside whatever it measures.

lawBadges report status, never decorate; one badge per row of data.

tone

infoaccentdangerneutralsuccesswarning

ds-button

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.

lawOne volt action per view; everything else rides the ghost or contrast intent.
lawLabels stay mono caps and short - a button is a control label, never a sentence.

intent

ds-console-card

bespoke · surface

The floating terminal - the deepest surface in the system, one dramatic shadow, mono type. Where Oscilla shows work being done.

lawOne console per section; it is the section's protagonist, never wallpaper.

› create a photos carousel - Searching recipes… ok - Composing motion… ok

ds-readout

bespoke · pill

Measurement chip - a mono caps label and its live value, square like a scope bezel legend.

lawReadouts carry LIVE or precise values only - static copy never wears the readout.

channel

FPS 120 · 16.7MSFPS 120 · 16.7MS

ds-card

Flat instrument panel - hairline border over surface, softly radiused like a bench module. No theatrical lift: hover sharpens the border to the trace color.

lawCards are instrument panels: hairline border, square corners, no decorative glow.
lawNever nest a console-card inside a card - one bezel per reading.

padding

Default

A card wearing this system.

None

A card wearing this system.

emphasis

Default

A card wearing this system.

Elevated

A card wearing this system.

ds-input

Square terminal field - mono text on the deep tube, focus snaps the border to volt.

ds-avatar

Identity plate - square like bench equipment, a 1px phosphor ring, initials etched in mono caps. Image via the ds-avatar-img part.

lawIdentity plates stay square - never round them to look friendly.

size

MAMAMA

ds-avatar-group

Overlapping identity plates - hard square edges separated by a crisp canvas gap, like modules racked side by side.

lawNever more than five plates; overflow becomes a +N count plate.

MAJSKPRL

ds-chip

Filter token as an instrument label - square corners, mono caps, volt tint when active (data-active="true"). Optional ds-chip-remove.

lawChips are filters: active state means selected, never emphasis.

active

MAMaya AndersenMAMaya Andersen

ds-link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

A surface wearing this system.

ds-kicker

bespoke · text

Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.

tone

defaultaccent

ds-heading

bespoke · text

Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.

size

lgxl2xldisplay

ds-text

bespoke · text

Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.

size

xssmbaselg

tone

defaultmuted

ds-stack

bespoke · surface

Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.

gap

A surface wearing this system.

align

A surface wearing this system.

ds-row

bespoke · surface

Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.

gap

A surface wearing this system.

justify

A surface wearing this system.

align

A surface wearing this system.