/
design.md
Back to directory
playful · maximalist · retro · geometric

Neo-Memphis.

1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients.

01 · Preview

The kitchen sink.

Neo-Memphis.app
ProductPricingDocsAbout
Sign inGet started
playful · maximalist · retro

Build with Neo-Memphis.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#0E0E0E
secondary
#5A5A5A
tertiary
#E63946
neutral
#F4EFD8
surface
#FBF7E5
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
0
md
2px
lg
4px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · The file

DESIGN.md

markdown
1---
2name: "Neo-Memphis"
3description: "1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients."
4tags: [playful, maximalist, retro, geometric]
5colors:
6  primary:   "#0E0E0E"
7  secondary: "#5A5A5A"
8  tertiary:  "#E63946"
9  neutral:   "#F4EFD8"
10  surface:   "#FBF7E5"
11typography:
12  display: "Archivo Black"
13  body:    "DM Sans"
14  mono:    "Space Mono"
15  scale:
16    hero: "5.5rem / 0.95 / 900 / -0.04em"
17    h1:   "3rem / 1 / 900 / -0.03em"
18    h2:   "1.375rem / 1.2 / 700 / 0"
19    body: "1.0625rem / 1.5 / 400 / 0"
20radius:
21  sm: 0
22  md: 2px
23  lg: 4px
24  pill: 9999px
25shadows:
26  card:   "4px 4px 0 #0E0E0E"
27  button: "3px 3px 0 #0E0E0E"
28borders:
29  card:    "2px solid #0E0E0E"
30  divider: "rgba(14, 14, 14, 0.20)"
31buttons:
32  primary:
33    background: #E63946
34    color: #F4EFD8
35    border: 3px solid #0E0E0E
36    shape: rounded
37    padding: 14px 24px
38    font: display / 900 / 0.9375rem / 0.04em
39    uppercase: true
40    shadow: 4px 4px 0 #0E0E0E
41  secondary:
42    background: #1B6CD9
43    color: #F4EFD8
44    border: 3px solid #0E0E0E
45    shape: rounded
46    padding: 14px 24px
47    font: display / 900 / 0.9375rem / 0.04em
48    uppercase: true
49    shadow: 4px 4px 0 #0E0E0E
50  outline:
51    background: #F4C20D
52    color: #0E0E0E
53    border: 3px solid #0E0E0E
54    shape: rounded
55    padding: 14px 24px
56    font: display / 900 / 0.9375rem / 0.04em
57    uppercase: true
58    shadow: 4px 4px 0 #0E0E0E
59  ghost:
60    background: transparent
61    color: #0E0E0E
62    border: none
63    shape: sharp
64    padding: 10px 4px
65    font: display / 900 / 0.875rem / 0.06em
66    uppercase: true
67    hover: underline
68charts:
69  variant: bars
70  gridlines: false
71  bar_radius: 0
72  bar_gap: 12px
73  highlight: all
74  axis_color: "#5A5A5A"
75  palette: ["#E63946", "#1B6CD9", "#F4C20D", "#0E0E0E", "#E63946", "#1B6CD9", "#F4C20D"]
76fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap"
77dependencies: ["lucide-react"]
78---
79 
80# Neo-Memphis
81 
82## AI Build Instructions
83 
84> **Read this section before writing any code.** The rules below
85> are non-negotiable. Every value used in the UI must come from this
86> file's frontmatter — never substitute, approximate, or invent new
87> colors, fonts, radii, or shadows. If a value is missing, ask the
88> user before adding one.
89 
90### 1 · Your role
91 
92You are building UI for a project that has adopted **Neo-Memphis** as its
93design system. Treat `DESIGN.md` as the single source of truth.
94Your job is to translate the user's product requirements into
95components and pages that look like they were designed by the same
96person who authored this file.
97 
98### 2 · Token compliance
99 
100- Pull every color, font family, radius, shadow, and spacing value
101  from the frontmatter at the top of this file.
102- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
103  hard-code hex values that bypass the system.
104- When a token can be expressed as a CSS variable, declare it once
105  in your global stylesheet and reference it everywhere downstream.
106- The Google Fonts `<link>` is provided in the Typography section.
107  Add it to `<head>` before any component renders.
108 
109### 3 · Component recipes
110 
111Use these recipes verbatim when building the corresponding component.
112 
113#### Buttons
114 
115Four variants are defined. Pick one — never blend variants or invent a fifth.
116 
117- **Primary** — rounded shape, bg `#E63946`, text `#F4EFD8`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`.
118- **Secondary** — rounded shape, bg `#1B6CD9`, text `#F4EFD8`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`.
119- **Outline** — rounded shape, bg `#F4C20D`, text `#0E0E0E`, border `3px solid #0E0E0E`, padding `14px 24px`, weight `900`, uppercased, shadow `4px 4px 0 #0E0E0E`.
120- **Ghost** — sharp shape, text `#0E0E0E`, padding `10px 4px`, weight `900`, uppercased.
121 
122Reach for **primary** as the single dominant CTA per screen.
123**Secondary** for the supporting action. **Outline** for tertiary
124actions in toolbars. **Ghost** for inline links and table actions.
125 
126#### Cards
127 
128- Background: `#FBF7E5`
129- Border: `2px solid #0E0E0E`
130- Shadow: `4px 4px 0 #0E0E0E`
131- Radius: `radius.lg` (`4px`)
132- Internal padding: `20px` for compact cards, `24–28px` for content cards.
133 
134#### Charts
135 
136- Bar/line variant: `bars`
137- Bar radius: `0`
138- No gridlines — let the bars/lines carry the data.
139- Highlight strategy: `all` — emphasize a single bar/point per chart.
140- Use the declared palette in order: `#E63946`, `#1B6CD9`, `#F4C20D`, `#0E0E0E`, `#E63946`, `#1B6CD9`, `#F4C20D`.
141 
142#### Typography pairings
143 
144- **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks.
145- **Body (`DM Sans`)** — paragraphs, labels, button text, form inputs.
146- **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables.
147 
148### 4 · Hard constraints
149 
150Never do any of the following without explicit instruction from the user:
151 
152- Introduce a new color, font, radius, or shadow that isn't declared above.
153- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
154- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
155- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
156- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
157 
158### 5 · Before you finish — verify
159 
160Run through this checklist for every screen you produce:
161 
162- [ ] Every color used appears in the Colors table above.
163- [ ] Headlines use the display font; body copy uses the body font.
164- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
165- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
166- [ ] Cards and dividers use the declared border + shadow tokens.
167- [ ] No values were invented; if you needed something missing, you stopped and asked.
168 
169---
170 
171## Overview
172Neo-Memphis is the 1980s Memphis Group reanimated for product UI — chunky geometric sans, hard black borders, primary-color shapes, and offset block shadows. Where Risograph Press is two-color print on cream, Neo-Memphis is **four-color poster-loud** on the same paper: red, electric blue, chrome yellow, and pure ink, fighting for attention without ever apologizing.
173 
174This system is for kids' apps, music platforms, festival sites, fashion drops, creator tools, and brands that refuse to be quiet.
175 
176## Color (the trinity + ink)
177- **Memphis Red #E63946** — primary CTA fill. The loudest voice.
178- **Electric Blue #1B6CD9** — secondary CTA, accent shapes, highlight blocks.
179- **Chrome Yellow #F4C20D** — outline buttons, callouts, decorative tiles. Use sparingly — yellow earns its loudness by being rare.
180- **Ink #0E0E0E** — every border, every shadow, body text. The structural skeleton.
181 
182Background is **cream #F4EFD8** — never pure white. Memphis was always printed, and printed paper is always warm.
183 
184## Typography
185- **Display: Archivo Black** at 5.5rem / 900, -4% tracking. Chunky, geometric, posterized.
186- **Body: DM Sans** at 1.0625rem for paragraphs and UI. Geometric companion.
187- **Mono: Space Mono** for captions and labels. Playful typewriter rhythm.
188 
189| Role | Font | Size | Weight | Tracking |
190|------|------|------|--------|----------|
191| Hero | Archivo Black | 5.5rem | 900 | -0.04em |
192| H1 | Archivo Black | 3rem | 900 | -0.03em |
193| H2 | DM Sans | 1.375rem | 700 | 0 |
194| Body | DM Sans | 1.0625rem | 400 | 0 |
195| Label | Archivo Black | 0.875rem | 900 | +0.06em UPPER |
196 
197## Buttons
198All buttons share the same anatomy: **3px ink border + 4px ink offset shadow**. The variants change only by fill color.
199 
200- **Primary** — Memphis red. The single loudest action per screen.
201- **Secondary** — electric blue. Equal weight to primary, different intent.
202- **Outline** — chrome yellow tile. For tertiary loud calls; the yellow is the warning flag.
203- **Ghost** — bare ink uppercase, hover underline. For inline links.
204 
205**Pills are forbidden on action buttons.** Sharp 4px corners only. The block shadow IS the system.
206 
207## Cards
208**2px ink border + 4px ink offset shadow** on cream surface. No drop shadows ever — Memphis used physical paper offsets, never glow. Radius is **4px maximum**, often 0.
209 
210## Memphis Decoration
211The system permits — encourages — decorative geometric shapes scattered across the page:
212- Small filled circles in chrome yellow.
213- Squiggle lines in electric blue.
214- Triangular ink confetti.
215 
216Use these as **background accents only**, never as buttons. They are the visual jazz that defined Memphis posters.
217 
218## Charts & Data
219Chunky bars in **rotating trinity** — red, blue, yellow, ink, repeat. Sharp 0px corners, 12px gap, no gridlines. Axis labels in mid graphite. Reads like a 1986 magazine infographic.
220 
221## Do's and Don'ts
222- ✅ Always use the offset ink shadow on cards and buttons. No exceptions.
223- ✅ Borders are **3px on buttons, 2px on cards**, always pure ink.
224- ✅ Cream background — never pure white.
225- ✅ Geometric shapes scattered as background decoration are encouraged.
226- ❌ No gradients anywhere. Memphis is **flat color or nothing**.
227- ❌ No glow, no drop-shadow blur. Only crisp offset blocks.
228- ❌ No more than one Memphis red CTA per view. Red earns its loudness by being rare.
229- ❌ No serif anywhere. The geometry is the voice.
230 
231---
232 
233## Tokens
234 
235> Generated from the same source the live preview renders from.
236> Treat the values below as the contract — never substitute approximations.
237 
238### Colors
239 
240| Role      | Value |
241|-----------|-------|
242| primary   | `#0E0E0E` |
243| secondary | `#5A5A5A` |
244| tertiary  | `#E63946` |
245| neutral   | `#F4EFD8` |
246| surface   | `#FBF7E5` |
247 
248### Typography
249 
250- **Display:** Archivo Black
251- **Body:** DM Sans
252- **Mono:** Space Mono
253 
254| Role | size / leading / weight / tracking |
255|------|------------------------------------|
256| Hero | 5.5rem / 0.95 / 900 / -0.04em |
257| H1   | 3rem / 1 / 900 / -0.03em |
258| H2   | 1.375rem / 1.2 / 700 / 0 |
259| Body | 1.0625rem / 1.5 / 400 / 0 |
260 
261### Radius
262 
263- sm: `0`
264- md: `2px`
265- lg: `4px`
266- pill: `9999px`
267 
268### Shadows
269 
270- **card:** `4px 4px 0 #0E0E0E`
271- **button:** `3px 3px 0 #0E0E0E`
272 
273### Borders
274 
275- **card:** `2px solid #0E0E0E`
276- **divider:** `rgba(14, 14, 14, 0.20)`
277 
278### Buttons
279 
280Four variants, each fully tokenized. The preview renders from these exact values.
281 
282#### Primary
283 
284| Property | Value |
285|----------|-------|
286| shape | `rounded` |
287| background | `#E63946` |
288| color | `#F4EFD8` |
289| border | `3px solid #0E0E0E` |
290| padding | `14px 24px` |
291| fontFamily | `display` |
292| fontWeight | `900` |
293| fontSize | `0.9375rem` |
294| tracking | `0.04em` |
295| uppercase | `true` |
296| shadow | `4px 4px 0 #0E0E0E` |
297 
298#### Secondary
299 
300| Property | Value |
301|----------|-------|
302| shape | `rounded` |
303| background | `#1B6CD9` |
304| color | `#F4EFD8` |
305| border | `3px solid #0E0E0E` |
306| padding | `14px 24px` |
307| fontFamily | `display` |
308| fontWeight | `900` |
309| fontSize | `0.9375rem` |
310| tracking | `0.04em` |
311| uppercase | `true` |
312| shadow | `4px 4px 0 #0E0E0E` |
313 
314#### Outline
315 
316| Property | Value |
317|----------|-------|
318| shape | `rounded` |
319| background | `#F4C20D` |
320| color | `#0E0E0E` |
321| border | `3px solid #0E0E0E` |
322| padding | `14px 24px` |
323| fontFamily | `display` |
324| fontWeight | `900` |
325| fontSize | `0.9375rem` |
326| tracking | `0.04em` |
327| uppercase | `true` |
328| shadow | `4px 4px 0 #0E0E0E` |
329 
330#### Ghost
331 
332| Property | Value |
333|----------|-------|
334| shape | `sharp` |
335| background | `transparent` |
336| color | `#0E0E0E` |
337| border | `none` |
338| padding | `10px 4px` |
339| fontFamily | `display` |
340| fontWeight | `900` |
341| fontSize | `0.875rem` |
342| tracking | `0.06em` |
343| uppercase | `true` |
344| hoverHint | `underline` |
345 
346### Charts
347 
348| Property | Value |
349|----------|-------|
350| variant | `bars` |
351| gridlines | `false` |
352| barRadius | `0` |
353| barGap | `12px` |
354| highlight | `all` |
355| axisColor | `#5A5A5A` |
356| palette | `#E63946`, `#1B6CD9`, `#F4C20D`, `#0E0E0E`, `#E63946`, `#1B6CD9`, `#F4C20D` |
357
03 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
04 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Archivo Black"', 'serif'],
        sans:    ['"DM Sans"', 'sans-serif'],
        mono:    ['"Space Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0E0E0E',
        secondary: '#5A5A5A',
        accent:    '#E63946',
        neutral:   '#F4EFD8',
        surface:   '#FBF7E5',
      },
      borderRadius: {
        sm: '0',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Linnea Serif

Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.

minimalserifpremiummoderneditorial
Linnea.app
ProductPricingDocsAbout
Sign inGet started
minimal · serif · premium

Build with Linnea Serif.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Ink & Citron

Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality.

boldduotoneagencymoderneditorial
Ink.app
ProductPricingDocsAbout
Sign inGet started→
bold · duotone · agency

Build with Ink & Citron.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →→View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational