Minimal · Monochrome · Soft Color
xAI Light
A spacious light AI system with centered hero content, monochrome controls, restrained borders and softly tinted surfaces.
01
Preview
Live HTML · responsive · interactive
02
Design Principles
The decisions that make the style coherent.
- 01
Use the captured semantic tokens as the visual foundation.
- 02
Preserve the source system’s spacing rhythm and type hierarchy.
- 03
Apply accent color deliberately to actions and emphasis.
- 04
Keep surfaces, borders and corner treatments consistent.
03
Colors
Primary#0A0A0A
Background#FFFFFF
Foreground#0A0A0A
Surface#F9F8F6
Accent#B34FE8
04
Typography
DisplayUniversal Sans Display
500 / 60px · restrained authority
BodyUniversal Sans
400 / 16px · quiet utility
05
Components
- Actions↗
- Form controls↗
- Selection controls↗
- Notices↗
- Progress↗
- Toasts↗
06
Patterns
- Semantic tokens◆
- Responsive spacing◆
- Type hierarchy◆
- Surface layering◆
- Accessible controls◆
READY TO USE
Download design.mdGive your agent a point of view.
Download the complete specification and add it to your project context.