Thematic AW26/27 · SS27 research
Spring/Summer 27
Autumn/Winter 26/27
Mode

What Thematic is

Thematic turns seasonal color forecasts into interface tokens. It holds ten researched themes, five for autumn/winter 26/27 and five for spring/summer 27. Each one carries the agencies' swatches, the seed roles chosen from them, light and dark UI tokens, checked contrast pairs, pairings to avoid and how the color story shifts between seasons.

All ten themes are loaded here. Pick one above and the whole page, including its display typeface, re-inks from that theme's tokens.

Forecast swatches · select one

What is driving it

Associations

What is associated with

Agencies call it
    Materials and finishes

    How a forecast becomes a UI

    Three layers, each with a different job

    A swatch that works on a mood board can fail as text. Thematic keeps the forecast color, the chosen seed and the shipped UI value separate, so you can see where a tone was moved to pass contrast.

    1 · Colors

    Forecast swatches

    What agencies such as Pantone, WGSN × Coloro, Sherwin-Williams and Dulux published, each labelled with how its hex was obtained.

    2 · Roles

    Seed roles

    One swatch is picked for primary, secondary, tertiary, neutral and surface. Proxies and borrowed colors are named as such.

    3 · Tokens

    UI values

    Light and dark tokens with paired on-* colors. Where a seed fails WCAG, its tone is adjusted and the before and after ratios are recorded.

    Live specimen

    The tokens on a working screen

    A booking page for a ceramics studio, built only from this theme's tokens. Turn on the token map to see which pair paints each part. Every status message carries an icon and a word, so meaning never rests on color alone.

    Evening course · 6 weeks

    Wheel throwing for people who have never touched clay

    Six Tuesday evenings at the wheel, from centring to trimming. You leave with four glazed pieces and a firm opinion about porcelain. Read the kiln schedule before you book.

    Beginner Materials included 4 seats left

    Seats booked this term

    Reserve a seat

    Add the domain ending, for example .com
    Classes run 18:30–21:00.
    Booked. Your seat for 12 January is confirmed.
    Kiln delay. Bisque firing moves to Thursday this week.
    Payment failed. Check the card number and try again.
    Aprons provided. Wear clothes that can take a splash.

    Status colors come from IBM Carbon and stay semantic in every theme; only their tones are adjusted per surface. Specimen copy is invented

    Pairing lab

    Check any two tokens against each other

    Pick a text token and a background token from the current theme and mode. The ratio is computed in your browser with the WCAG 2.2 formula and compared unrounded against each threshold.

    Try

    Contrast ratio

    Glaze the inside first
    Body copy at 17 px needs 4.5:1. Large text, 24 px or 18.66 px bold, needs 3:1. A border or icon that carries meaning also needs 3:1 against what sits next to it.

    Recorded contrast pairs

    What the research checked

    These are the exact pairs the corpus verified for this theme and mode, recomputed here. A pair not on this list, or the same pair on a different background, needs its own check.

    PurposeTextBackgroundSampleRatioNeedsResult

    Pairings to avoid

    Different hues, almost the same lightness

    These forecast colors look distinct on a mood board but sit at nearly the same luminance. Text or thin lines in one on the other are hard to read. The samples below are deliberately low contrast.

    Seasonal dynamics

    How color families move from autumn/winter 26/27 into spring/summer 27, read from this theme's side. This describes the forecast, not an animation. A family counts as continuing when its nearest match in the other season is within CIEDE2000 15.

    Usage proportions

    How much is hero color

    Editorial Apply these shares to the chromatic, non-surface parts of a screen, such as actions, highlights and charts. They describe the color story, not how much of a page should be tinted.

    Provenance labels

    Where each hex comes from

    official
    The owner published this digital value.
    third-party
    An independent sRGB rendering. The owner's value is gated or paid.
    computed
    Derived from published colorimetry. Not an official hex.
    estimated
    A visual estimate with no published colorimetry. Match against a physical standard before production.
    proxy
    A nearby published color standing in for an unpublished one.
    adjusted
    A UI tone moved to pass contrast. It keeps the seed's provenance.

    Use it

    Ask for a theme by name

    In Claude Code, run /thematic with a request such as “apply Rewild to our booking form in dark mode”. It returns the token pairs for each component, what to keep and change, and the cautions for that theme. The helper script answers color questions directly.