← BACK

Design System

Toolbar

Dark glass bar — rgba(44,44,44,.75), backdrop-filter blur(50), radius 18px, shadow 0 8px 32px

Save

Reset

Icons: GIFs → Brush (active/white) → Border → Views | Dividers full height | BG swatches | Save + Reset | Close

Panels

All panels share: rgba(44,44,44,.75), blur(50), radius 18px, bottom:80px, max-height:420px. No separate header bg. Scrollable body.

GIF Library

+ Upload

Upload GIFs to get started

Views

+ Save new

No saved views yet

Layers×

Animation 1

4 frames · 6fps

Canvas Drawing

Brush strokes

Brush panel

Brush

Clear

Brush

Eraser

GIF

Live Animate

Off

Size

6px

Color

Border panel

Border×

Border type

GIF ▾

Border size

60px

Layers

Layer sizing

Uniform ▾

Mouse parallax

Off ▾

Apply

Clear

Modal

Name this view

e.g. V1 Final, Dark mode...

Cancel

Save

Shared components

Dropdown

Uniform ▾

Slider + value

60px

Toggle buttons

Active

Inactive

Action button

Save

Text button

Reset

Divider

Label

Border type

GIF chooser — empty

Choose GIF

GIF chooser — selected

skull-spin.gifChange

Animation object toolbar

Appears below animation objects on hover. Same dark glass style.

fps

FPS input | Export GIF | Draw more | Duplicate | Delete

Typography

Headline 1

48px / 600

Paragraph — Host Grotesk is the primary typeface.

14px / 400

Panel label text

12px / header

Control label

11px / label

Colors

White

Blue

Pink

Yellow

Black

Glass

Teal/Anim

Spacing & radius

Panel radius: 18px

Button radius: 10px

Control spacing: 10px

Panel padding: 16px

Toolbar padding: 6px 8px

Divider: rgba(255,255,255,.1)

Shadow: 0 8px 32px rgba(0,0,0,.25)

Blur: 50px

Consistency audit

✓ All panels use same glass bg, blur, radius, shadow
✓ All labels are 11px, standard case, rgba(255,255,255,.4)
✓ All dropdowns use .panel-dropdown component
✓ All sliders use .panel-slider-row / .panel-slider / .panel-slider-val
✓ All dividers use .panel-divider (rgba(255,255,255,.1))
✓ Active toggle = white fill + dark text
✓ Action buttons = rgba(255,255,255,.15) bg
✓ Text buttons = no bg, colored text
⚠ Brush panel tool buttons still use .tool-btn2 (should migrate to shared toggle component)
⚠ Border panel Apply/Clear use .tb-action-btn inline vs panel-level pattern
⚠ GIF picker back button uses .bp-picker-back (unique) — could standardize