Typography

H1 Astronomy Or Astrology - which is real?

H2 How To Look Up to the Night Sky

H3 Telescopes 101: Everything You Don’t Know

H4 Insomnia Tips for when you’re half dead

H4-U Insomnia Tips for when you’re half dead

This is typical body text. It’s roomy, with solid 1.77em line-height. Furthermore, sections of actual text should not exceed 800px wide. When television was young, there was a hugely popular show based on the still popular fictional character of Superman. The opening of that show had a familiar phrase that went, “Look. Up in the sky. It’s a bird. It’s a plane. It’s Superman!”

Checkout that margin between paragraphs! How beloved Superman has become in our culture and the worldwide fascination strong font-weight 800 with extraterrestrials and all things cosmic only emphasizes that there is a deep curiosity in all humans about nature and astronomy, even if many people would not know to call it astronomy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Colors

#EBF3F7
Section BG

#2DE6FB
Button Color

#738EF0
Accents and Icons

#FF881A
Accents, legacy links

#474747
Section BG

#FFF
Default BG

#333
Text

#F4579E
Buttons & Links

Radial Gradient
High-attention section backgrounds

Linear Gradient
Top left to bottom right.

Linear Gradient as Overlay
Top left to bottom right. Used commonly as an overlay on images for marketing reasons or in hero sections.

Buttons

Primary CTA

Usually no more than 1-2 per page

Used in cart pages

Used in cart pages

Secodary CTAs

Used more freely for things like add to cart on storefronts, learn more links, etc…

Tertiary CTA & Text Links

Used more freely for things like add to cart on storefronts, learn more links, etc…

In contained modules shown multiple times

Next to primary and secondary CTAs as necessary

Read more links on homepage

Used sparingly on standalone links, typically beneath text or text-align center on it’s own line

Modules & Containers

Product Module

This style is only for promotional product offerings. Not content posts. Note Tertiary CTA use and ordinary text link.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Content Module

The blue version of our most popular product, which has a blue hue even during the day.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

For that special someone on your list who “has everything,” for that scientist or educator in your life that just needs to have the coolest thing…

Read Full Article