Acopone design system
One design for everything Acopone builds
The reference for how every Acopone product looks and behaves: tokens, components, lists and patterns, shown live in every theme and size, on every kind of screen. When the design changes, it changes here first.
Brand colour
Acopone yellow is the core. Any product can carry another colour; components and status colours adjust on their own. Pick one to see the whole site in it.
The samples are chosen to clash: red with danger, green with success, yellow with warning. See how each is resolved →
How it's put together
Three layers of CSS, then the shared components on top.
- 1
acopone-tokens.cssEvery Acopone product, unchangedThe Acopone palette (yellow #F9C424, white, black #1D1D1B), surfaces, text, borders and radius, in light and dark. - 2
app-tokens.css · globals.css · motion.cssEvery app, unchangedHigh contrast theme, shape scale, fluid type, control sizes, springs and safe areas. - 3
brand.cssGenerated from one colourBrand fill, brand text, focus ring, and the four status colours kept clear of the brand. Acopone yellow unless a product has its own.
On top sit components/ui (shadcn primitives) and components/kit (sections, panels, lists, status, segmented controls, dock). The source in this repo is the version every product should match.
Rules
Checked before any UI change merges.
- Built from shadcn/ui on Tailwind. No other component library.
- Only tokens: no hard-coded colours, fonts or radii. The brand is var(--primary) as a fill and var(--primary-ink) as text, never a hex.
- Status is never colour alone: always an icon or a word. Status colours never take the brand.
- Works in light, dark and high contrast, at every text and control size.
- Controls come in three heights: sm 36, md 42 (44 on touch), lg 48.
- Sections are a heading on the page, then one card. Lists inside split by hairlines.
- Phones keep touch-sized controls; inputs stay at 16px or more so iOS never zooms.
- Third-party UI (sign-in, emails, error pages) is themed with the same tokens.
Changing the design
So a change reaches every product the same way.
- Make the change in this repo and check it under every condition and on every device.
- Push it; design.acopone.com updates on its own.
- Copy the changed files into each product at the same paths. Later this becomes one shared package,
@acopone/ui, so products just update it.