Sizing

• All interactive elements: 22px height
• One size only — no variants (sm, lg, etc.)
• Icon-only buttons: 22×22px square

Border Radius

• All elements: 0 (sharp corners)
• No rounded corners anywhere

Icons - General

• All icons are monochrome (use currentColor)
• No colored icons, no emoji
• Size: 12-14px depending on context
• Effects: single icon stars — no individual icons per effect
• Post-Processors: single icon sliders — no individual icons per PP

Icons - Colors

• Primary #e0e0e0 — active, selected, hovered
• Secondary #888888 — default state, inactive
• Muted #555555 — decorative, background icons
• Accent #4ecdc4 — section headers, active tabs

Icons - When to Use

• Primary → icon buttons on hover, active toggles, selected items
• Secondary → icon buttons default, inline icons, chevrons
• Muted → grip handles, disabled icons, subtle decorations
• Accent → section icons (Transform, Fill, Effects), active states

Buttons

• Primary → main action (Export, Apply, Save)
• Default → secondary action (Cancel, Close)
• Ghost → tertiary/inline, no border (Add Stop, Reverse)
• Outline → icon buttons with visible border (layers +, dropdowns)
• Danger → destructive action (Delete, Remove)

Selects (Dropdowns)

• Closed state: same as input — bg: --ui-bg, border: transparent
• Hover: border becomes visible --ui-border-hover
• Open: border accent --ui-border-focus, arrow rotates 180°
• Dropdown: bg: --ui-bg-popup, appears below trigger
• Option hover: bg: --ui-bg-hover
• Option selected: bg: --accent-dim, text: --accent
• Keyboard nav: Arrow keys move, Enter selects, Escape closes

Modals

• Overlay: rgba(0,0,0,0.7) + backdrop-filter: blur(4px)
• Container: bg: --bg-panel, border: --border-section
• Border radius: 0 (sharp corners, same as everything)
• Shadow: 0 20px 60px rgba(0,0,0,0.5)
• Header: title left, close button (X) right
• Close: Escape key, click overlay, click X button
• Animation: fade in + translateY(20px) → 0
• Max size: 90vw width, 85vh height, scrollable body

Inputs

• Default: bg: --ui-bg, border: transparent
• Hover: border: --ui-border-hover
• Focus: border: --ui-border-focus (accent)
• Placeholder: color: --text-muted
• Value: color: --text-primary
• Number inputs: no spinners (hidden via CSS)

Radio Groups

• Container: inline-flex, height 22px, border: --border-subtle
• Options: side by side, separated by 1px border
• Default option: bg: --ui-bg, color: --text-secondary
• Hover: bg: --ui-bg-hover, color: --text-primary
• Selected: bg: --accent-dim, color: --accent
• Usage: mutually exclusive options (Fill type, Blend mode)

Colors

• Brand Primary: #00aaff
• Danger/Error: #ff4466
• Accent (panels): #4ecdc4

Typography - Font

• Font family: System font -apple-system, 'Segoe UI', Roboto
• Base size: 11px — all UI elements Sample Text 11px
• Small text: 10px — hints, secondary info Sample Text 10px
• Section headers: 11px uppercase Section Header

Typography - Text Colors

• Primary #e0e0e0 — values, active labels Normal Bold
• Secondary #888888 — labels, descriptions Normal Bold
• Muted #555555 — placeholders, hints Normal Bold
• Disabled #444444 — disabled elements Normal Bold

Never use pure white (#ffffff) — maximum brightness is #e0e0e0

Typography - When to Use

• Primary → input values, selected items, headings, button text
• Secondary → labels next to inputs, descriptions, inactive tabs
• Muted → placeholders, hints, timestamps, tertiary info
• Disabled → disabled controls and their labels

Visibility Toggle

• Size: 16×16px outer, 6×6px inner dot
• Hidden state: transparent bg, hollow circle with --text-muted border
• Visible state: filled with layer color (radial gradient with 3D highlight)
• Hover hidden: border becomes --text-primary
• Hover visible: brightness boost (filter: brightness 1.2)
• Usage: layers list, effects list, any toggleable visibility

Drag Handle

• Icon: grip-vertical at 12px
• Width: 16px container
• Default: opacity 0.5, color --text-muted
• Hover (row): opacity 1
• Cursor: grab → grabbing when dragging
• Position: typically between color bar and visibility toggle

Scrubber

• Position: right side of number input, inside border
• Width: 20px, separated by subtle left border
• Thumb: 2×12px vertical bar
• Default: thumb --text-muted
• Hover: thumb --text-secondary
• Active: thumb --accent
• Cursor: ew-resize (horizontal drag)

Property Row

• Height: 26px (--row-height)
• Layout: flex with 8px gap, padding 0 8px
• Label: 70px fixed width, --text-secondary, 11px
• Control: flex: 1, uses remaining space
• Hover: bg: --bg-hover
• Slider value: 28px fixed width, right-aligned, --accent color

Collapsible Section

• Header height: 28px (--section-header-height)
• Header bg: subtle gradient (bg-section with 4% white tint)
• Icon: 12px, --text-secondary, 16px width
• Title: 11px, weight 500, --text-primary
• Chevron: right when closed, down when open, 12px, muted color
• Badge: optional count (bg: --accent-dim, text: --accent)
• Content: hidden by default, padding 2px 0 to 4px 0

Layer Item

• Height: 32px
• Layout: color bar → drag handle → visibility → icon → name → badges
• Color bar: 4px wide, full height, layer color
• Icon: 14px, --text-secondary
• Name: 11px, ellipsis overflow
• States: hover (bg-hover), selected (bg-selected), hidden (opacity 0.5)
• Drag states: box-shadow inset lines (accent) for drop targets

Effect Item

• Header: same height as prop-row, clickable to expand
• Layout: visibility toggle → name → chevron
• Content: bg rgba(0,0,0,0.15), padding 4px 0
• Visibility color: uses --accent instead of layer color
• Hidden effect: opacity 0.5 on entire item

Color Picker

• Trigger: 20×20px square, current color as bg
• Trigger border: --border-section, hover: --accent
• Popup: 220px wide, bg: --bg-panel
• Gradient area: 140px tall, saturation/value picker
• Hue slider: 14px tall, rainbow gradient
• Preview: 32×22px split (new color / old color)
• Swatches: 18×18px preset colors, scale on hover

Mini Dial

• Size: 20×20px circular
• Border: 1px --border-section, hover: --accent
• Marker: 2×7px, rotates from center
• Active: accent border + 2px glow ring (--accent-dim)
• Cursor: grab → grabbing when dragging
• Paired with: 60px wide number input

Sliders

• Height: 16px track, takes flex: 1
• Track: bg: --ui-bg, border: --border-subtle
• Fill: --accent color, height 100%
• Thumb: 3px wide, 100% height, --text-primary
• Hover/Active thumb: white
• Value display: 28px width, right-aligned, --accent color