Nyckel's Styleguide

This outlines various Nyckel style guides.

Logos

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.

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

Fonts

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

Colors

We use three main colors:

#0b2436

#306fa2

#e7a83d

Blog Style Guide

Here’s the link for our blog style guide.

Headers

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

Buttons

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.

URLs

• Use relative urls, not absolute. AKA, /pricing/ not https://www.nyckel.com/pricing/
• 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 www.nyckel.com/sitemap.xml

You can also visit “hidden” pages at wwww.nyckel.com/landing-pages/

Blog Authors

Found in _data/authors.yml

Header / Footer

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.