Layout
Rhythm, alignment, and density give complex product tasks a readable structure.
Created & adapted by Insan NurjamanAnt Design foundationCurated public preview
Structure before density
Default density
controlHeight · 32px
Compact density
controlHeight · 28px
Responsive page headers
Desktop · Tablet · Mobile
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 