Skip to content
WeDanceDocs
Foundationsstable

Spacing & layout

Tailwind’s 4px scale, a handful of container widths and one page gutter. Mobile first: most pages are read on a phone at a social.

Spacing scale

Tailwind’s default scale — one step is 4px. These are the steps pages actually use; stay on them and skip the in-betweens.

0.52pxBadge and chip vertical padding (py-0.5 ×101)
14pxIcon-to-text in tight labels (gap-1 ×149)
1.56pxIcon + text in chips and meta rows (gap-1.5 ×110)
28pxThe default gap — inline groups, button contents (gap-2 ×324)
312pxCard internals, list rows, form stacks (gap-3 ×197)
416pxPage gutter (px-4 ×256), grids of cards (gap-4)
624pxCard padding on larger surfaces, between blocks in a section
832pxBetween groups inside a section
1248pxSection padding on content pages (py-12 ×31)
1664pxSection padding on landing pages (py-16 ×43)
2080pxHero and big feature sections (py-20)

Arbitrary values like p-[18px] mean the layout is fighting the scale. Round to the nearest step.

Containers

Every page section is a centred max-width box. Pick the width by content, not by screen.

max-w-xl576px · used 31×Forms, sign-in, single-column flows
max-w-2xl672px · used 50×Reading pages, settings, narrow dashboards
max-w-3xl768px · used 51×Articles, profile pages, long text
max-w-4xl896px · used 41×Content pages with a grid of cards
max-w-5xl1024px · used 34×Landing sections, festival and city pages — the default wide page
max-w-6xl1152px · used 19×Wide discovery grids
max-w-7xl1280px · used 19×Full-width headers and footers

The most common page shell is max-w-5xl mx-auto px-4. Text-heavy pages use max-w-3xl or narrower so lines stay readable.

Page gutter and section rhythm

Gutter: px-4

16px on every screen size, on the container itself. Used 256 times — the most common padding in the app. Don’t widen it at sm:; the max-width already gives big screens room.

Sections: py-12 – py-20

py-16 for landing sections, py-12 on content pages, py-20 for heroes. Inside a section: title → content mt-6–mt-8, between cards gap-4.

A standard section
The journey
Section title

dashed lines = container edge · red band = section padding

vue
<section class="py-16">
  <div class="max-w-5xl mx-auto px-4">
    <div class="text-eyebrow uppercase tracking-[0.3em] font-bold text-secondary">The journey</div>
    <h2 class="text-3xl font-display font-bold mt-1">Section title</h2>
    <div class="mt-8 grid sm:grid-cols-2 md:grid-cols-3 gap-4">
      <!-- cards -->
    </div>
  </div>
</section>

Breakpoints

Tailwind defaults. Counts are prefix uses across pages and components.

base≥ 0Design here first: a 375px phone. Single column.
sm:≥ 640pxThe workhorse. Two columns, bigger type, side-by-side buttons.
md:≥ 768pxThree-column grids, table layouts.
lg:≥ 1024pxSidebars and persistent navigation.
xl: / 2xl:≥ 1280px / 1536pxAlmost never. Don’t design for them.

Guidelines

Do — keep related things close and groups apart — gap-2 inside a group, gap-6 or more between groups.

Don't — space everything evenly; without rhythm nothing reads as a group.