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.

Review before export

Start with semantic roles, not isolated swatches: canvas and ink must support long-form reading, focus must remain unmistakable, and status colours must work alongside text or icons. Compare both colour modes with realistic labels, validation, disabled controls, dense cards, charts, and keyboard focus. Then check narrow screens, 200% zoom, RTL, forced colours, and reduced motion before copying the CSS into a product. A shared builder URL records a design direction; it is not a substitute for testing the actual content and component states your customers will use. Save one shared URL as the review baseline, compare the exported token diff in version control, and record why any semantic role changed before shipping the theme.