Scalable CSS for Marketing Sites | Tokens & Components

Most business sites don’t need a full design-system product with a dedicated team. They need consistency: spacing, type, colour, buttons and cards that feel like one brand across Home, Services, Pricing and Blog.

Here’s a technical, practical approach to CSS that scales for marketing sites and light apps — without drowning in abstraction. The aim is a codebase a future developer can extend without inventing a new shade of blue every Tuesday.

Start with tokens (custom properties)

Tokens are named decisions. Change the brand blue once; the whole site follows.

:root {
  --void: #03050c;
  --text: #f4f7ff;
  --muted: #9aa8c7;
  --brand: #00a1ff;
  --radius: 18px;
  --font: system-ui, sans-serif;
  --space-1: 0.25rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

Group tokens for colour, type, space, radii, shadows and motion. Avoid random magic numbers in every component. If you need a one-off, prefer a local custom property on the component over a mystery pixel value buried in a media query.

Luxury isn’t more decoration. It’s fewer accidents.

Type scale that doesn’t fight you

A small set of sizes: body, small, h3, h2, h1 (clamp for fluid type)
Consistent line-heights (body ~1.6, display tighter)
Letter-spacing slightly tighter on large headings
One or two weights you actually use (400/600/700), not the whole font file
A maximum measure for long reading text (roughly 60–75 characters)

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.prose {
  max-width: 65ch;
  line-height: 1.65;
}

Document the scale in a simple comment or style guide page. When marketing asks for “a bit bigger”, you adjust the token — not seventeen one-off rules.

Components beat one-off divs

Name the things you reuse:

Buttons (.btn, .btn-primary, .btn-ghost)
Cards / glass panels
Section heads (eyebrow + title + lead)
Form fields
Badges / chips
Empty states and alerts

When marketing wants “another card grid”, you compose components — you don’t invent a new border radius. A good component has stable class names, predictable padding, and variants that map to real brand needs (primary vs quiet), not infinite props.

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

Section colour without chaos

Multi-tone section bands work when each section declares an accent token and shared card language:

.section-band.tone-violet {
  --section-accent: #a78bfa;
  --section-glow: rgba(167, 139, 250, 0.18);
}
.section-band::before {
  /* soft wash using var(--section-glow) */
}

Random gradients on every block is not a brand; it’s noise. Limit the palette and rotate tones deliberately down the page. Keep text contrast legal and comfortable on each band — dark UI still fails accessibility audits when muted grey sits on near-black without enough difference.

Layout systems

CSS Grid for page sections and card grids
Flexbox for toolbars, meta rows, button groups
Container queries when a card should adapt to its slot, not only the viewport
Consistent max-widths (min(100% - 2rem, 1180px)) so content never feels lost
Consistent vertical rhythm (section padding from a small scale of space tokens)

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-8);
}
.wrap {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

Avoid layout that only works at the designer’s laptop width. Test at 360px, 768px, 1024px and a wide desktop. Collapse gracefully: stacks before squashes.

Forms that match the brand

Forms are often the most profitable UI on the site — and the ugliest. Align them with the same tokens:

Shared input height, radius and border colour
Clear error and success styles that don’t rely on colour alone
Labels always visible (placeholders are not labels)
Comfortable tap targets on mobile (roughly 44px minimum)

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(2, 6, 23, 0.55);
  color: var(--text);
  border-radius: calc(var(--radius) - 6px);
  padding: 0.7rem 0.85rem;
}

Motion rules of thumb

Respect prefers-reduced-motion
Prefer opacity/transform over layout-triggering properties
Use motion to guide attention, not to delay content
Keep durations short (150–400ms) for UI chrome
Don’t animate large box-shadows on scroll for every card — main-thread cost adds up

@media (prefers-reduced-motion: reduce) {
  .reveal, .mesh { animation: none !important; }
}

Specificity and cascade hygiene

Prefer classes over long element chains
Avoid !important except for deliberate utility escapes
Layer files: tokens → base → layout → components → pages → utilities
Delete dead CSS — unused rules are weight and confusion
Name by purpose (.card-pricing) more than by appearance (.blue-box-2)

If you need a methodology, BEM-ish naming or simple namespaces (.site-header__nav) are enough for most marketing sites. Full CSS-in-JS runtimes are optional complexity, not a maturity badge.

Dark UI details that feel expensive

Subtle borders (rgba(148,163,184,.14)) instead of harsh white lines
Layered shadows, not one giant drop shadow
Inset highlights on cards and buttons
Focus states that meet contrast and are visible on dark backgrounds
Noise/grain only if it doesn’t crush performance or text clarity

Premium is often restraint: fewer competing glows, more consistent radii, better spacing, and type that actually hierarchy-reads at a glance.

Responsive images and media in CSS-adjacent land

CSS can’t fix a 3MB PNG, but it can stop layout from exploding while media loads:

Reserve space with aspect-ratio or width/height attributes
Use object-fit deliberately on avatars and cards
Avoid shifting sticky headers that change height after fonts load

A lightweight file structure

assets/css/
  tokens.css
  base.css
  layout.css
  components.css
  pages.css
  utilities.css

Or one concatenated file in production if HTTP overhead matters less than operational simplicity. Either way, think in layers even if you deploy a single stylesheet.

Checklist before launch

Buttons, links and focus states look intentional on every band colour
Type scale is consistent across new pages
Spacing uses tokens, not random rem values
Reduced-motion path verified
Forms match the rest of the UI
No unused framework CSS pulling weight for a five-page site

Worked examples (CSS)

Tokens, components and a section band you can reuse across marketing pages.

1) Design tokens

:root {
  --void: #03050c;
  --text: #f4f7ff;
  --muted: #9aa8c7;
  --brand: #00a1ff;
  --line: rgba(148, 163, 184, 0.14);
  --radius: 18px;
  --font: system-ui, sans-serif;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--void);
}

2) Buttons as components

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 750;
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-primary {
  background: linear-gradient(120deg, #33b4ff, #00a1ff 50%, #0077cc);
  color: #041018;
  box-shadow: 0 10px 28px rgba(0, 161, 255, 0.35);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 161, 255, 0.35);
  color: #f4f7ff;
}
.btn:hover { transform: translateY(-1px); }

3) Multi-tone section band

.section-band {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.section-band.tone-violet {
  --section-accent: #a78bfa;
  --section-glow: rgba(167, 139, 250, 0.18);
}
.section-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 400px at 10% 0%, var(--section-glow), transparent 55%),
    #03050c;
}
.section-band .eyebrow {
  color: var(--section-accent);
}

4) Card grid that scales

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(17, 26, 48, 0.9), rgba(8, 12, 24, 0.85));
  padding: 1.25rem;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
@media (max-width: 800px) {
  .card-grid { grid-template-columns: 1fr; }
}

5) Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Want a site that feels expensive because the UI is coherent? Start a project →