A detailed style guide is a great tool when designing user interfaces. One element that is often overlooked by many designers is vertical rhythm. Horizontal grids have been widely adopted for a while (from 960 to bootstrap), but a systematical vertical rhythm helps both designers and developers work more efficiently.
Attached is a simplified style guide in Sketch for reference, but the focus here is the vertical rhythm. The line-height of the design is 28px, so the rows are setup with a gutter height of 1px and row height of 27px.
Font used in Sketch file is Open Sans.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Almost Sold Out: Hang Time Workshops with Jon Contino, Danielle Evans, and MDS.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.