Roll accessible UI kits
Colours, fonts, type scale, spacing, corners, cards, buttons, form fields and focus rings that work together, with every colour pairing passing WCAG AA. Click any tile to browse options. Lock what you like, roll the rest, copy the code.
How UI Dice works
Roll, browse, keep
Press Roll (or the space bar) for a whole new kit, or roll a single tile with its own dice. Click any tile to see a gallery of options, use the tabs to narrow it (serif fonts, dark palettes, an 8px spacing grid, pill buttons) and click one to use it. Whatever you pick is kept when you roll again; unlock it to hand it back to the dice.
Contrast is checked on every roll
Every kit is held to WCAG 2.2 AA: 4.5:1 for body text, muted text, links, success and error messages, every button label and text in form fields; 3:1 for buttons, accents, form field edges and the keyboard focus ring. Colours you set by hand are never changed. If one can’t pass, UI Dice says which, and Fix finds the nearest shade that does.
Judge it in use, not as swatches
The live sample draws your whole kit on a real page: the fonts and type scale, spacing, corners, cards, primary and secondary buttons, a form field with its focus ring, links, and success and error messages. If it reads well there, it will read well in your product.
Copy CSS, design tokens or Tailwind
Export the kit as CSS custom properties, as design tokens in the W3C format (JSON), or as a Tailwind CSS v4 @theme block: colours, fonts, text sizes, spacing steps, corner radii, card shadow and focus ring. Every kit has a short seed and a share link that recreates it exactly. The fonts are all free Google Fonts.
Questions
- Can I start from my brand colour?
- Yes. Open the colour tile, choose “Fine-tune colours by hand”, set your brand colour as the button colour and keep it. Every roll then builds the rest of the palette around it, still passing contrast.
- Does it make dark mode palettes?
- Yes: open the colour tile and choose the Dark tab. Every roll is then a dark interface palette, with the same contrast checks.
- Can I keep a serif font but change everything else?
- Yes. Open the type tile, pick the Serif tab and click the pairing you like; it stays while you roll the rest of the kit.
- Is it free? Do I need an account?
- Free, with no sign-up. Your kit lives in the link, so nothing about you is stored.
- What’s next?
- Icon styles, matching light and dark versions of a kit, and motion.