Template + Composition

Choose a direction. Make it yours.

Pick what you are designing, choose the closest direction, then export a DESIGN.md your coding agent can follow.

What are you designing?

Start with the kind of experience you need.

Choose a template

Its composition and visual direction will appear here.

State playground

HoverMove a pointer over this control.

FocusTap or tab into this field.

PressedFeel the active feedback.

DisabledStill readable, clearly inactive.

Longer body copy should remain readable without forcing a single-line layout or hiding meaningful content.

https://example.com/projects/a-very-long-unbroken-reference-that-must-not-create-horizontal-overflow