Presets / Harbor
Harbor preset
A confident ocean blue with Manrope's wide, modern letters and soft corners. Looks established without looking stiff. 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
Harbor
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.
Native motion
1× speed · 25% bounce · 1× travel
Easing
Spring overshoots by 2%. The ease-out never does.
Hover and press
Lift and press depth follow the hover setting.
Enter and stagger
50 ms between rows, 10 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.
- Fast140 ms
- Base220 ms
- Slow320 ms
- Reveal600 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-harborThis is the Harbor preset, so it installs by name. The command writes the tokens into your globals.css, and adds the typeface (with next/font on Next.js, from Fontsource elsewhere).
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.1:1 | 17.8:1 | 4.5:1 |
| Text on cards | 19.1:1 | 16.6:1 | 4.5:1 |
| Text in popovers | 19.1:1 | 16.6:1 | 4.5:1 |
| Button text | 4.5:1 | 8.5:1 | 4.5:1 |
| Primary used as text | 4.7:1 | 8.5:1 | 4.5:1 |
| Secondary button text | 16.4:1 | 14.7:1 | 4.5:1 |
| Muted text on page | 6.0:1 | 7.8:1 | 4.5:1 |
| Muted text on muted | 5.4:1 | 6.5:1 | 4.5:1 |
| Text on accent | 15.9:1 | 13.3:1 | 4.5:1 |
| Destructive text | 5.2:1 | 5.7:1 | 4.5:1 |
| Focus ring | 3.6:1 | 6.3:1 | 3:1 |
| Chart 1 | 3.9:1 | 7.3:1 | 3:1 |
| Chart 2 | 3.3:1 | 8.6:1 | 3:1 |
| Chart 3 | 3.0:1 | 9.8:1 | 3:1 |
| Chart 4 | 4.0:1 | 7.1:1 | 3:1 |
| Chart 5 | 3.3:1 | 8.5:1 | 3:1 |
Tokens
Light