Design system Version 1.0

Design system · 08

Recess, panel, card, stock.

A surface is either pressed into the sheet, tinted on it, or resting on top of it. Which one a thing is decides how it is drawn — and whether it is ever allowed to move.

Variants

Six variants of one card. Most content belongs in the first; the rest are for the specific cases named beside them.

Mixed

Default

A tinted panel with a hairline edge. Feature cards, case studies, pricing.

Soft

The same panel without the edge, for a group that already has rules around it.

Impressed

Never moves

A recess pressed into the sheet. Form fields and reference tables.

Outline

A white card with a ring. Something set down on the paper, lightly.

Raised

A white card with a soft shadow. The one highlighted tier in a set.

Stock

May move

A deliberately physical piece of card. The only surface allowed to move.

Implementation 
<Card>…</Card>                       <!-- mixed, the default -->
<Card variant="soft">…</Card>
<Card variant="impressed">…</Card>   <!-- never inside anything that moves -->
<Card variant="outline">…</Card>
<Card variant="raised">…</Card>
<Card variant="stock">…</Card>

Nothing lifts

Cards do not react to hover. No lift, no scale, no tilt, no shadow growing underneath. A sheet of paper lying on a desk does not rise to meet a cursor, and a grid of them all doing it at once is the clearest tell that something is a web page rather than a surface.

Hover the cards above: nothing happens, and that is the specimen. Hover belongs to things you press, which on this site means the key.

Choosing one

  • Is it something the reader types or looks things up in? Impressed
  • Is it the one option in a set you want chosen? Raised
  • Is it meant to feel like a separate piece of card? Stock
  • Anything else Mixed

Rules

Do

  • Start with the default panel and change it only for a reason.
  • Use a recess for fields and reference information.
  • Keep one raised card per set, at most.
  • Leave the enquiry form unboxed; its fields are the surfaces.

Don’t

  • Animate a card on hover, in any direction.
  • Use the recess as a general-purpose card.
  • Put a recess inside a carousel, a parallax layer or an entrance that translates.
  • Add paper texture to a panel. Texture belongs to the sheet and the books.