Gummy UI
EN

Published language

Englishen

19 more locales are awaiting founder review and publication.

Translation status

Browser-local theme tool

Shape the whole system.

Tune light and dark colour, typography, shape, borders, shadows, patterns, and chart roles without changing component behavior. The builder stays in your browser, creates a shareable URL, and exports plain CSS.

Live system preview · light

Release decisions, made visible.

Colour, type, shape, borders, shadows, patterns, and charts update together.
ReadyReview

Release health

Five checks completed, one review remaining.

84%
Updated from the same exported tokens.
Installable CSS themeIncludes light/dark colour roles, type, shape, border, shadow, pattern, and chart tokens.
:root {
  --gummy-font-interface: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gummy-type-scale: 1;
  --gummy-radius-scale: 1;
  --gummy-border-width: 1px;
  --gummy-shadow-strength: 1;
  --gummy-pattern: dots;
  --gummy-pattern-opacity: 0.16;
  --canvas: #fffaf1;
  --ink: #2e1738;
  --fruit-raspberry-core: #e84d72;
  --fruit-grape-core: #9b6be8;
  --fruit-lime-core: #a9db42;
  --fruit-tangerine-core: #f39a42;
  --fruit-aqua-core: #54bfd0;
  --chart-1: #e84d72;
  --chart-2: #9b6be8;
  --chart-3: #a9db42;
  --chart-4: #f39a42;
  --chart-5: #54bfd0;
}

:root[data-theme="dark"] {
  --canvas: #24142c;
  --ink: #fff8ea;
  --fruit-raspberry-core: #f26b8d;
  --fruit-grape-core: #b38af2;
  --fruit-lime-core: #bde65d;
  --fruit-tangerine-core: #f6ad61;
  --fruit-aqua-core: #70d0dc;
  --chart-1: #f26b8d;
  --chart-2: #b38af2;
  --chart-3: #bde65d;
  --chart-4: #f6ad61;
  --chart-5: #70d0dc;
}
Install the foundationnpx shadcn@latest add https://gummyui.dev/r/gummy-base.json

Theme contract

Semantic canvas, surface, ink, line, focus, and status roles remain stable. Fruit families provide material identity, while components derive their light, rim, depth, and shadow values from the shared system.