Image

Typography

Our typography is another important expression of the Snorkel brand identity. A bold geometric display typeface brings impact and confidence to our messaging, combined with a precise and legible body typeface that enables us to quickly dive into the detail.

Primary font

Our primary typeface is Poppins, a geometric sans serif typeface from the Google fonts library. We use Poppins as a display font for headline copy and callouts, in a SemiBold weight with tight kerning and leading.
Download here
Image

Secondary font

Our secondary typeface is Inter, a technical sans serif typeface from the Google fonts library. We use Inter Regular and SemiBold for body copy and sub-headings, and also in the Snorkel Flow product.
Download here
Image

Color usage

For obvious reasons, our typography needs to be legible at all times so keeping a strong contrast with light and dark mode backgrounds is essential. For light mode we use a Dark Gray, with our Marine Blue for callouts. For dark mode we use White, with callouts either in Blue or Coral Pink depending on context.
Image
Image

Sentence case

We use sentence case in our typography, capitalizing the first letter of the first word in a title, sentence or term. Exceptions to this rule are proper nouns such as names, products or named features.
Read more
Image
Image

Kerning and leading

Kerning and leading are typographic terms that refer to the spacing between individual letters and spacing between lines of text, and both are integral to ensuring our typography is legible and looks and feels part of the Snorkel brand.

Please refer to the typescale page for detailed documentation for kerning and leading settings within Figma.

Image
Image

Alignment

Alignment is extremely important in typography. Our preferred paragraph layout is left aligned, non-justified type to optimize legibility.

On occasion, centered text can be used where we want to make a bold statement or create a particular aesthetic, to be used sparingly.

We shoudl avoid using right-aligned text and we should never mix alignments in a paragraph.

Image
Image
Image

Typescale

Our typescale is a useful design resource to check compatible sizes of headline and body copy styles, as well providing detailed kerning and leading values for on brand typography.
Image

Colors

Our palette reflects the aquatic theme inherent in the Snorkel name, Check out and download our color swatches.
Image

Typography

Get a clear picture of our fonts, their colors, capitalization, kerning and leading, typescale, and more.
Image

Logos

Use our logo and beloved Dr. Bubbles mascot with care. Find logo variations, notes on usage, and files for download here.
Image

Flow patterns

Our with the techno-gradients, in with the limitless patterns. Find out how to put these unique assets to use.
Image

Icons and illustrations

Discover key brand components that make our content easy to grok and serve as a strong visual complement to text.
Image

Templates

Snorkel only

Download the latest Google slides and docs templates, social  to build branded presentations, documents, and more.

Image
Image

Questions?

Missing something? Got a burning desire to know more about our brand thinking and deeper conceptual framework? We’re here for you!
Get in touch