Reference · Test bed (Misc)

More

A collecting place for layout-relevant classes that aren't (yet) on any other documentation page. Meant as an overview: what else is there, how does it behave — and where should it ultimately go?

Overview

Map: what is documented where?

So the overview comes back — which building blocks and classes live on which page, and what is collected here in the test bed.

Already documented

  • Styleguide: tokens (colors, scale, spacing, radii), .button variants, .pill, .swatches, .quote, .section--dark.
  • Components: .feature-grid, .cards, .callout, .faq, .stats, .steps, .form, .media.
  • Section Layouts: .cols (all variants), .figure/.round-media, full-bleed .media, .section--tint.
  • Typography: headline scale, weights, .prose, .lead, .section-intro, .overline.

Here in the test bed

  • .lead vs. .section-intro in direct comparison.
  • The spacing system: overline, headline, intro, blocks.
  • Layout mode .layout-boxed vs. .layout-full.
  • Reading width: .prose vs. .prose--wide.
  • Table of contents .toc.
  • Text utilities .text-primary … .text-disabled.

Lives elsewhere

  • .slider (+ ratio variants) — in the Atelier demo.
  • .hero — on the home page.
  • .scrim/.modal — the feedback overlay (on every page); .scrim--fullscreen-mobile switches it to full screen below 48 em.
  • .embed-consent — with the consent module.

Introductions

Lead vs. Section-Intro

Both are introductory sentences at the optimal reading width (66 characters) and trigger the same layout spacing. The difference is the voice: .lead is its own size step, .section-intro stays body size.

<p class="lead">

Tell Kitty what you want.

Kitty combines a lean website kit with a guided AI context. The lead is a little larger and more calmly toned — the opening of a page or a hero.

<p class="section-intro">

Tell Kitty what you want.

Kitty combines a lean website kit with a guided AI context. The section-intro stays at normal text size — it introduces a section without competing with the headline.

In short: .lead = one size step larger (--text-lead), muted color — for the page opening. .section-intro = body size, same reading width & spacing — for the introduction within a section.

Spacing

Sections & heading gaps

The vertical spacing isn't set by hand but follows four rules. On the left a real example, on the right which token produces which spacing.

Overline

Example headline

This section-intro sits at the optimal reading width directly beneath the headline. The spacing above and below comes purely from the system.

0
Inline margin
4
Spacing rules
1
System
16px

Overline → headline. Deliberately tight, so the label belongs to the headline.

--heading-text-gap

Headline → text (0.66em, scales with the headline). Sits as margin-bottom on the headline — via :has(), only when text actually follows.

--content-gap

Intro → content block (fluid ~40–56px). Applies between headline/lead/intro and the following block (cards, stats, cols …).

--flow-gap

Text/code → buttons or swatches within a column (32px).

On top of that comes the section rhythm: every section brings generous padding top and bottom; a color change (tinted ↔ untinted) gets a little more room via --section-gap-shift, two filled bands (tint ↔ dark) form a continuous edge.

Layout mode

Boxed vs. full-width

A class on the <body> decides whether the content sits as a centered box on a gray background or runs edge to edge. Header, slider and footer always stay full width.

body.layout-boxed — box on a gray background, with shadow and radius from 60em (default).
body.layout-full — edge to edge, no shadow (these documentation pages use this).

Both share the same content width: .container centers every text content on --content-max (1160px) — whether the band is full width or sits in the box.

Reading width

Prose vs. Prose--wide

Body text runs at the optimal reading width by default. For deliberately short, wide paragraphs there's a modifier class.

<div class="prose"> — max. 66ch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. The text deliberately wraps at around 66 characters — the most comfortable reading width.

<div class="prose prose--wide"> — full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. This paragraph uses the full container width — good for short notes, unsuitable for long reading text.

Building block

Table of contents

Class .toc. A tinted box with a numbered list of jump links — e.g. at the top of long legal texts like the privacy page.

Utilities

Text utilities

Classes .text-primary, .text-secondary, .text-tertiary and .text-disabled. Quickly marking up text weighting via the color tokens.

.text-primary — main text, full contrast.

.text-secondary — calmer, for body-text additions.

.text-tertiary — meta info, captions.

.text-disabled — disabled states.

Utilities

Layout primitives

Neutral arrangement helpers with no visual opinion — for designed pages that don't want a ready-made component. Spacing adjustable via a custom property in each case.

Building block

Flow

Class .flow. Even vertical spacing between direct children; adjustable via --flow-space.

Building block

Cluster

Class .cluster. A horizontal group that wraps when needed (tags, meta, buttons); spacing via --cluster-gap.

Tag Brand Outline Another one Solid

Building block

Grid

Class .grid. As many equal-width columns as fit at --grid-min — entirely without media queries.

Back to the reference

Keep browsing

The complete catalogs: all building blocks and the design system.

Components Styleguide