# Dress code swatches

> A dress code set out as a swatch card: the code's name at display size and one line of what it means, a centred row of five colour circles with their names beneath, then a Yes, please and a Perhaps not list side by side and a strip of three practical notes. The circles wrap three and two on a phone. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/dress-code-swatches.html
Section: Features
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: cover, group, heading, list, list-item, paragraph
Keywords: wedding, dress code, what to wear, palette, swatches, guests, attire

## Variations (2)

### Swatch card (the default)

Identical markup in every theme.

Five circles filled from your theme's accent colours, each ringed in currentColor so a pale one still reads, names beneath on your base ground, lists and notes in your contrast colour.

### Vow

This variation states its own colours and states its own type: identical in every theme.

The Vow wedding set: wisteria, pale peony, sage, champagne and dusk swatches ringed in a wisteria hairline on wisteria white, Garden formal in Didot, peony labels and Gill Sans lists and notes.


---

## The signature moment: the dress code is a swatch card, five colour circles under the code's name

**Five plain-colour circles in a centred row**, each a `core/cover` with a
square aspect ratio and a 50% radius, ringed in a hairline so a pale colour
still reads on the ground, with its name beneath on the page ground, never on
the circle. On a laptop they sit in one row at 5.5rem each; on a phone they
wrap three and two, centred.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** The circles are filled from your theme's `accent-1` to
  `accent-5`, falling through to `contrast` where a theme has fewer. Accent
  colours have unknowable luminance, so the circles are decoration only and
  no text sits on them; each is ringed in `currentColor`. Everything else is
  `contrast` on `base`, labels on the label role, the strip's rule
  `currentColor`.

## What it decides for itself

- **The code's name.** `clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem)`, off the
  ladder: about 40px on a phone, 80px on a laptop.
- **The lists.** The `large` rung for their headings, `medium` body.
- **The grids.** Yes and no at `minimumColumnWidth: 20rem`, the notes at
  15rem, held to 880px.

## What to change first

1. **The code's name and line.**
2. **The swatches.** Change each circle's overlay colour and its name.
3. **The lists and notes.**

## The Vow look

Part of the Vow Pattern Set, a couple's whole wedding website in one design
language: wisteria white `#f7f5fb` ground, midnight `#1f2240` ink, dusk
`#555a78` muted ink, card white `#ffffff` on a wisteria hairline `#d9d3e6`,
peony `#a8365a` labels on light grounds and pale peony `#f2b8c9` on the
midnight slab. Names and headings are Didot at 400 with an italic ampersand;
body, labels and buttons are Gill Sans. Buttons are square midnight
rectangles or underlined peony links; cards and photographs are square. Every
text pair is measured on the ground it is painted on. Take the base for your
theme's colours, or the look's **Use my theme** chip.

## Notes

- Core blocks only: group, cover, heading, paragraph, list, list item. No photograph.