Components
Reuse focused components for signatures, guidance and product controls. Each has a different job.
One clear idea01 / 03Anatomy before decoration
Help people find the next step. Reuse the existing controls, colors, spacing and radius tokens. Keep focus, errors and disabled states legible.
In practice
01 / 03One clear idea
Turn one clear idea into a learning path. Give the next step room to become useful.
Thank you for making space for a new idea. Keep the message clear, and give the next step room.
A card keeps the title, context and next action together. Its summary expands without changing page focus.
Keep labels visible. Attach the error message to its field and explain how to fix it. Include a text cue as well as color.
Next: shape the lesson
Confirm completion with a check, a word and a changed action state. Disable an action only when it is unavailable.
A small system, real states
Rules and source
Brand primitives
Use approved logo assets, swatches, token labels, guidance panels, patterns and application templates. Keep provenance attached to the assets.
Product UI stays product UI
Reuse the existing accessible button and control primitives. This brand page demonstrates identity rules; it does not retheme every product surface.
Do
Build from shared tokens and small, focused components.
Don’t
Do not substitute a decorative fragment for an action icon or logo.
Open editable Figma sourceSource pages 12, 15, 27