Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--yellow-solid · --radius-md · --radius-sm · --dur-fast
L · 05 Wizard · multi-step Signup · onboarding · long flows
Account
Plan
3
Payment
4
Confirm
Card number *
Expiration
CVC
Postal code
Step 3 of 4, payment
L · 06 Sticky save bar · dirty state Long settings pages, bar appears when fields change
Display name
Shown to friends and on shared links.
Bio
Up to 280 characters.
Public profile
Lets put.io users find you via username.
Unsaved changes · 2 fields
L · 07 Inline edit · click-to-edit row Profile fields · single-value rows · low-stakes updates
Username
kai
Display name
Email
kai@example.com
Member since
Aug 14, 2014 · 12 years
Layout rules.
L · 05 wizards split long flows into 3 to 5 steps. The current step gets the yellow marker
L · 06 the sticky bar appears only once the form is dirty, and never covers the last field
L · 07 inline edit keeps display rows quiet. The pencil reveals on hover