Corporate memphis: flat vector figures with small heads and large gestures, coral and teal and mustard on a soft ground, rounded sans, blobs behind the copy. It is the style behind Facebook's Alegria system, and it turned up on so much of the rest of the industry that it stopped being anybody's in particular. The name comes from the Memphis Group, the Milan collective that made the 1980s furniture nobody could ignore.
You already know how people feel about it. Corporate memphis is the most mocked visual style on the internet, and it is also one of the most deployed. This repo treats both of those as information. A style has to be recognizable before it can be mocked, and it has to work on something before it gets deployed that widely.
The screenshot above is demo/index.html, a fictional team leave planner called Fallow. Open it live, or clone the repo and open the file. There is no build step, no framework, no node_modules, and no server to start.
The demo declares no color of its own. It links tokens/tokens.css, components/components.css and components/illustration.css and reads every value from them, so it stays honest about what the theme actually produces.
There is a second page worth opening: components/index.html renders all five components with their variants, plus the illustration layer, with the markup to copy.
A visual style is a set of coordinates, not a mood. This theme sits at one point in the creative direction framework, which sets brand direction on four axes. Here is where this register lands and what each choice pays for.
| Axis | Position | What the position buys |
|---|---|---|
| Tone register | Conversational | Warmth that a buyer who is not technical will read as competence rather than as noise. The rounded face and the 800-weight display are the same sentence said twice. |
| Aesthetic philosophy | Polished Standard | A hero, a card row and a signup, in the order the reader already expects them. The convention is the floor; the illustration is what is spent on top of it. |
| Audience relationship | Companion | 14px radii, sentence-case badges, a page about the reader's week. Square corners would talk down and uppercase labels would address an operator. |
| Sensory ambition | Considered | Four scenes and three spots, drawn rather than licensed. The reader notices the craft without the craft becoming the message. |
Those four position names are the exact strings the framework uses. If you want the long version of any of them, the links go to the position page.
The framework says those first three positions together are the most populated quadrant it has, which is the same fact as this style being everywhere, arrived at from the other direction.
Sensory ambition is the interesting cell, and Considered is a deliberate answer rather than a modest one.
The ambition of this register is Resonant. Corporate memphis exists to engineer a specific feeling, which is that the software will not hurt you: an abstract product made approachable for a buyer who has no way to evaluate it. That is a feeling-first brief, and the framework has a name for what happens when a brand aims there and lands one step short. It calls it "Resonant claim, Considered execution", and it lists it as a failure pattern.
That gap is most of why the style gets mocked. The illustration is doing feeling-work, and the feeling it produces is recognition rather than anything the reader carries away. So this theme ships at Considered and says so, instead of claiming a position its own drawings do not reach. CUSTOMIZE.md works the move to Resonant, and the first thing that move costs is more than tokens.
Ahrefs, pulled 2026-08-07: "corporate memphis" runs 3,000 searches a month in the US at a keyword difficulty of 20, and 17,000 worldwide.
The trend is up, in steps rather than smoothly. The trailing twelve months average 3,083 a month, against 2,344 for the twelve months ending July 2024, and each year since has sat on a visibly higher shelf than the one before. One caveat, because the round version of this claim is wrong: the single highest month in the series is November 2023 at 3,558, which no month since has beaten. It is the twelve-month average that is at its high, not any one month.
Read that alongside the mockery. Three years of people looking the style up, more of them every year, is not what a dead style does.
Clone once, then pick the path that matches your stack.
git clone --depth 1 https://github.com/rampstackco/corporate-memphis-themePlain CSS. Copy the two folders and link them in order. This is the whole install.
cp -r corporate-memphis-theme/tokens corporate-memphis-theme/components your-project/styles/
cp -r corporate-memphis-theme/illustrations your-project/<link rel="stylesheet" href="/styles/tokens/tokens.css" />
<link rel="stylesheet" href="/styles/components/components.css" />
<link rel="stylesheet" href="/styles/components/illustration.css" />The third line is optional. Leaving it out, along with illustrations/, gives you the quiet variant described below.
Tailwind v4. One import. theme.css pulls in tokens.css and maps it onto Tailwind's theme namespaces, so you get bg-cm-primary, rounded-cm-lg, text-cm-h1, fill-cm-illo-coral.
@import "tailwindcss";
@import "./styles/tokens/theme.css";Tailwind v3. Load the tokens in your stylesheet, then register the preset.
@import "./styles/tokens/tokens.css";
@tailwind base;
@tailwind components;
@tailwind utilities;// tailwind.config.js
module.exports = {
presets: [require("./styles/tokens/preset.js")],
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
};Already on shadcn/ui. The tokens are namespaced --cm-* so they will not clobber yours. Bridge the two in your global stylesheet and shadcn's components inherit the register:
:root {
--background: var(--cm-ground);
--foreground: var(--cm-ink);
--card: var(--cm-surface);
--primary: var(--cm-primary);
--primary-foreground: var(--cm-primary-ink);
--border: var(--cm-border);
--input: var(--cm-border-strong);
--ring: var(--cm-ring);
--radius: var(--cm-radius);
}Note the two border lines. This theme keeps a decorative hairline and a real control edge apart, and shadcn's --border and --input are the right two slots for them. Pointing both at the hairline puts a 1.34:1 edge on every text field.
tokens/tokens.css is the single source of truth. Every literal value in the theme appears there exactly once; theme.css and preset.js hold no values of their own and point back at it with var(). Change a hex there and the demo, the components, the illustrations and both Tailwind adapters follow.
The file is annotated. Each group of tokens carries a comment naming the axis the choice serves and why, so the radius tokens explain themselves:
/* RADIUS
Audience relationship axis. Companion is the position that sits beside the
reader, and radius is the most direct instrument on that axis. Every corner
in this theme is rounded further than a Peer-register system would round it,
and the illustration figures are built from the same curve family, so the
interface and the artwork agree about how soft the page is. */tokens/theme.css carries a verification header rather than a claim. Every namespace in it was compiled through @tailwindcss/postcss and read back out of the emitted declarations, on two Tailwind versions, with controls. It also documents two ways to write a Tailwind class that compiles cleanly and sets the wrong CSS property.
CUSTOMIZE.md documents retheming as axis moves rather than as a color picker: pick an axis, move along it, change the two or three tokens that carry the move. Two moves are worked through with before and after values. Two more are sketched so the format is obvious enough to finish yourself.
verify/ holds two scripts, both dependency-free:
node verify/contrast.js # every ratio quoted in tokens.css, recomputed
node verify/inlined.js # the scenes inlined into the pages match illustrations/The first one caught a wrong number in this repo's own token comments before it shipped, which is the argument for having it.
Tokens can carry the color, the radius, the type and the spacing. They cannot carry a drawing, and a drawing is what makes this register recognizable at a glance. That layer lives in illustrations/ and components/illustration.css, and it is deliberately separable from everything else.
illustrations/ holds nine original SVGs: four figure scenes, three card-sized spots, and two background shapes. They are built to be inlined into your markup rather than loaded through <img>, because an SVG inside an <img> is an isolated document that cannot read your custom properties. Inlined, the paint rules in illustration.css reach them and they take your token colors. Opened on their own they stay correct, because every shape carries a presentation attribute holding the same value its token holds.
Each file's construction is written up inside it: the figure grammar, the proportions and why they are those, and in two cases the version that rendered wrong and what it looked like.
Two things in that folder are worth knowing before you edit them.
Every solid is drawn twice. Once in paper, five units larger, then again in its own color. The paper copy is the white gap you see between a limb and a torso. It is structural: this palette measures 1.08:1 between the plum and the darker skin tone and 1.10:1 between the coral and the teal, so two adjacent shapes without a gap between them resolve into one shape. There is no version of a pastel palette that fixes this, and tokens/tokens.css shows the arithmetic for why darkening a tone moves the problem instead of solving it.
There are two skin tokens. The best known corporate work in this register answered the question of what color a person is by making people lilac and blue. That avoids the question rather than answering it, and it was fairly criticized for doing so. Two warm tones that differ from each other let a scene hold more than one kind of person. Add a third if your scenes need one; nothing in the code assumes there are exactly two.
components/illustration.css adds the composition rules: the pairing grid, the background-shape placement, the card spot slot, and the one dial this theme turns on. --cm-illo-share is the picture column's fraction of a paired row. Set it to 0fr and the picture column collapses, the rest of the composition holds, and the theme lands somewhere with a name.
Delete illustrations/ and illustration.css and everything still works, quietly. That deletion is a move along the sensory ambition axis from Considered toward Functional, and CUSTOMIZE.md documents it as the quiet variant.
Consuming this from a Claude skill. The design-standards skill asks for a project's design tokens as a required input and offers to define a working set when none exist. Point it at tokens/tokens.css instead. The file already covers every category the skill asks for, in the order it asks: color with measured contrast ratios, spacing scale, type scale, radius. Every text pairing in it clears WCAG AA, the ratios are in the comments, and verify/contrast.js recomputes all of them.
Set --cm-illo-share to 0fr, delete illustrations/, and look at what is left: a warm off-white ground, a rounded sans, pill buttons, soft two-layer shadows, a three-card row, a hero with copy on the left. That is the generic modern SaaS landing page, and it is generic in the precise sense that thousands of companies ship it.
Which means the illustration is not a decoration this register wears. It is the entire difference between corporate memphis and the category baseline. Everything else here is shared with every other Polished Standard theme in this collection, on purpose, because that is what Polished Standard is.
That is also the honest answer to "why does all of this look the same". It looks the same because most of it is the same. The drawings are the part that was a decision.
If you want the baseline without the drawings, it is saas-landing-theme, and the relationship is more literal than "a different repo" suggests. Take the illustrations here to zero and what is left collapses back toward that theme: the same spacing logic, the same type scale, a palette that has lost its reason to be soft. The drawings are the position. Everything under them is the baseline both repos share, which is why the two token files look so alike and why swapping between them is a smaller change than it looks.
Two other adjacencies worth naming. The soft two-layer shadow and the large radii are the inverse of neobrutalism-theme: where that register makes the shadow hard and the border loud, this one hides both. And the frosted-panel treatment that often gets layered over this palette lives in glassmorphism-theme rather than here, so composing the two is intended use.
MIT. See LICENSE. Use it commercially, fork it, rename the tokens, redraw the figures, ship it. No attribution required.
Every SVG in illustrations/ was drawn for this repo. None of them is traced from, derived from, or fitted to any company's illustration system.
Issues and pull requests are welcome here. For questions, ideas, and anything conversational, use the discussions on the claude-skills repo, which is where all discussion for these repos lives.