Consistent by default.
Yours by design.
A mobile-first design system for designers, and the teams they ship with.
Change one token. The whole app re-paints.
Primitives carry the value. Semantics carry the intent. Components only ever read intent, so a single rebrand never touches a single component.
--accent-300: #c2f542--accent: var(--accent-300)Not an afterthought.
Not your problem.
Every component ships in both modes. One data-theme attribute, the whole app re-paints. No half-built modals at 2am.
Accessible at the token level.
Contrast checked at the palette. Focus rings shipped on every interactive. ARIA wired by default. WCAG AA is the floor, not the goal.
reading mayelow-ui/tokens bg-surface · text-fg · rounded-lg bg-accent for primary CTA dark mode: included.
Your AI happens to love it.
Tailwind-native names. Two-layer tokens. Names every model has already seen. Claude Code and Cursor stop inventing hex codes the moment you hand them the system.
A few quick ones.
Is it a Figma file or code?
Both. Figma variables export 1:1 into CSS custom properties and a Tailwind theme.
Do I need to know Tailwind?
No. The class names describe intent (bg-surface, text-fg-muted). Use them or replace them. Your call.
Can I rebrand it?
Swap one semantic token. The whole system re-paints.
What's included at launch?
40+ components, 12 app screens, full dark mode, Figma variables, CSS tokens, Tailwind theme.
When does alpha open?
2026. Join the list and you'll get the kit the day it opens.
A design system you own.
Adjust it. Brand it. Ship it. Be one of the first designers to get the kit.