Elements

Design system kitchen sink

Colors

Primary Palette

White --jl-white #FFFFFF
Black --jl-black #35373F
Grey --jl-grey #E0E0DC

Blue (Primary Accent)

Light Blue --jl-light-blue #85DAFC
Blue --jl-blue #3267A5
Dark Blue --jl-dark-blue #132055

Green (Highlights & Success)

Light Green --jl-light-green #BBFDA4
Green --jl-green #527D4F
Dark Green --jl-dark-green #2A462B

Clay (Warm Accent)

Light Clay --jl-light-clay #FFC2C2
Clay --jl-clay #A35F52
Dark Clay --jl-dark-clay #612E2E

Semantic (Theme-Aware)

Background --color-bg
Surface --color-surface
Border --color-border
Heading --color-heading
Text --color-text
Accent --color-accent

Typography

Type Scale

H1

Page Title

H2

Section Heading

H3

Subsection

Body

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small

Supporting text and captions.

Font Families

--font-heading PP Mori Bold
--font-body Inter Regular

Uppercase Labels

Used for nav items, breadcrumbs, CTAs, and category tags.

SERVICES RESOURCES BOOK A CALL
font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;

Golden Ratio Spacing

Base unit: 18px. Scale factor: φ (1.618)

--phi-1 7px 18 ÷ φ²
--phi-2 11px 18 ÷ φ
--phi-3 18px base
--phi-4 29px 18 × φ
--phi-5 47px 18 × φ²
--phi-6 76px 18 × φ³
--phi-7 123px 18 × φ⁴

Button Heights

48 × 78
Default (48px × φ)
56 × 91
Large (56px × φ)

Buttons

Variants

Primary Secondary Outline Ghost

Sizes

Default (48px) Large (56px)

With Icons

Book a call

Cards

Module Card

Knowledge Base

Quick how-tos and best practices for your web projects.

12 articles Browse KB →

Article Card

STRATEGY Dec 20, 2024

Article Title Goes Here

Brief description of the article content and what readers will learn.

5 min read →

Citations & Glossary

Citation

According to Moz research, title tags under 60 characters perform best in search results.

<cite><a href="...">Source Name</a></cite>

Glossary Term (Hover for tooltip)

Good SEO starts with understanding your keywords and optimizing your meta descriptions.

<span data-glossary="seo">SEO</span>

Form Elements

Text Input

Input + Button

Form Group

We'll never share your email.

Utilities

Border Radius

0
4px
--radius (12px)
pill

Shadows

subtle
medium
large

Focus States

3px solid outline, 3px offset