Base Styles
Color
Typography
Poppins
This is an H1
Maecenas faucigbus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 54, t: 40, m: 32 (px) / lh: 1.1em
This is an H2
Maecenas faucibus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 48, t: 32, m: 28 (px) / lh: 1.1em
This is an H3
Maecenas faucibus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 36, t: 30, m: 26 (px) / lh: 1.15em
This is an H4
Maecenas faucibus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 28, t: 26, m: 24 (px) / lh: 1.2em
This is an H5
Maecenas faucibus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 24, t: 22, m: 20 (px) / lh: 1.2em
This is an H6
Maecenas faucibus mollis interdum nulla vitae elit libero, a pharetra augue.
Poppins 500 / d: 22, t: 20, m: 19 (px) / lh: 1.15em
This is a paragraph. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo magna, vel scelerisque nisl consectetur et. Vivamus sagittis augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.
Poppins 500 / d: 18, t: 17, m: 16 (px) / lh: 1.6em / p: 1.6em
Nexa Slab
Nexa Slab / 900 / d: 90, t: 70, m: 44 (px) / lh: 1.1em
Nexa Slab / 800 / d: 60, t: 40, m: 32 (px) / lh: 1.05em / ls: .1em
Nexa Slab / 800 / d: 42, t: 32, m: 26 (px) / lh: 1.02em / ls: .1em
Sections
Section / Boxed
D: 80/24, T: 40/60, M: 40/24
Want to get something started?
Want to get something started?
Want to get something started?
Want to get something started?
Want to get something started?
Individual Headings
Easier to control, more fidgety. Resize headings for longform content and custom size the rest of the site?
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph – Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eget dolor lacinia leo finibus scelerisque quis non quam. Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Text Link – Fusce eget dolor scelerisque
- Bullet 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Bullet 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Individual Headings (Gray)
Easier to control, more fidgety. Resize headings for longform content and custom size the rest of the site?
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph – Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eget dolor lacinia leo finibus scelerisque quis non quam. Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Text Link – Fusce eget dolor scelerisque
- Bullet 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Bullet 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Example (H2)
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Newton's laws of motion and universal gravitation, the laws of conservation of energy and momentum, the laws of thermodynamics, and Maxwell's equations for electricity and magnetism were all more or less nearly complete at the end of the 19th century.
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo.
Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ullamcorper enim a erat vulputate dapibus gravida vitae diam. Curabitur mattis sapien ac dolor sollicitudin, at dictum felis ullamcorper.
Curabitur lobortis ipsum id nulla maximus, id vulputate magna ultricies. Etiam fringilla ex eros, eu eleifend orci luctus et. Morbi commodo libero nec nisi fermentum, et fermentum justo luctus. Sed tincidunt sapien vel egestas varius. Fusce malesuada, augue a varius ullamcorper, mauris sem cursus justo, at mollis ante nisl et urna. Praesent scelerisque ipsum ac lobortis efficitur. Morbi et velit ipsum. Nam at erat sapien. Curabitur et risus id risus consequat rhoncus eget id massa. Fusce sit amet aliquam odio. Etiam tristique rutrum laoreet.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 4
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 5
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 6
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Example (H2)
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph – Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eget dolor lacinia leo finibus scelerisque quis non quam. Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Text Link – Fusce eget dolor scelerisque
- Bullet 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Bullet 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 1 – Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
- Number 2– Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 4
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 5
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 6
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Heading 3
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo. Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Newton's laws of motion and universal gravitation, the laws of conservation of energy and momentum, the laws of thermodynamics, and Maxwell's equations for electricity and magnetism were all more or less nearly complete at the end of the 19th century.
Nunc tristique mauris lorem, in dapibus diam pulvinar id. Phasellus eget luctus ipsum, ac elementum ex. Mauris studies¹ tristique ultricies iaculis. Integer tempus, sapien nec ornare porttitor, augue tellus convallis ipsum, quis efficitur dui nibh sit amet nibh. Pellentesque in fringilla velit, in tristique justo.
Nam tempus nisl nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ullamcorper enim a erat vulputate dapibus gravida vitae diam. Curabitur mattis sapien ac dolor sollicitudin, at dictum felis ullamcorper.
Curabitur lobortis ipsum id nulla maximus, id vulputate magna ultricies. Etiam fringilla ex eros, eu eleifend orci luctus et. Morbi commodo libero nec nisi fermentum, et fermentum justo luctus. Sed tincidunt sapien vel egestas varius. Fusce malesuada, augue a varius ullamcorper, mauris sem cursus justo, at mollis ante nisl et urna. Praesent scelerisque ipsum ac lobortis efficitur. Morbi et velit ipsum. Nam at erat sapien. Curabitur et risus id risus consequat rhoncus eget id massa. Fusce sit amet aliquam odio. Etiam tristique rutrum laoreet.
Forward-thinking in your Inbox

David is the founder and president of NewCity. He teaches workshops on UX and content strategy.
Key Take-away:
Note: This needs custom button styling and accessibility love