Terracotta
The signature. Links, highlights, brand markers, and one confident stroke per layout — never a flood.
White
The background for everything. Metaforms lives on a white page.
Identity
Color
Our palette is deliberately narrow: white, one terracotta, a single grey built from #262626, and one dedicated orange for the elephant. Color at Metaforms is punctuation, not decoration — used sparingly, it means something every time it appears.
Elephant Orange
Reserved for the elephant across illustration. It is not Terracotta.
Ink
All reading text and primary UI. The base the whole ramp is built from.
Graphite
Secondary text and long-form captions.
Stone
Metadata, labels, disabled states.
Tint
The quietest fill — panels and framed figures.
Hairline
Card borders and figure frames.
Backgrounds & whitespaceText & inkGrey tint & structureTerracotta accents
| Pairing | Ratio | Body text | Large text |
|---|---|---|---|
| Ink on White | 15.9 : 1 | AAA | AAA |
| Graphite on White | 7.0 : 1 | AAA | AAA |
| Stone on White | 3.5 : 1 | Fail | AA (24px+) |
| Terracotta on White | 3.3 : 1 | Fail | AA (24px+) |
| White on Terracotta | 3.3 : 1 | Fail | AA (18px+ semibold) |
:root {
/* primary */
--mf-terracotta: #fb6443;
--mf-terracotta-deep: #d94a2c;
--mf-elephant: #ff6e4d;
--mf-white: #ffffff;
/* neutral — one ramp from #262626 */
--mf-ink: #262626;
--mf-graphite: #595959;
--mf-stone: #8f8f8f;
--mf-tint: #f6f6f6;
--hairline: #ececec;
}