themx
← Back to themes

Memphis Design

playful Visual style

Bold geometry meets playful irreverence

Reference year: 2025

Compare this theme

Best for

Education, Games & entertainment, Brand & events

Less suitable for

  • Formal or data-heavy interfaces that need visual restraint.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Memphis Design preview

Examples

Memphis Design — Hero Section
Hero Section
Memphis Design — Card Grid
Card Grid
Memphis Design — Form
Form
Memphis Design — Dashboard Layout
Dashboard Layout

Color Palette

Primary #FF6B6B
Secondary #4ECDC4
Accent #FFE66D
Background #FFFFFF
Text #2D2D2D

Typography

Heading: Fredoka One
Body: Quicksand

Key Characteristics

  • Bold geometric shapes (circles triangles squiggles)
  • Clashing bright color combinations
  • Repetitive patterns as backgrounds
  • Asymmetric layouts
  • Thick outlines on elements
  • Playful irreverent aesthetic

Tags

80s patterns geometric colorful

Memphis Design was born in 1981 when Italian designer Ettore Sottsass founded the Memphis Group, a collective that rejected the austere good taste of modernism in favor of bold colors, clashing patterns, and irreverent geometric forms. The movement was a deliberate provocation — a declaration that design could be joyful, chaotic, and fun without apologizing. In digital design, Memphis brings an unmistakable energy and personality that cuts through the sea of safe, predictable interfaces.

When to Use

Memphis Design is a natural fit for children’s brands, creative agencies, party and event platforms, toy companies, and any project that wants to communicate pure fun and creative energy. It works well for promotional campaigns, seasonal landing pages, and brands targeting younger audiences. The style also has a strong nostalgia factor for millennial audiences who grew up surrounded by Memphis-influenced design in the late 1980s and early 1990s.

Key Visual Elements

Geometric shapes are everywhere — circles, triangles, squiggly lines, and zigzag patterns scattered across backgrounds and used as decorative elements. Colors clash intentionally: coral next to teal next to yellow next to purple, with no concern for traditional color harmony. Patterns (polka dots, stripes, checkerboards) are used as fills and backgrounds. Thick black outlines give elements a cartoon-like quality. The overall composition is deliberately asymmetric and off-balance, creating dynamic visual tension.

Typography

Fredoka One brings the rounded, bubbly personality that Memphis Design demands, with its thick strokes and playful character. Quicksand provides a similarly friendly but more readable option for body text, with its geometric forms and rounded terminals. Do not be afraid to vary sizes dramatically, rotate text, or use color within typographic elements. Memphis Design is one of the few styles where typographic restraint would actually feel wrong.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Fredoka One", sans-serif;
  --tx-font-body: "Quicksand", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #2D2D2D;
  --tx-card-border-width: 2px;
  --tx-card-radius: 1rem;
  --tx-card-shadow: 4px 4px 0 #4ECDC4;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #FF6B6B;
  --tx-card-shadow-hover: 6px 6px 0 #FFE66D;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 500;
  --tx-text-muted: rgba(45,45,45,0.7);
  --tx-text-subtle: rgba(45,45,45,0.5);
  --tx-link-color: #FF6B6B;
  --tx-button-radius: 9999px;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #2D2D2D;
  --tx-text: #2D2D2D;
  --tx-primary: #FF6B6B;
  --tx-secondary: #4ECDC4;
  --tx-accent: #FFE66D;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Memphis Design

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Education
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Memphis Design (visual-style)
- Bold geometric shapes (circles triangles squiggles)
- Clashing bright color combinations
- Repetitive patterns as backgrounds
- Asymmetric layouts
- Thick outlines on elements
- Playful irreverent aesthetic

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #FF6B6B, secondary #4ECDC4, accent #FFE66D, background #FFFFFF, text #2D2D2D
Typography: Fredoka One for headings, Quicksand for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Fredoka One", sans-serif;
  --tx-font-body: "Quicksand", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #2D2D2D;
  --tx-card-border-width: 2px;
  --tx-card-radius: 1rem;
  --tx-card-shadow: 4px 4px 0 #4ECDC4;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #FF6B6B;
  --tx-card-shadow-hover: 6px 6px 0 #FFE66D;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 500;
  --tx-text-muted: rgba(45,45,45,0.7);
  --tx-text-subtle: rgba(45,45,45,0.5);
  --tx-link-color: #FF6B6B;
  --tx-button-radius: 9999px;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #2D2D2D;
  --tx-text: #2D2D2D;
  --tx-primary: #FF6B6B;
  --tx-secondary: #4ECDC4;
  --tx-accent: #FFE66D;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use geometric decoration outside the main text and form areas.

## Interaction
- Use playful hover states with a static keyboard focus equivalent.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Memphis Design: Formal or data-heavy interfaces that need visual restraint.

## Components
Generate the following components in this style:
- Navbar
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.