Theme & Style Guide — Livescraper

Brand mark & logo

The brand-mark is a 34 × 34 round badge with a gradient from --clay to --clay-deep, a steady cream centre dot, and a slow 1.8 s wave that radiates outward — a "live data" pulse. The wordmark is set in Fraunces 500 italic-ready.

Livescraper

.brand-mark { width: 34px; height: 34px; background: linear-gradient(135deg, var(--clay), var(--clay-deep)) }

Voice & tone

Calm, editorial, plainspoken. Italic emphasis on a single word per headline gives the brand its signature lilt. Never shouty, never marketingese.

Public data, made human.

Use serif-italic emphasis on the word that carries the most weight. Body stays in DM Sans, calm and readable.

Colour palette

5 soft hues spaced ~70° apart on the wheel — each in a tonal trio of tint, base, deep. Primary is --clay (periwinkle blue).

Clay · primary brand (blue)

--clay-tint#d6e2efCard tints, chip backgrounds

var(--clay)

--clay#5d8bc1Logo gradient start, primary CTA

var(--clay-deep)

--clay-deep#26426dItalic emphasis, hover states

Sage · cool calm

--sage-tint#d6e1d6

var(--sage)

--sage#8ea99a

var(--sage-deep)

--sage-deep#3a574a

Dusk · cool slate-blue

--dusk-tint#d8dfeb

var(--dusk)

--dusk#8694b1

var(--dusk-deep)

--dusk-deep#34405e

Butter · warm gold

--butter-tint#f0e3bd

var(--butter)

--butter#cfb37a

var(--butter-deep)

--butter-deep#7d6321

Blush · soft mauve

--blush-tint#ecd0d3

var(--blush)

--blush#c69097

var(--blush-deep)

--blush-deep#7a3e48

Neutrals & surfaces

Cool, never stark. The background is a soft blue-tinted off-white that aligns with the primary clay.

--cream#f5f8fcPage background

--cream-2#ebf1f8Alt surface

--sand#dfe8f3Soft panels

--line#d6dfebBorders, dividers

--line-strong#d6dfeb

var(--muted)

--muted#5e6b81Secondary text

var(--ink-2)

--ink-2#2f4159Body

var(--ink)

--ink#162236Headings

Semantic tokens

Components reference these instead of raw hues, so a rebrand is a one-line change.

Role	Token	→ resolves to
Brand primary	--brand	--clay (#5d8bc1)
Cool / calm accent	--accent-cool	--sage
Tech / data accent	--accent-tech	--dusk
Warm accent	--accent-warm	--butter
Soft accent	--accent-soft	--blush

Typography

Two families: Fraunces (variable, with SOFT axis) for display + emphasis, DM Sans for everything else. JetBrains Mono for data, code, keyboard shortcuts.

Families

Aa

--font-display'Fraunces', Georgia, serifHeadlines, italic emphasis

Aa

--font-body'DM Sans', system-uiUI, body, nav

Aa

--font-mono'JetBrains Mono', MenloCode, data, kbd

Type scale

--text-6xl84px / 1.05 / -0.02em

Display

--text-5xl56px / 1.04 / -0.02em

Section title

--text-4xl48px / 1.04 / -0.018em

Page hero

--text-3xl36px / 1.05 / -0.014em

API section h2

--text-2xl30px / 1.1 / -0.012em

Tool card heading

--text-xl22px / 1.2 / 600

Smaller subhead

--text-lg18px / 1.6 — body lede

Body lede — the calm sentence under a headline.

--text-md16px / 1.6 — body

Body text. The default for paragraphs and most reading content.

--text-base14.5px / 1.5 — UI

UI body — nav links, table rows, card descriptions.

--text-sm13px / 1.5 — meta

Meta text — author bylines, timestamps, captions.

--text-xs11.5px / .16em / uppercase

Eyebrow label

Weights & tracking

Aa

--weight-regular400

Aa

--weight-medium500

Aa

--weight-semibold600

Aa

--weight-bold700

Spacing

8-pt-aligned scale used for padding, gaps and margins. Derived from token names --space-*.

--space-xs4px

--space-sm8px

--space-md16px

--space-lg24px

--space-xl36px

--space-2xl56px

--space-3xl80px

--space-4xl120px

Layout

--container-max1180pxMax content width — header, footer & every section align here

--container-pad28pxSide padding (tightens responsively)

Border radius

--radius-sm8px

--radius-md14px

--radius18px

--radius-lg28px

--radius-pill999px

Shadows

Cool-tinted (deep navy alpha) — never grey. Used sparingly.

--shadow-smsubtle 1-2px

--shadow-mdcard hover

--shadowdefault soft

--shadow-lgelevated cards

--shadow-xlmega menu, dialogs

Motion

Slow, deliberate, easing-out. Reduced-motion users get instant transitions everywhere except the brand-mark heartbeat.

--motion-fast0.15s easeHover colour, border

--motion-base0.22s cubic-bezier(.4,0,.2,1)Default transitions

--motion-slow0.55s easeScroll reveal

--motion-spring0.35s springPop, success

Buttons

.btn-primary { background: var(--clay); color: #fff; border-radius: var(--radius-pill) }

Pills, tags & badges

Pill with dot OK Warning Down New Fix Improved New ⌘K

Forms & inputs

Cards

Tool card

Used in the toolkit grid. Soft tint icon, serif title, body description.

More

Reputation

Use-case card

Use-case cards stack a tag, serif title, description, and a meta line.

CX & ops

Feedback & status

Tip · Default callout — clay border-left, cream-2 background.

Warning · Butter background for cautions / quotas.

Info · Dusk background for technical notes.

Interactive states

Every interactive element has the same five states. Hover lifts, focus shows a clay ring, active dips, disabled fades.

Hover delays — --motion-fast (0.15s) for color · --motion-base (0.22s) for transforms.

Iconography

All icons are inline SVGs at 1.8 px stroke, round caps + joins, no fill. Sized 16/18/22/26 px depending on context. They live next to text, never alone.

Pin Search Mail List Check Shield Clock Star Code Sparkle Arrow

Icon-tinted chips

Use currentColor on the SVG stroke so the icon inherits its parent text colour.

Imagery & gradients

No raw photos used in marketing. Every "image" is a soft 5-hue gradient. Three patterns: hero blob, card thumb, panel glow.

Hero blobs (background ambient)

Card thumbnails (5-hue cycle)

Panel glows (full bleed)

Animation gallery

Live previews of every named animation. All respect prefers-reduced-motion except the brand-mark heartbeat.

brand-wave1.8s · cubic-bezier

dec-twinkle4s · ease-in-out

Online

status-blink2.4s · ease-in-out

think-pulse1.2s · loop

fab-pulse2.4s · halo ring

scrub8s · linear

Font lab · live comparator

Compare the same headline rendered in every font we have loaded. Easy to A/B before committing in --font-display / --font-body.

Display candidates · headline test

Instrument Serifcurrently active · italic-rich, soft-classic

Public data, made human.

Frauncesprevious · variable opsz + SOFT axis

Public data, made human.

DM Serif Displaybrand-mark fallback · high-contrast Didone

Public data, made human.

Body candidates · paragraph test

Inter Tightcurrently active · slightly tighter than Inter

Livescraper turns Google Maps, Reviews, SERPs and the open web into clean, deduplicated rows — without a line of code.

DM Sansprevious · friendly geometric

Livescraper turns Google Maps, Reviews, SERPs and the open web into clean, deduplicated rows — without a line of code.

JetBrains Monocode only · tabular numerals

api.googleMapsSearch({
  queries: ["Coffee Brooklyn"],
  language: "en", region: "US"
});

Lock in a pairing

In styles.css :root, set:

--font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Inter Tight', system-ui, sans-serif;

Breakpoints

Five mobile-first breakpoints. Resize your browser and watch every layout fold.

Width ≤	What changes
1180 px	Container padding tightens to 24 px
1024 px	Nav gap shrinks · "Sign in" hides · footer drops to 4 cols
820 px	Hamburger drawer · all multi-col grids collapse · sticky bottom CTA appears
640 px	Hero CTA stacks full-width · stats single-column
420 px	Smallest pass — 28 px h1, smaller logo, mega panel narrows

Accessibility & keyboard

Site is keyboard- and mouse-friendly.

⌘ K opens the global command palette from any page.
↑ ↓ navigate the palette · ↵ opens · esc closes.
Skip-to-main-content link is the first focusable element on every page.
Focus rings use a 2 px clay outline + offset; visible on every interactive element.
All interactive elements have aria-labels where text isn't enough (FAB, mobile toggle, sparkle decorations).
prefers-reduced-motion disables all animations except the brand-mark heartbeat.
Mobile drawer locks scroll, traps focus, closes when any nav link is tapped.

Then me

Try pressing tab — every focused element gets a clay 2 px outline.

How to edit

All tokens live in one place. Future branding tweaks are one-line edits.

Open new design/styles.css
Find the :root block at the top.
Change any token. The whole site updates on next page-load.
Bump the cache-bust query (e.g. ?v=4) if visitors might have cached CSS.

Common rebrand recipes

Change primary colour → edit --clay, --clay-deep, --clay-tint (and theme-color meta + favicon.svg stops to match).
Switch display font → edit --font-display + replace the Google Fonts <link> in each page's <head>.
Tighten / loosen layout → edit --container-max and --container-pad.
Make corners sharper → reduce all --radius* tokens.
Adjust shadow softness → edit the rgba(29,42,60,.X) alpha in the four --shadow* tokens.

/* one-line rebrand */ :root { --clay: #5d8bc1; /* swap brand colour */ --font-display: 'Playfair Display', serif; }