EscapeVelocityBrand
Brand Kit ↓
Auf dieser Seite
Foundations

Breakpoints

One mobile-first scale, defined once in tokens.ts and used everywhere. Every @media query in the layered CSS is min-width and uses exactly one of these four values. (CSS custom properties can't appear inside a media-query condition, so the layers hardcode the px and build-tokens.ts drift-checks them.)

TokenValueTargetCSS var
sm 640px Large phone --bp-sm
md 768px Tablet --bp-md
lg 1024px Laptop --bp-lg
xl 1280px Desktop --bp-xl
Container

Container & spacing tokens

.container centers content at --container-max and steps its side padding down at the md and sm breakpoints. Resize the window and watch the padding tighten.

--container-max1100pxDefault max width
--container-narrow620px.container--narrow (prose)
--padding-desktop40px≥ 768px
--padding-tablet24px≤ 768px
--padding-mobile16px≤ 640px
Type

Fluid type scale

Headings scale smoothly with the viewport via clamp() — no breakpoints needed. Drag the window narrower and wider; the sizes glide between their min and max.

Display — clamp(2rem … 3.5rem)

Heading 1 — clamp(1.7rem … 2.5rem)

Heading 2 — clamp(1.35rem … 1.875rem)

Heading 3 — clamp(1.1rem … 1.25rem)

Body — clamp(0.95rem … 1.0625rem). The body size barely moves; it stays comfortable on phones and doesn't bloat on wide screens.

Layout

Grid reflow

.grid-auto fits as many ≥280px columns as the width allows, then drops to fewer with no breakpoints. .grid-3 collapses 3 → 2 → 1 at the md and sm breakpoints. Resize to watch both reflow.

.grid-auto

Marketing
Auto-fit column.
Vertrieb
Auto-fit column.
Back-Office
Auto-fit column.
Operations
Auto-fit column.

.grid-3

Eins
Collapses 3 → 2 → 1.
Zwei
Collapses 3 → 2 → 1.
Drei
Collapses 3 → 2 → 1.
Reference, not components

Project patterns

Some UI is too project-specific to live in the brand component library, but worth documenting as a reusable approach. These are patterns, not brand components — don't expect a .class for them in components.css.

  • Wide data / comparison matrix (skischule vendor evaluation) — sticky header row + sticky first column, color-coded score cells, and overflow-x:auto so it scrolls horizontally on small screens instead of breaking the page.
  • Radar / spider chart (Digital-Check quiz) — an inline SVG sized within a max-width wrapper; responsive by virtue of the SVG viewBox, not CSS breakpoints.
  • Levels roadmap & dimension grid (quiz results) — a horizontal stepper that flips to vertical, and a .grid-2-style score grid. Build new instances from .grid-* + .progress-bar rather than copying the quiz CSS.