Overview
Atomic UI elements, styled by default through theme tokens.
A primitive is an atomic UI element. The element is structural; the styling comes from tokens.
Zazz primitives are the smallest pieces of UI a designer or developer touches by name. They cover one job each. They consume theme tokens for color, type, spacing, radius, and effects, which means a primitive's appearance is a function of the active theme, not a hand-styled per-instance choice.
You write a button element with a button class. Theme tokens decide what color it is, what corner radius it carries, what shadow it lifts on. Re-target the tokens and every primitive in the product follows.
What's in the kit
Fourteen primitives. Each gets its own page with anatomy, variants, code samples, the tokens it consumes, and accessibility notes.
Avatar
Circular identity image with sensible fallbacks.
Badge
Compact label for status, category, or count.
Button
The primary action element. Five visual variants, with and without icons.
Card
Bordered surface for grouping related content. Composes with everything else.
Carousel
Embla-powered slide carousel wired through data attributes.
Checkbox
Binary or tri-state selection input.
Dialog
Native `<dialog>` modal with spring-eased transitions and backdrop.
Input
Single-line text entry. Default plus icon-leading and icon-trailing variants.
Motion
Scroll-triggered viewport entry animations driven by data attributes.
Radio
Mutually exclusive selection within a group.
Select
Native dropdown with custom chevron and themed open state.
Slider
Range input for numeric selection.
Switch
Visual toggle for binary settings. Pairs with the checkbox semantic.
Textarea
Multi-line text entry. Resizable on the block axis.
Platform availability
Not every primitive ships as a Figma component. Form controls that map cleanly to native HTML elements (checkbox, radio, switch, slider, select) live as CSS styling on the native control rather than as a re-implementation.
| Primitive | Figma component | Webflow class | CSS / Tailwind |
|---|---|---|---|
| Avatar | ✓ | ✓ | ✓ |
| Badge | ✓ | ✓ | ✓ |
| Button | ✓ | ✓ | ✓ |
| Card | ✓ | ✓ | ✓ |
| Dialog | ✓ | ✓ | ✓ |
| Input | ✓ | ✓ | ✓ |
| Textarea | ✓ | ✓ | ✓ |
| Checkbox | — (native) | ✓ | ✓ |
| Radio | — (native) | ✓ | ✓ |
| Switch | — (native) | ✓ | ✓ |
| Slider | — (native) | ✓ | ✓ |
| Select | — (native) | ✓ | ✓ |
| Motion | — (behavior layer) | ✓ (script embed) | ✓ |
| Carousel | — (behavior layer) | ✓ (script embed) | ✓ |
Native form controls in Figma stay as the platform's defaults. Designers use a representative styled mockup on the canvas; the production code is the styled native element.
Convention across primitives
Every primitive page follows the same shape:
- What and when. One paragraph on the role and when to reach for it.
- Anatomy. The HTML structure and the parts that have their own selectors.
- Variants. Visual options, exposed through modifier classes or Webflow variant properties.
- States. Default, hover, focus, active, disabled, and any role-specific states.
- Tokens. Which Foundations tokens the primitive consumes.
- Accessibility. Keyboard, focus, ARIA, and screen-reader behavior.
- Cross-platform. Figma component path (if applicable) and Webflow class.