Component Showcase

Explore all the Memphis Design System components. Built with accessibility, dark mode, and reduced motion support.

Buttons

Button Variants

Button Sizes

Button States

Cards

Memphis Card

A bold, chaotic card with clipped corners and diagonal stripes.

Another Card

Different colors create different moods and energy.

Chaos Rules

Embrace the disorder of Memphis design.

Standard Card

A more subdued card style for when you need less chaos.

With Footer

Cards can have headers, content, and footers for structured layouts.

Form Controls

Text Inputs

Name

We'll never share your email.

With Error

This field is required

Success State

Disabled

Other Inputs

Message

Favorite Color

Alerts

Success!

Your changes have been saved successfully.

Warning

Please review your input before continuing.

Error

Something went wrong. Please try again.

Information

Your session will expire in 5 minutes.

This alert can be dismissed by clicking the X button.

Toast Notifications

Click a button to show a toast notification:

Dialog Modal

Click the button to open a modal dialog:

Loading States

Spinners

Loading Dots

Skeletons

Typography

Display XL

Display

Heading 1

Heading 2

Heading 3

Heading 4

Body Large - Memphis design is anti-minimalist

Body - The Memphis Group challenged conventional design

Small Text - Founded in Milan in 1981

Caption - By Ettore Sottsass

Special Effects

Outline Text

Shadow Text

Color Palette

Primary Colors

Red

Yellow

Blue

Green

Pink

Purple

Orange

Secondary Colors

Teal

Coral

Mint

Lavender

Back to Home