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)

Website Colors

We use three main colors:

Blog Cover Colors

For our blog covers, we use a variety of different tones. It’s important the /blog page doesn’t look too monochromatic.

Blog Images Font

Our images have historically used the ‘Fuzzy Bubbles’ font. It’s a bit more playful than our main font, Jost.

Long-term, we should likely move away from this font to a more modern and professional sans-serif font. This would involve going back and updating all the images, or at least being consistent with it moving forward.

Blog Image Storage

Blog images are stored in a root folder called blog.

It’s a collection of folders, each corresponding to a blog post or theme (like /blog/benchmarks/)

The storage of these images - especially the older ones - is a bit of a mess, as the older ones (~pre-2024) are all lumped in /blog/images/

It’s also a different folder structure than we use for other image assets, which are in /assets/images/.

Given that where images are stored doesn’t really matter, it doesn’t make sense to try to move these to /assets/images/ and risk breaking image links. But, in the future we could try using that assets folder for new blog images and move away from the root blog folder.

Blog Image Filetypes

Always use compressed .webp for blog images. You can convert/compress any image easily with this tool.

Inserting Images into Blog Posts

Insert images via the figure shortcode.

{% include figure.html url="/blog/images/image_classification_benchmark_header.webp" alt="image classification benchmark" %}

Which will render as:

Adding a caption

Add the description parameter to add a caption to the image. Add the sourceurl parameter to add a link to it.

{% include figure.html url="/blog/images/image_classification_benchmark_header.webp" alt="image classification benchmark" description="This is a caption" sourceurl="https://www.nyckel.com" %}

Adding a Shadow Box

Add the box="yes" parameter to add a shadow box around the image.

{% include figure.html url="/blog/images/image_classification_benchmark_header.webp" alt="image classification benchmark" box="yes" %}

Changing Image Size

Add and adjust the width parameter to change the image size.

{% include figure.html url="/blog/images/image_classification_benchmark_header.webp" alt="image classification benchmark" width="50" %}

The image shortcode

There is also an image shortcode that is used in some places. Honestly, don’t remember why we have two. But, there’s not really a reason to use it moving forward.

{% include image.html url="/blog/images/image_classification_benchmark_header.webp" alt="image classification benchmark" %}

URLs

• Use relative urls, not absolute
• 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.