Garden Defense6000

    Developer tools

    Garden Defense Design

    The shared tokens, components, interaction states, and accessibility rules behind every Garden Defense interface.

    Design System Reference

    Living reference of all UI components, colors and typography used across Garden Defense.

    Colors

    Canvas
    --background--background
    Surface
    --surface--surface
    Raised surface
    --surface-raised--surface-raised
    Soft surface
    --surface-soft--surface-soft
    Primary text
    --foreground--foreground
    Muted text
    --muted-foreground--muted-foreground
    Brand forest
    --primary--primary
    On brand
    --primary-foreground--primary-foreground
    Action coral
    --accent--accent
    On accent
    --accent-foreground--accent-foreground
    Secondary surface
    --secondary--secondary
    Soft border
    --border--border
    Strong border
    --border-strong--border-strong
    Destructive
    --destructive--destructive

    Typography

    Heading 1, Bricolage Grotesque

    Heading 2, Bricolage Grotesque

    Heading 3, Bricolage Grotesque

    Heading 4, Bricolage Grotesque

    Body text, Manrope. The quick brown fox jumps over the lazy dog.

    Small and muted text, Manrope.

    Buttons

    Hover: lift 2px with medium tinted elevation
    Active: scale to 98% for tactile feedback
    Focus: visible action-coral ring with offset
    Disabled: 45% opacity with pointer events off

    Radius scale

    --radius-control

    Buttons, inputs, tabs and compact controls

    --radius-surface

    Cards, panels and dialogs

    --radius-media

    Images, video and expressive media

    --radius-hero

    Hero-scale illustration frames

    --radius-pill

    Chips and compact status labels only

    Elevation scale

    --shadow-sm

    Default surface separation

    --shadow-md

    Hover and raised media

    --shadow-lg

    Hero and modal elevation

    --shadow-offset

    Rare illustration-led brand moment

    Motion scale

    --duration-fast --duration-fast

    Hover, press and colour change

    --duration-base --duration-base

    Panels and component transitions

    --duration-slow --duration-slow

    Page and media reveals

    --ease-out --ease-out

    Standard interface easing

    --ease-spring --ease-spring

    Short tactile feedback

    hover: fast
    hover: base
    hover: slow

    All looping animations are gated behind prefers-reduced-motion.

    Form controls

    Feedback & status

    Default
    Secondary
    Outline
    Destructive

    Containers & overlays

    Card title

    Card description

    Card content goes here.
    Content of tab one.

    DeviceStatus
    Garden
    Online
    Pond
    Offline

    Timeline event colors

    Out of monitoring--status-inactive
    Monitoring--status-active
    Motion event--status-motion
    Spray event--status-sprayed