Corporate Memphis / Flat Illustration

---
name: corporate-memphis-flat
description: Apply the Corporate Memphis / Flat Illustration visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Corporate Memphis / Flat Illustration, mentions corporate art style, alegria style, flat illustration, or describes flat vector people with exaggerated limbs, soft purple-coral-teal palette, cream backgrounds — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Corporate Memphis / Flat Illustration Design System

The 2017–2021 big-tech house style: flat vector illustrations of cheerful, disproportionate humans with bendy limbs, set against cream backgrounds, soft purples, corals, and teals, friendly geometric type, and generously rounded cards. Optimistic, frictionless, and instantly recognizable as 'startup illustration'.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Corporate Memphis / Flat Illustration.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (corporate art style, alegria style, flat illustration, big tech illustration, blob people), or describes its traits: flat vector people with exaggerated limbs; soft purple-coral-teal palette; cream backgrounds; organic blob shapes; friendly rounded geometric sans; airy spacing; 12–16px rounded corners.

## Design tokens

### Color palette

- Warm cream page background: `#fdf6ec` (--color-bg)
- Card and panel background: `#ffffff` (--color-surface)
- Primary text, soft near-black: `#2d3436` (--color-text)
- Secondary and caption text: `#636e72` (--color-text-muted)
- Primary accent, soft purple — buttons and links: `#6c5ce7` (--color-accent)
- Illustration and highlight coral: `#ff7675` (--color-accent-coral)
- Illustration and badge teal: `#00cec9` (--color-accent-teal)
- Warm illustration accent and blob fills: `#fdcb6e` (--color-accent-yellow)
- Pale lavender organic background shapes: `#f1ecff` (--color-blob)

### Typography

- Display / headings: Poppins (fallback: Avenir, Helvetica Neue, sans-serif)
- Body: Nunito (fallback: Avenir, Helvetica Neue, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Airy and unhurried; illustrations need clear space, sections are separated by large gaps and often by a curved divider or blob shape.
- Border radius: md 12px, lg 16px, pill 999px — Everything is rounded 12–16px; buttons are often full pills. Sharp corners feel off-brand here.
- Border treatment: none — Surfaces separate by fill and soft shadow, not borders. Inputs get a 1px #e6e0d4 hairline at most.

### Shadows

- soft: `0 4px 16px rgba(45, 52, 54, 0.08)` — Default card elevation
- soft-lg: `0 12px 32px rgba(45, 52, 54, 0.12)` — Hovered cards and modals

### Layout

- Max content width: 1140px
- Alternating two-column sections: text one side, flat illustration the other, swapping sides each section
- Organic blob or curved-wave section dividers
- Centered hero with illustration cast of characters
- Three-up feature cards with spot illustrations

### Effects

- Organic SVG blob shapes behind illustrations
- Curved wave dividers between sections
- Occasional floating confetti dots and squiggles in accent colors

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 300ms / 500ms
- Illustrations fade and float up gently on scroll
- Characters may have subtle idle bobbing loops
- Buttons lift 2px with deeper soft shadow on hover

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fdf6ec;
  --color-surface: #ffffff;
  --color-text: #2d3436;
  --color-text-muted: #636e72;
  --color-accent: #6c5ce7;
  --color-accent-coral: #ff7675;
  --color-accent-teal: #00cec9;
  --color-accent-yellow: #fdcb6e;
  --color-blob: #f1ecff;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 16px rgba(45, 52, 54, 0.08);
  --shadow-soft-lg: 0 12px 32px rgba(45, 52, 54, 0.12);
  --border-default: none;
  --font-display: Poppins, Avenir, "Helvetica Neue", sans-serif;
  --font-body: Nunito, Avenir, "Helvetica Neue", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Nunito:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Clean white bar, wordmark in Poppins SemiBold, plain text links, pill-shaped purple CTA button on the right
- **Hero:** Centered or split hero: Poppins Bold headline in near-black, friendly subcopy, pill CTA, and a large flat illustration of people collaborating with a blob backdrop
- **Card:** White surface, 16px radius, soft shadow, spot illustration or colored icon circle on top, title and two lines of muted body copy
- **Button (primary):** Purple #6c5ce7 fill, white text, pill radius, soft shadow, gentle lift on hover
- **Button (secondary):** White fill, purple text, 1px purple border, pill radius
- **Form fields:** White fill, 12px radius, 1px #e6e0d4 border, focus swaps border to purple with a 3px pale-lavender ring

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A flat illustration of oversized, rubber-limbed human figures — no outlines, unrealistic proportions, single-color skin tones — floating beside the headline with an organic blob shape behind them. Spend boldness here; keep everything else quiet.

## Do

- Use flat, outline-free illustration with deliberately unrealistic proportions and diverse, single-hue skin tones
- Keep the palette soft and optimistic — purple leads, coral and teal support
- Round everything: cards 12–16px, buttons as pills
- Give illustrations blob backdrops so they sit on the cream page

## Don't

- No photorealism, gradients-as-hero, or dark moody sections — the register is daylight-cheerful
- Don't outline the illustrations; Corporate Memphis figures are pure flat fills
- Don't crowd sections; the airiness is structural, not optional
- Don't confuse this with 1980s Memphis Design — no squiggle-and-terrazzo postmodern patterns here

## Accessibility notes

- Purple #6c5ce7 on cream #fdf6ec is roughly 4.6:1 — fine for large text and UI, but prefer #2d3436 for body copy and keep purple for buttons with white text
- Coral #ff7675 and teal #00cec9 fail contrast on cream; use them only in illustrations and decorative badges, never for text
- Illustration idle loops must pause under prefers-reduced-motion

## Reference sites

- Corporate Memphis (Wikipedia): https://en.wikipedia.org/wiki/Corporate_Memphis
- Humaaans illustration library: https://www.humaaans.com
- unDraw: https://undraw.co
- Blush: https://blush.design

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip corporate-memphis-flat.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/corporate-memphis-flat.json

Settings → Capabilities → Skills → Upload skill → corporate-memphis-flat.zip