Kataplasma Design System

Internal reference, never published. Every token, type step and component the site is built from. If a value on a page is not in here, it does not belong on the page.

Brand palette

Nine official colors

Taken from live Canva pieces, not reconstructed from the Brandstyle PDF, which contains errata. Never bind a component to these directly. Bind to the semantic layer below.

Fire Red

#EF4823

Air Blue

#077397

Ocean Teal

#02524A

Earth Black

#281317

Space White

#FFFFFF

Gravel Gray

#A09696 decorative only

Leaf Green

#78A348

Water Blue

#78BFC7

Sun Spirit Yellow

#F3BA19

Semantic layer

What components actually bind to

These flip with the color mode. Neutrals are derived with alpha, never with a new hex, so one token composites correctly on Space White and on Earth Black.

theme / surface

theme / surface-warm

gravel 10%

theme / ink

theme / muted

ink 68%

theme / line

gravel 35%

theme / accent

state / positive

state / attention

state / negative

Type scale

Seven steps, display and body

Display 3xl, 4.5rem

Display 2xl, 3rem

Display xl, 2rem

Display lg, 1.5rem

Body md at 1.25rem, set in the serif. The contrast between heavy sans headlines and light serif body is the studio typographic signature. Setting everything in sans kills it.

Body sm at 1rem in muted, for secondary copy. This is the token that used to point at Gravel Gray and failed contrast on white.

Spacing

Ten steps, all rem

Components

Four blocks the case study template is built from

Each one binds to a CMS field. Content is filled in the case study pipeline, not here.

Case study beat block, repeated six times

The Gamble

We had already delivered under Captain Bluebeard. Two intro animations and a logo, finished and public. His audience had seen them.

Then the strategy work turned up something nobody wanted to hear.

Pull quote

He had spent years building an audience on a name he was renting. He ended up with one he could put on a sweater.
Marvin Radke, Cloud Corleone

Before and after pair

Before

After

Credits block

Client — Marvin Radke

Executive Creative Director — Sebastian Lecona

Character Design — Rodolfo Valentin

Surface card, and its accent variant

surface-card

Warm fill, card radius, no grey border.

surface-card is-accent

Fire Red with on-accent text.

Dark mode

Nothing below is restyled. This section carries the theme-dark class, which switches the Base collection to mode two. Every token resolves through the same semantic names, so a component built once works in both.

theme/surface

theme/surface-warm

theme/ink

theme/muted

theme/line

theme/accent

Components in mode two