Theming your website

How to change the foundational elements of Getrich to make it unique to your brand.

Overview

At a foundational level, most SaaS marketing sites are differentiated by very few design decisions. Namely, they have subtle differences in their color palette and button/link styling. Below, you'll see how to customize these with Getrich.

Color palette

Getrich uses CSS variables set within src/_data_/colors.json to define color across the site. Mainly, the colors used are part of a grayscale. By default the grayscale is monochromatic.

When looking at colors.json, you'll notice that there are a seperate set of OKLCH color values for light and dark mode, along with some colors that are the same in both. At the top, there are "core" values, these determine foundational hue and chroma of the site.

By default, users operating system's preferred scheme will determine which set of colors are used. If a user manually toggles the scheme (from the footer), that scheme will then override system defaults.

Background colors

Similar to creating a composition with a light source, elements higher in the stacking order utilize lighter colors. Getrich uses this notion as a naming convention for background colors.

Text colors

Most sites consistently utilize a few text colors. Getrich defines and names these contextually as they are typically used.

Other colors

By default, Getrich supplies a few additional colors for things like branding, actions, and syntax highlighting.

Customize color

To customize colors in Getrich replace the OKLCH values in src/_data_/colors.json. Since these will be used as utility classes with Tailwind, the alpha can be set flexibly later on.

colors.json is fed into eleventy.config.js and tailwind.config.js so that colors can be defined in one place.

[
    {
        "name": "constantColor",
        "value": "54% 0.25 262"
    },
    {
        "theme": "light",
        "colors": [
            {
                "name": "lightModeColor",
                "value": "100% 0 0"
            }
        ]
    },
    {
        "theme": "dark",
        "colors": [
            {
                "name": "darkModeColor",
                "value": "0% 0 0"
            }
        ]
    }
]

To add new colors, simply add more values to the appropriate list of constant or themed colors in colors.json.

Usage example

To see how colors work in Getrich, check out the example below. Click the toggle in the footer to preview in the opposite scheme.

Buttons

Rather than tying the the styling of buttons and links to <button> or <a> tags, Getrich approaches this type of formatting as a set of utility classes that can be used on any element.

<button class="button size-sm">
    A button tag
</button>
<a href="#" class="button size-sm">
    An anchor tag
</a>

Button variants

By default, the .button utility class will be displayed in the style above. This can be overwritten by adding a .variant-{name} to the element, too.

<a href="#" class="button size-sm min-w-80">
    Default
</a>
<a href="#" class="button variant-primary size-sm min-w-80">
    Primary
</a>
<a href="#" class="button variant-outline size-sm min-w-80">
    Outline
</a>
<a href="#" class="button variant-ghost size-sm min-w-80">
    Ghost
</a>

Button sizes

Similar to variants, button sizing can be modified by adding a size utility class. The default sizes available are listed below.

<a href="#" class="button size-xl">
    size-xl
</a>

Customize buttons

src/assets/css/components/_link-btn.css is the place to go to customize button styles within Getrich. There, you can customize the foundational styles, variants, and sizing.

Links

Just like buttons, links can be easily styled with utility classes.

<a href="#" class="link">
    Here's a link
</a>

Link variants

By default, the .link utility class will be displayed in the style above. This styling can be modified by adding one of the .variant-{name} styles below to the element, too.

<a href="#" class="link">
    Default
</a>
<a href="#" class="link variant-text">
    Text
</a>
<div class="w-full bg-headline/80 pt-4 pb-8 flex justify-center max-w-192">
    <a href="#" class="link variant-theme">
        Theme
    </a>
</div>

Link sizes

Link sizing is based on font-size and line-height. The reason for this is to make links work inline, alongside other content.

<a href="#" class="link">
    Uses inherited font-size
</a>
<a href="#" class="link text-14/140">
    Uses 14px font + 140% line height
</a>
<a href="#" class="link text-12/160">
    Uses 12px font + 160% line height
</a>

Customize links

src/assets/css/components/_link-txt.css is the place to go to customize link styles within Getrich. There, you can customize the foundational styles and variants.