Style Guide

A reference for the design system including colors, typography, and UI components used throughout the site.

Colors

storm

#4A5568

var(--color-storm)

sea

#1C3D52

var(--color-sea)

burnt

#C45C3E

var(--color-burnt)

paper

#FFFFFF

var(--color-paper)

warmgray

#B0B5BB

var(--color-warmgray)

charcoal

#2D3033

var(--color-charcoal)

pine

#B8963E

var(--color-pine)

peach

#D98B47

var(--color-peach)

forest

#4D5D4B

var(--color-forest)

leaf

#7D8E72

var(--color-leaf)

offwhite

#F5F2EC

var(--color-offwhite)

primary

#e5dbca

var(--color-primary)

background-light

#f7f7f6

var(--color-background-light)

background-dark

#1c1a16

var(--color-background-dark)

Typography

Space Grotesk Display Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Helvetica / Arial Body Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Type Scale

Hero

56px LH: 1.1

.text-hero

The quick brown fox jumps over the lazy dog.

H1

36px LH: 1.2

.text-h1

The quick brown fox jumps over the lazy dog.

H2

24px LH: 1.3

.text-h2

The quick brown fox jumps over the lazy dog.

H3

18px LH: 1.4

.text-h3

The quick brown fox jumps over the lazy dog.

Body

16px LH: 1.5

.text-body

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA

14px LH: 1.2

.text-cta

The quick brown fox jumps over the lazy dog.

Buttons & Links

Primary Button

Secondary Button

Text Link Learn More

UI Elements

Cards

01

Service Card

This is an example of a service card used on the homepage. It features a hover effect that changes the background color and text brightness.

Patterns

Topo Pattern

Cartography Grid

Contour Lines