Design language
Designing the Gel Pop language
A practical account of how Gummy UI turns transmitted colour, attached reservoirs, stable reading planes, and restrained motion into one interface material.
By Gummy UI · Published
Start with material rules, not decoration
Gel Pop is the visual language used by the public Gummy UI components. Its defining ideas are transmitted fruit colour, saturated rims, slight internal clouding, narrow highlights that follow the geometry, and chromatic depth. Those ideas are constraints rather than a licence to attach a glossy blob to every rectangle. A component should still explain its purpose before its material becomes noticeable.
The implementation therefore treats material as part of a component’s anatomy. A control may have a shell, a stable content plane, and a pressure reservoir joined to an edge. The reservoir grows from the functional silhouette instead of floating beside it. This distinction is visible in the canonical source and shared styles, where decorative layers remain hidden from assistive technology and never replace the native control.
Protect the reading plane
Translucency is useful around an edge because it carries colour and depth. It is much less useful directly behind a label, value, or long paragraph. Gummy UI keeps required text on stable light or dark surfaces and lets transmitted colour live around that plane. The result preserves the material idea without asking typography to compete with highlights, gradients, or background content.
This separation also makes themes easier to reason about. Canvas, surface, ink, focus, and fruit families are semantic tokens rather than colours copied into individual components. Dark mode can change the relationship between the canvas and local material while the text plane remains predictable. The theme page exposes those tokens as a browser-local tool, so experimentation does not require a customer account or remote data store.
Give motion a job
The motion vocabulary is deliberately small: press, settle, a short reservoir response, and restrained loading movement. It should confirm activation or state change, not keep the page moving after the user has finished. Shared reduced-motion rules remove travel, squash, and rotation while preserving visible focus, selection, validation, and loading status.
A useful review question is whether the same component remains understandable when every decorative transition is removed. If the answer is no, animation is carrying information that belongs in semantics or static state styling. The public Component Lab makes this comparison possible alongside default, focus, disabled, dark, responsive, and RTL specimens.
Review the whole silhouette
Material continuity is easiest to judge at component boundaries. Highlights should follow the shape, shadows should remain chromatic and local, and reservoirs should not create false controls. Dense compositions need even more restraint because repeated glossy surfaces can erase hierarchy. Gummy UI uses stronger material for actions and state, then quieter surfaces for reading and grouping.
The result is not a universal recipe for every product. It is the implemented direction of this component system, documented so contributors can make consistent choices. The design-direction record, theme tool, and canonical catalogue provide three different views of the same rules: intent, tokens, and working source.