Design System — Background Studio

Principles

Four rules that shape every decision in this system.

01 — Restraint

Motion serves content.

Animations are background ambient — slow, breathing, never aggressive. They enhance atmosphere without competing for attention.

02 — Warmth

No cold grays.

Every neutral carries warm undertones. Cream in light mode, blue-black in dark mode. Accents are earthy, not synthetic.

03 — Duality

Two moods, one system.

Light and dark share the same structure but differ in palette character: muted earth tones vs. jewel tones on midnight.

04 — Editorial

Serif headlines, mono labels.

Iowan Old Style for display, SF Mono for metadata. The contrast between serif elegance and monospace precision defines the voice.

Color

All colors are CSS custom properties on :root and [data-theme="dark"]. They swap automatically when the theme changes.

Surfaces & Text

Background

#F2EDE2 / #0D0C13

--bg

Elevated

#FAF6EC / #16141F

--bg-elev

Deep

#E8E1D2 / #080709

--bg-deep

Foreground

#1B1813 / #E9E4D6

--fg

Muted

#6B6557 / #B3AC9A

--fg-muted

Subtle

#9A9384 / #8A8474

--fg-subtle

Accents

Accent

#8B6F47 / #C9A876

--accent

Accent Soft

#C9A876 / #8B6F47

--accent-soft

Border

rgba(...,0.10) / 0.14

--border

Animation Palette

Six semi-transparent colors used across all background animations. Light mode uses airy earth tones; dark mode uses restrained jewel tones.

Warm Umber / Gold

--anim-1

Sage / Teal

--anim-2

Dusty Mauve / Amethyst

--anim-3

Butter / Bronze

--anim-4

Hazy Sky / Sapphire

--anim-5

Terracotta / Ruby

--anim-6

Code Syntax Tokens

Solid, high-contrast colors for syntax highlighting. Each token type has a dedicated variable.

Code Background

#ECE5D6 / #14121C

--code-bg

Comment

--code-tok-com

String

--code-tok-str

Keyword

--code-tok-key

Number

--code-tok-num

Tag

--code-tok-tag

Attribute

--code-tok-attr

Punctuation

--code-tok-punc

Typography

Two font families carry the entire system: a serif for display and prose, a monospace for labels and code. No web fonts — all stacks use system-installed faces.

Display — Serif

H1 · 42px / line-height 1.05 / weight 400 / tracking -0.02em

The Art of Ambient

Top-level display heading — largest in the system

Stage Display · 38px / line-height 1.05 / weight 400 / tracking -0.015em

Aurora Flow

Animation title on full-screen stage — not a document heading level

H2 · 34px / line-height 1.05 / weight 400 / tracking -0.015em

Jimmy's Study in Motion

Document section heading — sidebar masthead title

H3 · 28px / line-height 1.1 / weight 400 / tracking -0.01em

Section heading

Design system subsection title

Menu Item · 18px / line-height 1.2 / weight 400

Stardust

Animation menu item name

Labels — Monospace

Kicker · 10px / tracking 0.32em / uppercase

Background Studio — V 1.1.2

font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace

Menu Label · 10px / tracking 0.32em / uppercase

Animations · 9

Button · 10.5px / tracking 0.24em / uppercase

Show Code

Menu Number · 11px / tracking 0.05em

01

Code · 12.5px / line-height 1.7 / tab-size 2

const x = 42;

Code panel body text

Body — Sans

Body · 13px / line-height 1.55

Soft gradient blobs drift and blur — pure CSS, no images. Three radial-gradient layers animate position and scale independently.

font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', system-ui, sans-serif

Tagline · 12.5px / line-height 1.55

Code-only background animations — study how CSS, SVG and JavaScript quietly shape motion on the web.

Meta · 11px

CSS · keyframes · blur

Animation technique metadata

Spacing

A simple scale based on 8px increments. Used for padding, margins, and gaps.

Scale

4px

8px

12px

16px

20px

24px

28px

32px

40px

44px

64px

Motion

Transitions are slow and quiet — the same cubic-bezier curve is used across the system for consistency.

Easing Curves

Standard

cubic-bezier(.2, .7, .2, 1)

Ease

ease

Ease In-Out

ease-in-out

Durations

Fast

0.25s — 0.3s

hover, color, border

Medium

0.35s — 0.5s

menu padding, panel slide

Slow

0.6s

theme transition

Ambient

8s — 52s

background animations

Reduced Motion

When prefers-reduced-motion: reduce is active, all ambient animation durations are doubled and transitions are dampened. The system respects user accessibility preferences globally.

Components

Core UI elements used across the application.

Buttons

Monospace, uppercase, tracked 0.24em. Background inverts on hover (bg-elev → fg). Active state uses accent fill.

Icon Buttons

34×34px squares, bg-elev fill + subtle border. Icons are 24×24 viewBox SVGs, 1.6px stroke, no fill. Four live in the code-panel header: Reset (refresh), Edit (pencil), Copy, Close. Icon and border shift to accent on hover. Edit gains an accent-tinted background when active (edit mode). Disabled buttons drop to 0.35 opacity and ignore hover.

Parameter Sliders

Parameters

Blob Size .aur-blob width/height 55vmax

Blur Amount .aur-blob filter: blur() 70px

Shown in the code panel when Edit is active. Each row pairs a monospace label — parameter name + the exact CSS selector/property it maps to — with a tabular-nums value badge in accent color. The track is a 4px --border-strong bar; the thumb is a 14px accent circle with a 2px bg-elev ring, scaling to 1.18× on hover. Sliders auto-execute on release (change event), so the live animation re-renders without an Execute button. Panel Reset (left) lights up accent only when sliders deviate from the saved state; Save persists values to localStorage.

Theme Toggle

Borderless, text + dot. The dot fills with accent color and gains a soft glow in dark mode.

Menu Items

Active item has a full-height 2px accent bar on the left. Hover shows a partial (40%) bar. Padding-left shifts 14px → 22px on active/hover.

Frosted Glass Bar

Scroll Parallax

Through the windows of a tall building — scroll past floors while starlight drifts beyond the glass.

Semi-transparent gradient background + backdrop-filter: blur(18px) saturate(1.15). Animated content slides under this bar. Bottom 72% opacity, fading to transparent at top.

Toast

Copied

Fixed bottom-center. Inverts fg/bg. Monospace, uppercase, tracked 0.22em. Slides up 24px + fades in.

Code Block

/* Comment — italic, muted */
const x = 42;
function animate(el) {
  el.style.transform = 'translate3d(0,0,0)';
}

Background --code-bg, text --code-fg. Seven token types with dedicated colors. white-space: pre-wrap + overflow-wrap: anywhere for soft wrapping.

Iconography

Minimal inline SVG icons. Rendered at 14×14px (inside 34px icon buttons) from a 24×24 viewBox, 1.6px stroke, no fill. Four utility actions across the code-panel header: reset (refresh), edit (pencil), copy, close.

Shadows

A single soft shadow used for the code panel. Light mode uses warm undertones; dark mode uses deeper black.

Panel Shadow

0 24px 60px -20px rgba(60,40,20,0.18)

--shadow (light)

Panel Shadow

0 24px 60px -20px rgba(0,0,0,0.55)

--shadow (dark)

Layout

Two-column grid on desktop (340px sidebar + flexible stage). Collapses to single column with horizontal menu chips below 860px.

Desktop

grid-template-columns: 340px 1fr

Sidebar left, stage right

Mobile (<860px)

grid-template-rows: auto 1fr

Top bar + stage below

Sidebar Width

340px

Fixed, padding 40px 36px

Code Panel

min(560px, 50vw)

Slides in from right