Layout
Rhythm, alignment, and density give complex product tasks a readable structure.
Created & adapted by Insan NurjamanChakra UI foundationCurated public preview
Structure before density
Button sizing
2xs / xs / sm / md / lg / xl / 2xl
Product identity
Shared roles, brand-specific corners
Task rhythm
Controls → field groups → sections
Group by task
Keep related controls together. Separate different decisions through spacing and headings. On narrow screens, preserve context through reflow rather than reducing every value proportionally.
Control → Group → Section
Conceptual rhythm illustration. Only explicitly listed source values above are numeric specifications.
Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.
Explore the story 