Design Aesthetic Reference

The Flat, Friendly, Everywhere Design Language

Corporate Memphis, also known as Alegria, became the dominant visual language of major tech companies -- flat vector illustrations, disproportionate human figures, and cheerful universality.

Visual Characteristics

The defining visual traits of Corporate Memphis -- flat geometry, disproportionate figures, and relentless optimism.

Flat Vector Geometry

All elements constructed from simple geometric shapes -- circles, rectangles, organic curves -- with no gradients, shading, or textures.

Disproportionate Figures

Small heads paired with massive torsos and elongated, boneless "bendy" limbs that lack any skeletal structure.

Non-representational Skin Tones

Figures rendered in blue, purple, green, yellow, or pink rather than realistic human colors -- inclusivity through abstraction.

Simplified Facial Features

Minimal dot-eyes and simple mouths, ranging from basic expressions to completely blank faces.

Action Poses

Figures depicted dancing, jumping, collaborating, or gesturing enthusiastically -- always in motion, always upbeat.

Geometric Backgrounds

Abstract shapes, floating circles, rectangles, and organic blobs serve as decorative elements behind the figures.

Design Principles

The rules that govern every Corporate Memphis composition.

Strictly Flat

No shadows, no gradients, no 3D effects. Every surface is an unbroken plane of solid color.

Limited Palette

Use 3-5 high-contrast colors maximum per composition for visual consistency across an entire product ecosystem.

Mass Producible

Keep illustrations simple enough for mass production and easy animation -- modular, interchangeable parts.

SVG-First

Favor SVG and vector format for infinite scalability and minimal file sizes across every screen.

Abstract Diversity

Abstract human representation to avoid specificity while suggesting diversity through color and form.

Open and Airy

Compositions should feel uncluttered and spacious. Whimsy and exaggeration over realism.

Color Palette

A limited palette of high-contrast solid colors -- no gradients, no blending, just confident flat fills.

Primary Colors

Primary Blue
#4A90D9
Primary Purple
#7B61FF
Primary Pink
#F48196
Primary Green
#14C88C
Primary Yellow
#FAD141
Accent Orange
#FF8C42

Non-representational Skin Tones

Skin Blue
#86CCCA
Skin Purple
#C9AECF
Skin Green
#7DD1A0
Skin Pink
#F0A0B0
Skin Yellow
#F5D76E

Backgrounds & Text

BG Light
#FAFBFC
BG Cream
#F5F6FA
BG Dark
#1A1A2E
Text Dark
#1D1D1F
Text Medium
#6E6E73
Text Light
#F1F1F1

Typography

Clean geometric sans-serifs with rounded terminals -- friendly, confident, and effortlessly legible.

Display / Hero Text
Build something people love
Heading
Collaboration without complexity
Our platform helps teams collaborate, ship faster, and delight their users with less effort and more joy. Designed for clarity at every scale.
UI Label / Button
Get Started Free Learn More
Recommended Fonts
Poppins Headlines, Body
Nunito Sans Body, Captions
Nunito Headlines, UI
DM Sans Body, UI
Quicksand Display, Titles
Rubik Headlines, Buttons
Manrope Headlines, Body
Plus Jakarta Sans Modern Variant

Layout Principles

Centered, spacious, and intentionally straightforward -- generous whitespace, large heroes, and card-based grids.

Centered, Spacious

Max-width containers (1000-1200px) prevent sprawl. Generous 40-80px padding between sections reinforces the airy feel.

Large Hero Sections

Oversized illustrations (40-60% of viewport) paired with short, punchy copy and a prominent CTA button.

Card-Based Grids

Flat cards with no borders or drop shadows. Separation achieved through background color contrast and spacing alone.

Alternating Rows

Zigzag layout where text and illustration swap sides section-to-section for visual rhythm.

Color Block Sections

Solid color blocks separate sections -- white, then blue, then white again. No divider lines, purely color and spacing.

Responsive Stacking

Columns stack vertically on mobile. Typography scales with clamp(). Generous spacing maintained at every breakpoint.

CSS / Design Techniques

The technical implementation patterns that bring Corporate Memphis to life in code.

Flat Card
.cm-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  /* No box-shadow -- flat design */
  /* Separation via background contrast */
}
Pill Button
.cm-button {
  background: var(--cm-blue);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 14px 36px;
  font-family: 'Poppins';
  font-weight: 600;
  /* No box-shadow -- strictly flat */
}
Decorative Blobs
.cm-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}
.cm-blob--1 {
  width: 300px;
  height: 300px;
  background: var(--cm-purple-soft);
}
Feature Grid
.cm-features {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
}
Section Blocks
.cm-section--blue {
  background: var(--cm-blue);
  color: #ffffff;
}
.cm-section--purple {
  background: var(--cm-purple);
  color: #ffffff;
}
.cm-section--cream {
  background: var(--cm-bg-cream);
}
Navigation
.cm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  /* No borders, no shadows -- flat */
}

Illustration Construction Guide

Corporate Memphis figures are built from basic geometric primitives -- here is how they come together.

Anatomy of a Figure

Every Corporate Memphis character follows the same formula: a small head, oversized torso, and long rubbery limbs with no joints.

  • Head -- small circle or oval, disproportionately tiny
  • Torso -- large rounded rectangle, the dominant element
  • Arms -- long curved paths, no elbows or wrists
  • Legs -- elongated tapered paths, bendy and dynamic
  • Hands -- simple circles or mitten shapes
  • Hair -- solid colored abstract shape on the head
  • Face -- minimal dot-eyes, optional simple mouth

Key Construction Rules

The rules that separate Corporate Memphis from other flat illustration styles.

  • No outlines or strokes -- all solid filled shapes
  • No realistic proportions -- exaggeration is the point
  • No anatomical joints -- limbs bend like rubber hoses
  • Non-representational colors only for skin
  • No fine detail -- clothing is solid blocks of color
  • Dynamic, active poses -- always in motion
  • Reduce everything to its most basic geometric form

Key Adopters

The major companies and products that adopted Corporate Memphis as their visual language.

Facebook / Meta
Originated the Alegria system in 2017 with agency Buck
Google
Adopted similar flat illustration systems across products
Slack
Flat, colorful character illustrations throughout the app
Airbnb
Flat illustrations with non-representational figures
Lyft
Geometric flat illustrations for rider and driver experience
Duolingo
Flat character system with Duo and friends
Headspace
Simplified flat meditation illustrations
Discord
Flat character illustrations featuring Wumpus
YouTube
Flat explainer and error page illustrations

Open Illustration Libraries

unDraw Humaaans Open Peeps Blush

Related Aesthetics

How Corporate Memphis relates to other design movements -- its parents, peers, and successors.