Tools
Theme Designer
Build a theme from one key color, then choose corner radius, density, type, neutral colors, elevation and motion. Apart from color, each axis has a few tested steps. Each part has its own preview and checks; at the end, light, dark and high contrast sit side by side.
Color
The key color is brand80; the other 15 steps are generated from it. Light and dark use different steps, so both are checked.
Key color (brand80)
Checks
- White text on the primary button (light)5.16:1
- White text on the primary button (dark)6.45:1
- Brand text on the tint background5.71:1
- Brand text on a dark background5.19:1
- Hue distance from danger31°
Shape
The whole radius ramp scales by one ratio, so controls, cards and dialogs keep their proportions. Circular buttons stay circular.
Corner radius
Alex Chen
Design
Save changes?
Density & type
Density
One factor for spacing and control heights. At Compact, the YugenProvider snippet under Export adds density, and controls default to size small.
Base font size
The whole type ramp scales by the same ratio. Line heights are recalculated, not set one by one.
Check
- Smallest target (size small)24px
Surfaces & elevation
Applies to light and dark; high contrast stays unchanged.
Neutral colors
Adds a slight tint to the gray scale, and contrast is checked again.
Elevation
The whole shadow scale changes at once. Flat keeps half the shadow on Menu and Dialog so they stand out from the background.
Check
- Text on neutral backgrounds (light, dark)5.68:1
Motion
Multiplies durations by ×0.75 / ×1 / ×1.25, up to 500ms. prefers-reduced-motion still takes priority.
Motion
Glass
The Yugen Labs glass material. Blur, saturation and opacity go together; opacity never goes below what keeps text at 4.5:1 over black or white.
Glass (Yugen Labs)
Blur 24px, saturation 180%, opacity 0.8 / 0.82 (light / dark).
Glass tint
Brand: the glass takes step 160 (light) or 20 (dark) of the ramp. Needs a browser with relative color syntax.
Check
- Text on glass over black or white (light, dark)5.55:1
Preview
Real components with the new theme, light, dark and high contrast side by side. The theme is nested, so the rest of the page is not affected.
All 8 checks pass
Invite members
The invitation arrives by email within a few minutes.
| Invoice | Status |
|---|---|
| INV-1024 | Paid |
| INV-1025 | Pending |
Changes saved
Synced to your other devices.
Invite members
The invitation arrives by email within a few minutes.
| Invoice | Status |
|---|---|
| INV-1024 | Paid |
| INV-1025 | Pending |
Changes saved
Synced to your other devices.
Invite members
The invitation arrives by email within a few minutes.
| Invoice | Status |
|---|---|
| INV-1024 | Paid |
| INV-1025 | Pending |
Changes saved
Synced to your other devices.
Export tokens
CSS: paste it into your app's main CSS file, right after @import "yugen-ui/theme.css", then set the brand on YugenProvider. It contains the brand ramp and every option above. JSON (brand ramp only): import it into Figma (Tokens Studio, Variables) or Style Dictionary.
[data-brand="my-brand"] { --brand-10: #240c16; --brand-20: #391324; --brand-30: #4c1930; --brand-40: #61213f; --brand-50: #79274d; --brand-60: #912d5c; --brand-70: #a72f69; --brand-80: #c2347a; --brand-90: #e24a92; --brand-100: #fa65a8; --brand-110: #fb7cb2; --brand-120: #fd8ebc; --brand-130: #ffa7c9; --brand-140: #fec1d7; --brand-150: #fed6e4; --brand-160: #fdedf3;}<YugenProvider applyToDocument brand="my-brand" theme="light">
<App />
</YugenProvider>