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.

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.

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

Fonts

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

Colors

We use three main colors:

Dark Blue:

#0b2436

Light Blue:

#306fa2

Orange:

#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

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.

Want to build your own classifier in just minutes?

You get 1,000 classifications a month for free. Pay only when you scale. No credit card required.

Start for free Get a demo