Presets / Pocket
Pocket preset
The iOS feel: large touch targets, big rounded corners, springy motion and the system font, in a warm rose. Tune it below, check it in light and dark, then install it with one command or its code.
Start from a design system
Colour, corners, typeface, platform feel and motion, tuned together. Pick one, then change anything below. Each has a code, so it is one line to share.
Or start from a colour theme
Twelve themes, each checked for contrast in light and dark. They set colour, corners and motion and leave your font and feel alone.
Customise
Your design is saved in the address bar, not on our servers. Copy the link to share this exact theme.
The five chart colours, in order.
Enter a full email address.
The quick brown fox jumps over the lazy dog
Body text in the muted colour: contrast is measured for this pairing, on the page and on muted surfaces.
Menus and dialogs open outside the preview, so they are left out. In your app they follow the same tokens.
Feel the motion
Hover, press and replay. Every panel reads the tokens your settings produce, so what you feel here is what your components do.
Custom motion
1.1× speed · 55% bounce · 1.1× travel
Easing
Spring overshoots by 13%. The ease-out never does.
Hover and press
Lift and press depth follow the hover setting.
Enter and stagger
50 ms between rows, 11 px of travel.
- Design review
- Ship the beta
- Write the changelog
- Invite the team
Durations
Tailwind's duration-150, duration-200 and the rest scale with speed.
- Fast127 ms
- Base200 ms
- Slow291 ms
- Reveal546 ms
Springs in JavaScript
Components built on Motion read the same speed and bounce.
Loops
Decorative loops run.
Compare the feels
The same app in your colours, once per platform feel. Only the handling changes: sizes, corners, focus, shadows, menus and window controls.
These are web components that feel like each platform, not native controls. Ballmac UI is not affiliated with Apple or Microsoft.
Use it
$ pnpm dlx shadcn@latest add @ballmac/preset-pocketThis is the Pocket preset, so it installs by name. The command writes the tokens into your globals.css.
Contrast
32 of 32 checks pass
Every text and graphic pairing the components use, measured against WCAG: 4.5:1 for text, 3:1 for focus rings and chart colours. The builder moves lightness for you, so the result stays readable at any hue.
| Pairing | Light | Dark | Needs |
|---|---|---|---|
| Text on page | 19.2:1 | 17.8:1 | 4.5:1 |
| Text on cards | 19.2:1 | 16.7:1 | 4.5:1 |
| Text in popovers | 19.2:1 | 16.7:1 | 4.5:1 |
| Button text | 4.9:1 | 7.8:1 | 4.5:1 |
| Primary used as text | 5.2:1 | 7.8:1 | 4.5:1 |
| Secondary button text | 16.4:1 | 14.8:1 | 4.5:1 |
| Muted text on page | 6.0:1 | 7.8:1 | 4.5:1 |
| Muted text on muted | 5.5:1 | 6.5:1 | 4.5:1 |
| Text on accent | 15.9:1 | 13.6:1 | 4.5:1 |
| Destructive text | 5.2:1 | 5.7:1 | 4.5:1 |
| Focus ring | 4.0:1 | 5.7:1 | 3:1 |
| Chart 1 | 4.3:1 | 6.8:1 | 3:1 |
| Chart 2 | 3.0:1 | 9.7:1 | 3:1 |
| Chart 3 | 3.0:1 | 10.4:1 | 3:1 |
| Chart 4 | 4.6:1 | 6.4:1 | 3:1 |
| Chart 5 | 3.3:1 | 8.7:1 | 3:1 |
Tokens
Light