Design System

Style Guide

The visual language of American Webs Master — colors, typography, spacing, and component patterns that govern every pixel we ship.

Color Tokens

#111110

Ink

var(--ink)

#2E2D2A

Graphite

var(--graphite)

#6B6864

Muted

var(--muted)

#C2BFB7

Dust

var(--dust)

#E8E5DF

Fog

var(--fog)

#F2F0EB

Linen

var(--linen)

#F9F8F5

Studio White

var(--studio-white)

#B91C1C

Red

var(--red)

#991B1B

Red Hover

var(--red-hover)

Background Hierarchy

Ink — Primary Dark

Graphite — Elevated Dark

Studio White — Primary Light

Linen — Section Separator

Fog — Hover / Active

Dust — Divider / Gap Fill

Typography

Display / H1

--font-display
600 weight
clamp(2.5rem, 6vw, 6rem)
tracking: -0.03em

Craft Meets Code

Display / H2

--font-display
600 weight
clamp(1.5rem, 3vw, 3rem)
tracking: -0.02em

Section Heading

Display / H3

--font-display
600 weight
clamp(1rem, 2vw, 1.75rem)
tracking: -0.01em

Sub Heading Style

Body / Regular

--font-body
400 weight
1rem

Body copy is set in Plus Jakarta Sans at 1rem / 1.8 line height. It is highly legible at all sizes and conveys warmth without sacrificing clarity.

Mono / Label

--font-mono
400 weight
0.65rem
tracking: 0.12em

Section Label — Data Point — Navigation Item

Components

Buttons

Text Link

Tags & Labels

DesignDevelopmentStrategyGrowthActiveFeatured

Gap-as-Divider Grid Pattern

gap: 1px + background: var(--dust) on parent. Cells set background: var(--studio-white). The gap itself becomes the visible divider line.

Border Radius — 0px Everywhere

Zero border radius is a deliberate design decision — sharp corners signal precision, confidence, and editorial intent.

Spacing & Border

Hair border0.5px solid var(--dust)Default separator between sections and elements

Section gap (mobile)px-6 = 1.5remHorizontal padding on mobile

Section gap (desktop)px-10 = 2.5remHorizontal padding on desktop

Grid gap (divider)1pxGap size for the gap-as-divider pattern

Section verticalpy-14 to py-20Vertical rhythm for major sections

Motion Principles

Entrance easing[0.16, 1, 0.3, 1]Snappy start, long ease-out. Used for all element reveals.

Heading revealclipPath inset(100% 0 0 0) → inset(0% 0 0 0)Clip-path wipe from bottom — feels like text being uncovered.

Fade entranceopacity: 0 → 1 + y: 18px → 0Subtle upward drift with fade for body elements.

Hover transition180ms linearFast, snappy transitions for interactive states.

Stagger delayindex × 0.08sGrid items stagger entry by column position.

Want this system built for your brand?

We build complete design systems as part of every brand identity engagement.

Brand Strategy