Detos UI
General
Workspace
One hex in · forty components out
Your design system in WeWeb, from one hex code.
Seed colour
Change it. The scale, the mark and every component follow in order, not all at once.
The scale
50
100
200
300
400
500
600
700
800
900
950
And everything downstream
64%
Your design system in WeWeb, from one hex code.
Pick a color. Get the full scale and every component styled to match. Free.
Invite your team
Each member takes one seat in the workspace.
Email me when they join
Every piece, already built.
Forty components, from buttons to data tables, built natively for WeWeb.
Badge
Tag
Design
Tokens
Avatar
Progress bar
64%
Status
Badge
Tag
Design
Tokens
Avatar
Progress bar
64%
Status
The catalogue
Forty pieces, and every one already knows your colour.
ATOM
Buttons
Primary, secondary, ghost, destructive and icon-only. Every one carries hover, focus and pressed, and the focus ring passes 3:1 on its own.
Primary
Secondary
Ghost
5
variants
4
states each
AAA
label contrast
The chain reaction
One decision, four times larger each time.
The mark fills in as the system grows. Each module arrives when its level does never all at once, because that is not how a system gets built.
Atom
Start with a button.
The smallest piece, with every state it will ever need: hover, focus, pressed, disabled.
Molecule
Add a field.
Label, input and hint follow the same spacing and the same contrast floor. Nothing is decided twice.
Organism
Build a form.
Molecules group into a block with a purpose of its own, ready to drop into a screen.
Screen
Ship the app.
The form lives inside navigation, header and layout. All of it from the one colour you picked.
The chain reaction
One decision, four times larger each time.
The mark fills in as the system grows. Each module arrives when its level does — never all at once, because that is not how a system gets built.
- Atom
- Molecule
- Organism
- Screen
Start with a button.
The smallest piece of the system, with every state: hover, focus and pressed.
Add a field.
Label, input and button follow the same spacing and contrast rules.
Build a form.
Molecules group into a block with a purpose of its own, ready to use.
Ship the app.
The form lives inside your app, with its navigation and header. All from one system.
Invite your team
Each member takes one seat in the workspace.
Workspace settings
Invite your team
Your color, your system.
Paste a hex code. Detos builds the 50 to 950 scale, checks the contrast of every step and styles the components to match.
Seed
#FFB000
50
#FFF6EA
100
#FFEFD8
200
#FFE2B9
300
#FFD394
400
#FFC366
500
#FFB000
600
#D69300
700
#A97300
800
#7F5500
900
#5B3C00
950
#311F00
80%
Accessible from the first click.
Keyboard, focus and screen readers work out of the box, because every component sits on native elements.
Native controls
Buttons, inputs and checkboxes are real HTML elements, not styled boxes.
Visible focus
Every control shows a clear focus ring when you move with the keyboard.
Motion that listens
Animations switch off when the system asks for reduced motion.
Press Tab to move through these controls.
Accessibility
Not a promise. A measurement.
Every pair below is read from the live tokens, not from a style guide someone wrote once. If a generated palette cannot clear the floor, the generator moves the shade until it does.
Body copy, at the weight people actually read.
text/primary
15.13:1
AAA
Supporting text, hints and helper lines.
text/tertiary
10.37:1
AAA
Table headers and the quieter labels.
text/quaternary
7.81:1
AAA
The focus ring. Visible without relying on colour alone.
ring/default
4.09:1
AA
The edge that says "this is a control".
border/primary
3.11:1
AA · 1.4.11
Label on the brand button.
bg/brand-solid
8.26:1
AAA
Bars run the full 1–21 contrast scale. The pale tick on each one is that pair's floor: 4.5:1 for body text, 3:1 for control edges (WCAG 1.4.11).
Built for the people who ship.
Whether you build alone, run a small studio or work inside a product team, everyone starts from the same solid foundation.
Freelancers
Start every client project from a finished system, not a blank page.
Studios and agencies
One workspace per client. Duplicate a system and hand it off without rebuilding it.
Product teams
Shared tokens and components keep every screen consistent as the team grows.
The same forty components
Three seeds. Three systems that share nothing but their rules.
No screenshots of other people's work, and nobody at a laptop. These are real outputs: change the hex and this is what comes back including the shades the generator had to move to clear the contrast floor.
#FFB000
Get started
See components
Active
v2.1
name@company.com
The one this site runs on. Warm, loud, and still AAA on its own label.
#2563EB
Get started
See components
Active
v2.1
name@company.com
A blue most generators take straight past the contrast floor. This one stops short of it.
#166534
Get started
See components
Active
v2.1
name@company.com
A dark seed, so the scale climbs instead of falling. The button text flips to white on its own.
Never start from zero again.
Workspaces, projects and seats keep every client's system in one place.
Workspaces for every client
Create one per client or product. You own it and decide who gets in.
Invite your team
Each person takes a seat. Roles decide who can edit.
Duplicate any project
Copy a whole system in one click and adapt it for the next client.
Client site
Client site copy
Take the prompt to your AI
Your tokens and components, written as a prompt your assistant can build from.
Build UI Button in WeWeb.
Variants: primary, secondary, tertiary.
Use the brand scale seeded from #FFB000.
Free while it is worth your time
Pick a colour. Keep the system.
One hex, forty components, and a prompt you can take to any tool. Nothing to install, nothing to undo later.
no card · no trial clock
A design system for WeWeb, generated from one hex code. Built natively no wrappers, no embeds.
© 2026 Detos UI