Internal reference

Design System

Live token + component reference for the GSL Design v2 theme. Every value here is pulled from the actual SCSS tokens in _theme_variables.scss. Update one token, everything that consumes it updates here automatically.

Colors

Light editorial palette. Electric blue is the primary action color. Terracotta is the warm chromatic anchor — used sparingly (hero underline, accent moments).

$brand-warm-white #F5F3EF Page background
$brand-white #FFFFFF Container card backgrounds
$brand-surface #E8E5E0 Subtle surfaces, dividers
$brand-dark #0a0a0a True near-black — dark badges, buttons, dark sections, footer
$brand-primary #0068E5 Electric blue — CTAs, links, icons
$brand-primary-hover #0052B8 Primary button hover state
$brand-primary-tint rgba(0,104,229,.10) Soft accent fills, icon containers
$brand-accent #C7795A Terracotta — hero underline, warm anchor
$brand-accent-tint rgba(199,121,90,.12) Soft terracotta fills
$text-primary #1A1A2E Headings, primary text
$text-secondary #6B6B6B Body text, descriptions
$text-on-dark #F5F3EF Text on dark backgrounds
$border-color #D1CCC5 Dividers, subtle borders
$border-light #E8E5E0 Light card borders
$star-color #FFB800 Star ratings, gold accents

Typography

Inter for headlines + body (geometric sans). Instrument Serif italic for editorial accents. JetBrains Mono for labels, stats, and tokens.

$font-size-hero-display clamp(48px, 7vw, 96px)
Hero display
$font-size-section-title clamp(40px, 5vw, 72px)
Section title.
$font-family-display Instrument Serif italic
editorial accent
$font-size-h1 clamp(36px, 5vw, 56px)
Page H1
$font-size-h2 clamp(40px, 5vw, 48px)
Section H2 (canonical)
$font-size-h3 24px
Section H3 / pricing tier name
$font-size-h4 20px
Card title
$font-size-body-lg 18px
Body large — leads, hero subtitle
$font-size-body 16px
Body — paragraphs, buttons
$font-size-sm 14px
Small — captions, descriptions
$font-size-xs 12px
Extra small — eyebrows, terms
$font-family-mono JetBrains Mono
STARTING-AT · 14px · 0.04em tracking

Spacing

Base-4 grid. Use these tokens for padding, margin, and gap — never hardcoded pixel values.

$space-1 4px
$space-2 8px
$space-3 12px
$space-4 16px
$space-5 20px
$space-6 24px
$space-7 28px
$space-8 32px
$space-10 40px
$space-12 48px
$space-16 64px
$space-20 80px
$space-30 120px
$space-34 160px
$space-35 140px

Radii

Three-tier radius scale plus the container card 24px. Pills use 999px for full rounding.

$radius-btn 8px
$radius-card 12px
$sub-card-radius 16px
$container-card-radius 24px
$light-pill-radius 6px
pill (999px) 999px

Shadows

Elevation system. Container cards use the largest, sub-cards use mid-weight, buttons use the smallest with hover-lift variant.

$shadow-sm 0 1px 3px rgba(...)
$shadow-md 0 4px 12px rgba(...)
$shadow-lg 0 8px 24px rgba(...)
$shadow-card 0 4px 12px rgba(15,23,42,.06)
$shadow-card-hover 0 8px 24px rgba(15,23,42,.10)
$shadow-container 0 24px 48px -12px rgba(15,23,42,.08)
$shadow-button 0 2px 8px rgba(0,0,0,.10)

Buttons

Two button hierarchies, ruthlessly applied. Primary (dark filled) is reserved for the page's two main conversion CTAs. Secondary (text + arrow) is everything else.

Primary Dark filled · $dark-element-bg

Reserved for hero CTA, final quote card, and the POPULAR pricing tier. Maximum two on a page.

Book a free strategy call
Secondary Text + arrow · $text-primary

Everything else: "see all", "view details", utility links. Arrow nudges 4px on hover. Color shifts to $brand-primary.

See all projects
Accent (rare) Electric blue filled · $brand-primary

Used only for the POPULAR pricing tier — concentrates conversion weight on the recommended option.

View details

Pills

Three pill treatments. Light pill for tags-on-image (industry labels). Dark pill for high-contrast badges. Primary-tint pill for eyebrows.

Light pill $light-pill-*

White bg, dark text, subtle border + shadow. Used for portfolio industry tags, hover-arrow circles.

Plumbing Automotive Finance
Dark pill $dark-pill-*

Dark bg, light text. Used for high-contrast credentials and bottom dark CTA pills.

PageSpeed 100 GDPR Compliant
Primary-tint pill $pill-bg / $pill-text

Electric blue tint with brand-primary text. Used for hero eyebrows and section-label pills.

Web Design · SEO · Digital Marketing

Cards

Three card patterns. Sub-card (warm-white, used inside container cards). Container-card (white, soft 24px radius, container shadow). Both follow the same internal padding system.

Sub-card $sub-card-*

Warm-white background, 16px radius, subtle border. Used for service cards, process step cards, review cards.

Card title

Card description body text. Two lines maximum on most uses.

Motion

Five duration tokens covering instant feedback (100ms) through deliberate hero entrance (1000ms). Pair with $ease-out-smooth or $ease-out-expo. Watch the dots loop:

$motion-instant 100ms — hover toggles
$motion-fast 200ms — micro-interactions
$motion-moderate 400ms — section reveals
$motion-slow 600ms — hero entrance
$motion-deliberate 1000ms — staggered sequences
Call Now Get Quote