Joben is easy to customize

At the base of the theme style is PostCSS. This makes style customization easier and faster.

The most important aspects of the theme are defined as CSS custom properties which can be modified even without generating theme assests, so you can even customize styling using the Code Injection in Ghost Admin, either to do it Globally or on a post by post basis.

CSS Custom properties

--global-max-width: 1280px;
--global-radius: 2px;
--global-radius-round: 50%;

--color-primary: hsl(249, 79%, 62%);
--color-secondary: hsl(157, 90%, 49%);
--color-black: #000;
--color-dark: #1a1a1a;
--color-dark-acc: #333;
--color-grey-darker: #4d4d4d;
--color-grey-dark: #666;
--color-grey: grey;
--color-grey-light: #999;
--color-grey-lighter: #b3b3b3;
--color-light-acc: #ccc;
--color-light: #e6e6e6;
--color-white: #fff;
--color-purple: #8237eb;
--color-red: #cb1a35;
--color-green: #1ce3ae;
--color-blue: #1ab2ff;
--color-pink: #c5166e;
--color-yellow: #ffbf0f;
--color-royalblue: #1458eb;
--color-orange: #f6764c;
--color-error: #fc365e;
--color-success: #48c774;
--color-warning: #fddc58;
--color-info: #259eef;

--color-text: var(--color-dark);
--color-text-acc-1: var(--color-dark-acc);
--color-text-acc-2: var(--color-grey-darker);
--color-text-acc-3: var(--color-grey-dark);
--color-text-reverse: var(--color-light);
--color-bg: var(--color-white);
--color-bg-acc-1: #fafafa;
--color-bg-acc-2: #f5f5f5;
--color-bg-acc-3: #f0f0f0;
--color-bg-reverse: var(--color-dark);
--color-border: #ebebeb;

--font-serif: "Playfair Display",Times,Georgia,serif;
--font-sans: "Manrope",Tahoma,Arial,sans-serif;
--font-mono: "Inconsolata",Consolas,Monaco,monospace;
--font-size-base: 1rem;

--trans-name: ease-in-out;
--trans-duration: 400ms;
--trans-duration-lg: 800ms;
--trans-duration-xl: 1200ms;
--trans-delay: 100ms;
--trans-default: var(--trans-duration) var(--trans-name);

--gap: 1em;
--gap-rem: 1rem;
--gap-xs: calc(var(--gap)*0.25);
--gap-sm: calc(var(--gap)*0.5);
--gap-lg: calc(var(--gap)*2);
--gap-xl: calc(var(--gap)*4);

All these properties are in assets/css/settings/_settings.css

Utility classes

Besides the available custom properties you can take advantage of the utility classes available in order to build new content blocks, and style them according to your need.

Color utilities

Text utilities

Font weight:

Text size:

Text alignement:

Paddings & Margins

For more check out the documentation