HTML Style Guide
A design system inspired by les fauves — the wild beasts of color. Pure pigment, applied without restraint. No subtlety. No apology. Just the raw power of pure color.
Salon d’Automne • 1905Colors applied straight from the tube, unmixed and unafraid. Matisse declared that color should be used for expression, not description. Every hue here is deliberately unnatural, violently vivid, and exactly as the Fauves intended.
Wild Orange
#ff6a00
--wild-orange
Electric Green
#00cc44
--electric-green
Hot Pink
#ff1493
--hot-pink
Cobalt
#0044cc
--cobalt
Chrome Yellow
#ffcc00
--chrome-yellow
Violet
#8800cc
--violet
Off-White
#faf5e8
--off-white
Charcoal
#2a2a2a
--charcoal
The Fauves paired colors that academic tradition deemed impossible. Orange beside pink. Green against violet. These combinations vibrate with energy — exactly the point.
Derain at Collioure
Matisse Interior
Vlaminck Landscape
Full Fauve Riot
Heavy, expressive type that refuses to sit quietly on the page. Lilita One for display text that hits like a fist of pigment. Passion One for headings that demand attention. Nunito for body text that stays legible when surrounded by chaos.
Color exists in itself,
possessing its own beauty.
— Henri Matisse
The chief function of color
should be to serve expression.
— Henri Matisse, Notes of a Painter, 1908
At the 1905 Salon d’Automne in Paris, a room of paintings exploded with color so violent, so unnatural, that critic Louis Vauxcelles famously declared the artists “les fauves” — wild beasts. Henri Matisse, André Derain, Maurice de Vlaminck, and Raoul Dufy had unleashed pure pigment onto canvas with a ferocity that scandalized the art world. Trees were orange. Faces were green. Shadows were purple. It was glorious.
A spacing system built on an 8px base unit. Even in the wildest compositions, the Fauves maintained an intuitive sense of balance. Spacing gives color room to breathe and clash on its own terms.
Irregular border-radius values simulate the gestural quality of Fauvist brushwork. Nothing is perfectly geometric — every edge has a hand-painted quality.
Bold, flat-filled buttons with thick outlines and brushstroke edges. Every button is a slab of pure color — Vlaminck would squeeze them straight from the tube. Hover states shift and lift with gestural energy.
Clash them intentionally. A pink button next to a green one is not a mistake — it is a declaration.
Form elements with thick, painterly borders and bold focus states. When a field is active, color explodes around it like pigment striking canvas. Inputs have the same gestural border-radius as everything else — nothing is factory-perfect.
Your nom de guerre in the studio
What does color mean to you?
Content containers that feel like canvases — each one a flat field of color with thick, decisive borders. Cards tilt and lift on hover like paintings knocked askew on a gallery wall. Every card is assigned its own dominant color, because the Fauves never repeated themselves.
The painting that started a scandal at the 1905 Salon d’Automne. Amélie Matisse rendered in greens, purples, and oranges that bore no relation to flesh. The crowd was outraged. The art world was changed forever.
London rendered in impossible blues and violent oranges. Derain transformed the Thames into a river of pure emotion, the bridge a structure of cobalt and chrome yellow that Monet would never have dared.
Vlaminck claimed he wanted to burn down the École des Beaux-Arts with his cobalts and vermilions. This landscape of acid greens and violent oranges was his torch. Pure aggression in pigment.
Matisse’s monumental vision of paradise — sinuous figures in a landscape of clashing pinks, greens, oranges, and blues. When Leo Stein bought it, even Picasso was disturbed. It broke every rule of color harmony and proved that rules were there to be broken.
Raoul Dufy’s celebration of Bastille Day festivities at Le Havre. Flags of blazing red, white, and blue rendered with loose, joyful brushwork that dissolves form into pure chromatic energy.
Room VII of the Salon d’Automne became ground zero for modern color. When critic Louis Vauxcelles entered the gallery, he found a Renaissance-style bronze sculpture by Albert Marque surrounded by the wildest paintings he had ever seen. “Donatello chez les fauves!” he exclaimed — Donatello among the wild beasts. The name stuck. The beast was loose.
Notifications that shout, never whisper. Flat fields of unbroken color with thick borders, exactly as the Fauves would deliver a message — with maximum chromatic impact and zero concern for your comfort.
Accepted!
Your painting has been accepted into the Salon d’Automne. Prepare for scandal.
Observation
Matisse once noted: “Exactitude is not truth.” Your form data has been received, though its accuracy is beside the point.
Caution!
You are mixing too many pigments. The Fauves worked with pure color — stop muddying your palette.
Scandale!
The critics have rejected your submission. They called it the work of a wild beast. This is, of course, the highest compliment.
Wild Beast Mode
All restraint has been abandoned. Violet background, orange border, yellow text. Vauxcelles is spinning in his grave. This is Fauvism at its most unapologetic.
The philosophical foundations of Fauvism, distilled into design thinking. These are not suggestions — they are declarations of chromatic warfare against the timid, the muted, and the tastefully restrained.
The Fauves rejected the Impressionist technique of optical mixing. They applied pigment straight from the tube — cadmium orange, viridian green, cobalt blue — in flat, unbroken fields. In this design system, every color is used at full saturation. No pastels. No tints for safety. No gradients to soften the blow. Color is used as a blunt instrument, exactly as Vlaminck intended when he declared he wanted to “wring the neck of painting.”
When Louis Vauxcelles called them “les fauves” at the 1905 Salon d’Automne, he meant it as an insult. They wore it as a crown. The Fauvist design principle is simple: if your color choices make people uncomfortable, you are on the right track. Orange next to pink. Green beside violet. Yellow against cobalt. These combinations are not errors — they are acts of liberation. A design system that plays it safe is a design system that has already failed.
Matisse wrote in his 1908 “Notes of a Painter” that the chief function of color should be to serve expression. Not representation. Not decoration. Expression. A tree does not need to be green — it needs to feel the way you felt when you saw it. Derain painted the Thames in blazing orange because that was his emotional truth. In this design system, color choices are driven by the emotion they need to convey, not by what would look “natural” or “professional.”
Raoul Dufy painted blue horses and green skies. Derain made portraits with purple shadows on yellow faces. The Fauves systematically rejected naturalistic color because they understood something radical: color freed from representation becomes pure energy. In this design system, the palette owes nothing to the natural world. These are not the greens of forests or the blues of sky. They are the greens and blues of pure visual force — colors that exist for their own sake, answerable to nothing but the emotional impact they create.