Mallsoft

---
name: mallsoft
description: Apply the Mallsoft visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Mallsoft, mentions mallwave, mall soft, dead mall aesthetic, or describes pastel marble and beige tile palette, seafoam-glass and fountain teal accents, dead-mall mauve and brass details — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Mallsoft Design System

The vaporwave subgenre devoted to the 80s/90s shopping mall: pastel marble, seafoam glass railings, tiled fountains, ficus planters, and skylight haze, with Roman-caps directory signage and muzak calm. Melancholy consumer utopia rendered as an empty, echoing atrium — no neon grids, no glitch.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Mallsoft.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (mallwave, mall soft, dead mall aesthetic, atrium wave), or describes its traits: pastel marble and beige tile palette; seafoam-glass and fountain teal accents; dead-mall mauve and brass details; Roman-caps directory signage type; hazy skylight lighting; muzak-calm spaciousness.

## Design tokens

### Color palette

- Pastel marble concourse floor: `#ece7de` (--color-bg)
- Polished tile panels and cards: `#f6f3ec` (--color-surface)
- Dusty plum-gray signage text: `#4c4258` (--color-text)
- Secondary text, faded directory print: `#675c78` (--color-text-muted)
- Fountain verdigris for links and key actions: `#2c6b66` (--color-accent)
- Hazy glass-ceiling blue-green wash: `#cfe4e4` (--color-skylight)
- Dead-mall mauve for decorative bands and tags: `#c4a9c0` (--color-mauve)
- Pool-water blue for illustrative fills: `#9fc9d8` (--color-fountain-blue)
- Escalator-rail brass for hairlines and icons: `#b39a6b` (--color-brass)
- Border and divider tone, like grout lines: `#d8d2c6` (--color-marble-vein)

### Typography

- Display / headings: Marcellus (fallback: Times New Roman, serif) (ideal: Trajan Pro, premium — use Marcellus as the free substitute)
- Body: Jost (fallback: Century Gothic, Futura, sans-serif) (ideal: Futura, premium — use Jost as the free substitute)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.25, letter-spacing 0.12em, uppercase
- Body: line-height 1.7, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 128, 160 — Vast and echoing — atrium-scale whitespace, small content islands, long scroll distances between sections like storefronts down a concourse.
- Border radius: none 0px, sm 4px, arch 999px 999px 0 0 — Mostly crisp architectural edges; arch-top frames echo atrium vaults and storefront entries.
- Border treatment: 1px solid #d8d2c6 — Grout-line hairlines; feature panels get a second inner brass keyline (1px solid #b39a6b).

### Shadows

- skylight-haze: `0 24px 80px rgba(207, 228, 228, 0.6)` — Soft diffused wash under hero panels, like light through frosted glass
- tile-lift: `0 6px 24px rgba(76, 66, 88, 0.12)` — Gentle card elevation on the marble ground
- fountain-glow: `0 0 32px rgba(159, 201, 216, 0.35)` — Watery halo behind teal illustrative elements

### Layout

- Max content width: 1280px
- Strong vertical symmetry, like standing in the center of a concourse
- Arch-top imagery and columnar section dividers
- A pale skylight gradient band across the top of every page
- Content islands separated by expansive empty floor

### Effects

- Very subtle marble texture on the background at 3-5% opacity
- Skylight gradient (skylight color to transparent) across hero tops
- Soft mist/gaussian glow on decorative imagery edges
- Optional faint palm or ficus silhouette watermarks in corners

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 250ms / 500ms / 1200ms
- Everything is slow and glassy, like escalator movement
- Fades dominate; almost nothing translates more than a few pixels
- Hover states brighten softly, as if stepping under a skylight

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ece7de;
  --color-surface: #f6f3ec;
  --color-text: #4c4258;
  --color-text-muted: #675c78;
  --color-accent: #2c6b66;
  --color-skylight: #cfe4e4;
  --color-mauve: #c4a9c0;
  --color-fountain-blue: #9fc9d8;
  --color-brass: #b39a6b;
  --color-marble-vein: #d8d2c6;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-arch: 999px 999px 0 0;
  --shadow-skylight-haze: 0 24px 80px rgba(207, 228, 228, 0.6);
  --shadow-tile-lift: 0 6px 24px rgba(76, 66, 88, 0.12);
  --shadow-fountain-glow: 0 0 32px rgba(159, 201, 216, 0.35);
  --border-default: 1px solid #d8d2c6;
  --font-display: Marcellus, "Times New Roman", serif;
  --font-body: Jost, "Century Gothic", Futura, sans-serif;
  --text-base: 17px;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --tracking-heading: 0.12em;
  --tracking-body: 0.02em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 250ms;
  --duration-base: 500ms;
  --duration-slow: 1200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Marcellus:wght@400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A directory bar: uppercase Marcellus wordmark centered, spaced-out Jost links either side, thin brass rule beneath; no fills, no pills.
- **Hero:** Symmetrical atrium composition — arch-top image or illustration, skylight gradient above, Roman-caps headline with wide tracking, fountain-teal CTA.
- **Card:** Tile-white surface with grout hairline and inner brass keyline, arch-top image variant, tile-lift shadow; storefront-sign title in small caps.
- **Button (primary):** Fountain-verdigris fill with warm-white text, 4px radius, glassy 500ms hover brighten; wide letterspaced uppercase label.
- **Button (secondary):** Transparent with brass hairline border and plum-gray text; hover adds a skylight-tint wash.
- **Form fields:** Marble-white input with grout border and generous padding; focus ring in soft fountain blue (0 0 0 3px rgba(159,201,216,0.4)).

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A mall-directory panel: Roman capitals on pastel marble, a teal fountain motif, brass rail hairline, and a wash of skylight haze across the top of the page. Spend boldness here; keep everything else quiet.

## Do

- Keep it light, hazy, and architectural — the mall at 10am, sunlit and empty
- Use Roman-caps display type with wide tracking, like directory signage
- Let whitespace do the emotional work; the emptiness is the mood
- Ground teal and mauve accents with lots of beige marble

## Don't

- Don't reach for vaporwave's neon magenta/cyan, statues, glitch, or perspective grids — mallsoft is its quiet sibling
- Don't crowd sections; a busy mallsoft page is a contradiction
- Don't use pure white or pure black; everything is slightly warmed and faded
- Don't add hard, fast motion — nothing in a mall moves quickly

## Accessibility notes

- Signage text, muted text, and the fountain-verdigris accent all pass 4.5:1 on the marble background.
- skylight, mauve, fountain-blue, and brass are environmental/decorative tones — never body-text colors.
- Wide-tracked uppercase headings hurt readability at length; keep them short and set body copy in mixed case.

## Reference sites

- Mallsoft — Wikipedia: https://en.wikipedia.org/wiki/Mallsoft
- Mallsoft — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Mallsoft
- Dead mall — Wikipedia: https://en.wikipedia.org/wiki/Dead_mall
- Muzak — Wikipedia: https://en.wikipedia.org/wiki/Muzak

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip mallsoft.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/mallsoft.json

Settings → Capabilities → Skills → Upload skill → mallsoft.zip