FOUNDATIONS

Patterns

Texture and shape primitives that fill empty space. Use one at a time — the Memphis look is loud enough that combining patterns turns into noise.

Tileable backgrounds

Every tile is a pure CSS gradient — there's no component needed. Apply the background shorthand directly on any element.

STRIPES 45°

STRIPES H

DOTS

GRID

CHECKER

WEAVE

WAVES

SCATTER

Using the patterns directly in CSS

Drop the same background / background-image rules anywhere — works on any block element without React.

1/* Apply the same pattern directly via CSS — no component required */
2.hero {
3  background: repeating-linear-gradient(
4    45deg,
5    var(--primary) 0 6px,
6    transparent 6px 14px
7  );
8  background-color: var(--background);
9}
10
11.dotted-section {
12  background-image: radial-gradient(var(--foreground) 2px, transparent 2px);
13  background-size: 14px 14px;
14}
15
16.grid-bg {
17  background-image:
18    linear-gradient(var(--foreground) 1.5px, transparent 1.5px),
19    linear-gradient(90deg, var(--foreground) 1.5px, transparent 1.5px);
20  background-size: 20px 20px;
21}
22

Shape primitives

Eight Memphis-style SVG shapes: diamond, circle, triangle, zigzag, blob, wave, star, lbar. Pure SVG with aria-hidden — they're decoration only.

1import { MemphisShape } from 'damo-ui'
2
3<MemphisShape variant="diamond" size={64} color="var(--primary)" />
4<MemphisShape variant="circle"  size={64} color="var(--secondary)" />
5<MemphisShape variant="star"    size={48} color="var(--success)" />
6<MemphisShape variant="zigzag"  size={64} color="var(--foreground)" />
7

Props

Prop	Type	Default	Description
variant	MemphisShapeVariant	—	Which shape to render. Required.
size	number	64	Width & height in px (square).
color	string	var(--secondary)	Fill (or stroke for zigzag/wave). Any CSS color.
className	string	—	Tailwind classes (positioning, opacity, etc.).

As decoration behind content

Combine absolute positioning with -z-10 to float a shape behind a section title.

1// Float a shape behind a section title for the Memphis "stamp" feel
2<section className="relative py-16">
3  <MemphisShape
4    variant="blob"
5    size={180}
6    color="var(--primary)"
7    className="absolute -top-6 -left-8 -z-10 opacity-90"
8  />
9  <h2 className="font-display text-4xl">
10    Pricing
11  </h2>
12</section>
13

One pattern per surface

Memphis is loud. Stacking patterns kills hierarchy. Use one tile pattern + one shape accent at most per visual unit.

1// ❌ Combining patterns turns into noise
2<div style={{ background: 'repeating-linear-gradient(...)' }}>
3  <div style={{ background: 'radial-gradient(...)' }}>
4    Stacked patterns fight for attention.
5  </div>
6</div>
7
8// ✅ One pattern per surface, paired with solid Memphis chrome
9<div className="bg-card border-2 border-memphis shadow-memphis p-6">
10  <div
11    className="aspect-video"
12    style={{
13      background: 'repeating-linear-gradient(45deg, var(--primary) 0 6px, transparent 6px 14px)',
14    }}
15  />
16</div>
17

Patterns reference the same semantic tokens as everything else, so they re-color when theme or palette changes — see Theming.

← Typography Box →