Calm screens, crafted components.
From one colour.
Wixzel UI is the design system behind every Wixzel product. React and Flutter components, a whole palette from your brand colour, and a Claude skill that converts your project.
Everything answers the hand
These are the real components. Press, hold, type, switch.
Press and hold: buttons shrink to 96% and ease back. Loading keeps the width.
Callers hear this name.
Fields are filled, not outlined. Focus is a solid edge in the accent, never a glow.
Checks draw themselves in. The switch thumb stretches while you hold it.
Selection is ink: a solid block of text colour. The ink slides between tabs.
Numbers are tabular. A delta is green when the move is good, whichever way it goes.
Status colours are never the accent, and the accent never means success.
Agent on the start side, the person on the end side. Streaming text ends in a block caret.
Initials on a soft gradient. Groups fan out on hover. The spinner is a ring.
Pick a colour. Get the whole palette.
The page, the surfaces, the lines and the text all take its hue. Every text pair passes WCAG AA, in light and dark.
Your brand colour. Everything else is derived from it.
How strongly the hue tints the page, surfaces and text. 0 is grey.
Campaigns
Three running this week.
Read the delivery report for last week.
npx wixzel-ui --seed "#E4572E" > src/brand.css
React, Flutter, and the rest
Same tokens, same derivation, same hex values on every platform.
Flutter
A ThemeData with no Material showing through, and Wx widgets.
flutter pub add wixzel_ui
Vue, Svelte, HTML
The tokens as CSS variables and a Tailwind theme, plus the class recipes.
npm i wixzel-ui
Claude skill
Convert a project in one request
The skill teaches Claude the design language, the components and the conversion steps: survey first, keep every logo and word, swap components screen by screen, then check both themes.
Add the marketplace once, then install the plugin. It updates with the repository.
/plugin marketplace add wixzel/wixzel-ui /plugin install wixzel-ui@wixzel
Then ask, in your project
Convert this project to Wixzel UI. Our brand colour is #E4572E.
The design language
Six rules every screen follows.
Calm structure
Tinted paper, tinted ink, almost no lines. The craft lives inside the components.
Everything responds
Presses shrink, hovers fill, new things sharpen out of a blur. Nothing overshoots.
Tonal planes
Panels are tinted fills, not bordered boxes. Corners are squircles.
Colour through everything
Your hue washes the whole product. Full accent is kept for the primary action.
Approachable
Manrope, Phosphor duotone icons, plain words. No gloss, glass or gradients.
Compose, never restyle
Screens use the components as they are. What's missing goes into the library.
Start with one colour
Install the packages, or hand the job to Claude with the skill.