Agence WagnerAgence Wagner
FRENDEELS
Back to designs
ColoréLudiqueGéométrique
Preview

Corporate Memphis Design Reference

Corporate Memphis (also known as Alegria) is a flat, geometric illustration and design style that became the dominant visual language of major technology companies from 2017 through the early 2020s. Originated by design agency Buck for Facebook's "Alegria" design system, it is characterized by flat vector illustrations of disproportionate human figures with elongated, rubbery limbs, non-representational skin tones, and high-contrast solid color palettes. The style prioritizes scalability, mass-reproducibility, and a sense of cheerful universality across digital interfaces.

Visual Characteristics

Core Design Traits

  • Flat vector geometry -- all elements are constructed from simple geometric shapes (circles, rectangles, organic curves) with no gradients, dynamic shading, or textures
  • Disproportionate human figures -- small heads paired with massive torsos and elongated, boneless "bendy" limbs that lack skeletal structure
  • Non-representational skin tones -- figures rendered in blue, purple, green, yellow, or pink rather than realistic human colors, intended to convey inclusivity through abstraction
  • Simplified facial features -- ranging from minimal dot-eyes and simple mouths to completely blank faces
  • Action poses -- figures are typically depicted dancing, jumping, collaborating, or gesturing enthusiastically
  • Flat, solid color fills -- no blending, no texture, no depth simulation; strictly 2D appearance
  • Geometric backgrounds -- abstract shapes, floating circles, rectangles, and organic blobs as decorative elements
  • Scalable, modular compositions -- designed as interchangeable illustration systems that can be reused across hundreds of pages and contexts
  • Warm, optimistic tone -- visual language designed to project friendliness, approachability, and positivity

Design Principles

  • Maintain a strictly flat appearance: no shadows, no gradients, no 3D effects
  • Use a limited, high-contrast color palette for visual consistency across an entire product ecosystem
  • Keep illustrations simple enough for mass production and easy animation
  • Favor SVG/vector format for infinite scalability and small file sizes
  • Abstract human representation to avoid specificity while suggesting diversity
  • Compositions should feel open, airy, and uncluttered
  • Illustrations serve a decorative/emotional role rather than conveying complex information
  • All elements should be constructable from basic geometric primitives
  • Embrace whimsy and exaggeration over realism

Color Palette

Primary Scheme

Corporate Memphis relies on a limited palette of high-contrast solid primary colors or soft pastels. The palette avoids dynamic shading or gradients entirely, maintaining a flat, sleek appearance.

Role Colors Hex (suggested)
Primary Blue Bright medium blue, sky blue #4A90D9, #5B9BD5
Primary Purple Vivid violet, soft lavender #7B61FF, #C8B4FF
Primary Pink / Coral Warm pink, salmon #F48196, #FF6B8A
Primary Green / Teal Caribbean green, teal #14C88C, #2ECDA7
Primary Yellow Warm amber, golden yellow #FAD141, #FBD15A
Accent Orange Warm tangerine #FF8C42, #FFA552
Skin Tone: Blue Soft blue, powder blue #86CCCA, #78C8C8
Skin Tone: Purple Muted lavender #C9AECF, #B4A0D0
Skin Tone: Green Soft sage, mint #7DD1A0, #82D993
Skin Tone: Pink Warm blush #F0A0B0, #FAD6DA
Background (Light) Near-white, soft cream #FAFBFC, #F5F6FA
Background (Dark) Deep navy, charcoal #1A1A2E, #141414
Text (Dark) Near-black #1D1D1F, #2C2C2E
Text (Light) Soft off-white #F1F1F1, #EDEFEC

Suggested CSS Custom Properties

:root {
  /* Primary palette */
  --cm-blue: #4a90d9;
  --cm-purple: #7b61ff;
  --cm-pink: #f48196;
  --cm-green: #14c88c;
  --cm-yellow: #fad141;
  --cm-orange: #ff8c42;
  --cm-teal: #78c8c8;

  /* Soft / pastel variants */
  --cm-blue-soft: #b4dcdc;
  --cm-purple-soft: #c8b4ff;
  --cm-pink-soft: #fad6da;
  --cm-green-soft: #a8e6cf;
  --cm-yellow-soft: #fef3c7;

  /* Non-representational skin tones */
  --cm-skin-blue: #86ccca;
  --cm-skin-purple: #c9aecf;
  --cm-skin-green: #7dd1a0;
  --cm-skin-pink: #f0a0b0;
  --cm-skin-yellow: #f5d76e;

  /* Backgrounds */
  --cm-bg-light: #fafbfc;
  --cm-bg-cream: #f5f6fa;
  --cm-bg-dark: #1a1a2e;

  /* Text */
  --cm-text-dark: #1d1d1f;
  --cm-text-medium: #6e6e73;
  --cm-text-light: #f1f1f1;

  /* Decorative blobs */
  --cm-blob-1: #c8b4f0;
  --cm-blob-2: #b4dcdc;
  --cm-blob-3: #fad6da;
}

Color Guidelines

  • Strictly no gradients -- every fill is a solid, flat color
  • Use 3-5 colors maximum per composition to maintain cohesion
  • Non-representational skin tones (blue, purple, green) are a defining characteristic; never use realistic flesh tones
  • Background colors should be either very light (near-white) or bold and saturated
  • Decorative geometric shapes (floating circles, rectangles, blobs) use the accent/pastel palette
  • Color contrast between figure and background must be high for readability at small sizes
  • The palette should feel warm, optimistic, and energetic without being garish

Typography

Typeface Characteristics

Corporate Memphis typography should be:

  • Clean geometric sans-serif -- matching the flat, constructed illustration style
  • Rounded or softened terminals preferred -- reinforcing the friendly, approachable tone
  • Medium to bold weights for headings -- confident but not aggressive
  • Regular weight for body text -- clean legibility at scale
  • No serifs, no decorative scripts -- these conflict with the geometric flatness
  • Generous letter-spacing and line-height -- open, airy feel matching the illustrations
Font Style Usage
Poppins Geometric sans, rounded corners Headlines, body text (the quintessential Corporate Memphis font)
Nunito Rounded sans-serif, soft terminals Headlines, body text, UI labels
Nunito Sans Clean companion to Nunito Body text, smaller copy
DM Sans Clean geometric sans Body text, UI elements
Inter Neutral geometric sans Body text, data-heavy layouts
Quicksand Rounded geometric sans Display headings, feature titles
Rubik Slightly rounded geometric Headlines, buttons, all-purpose
Manrope Modern geometric grotesk Headlines, body text
Plus Jakarta Sans Contemporary geometric sans Headlines, body (modern Corporate Memphis)

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito+Sans:wght@400;600&display=swap');

/* Headlines */
h1, h2, h3 {
  font-family: 'Poppins', 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--cm-text-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Display / Hero text */
.cm-display {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Body text */
body {
  font-family: 'Nunito Sans', 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cm-text-dark);
}

/* UI labels and buttons */
.cm-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none; /* avoid uppercase -- too corporate/rigid */
}

/* Subtext / captions */
.cm-caption {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--cm-text-medium);
  line-height: 1.5;
}

Layout Principles

Grid and Structure

  • Centered, spacious layouts -- generous whitespace is essential; illustrations and content need breathing room
  • Max-width containers (1000-1200px) prevent sprawl and keep focus on content
  • Large hero sections -- oversized illustrations paired with short, punchy copy
  • Card-based content blocks -- flat cards with minimal or no borders, organized in grids
  • Alternating content/illustration rows -- zigzag layout where text and illustration swap sides
  • Generous padding (40-80px between sections) reinforces the open, airy feel
  • Simple CSS Grid or Flexbox -- no complex responsive gymnastics; layouts are intentionally straightforward
  • Flat, borderless cards -- no drop shadows; separation achieved through background color contrast or subtle spacing

Section Organization

  • Hero: Large illustration (40-60% of viewport) + bold headline + short tagline + CTA button
  • Features: 3-4 column grid of icon/illustration + title + short description
  • Alternating rows: Text block on one side, illustration on the other, swapping per section
  • Social proof / testimonials: Simple cards or inline quotes with minimal decoration
  • CTA / footer: Bold background color + centered text + prominent button
  • Use solid color blocks to separate sections (e.g., white section, then blue section, then white again)
  • No divider lines -- sections are separated purely by background color changes and vertical spacing

Responsive Approach

  • Stack columns vertically on mobile
  • Illustrations scale down but maintain their prominence
  • Maintain generous spacing even at smaller breakpoints
  • Typography scales fluidly with clamp() or viewport units

CSS/Design Techniques

Flat Card Component

.cm-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  /* No box-shadow -- this is flat design */
  /* Separation comes from background contrast */
}

/* On a colored background, cards stand out via color alone */
.cm-section--blue {
  background: var(--cm-blue);
}

.cm-section--blue .cm-card {
  background: #ffffff;
  color: var(--cm-text-dark);
}

Flat Button

.cm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cm-blue);
  color: #ffffff;
  border: none;
  border-radius: 50px; /* fully rounded pill shape */
  padding: 14px 36px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  /* No box-shadow -- strictly flat */
}

.cm-button:hover {
  background: var(--cm-purple);
  transform: translateY(-1px);
}

.cm-button:active {
  transform: translateY(0);
}

/* Secondary / outline variant */
.cm-button--outline {
  background: transparent;
  color: var(--cm-blue);
  border: 2px solid var(--cm-blue);
}

.cm-button--outline:hover {
  background: var(--cm-blue);
  color: #ffffff;
}

Hero Section

.cm-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  gap: 60px;
}

.cm-hero__content {
  flex: 1;
  max-width: 500px;
}

.cm-hero__illustration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cm-hero__illustration svg,
.cm-hero__illustration img {
  width: 100%;
  max-width: 550px;
  height: auto;
}

.cm-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.15;
}

.cm-hero p {
  font-size: 1.15rem;
  color: var(--cm-text-medium);
  margin-bottom: 2rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .cm-hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 20px;
  }
}

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;
}

.cm-feature {
  text-align: center;
  padding: 24px;
}

.cm-feature__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.cm-feature h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.cm-feature p {
  font-size: 0.95rem;
  color: var(--cm-text-medium);
  line-height: 1.6;
}

Alternating Content Rows

.cm-row {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
}

.cm-row:nth-child(even) {
  flex-direction: row-reverse;
}

.cm-row__text {
  flex: 1;
}

.cm-row__image {
  flex: 1;
}

.cm-row__image img,
.cm-row__image svg {
  width: 100%;
  max-width: 500px;
  height: auto;
}

@media (max-width: 768px) {
  .cm-row,
  .cm-row:nth-child(even) {
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
  }
}

Section Color Blocks

.cm-section {
  padding: 80px 0;
}

.cm-section--white {
  background: var(--cm-bg-light);
}

.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);
}

.cm-section--dark {
  background: var(--cm-bg-dark);
  color: var(--cm-text-light);
}

Decorative Floating Shapes (SVG Blobs)

A hallmark of Corporate Memphis is decorative geometric shapes floating in the background.

.cm-blobs {
  position: relative;
  overflow: hidden;
}

.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);
  top: -100px;
  right: -80px;
}

.cm-blob--2 {
  width: 200px;
  height: 200px;
  background: var(--cm-pink-soft);
  bottom: -60px;
  left: -40px;
}

.cm-blob--3 {
  width: 150px;
  height: 150px;
  background: var(--cm-green-soft);
  top: 40%;
  left: 10%;
}

Inline SVG Illustration Style (CSS for SVG figures)

/* Style guide for inline SVG illustrations */
.cm-illustration svg {
  /* Flat fills, no strokes */
  fill-rule: evenodd;
}

.cm-illustration .figure-body {
  fill: var(--cm-skin-blue);
}

.cm-illustration .figure-hair {
  fill: var(--cm-purple);
}

.cm-illustration .figure-clothing {
  fill: var(--cm-pink);
}

.cm-illustration .background-shape {
  fill: var(--cm-yellow-soft);
  opacity: 0.4;
}

/* Simple hover animation for interactive illustrations */
.cm-illustration:hover svg {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

.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 */
}

.cm-nav__logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--cm-text-dark);
  text-decoration: none;
}

.cm-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.cm-nav__links a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cm-text-medium);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cm-nav__links a:hover {
  color: var(--cm-blue);
}

Illustration Construction Guide

Building Corporate Memphis Figures

Corporate Memphis illustrations are constructed from basic geometric primitives:

Body Part Shape Proportion
Head Small circle or oval Disproportionately small relative to body
Torso Large rounded rectangle or trapezoid Oversized, dominant element
Arms Long, curved paths (no joints) Extremely elongated, rubbery, boneless
Legs Long, tapered paths Elongated, bendy, often in dynamic poses
Hands Simple circles or mitten shapes Minimal detail
Feet Rounded rectangles Simple, block-like
Hair Solid colored shape overlaid on head Abstract, single-color block
Face Minimal: dot eyes, simple curve mouth Often no face at all

Key Construction Rules

  • No outlines or strokes -- all elements are solid filled shapes
  • No realistic proportions -- exaggeration is the point
  • No anatomical joints -- limbs bend smoothly like rubber hoses
  • Non-representational colors -- skin in blue, purple, green, never realistic
  • No fine detail -- clothing is solid blocks of color, no patterns or textures
  • Dynamic, active poses -- figures should feel alive and in motion
  • Geometric simplification -- reduce everything to its most basic geometric form

Key Companies and Products Using This Style

Company / Product Notes
Facebook / Meta Originated the Alegria system (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/driver experience
Duolingo Flat character system (Duo and friends)
Headspace Simplified flat meditation illustrations
Discord Flat character illustrations (Wumpus and human figures)
YouTube Flat explainer and error page illustrations

Open Illustration Libraries in This Style

  • unDraw (undraw.co) -- open-source flat SVG illustrations
  • Humaaans (humaaans.com) -- mix-and-match flat human illustrations by Pablo Stanley
  • Open Peeps -- hand-drawn-style flat character library
  • Blush (blush.design) -- customizable flat illustration collections
Aesthetic Relationship to Corporate Memphis
Flat Design Parent category; Corporate Memphis is a specialized subset of flat design focused on illustration systems
Memphis Design 1980s Italian design movement (Memphis Group); namesake reference for bright colors, geometric shapes, and playful patterns
Claymorphism 3D successor trend; gives flat elements a puffy, clay-like depth that Corporate Memphis explicitly avoids
Glassmorphism Contemporary alternative; uses transparency, blur, and glass effects vs. Corporate Memphis's opaque flatness
Minimalism Shares the reductive philosophy but Corporate Memphis adds warmth through color and illustration
Neubrutalism Reactionary counter-movement; embraces raw, unpolished, high-contrast aesthetics as an antidote to Corporate Memphis's polish
Material Design Google's design system; shares flat principles but adds elevation/shadow layers that Corporate Memphis rejects

Quick-Start: Minimal Corporate Memphis Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Corporate Memphis Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --cm-blue: #4a90d9;
      --cm-purple: #7b61ff;
      --cm-pink: #f48196;
      --cm-green: #14c88c;
      --cm-yellow: #fad141;
      --cm-bg: #fafbfc;
      --cm-text: #1d1d1f;
      --cm-text-muted: #6e6e73;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--cm-bg);
      color: var(--cm-text);
      font-family: 'Nunito Sans', 'Poppins', sans-serif;
      font-weight: 400;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      line-height: 1.2;
    }

    /* Navigation */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px;
    }

    nav a.logo {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.3rem;
      color: var(--cm-text);
      text-decoration: none;
    }

    nav ul {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    nav ul a {
      color: var(--cm-text-muted);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    nav ul a:hover { color: var(--cm-blue); }

    /* Hero */
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 40px;
      gap: 60px;
    }

    .hero-content { flex: 1; max-width: 520px; }

    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.15rem;
      color: var(--cm-text-muted);
      margin-bottom: 2rem;
    }

    .hero-illustration {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    /* Flat button */
    .btn {
      display: inline-block;
      background: var(--cm-blue);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 14px 36px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
    }

    .btn:hover {
      background: var(--cm-purple);
      transform: translateY(-1px);
    }

    /* Feature section */
    .features {
      background: #ffffff;
      padding: 80px 0;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .feature {
      text-align: center;
      padding: 24px;
    }

    .feature-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    .feature h3 { margin-bottom: 0.5rem; }
    .feature p { color: var(--cm-text-muted); font-size: 0.95rem; }

    /* CTA section */
    .cta {
      background: var(--cm-blue);
      color: #ffffff;
      text-align: center;
      padding: 80px 40px;
    }

    .cta h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .cta p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 2rem;
    }

    .cta .btn {
      background: #ffffff;
      color: var(--cm-blue);
    }

    .cta .btn:hover {
      background: var(--cm-yellow);
      color: var(--cm-text);
    }

    @media (max-width: 768px) {
      .hero {
        flex-direction: column-reverse;
        text-align: center;
        padding: 40px 20px;
      }
      nav { padding: 16px 20px; }
      nav ul { gap: 16px; }
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" class="logo">Acme Co</a>
    <ul>
      <li><a href="#">Product</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <section class="hero">
    <div class="hero-content">
      <h1>Build something people love</h1>
      <p>Our platform helps teams collaborate, ship faster, and delight their users with less effort and more joy.</p>
      <a href="#" class="btn">Get Started Free</a>
    </div>
    <div class="hero-illustration">
      <!-- Replace with Corporate Memphis SVG illustration -->
      <svg width="400" height="320" viewBox="0 0 400 320" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Background blob -->
        <ellipse cx="200" cy="170" rx="180" ry="140" fill="#C8B4FF" opacity="0.2"/>
        <!-- Figure body -->
        <rect x="160" y="100" width="80" height="100" rx="20" fill="#86CCCA"/>
        <!-- Head -->
        <circle cx="200" cy="80" r="28" fill="#86CCCA"/>
        <!-- Hair -->
        <path d="M175 68 Q200 40 225 68" fill="#7B61FF"/>
        <!-- Left arm -->
        <path d="M160 120 Q100 90 80 140" stroke="#86CCCA" stroke-width="16" stroke-linecap="round" fill="none"/>
        <!-- Right arm -->
        <path d="M240 120 Q300 90 320 140" stroke="#86CCCA" stroke-width="16" stroke-linecap="round" fill="none"/>
        <!-- Left leg -->
        <path d="M180 200 Q170 260 150 290" stroke="#86CCCA" stroke-width="16" stroke-linecap="round" fill="none"/>
        <!-- Right leg -->
        <path d="M220 200 Q230 260 250 290" stroke="#86CCCA" stroke-width="16" stroke-linecap="round" fill="none"/>
        <!-- Clothing -->
        <rect x="165" y="130" width="70" height="50" rx="10" fill="#F48196"/>
        <!-- Simple face -->
        <circle cx="190" cy="78" r="3" fill="#1D1D1F"/>
        <circle cx="210" cy="78" r="3" fill="#1D1D1F"/>
        <path d="M192 88 Q200 94 208 88" stroke="#1D1D1F" stroke-width="2" fill="none" stroke-linecap="round"/>
        <!-- Decorative shapes -->
        <circle cx="60" cy="60" r="20" fill="#FAD141" opacity="0.5"/>
        <rect x="310" y="200" width="30" height="30" rx="6" fill="#14C88C" opacity="0.4" transform="rotate(15 325 215)"/>
        <circle cx="340" cy="80" r="12" fill="#F48196" opacity="0.4"/>
      </svg>
    </div>
  </section>

  <section class="features">
    <div class="features-grid">
      <div class="feature">
        <div class="feature-icon" style="background: #C8B4FF30;">
          <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="14" fill="#7B61FF"/><rect x="12" y="14" width="12" height="8" rx="2" fill="#fff"/></svg>
        </div>
        <h3>Easy Collaboration</h3>
        <p>Work together in real time with your entire team, no matter where they are.</p>
      </div>
      <div class="feature">
        <div class="feature-icon" style="background: #F4819630;">
          <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="14" fill="#F48196"/><polygon points="18,10 22,22 14,22" fill="#fff"/></svg>
        </div>
        <h3>Ship Faster</h3>
        <p>Streamlined workflows and smart automation help you launch in record time.</p>
      </div>
      <div class="feature">
        <div class="feature-icon" style="background: #14C88C30;">
          <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="14" fill="#14C88C"/><path d="M12 18 L16 22 L24 14" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>
        </div>
        <h3>Reliable & Secure</h3>
        <p>Enterprise-grade security and 99.9% uptime so you can focus on building.</p>
      </div>
    </div>
  </section>

  <section class="cta">
    <h2>Ready to get started?</h2>
    <p>Join thousands of teams already using our platform.</p>
    <a href="#" class="btn">Start Free Trial</a>
  </section>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.