Nyckel's Styleguide

Outline Nyckel's styleguide. Identifies correct fonts, colors, and more to use.
mugshot Chris Shuptrine
Jan 2021

This outlines various Nyckel style guides.


All logo assets are available in the Nyckel google drive. It includes logos, favicons, icons, and covers.

If outside of Nyckel, please request access.

You can also find favicons in the root domain of the repo, and then logos are at /assets/images/logos. Below are three versions, 48x48, 180x180, and 500x500.

48x48 180x180 500x500

Below are three dark logos, with widths of 350,500,2500. White versions can be found in the above folder.

48x48 180x180 500x500


  • Website font: Jost (self-hosted font)
  • Logo font: Nunito
  • Blog content: Arial (default browser font)


We use three main colors:

Dark Blue:


Light Blue:




Blog Style Guide

Here’s the link for our blog style guide.


For headers, you can use the standard h tags of h1 to h6. Use p for basic text.


Use this code:

<a href="/console" class="btn b-orange" style="font-size:0.75rem">Try for free</a>

You can use b-light-blue as well to have a blue button. Adjust font-size and URL as need.


  • Use relative urls, not absolute. AKA, /pricing/ not
  • Add the final slash to each URL

Metatags & Head Codes

These live in /includes/tags

Bottom of the page CTAs

These live in /includes/cta

List of URLs

All URLs on the site can be found at

You can also visit “hidden” pages at

Blog Authors

Found in _data/authors.yml

HTML in /includes/header.html and /includes/footer.html

Content in _data/nav.yml and _data/general_settings.yml

Various code usage

If there’s a section of the site you’d like to copy, feel free to visit that page in the repo and copy/paste the code snippet used.