Step 5 of 7

Pieces

Tokens on layout primitives, not a second library. Buttons, surfaces, alerts, forms, tables: the same --cds-* values you just walked. Next, Pages compose these into landing jobs.

Buttons

Small

Add .cds-btn--sm to any colour variant for compact chrome (cards, toolbars, download rows). Smaller padding and a 14px control label.

Variant	When
`--primary`	The main action. One per section
`--secondary`	Panel fill for supporting actions
`--outline`	Low emphasis, transparent fill with a primary border
`--accent`	At most one high-stakes CTA per view. Dark ink, never white
`--ghost`	Text-like dismissal or tertiary navigation
`--sm`	Compose with a colour variant for compact chrome

Surfaces

Surface

Default module on the page wash: one hairline border and a light shadow.

Panel

Grouping without a card shadow. Good for sidebars and filter rails.

Soft

Deeper page wash for alternating bands inside a long document.

Tint

Primary-soft fill with ink body. Soft brand paint, not a second theme.

Dark callout

One per section at most. Muted white body copy, and CTAs keep dark ink on the accent fill.

Do not wrap every block in a shadowed card. If everything is lifted, nothing reads as important.

Alerts

Info Neutral context for something the reader should know.

Success The action completed. Say what changed, not just that it worked.

Warning Something needs attention before it becomes a problem.

Danger It failed or it destroys data. Pair with a way out.

Note Guidance rather than status: a how-to aside that sits in the flow of a document.

Pills and progress

Default Selected Live Review Blocked

Pills carry compact status; alerts carry full sentences. Use the spinner while a wait is indeterminate and the progress bar only when the percentage is real.

Forms

Full name Labels above, hints below.

Plan Native controls, brand focus ring.

Email Enter a full email address.

Notes

Send me the occasional product update.

Errors carry a message, never colour alone

Data and code

Surface	Primary action	Status
Marketing page	Accent CTA	Live
Product dashboard	Primary button	In review
Admin chrome	Outline button	Draft

What is this row for?

Disclosure. Summary is the control. The answer stays in the kit type, inside the same frame as the table.

.hero {
  background: var(--cds-paper);
  padding-block: var(--cds-space-8);
}

Inline code stays quiet so it reads inside a sentence. Block code soft-wraps, because a snippet should never hide content behind a horizontal scrollbar.