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

This is XXL

Nexa Slab / 900 / d: 90, t: 70, m: 44 (px) / lh: 1.1em

This is XL

Nexa Slab / 800 / d: 60, t: 40, m: 32 (px) / lh: 1.05em / ls: .1em

This is LRG

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 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  • Bullet 2Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  1. Number 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  2. Number 2Maecenas 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 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  • Bullet 2Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  1. Number 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  2. Number 2Maecenas 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.

Use image resolution "Full" by default. Custom captions need custom dev: align-left, additional top & bottom-padding. I can mockup). Adding spacer to approximate bottom-padding.

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.

Use image resolution "Full" by default. Custom captions need custom dev: align-left, additional top & bottom-padding. I can mockup). Adding spacer to approximate bottom-padding.

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 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  • Bullet 2Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  1. Number 1Maecenas at velit libero. Phasellus ipsum magna, feugiat eget vehicula quis, rhoncus at erat. Nullam porta non eros vel ultrices. 
  2. Number 2Maecenas 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.

Links, CTA
Note: Fancy link and buttons req custom styling to decouple their unintended gradient link underlines
Email Capture
Forward-thinking in your Inbox
Author box
Picture of David Poteet
David Poteet

David is the founder and president of NewCity. He teaches workshops on UX and content strategy.

Key Take-away
Key Take-away:
If someone comes to you on a mission, with a key question – answer their question!
Visual CTA/Teaser

Note: This needs custom button styling and accessibility love

Blockquote