The Wixzel design philosophy.
Wixzel builds many products: Voice, IntelliCall, WhatsAgent, AutoPilot, Feedkraft, Edu, One. They should all feel like one family, and they should feel made: calm, precise and quick, at the level of the best software people use every day.
Two words run through every decision.
Wixzel is not recognized by a logo shape stamped on every button. It is recognized by colour that runs through the whole product, and by how its components are built and how they respond.
Simplicity
Each screen does one thing clearly, with as little chrome as possible.
Customizability
A product team gives its product one colour and gets a whole, accessible look from it.
The principles.
Calm structure, crafted components
Pages stay quiet: tinted paper, tinted ink, almost no lines, comfortable spacing. The craft lives inside the components, where people touch the product. A button, a switch or a menu should hold up to close inspection.
Everything responds
Every control answers the hand, quickly and physically.
- Presses shrink to 96% at once and ease back on release.
- Hover fills a control a shade darker; nothing jumps or glows.
- Motion is snappy: moving parts start fast and land softly in about 150ms, with no overshoot. Colour changes take about 110ms.
- New things arrive by sharpening out of a blur: menus, dialogs, tooltips, the save bar, tab content.
- Nothing waits for an animation to be usable, and everything respects reduced motion.
Tonal planes, squircle corners
Panels are tinted fills on a lighter page, not boxes drawn with borders or lifted on shadows. Fields are filled the same way. Lines are kept for dividing rows inside a panel. Corners are squircles: the curve eases into the edge, so even large radii stay crisp. The current tab, nav item or chip is inked, a solid block of text colour with the label reversed out of it; full accent is kept for the primary action. Focus is a solid edge, never a glow.
Colour through everything
A Wixzel product is never grey. Its colour washes the page, the surfaces, the lines and the text, so Voice is unmistakably lime and IntelliCall violet before you read a word. Full-strength accent still marks only the primary action, the current selection and focus; everything else carries the hue quietly. Status colours are never accents.
A product team customizes by setting one seed colour, and optionally how strong the wash is, a corner scale and a font. The rest is derived in OKLCH, so lightness and contrast are the same in every hue. Every text pair, in every product and both themes, passes WCAG AA, and the build fails if one doesn't.
Approachable, never premium
One typeface, Manrope: open, friendly, bold in headings. Icons are Phosphor duotone, a line drawing with a soft fill of the same colour behind it. Plain words that name what people recognize. Errors say how to fix them. No gloss, no glass, no AI gradients.
Aa
Calm, precise and quick.
Plain words that name what people recognize.
One family, many products
A component is built once and used everywhere. Products compose components into their own screens but never restyle them. If a product needs something the library lacks, the library gets it.
The details, component by component.
Every component carries its own details, and every product gets them for free by using the library.
- Button
- Shrinks to 96% on press and eases back. Filled: darker rim, top highlight, hard bottom edge. Secondary: a light raised face. End icons slide 2px forward on hover. Loading swaps the start icon for the spinner and keeps the width.
- Input, Textarea, Select
- Filled with a tint, no border. Darken a shade on hover. Focus: a solid 2px accent edge. Invalid: red edge, solid red on focus. A leading icon takes the accent while the field has focus. Textareas grow with their content.
- Field
- Label, hint and error wired for screen readers. Errors fade in with an icon and say what to do.
- Checkbox
- The check draws itself in along its path and draws back out. The box squeezes to 90% on press.
- Switch
- A pill track and a round thumb. The thumb stretches while held, then slides across; the track crossfades underneath.
- Tabs
- The current tab is inked, and one ink block slides between tabs. The first placement doesn't animate.
- Menu, Select list
- Sharpen out of a blur as they drift a few pixels from their trigger. Icons darken on the highlighted row. Shortcuts are keycaps, one per key.
- Tooltip
- Waits 400ms the first time, then opens instantly as you move along.
- Dialog
- Sharpens out of a blur over a plain scrim. Actions sit in a footer band, a shade off the dialog.
- Card
- A tinted panel: no border, no shadow. Interactive cards darken a shade on hover and shrink a little when pressed. Selected: the accent wash, a solid 2px accent ring and a check that pops in.
- Table
- Sits on a tinted panel. Tabular numbers. Hover tints the row. Selected rows take the accent wash and an accent edge on the leading cell.
- Badge
- Soft by default. A live state sends out a slow ring, such as a call in progress.
- Spinner
- A ring: a quarter arc with round ends turning over a faint track. With reduced motion it slows down instead of stopping.
- Chips
- Filter chips, single or multiple choice, with an optional count. Chosen chips are inked, like the current tab. They squeeze slightly on press.
- CopyField
- Masks secrets to their last four characters until revealed. Copy morphs into a check for 1.6s. If the clipboard is refused, the text is selected instead.
- Message, Transcript
- Agent turns on a neutral bubble from the start side, the person's on the accent wash from the end side. Streaming text ends in a blinking block caret.
The numbers underneath.
| Foundation | Value |
|---|---|
| Radius | Squircles where the browser supports them: 7, 9, 14, 26 and 30px. Controls 14px, panels 26px, dialogs 30px. Elsewhere, round corners of 5, 6, 10, 16 and 20px. |
| Control heights | 28, 32, 38 (default) and 44px. Comfortable density. |
| Type | Manrope. 15px body, 14px in controls and tables, bold headings drawn in tight. |
| Icons | Phosphor duotone, set once for the whole product. |
| Motion | 70ms press, 110ms colour, 150ms moves, 270ms blur-in entrances. No overshoot. |
| Themes | Light, dark, or the OS. Any region can carry its own theme or product colour, and menus and dialogs opened inside it follow. |
See it in the products.
Wixzel Voice was the first product built on it. Every Wixzel product follows.