Plinth

Luxury minimalism

Pure white surface, true-black foreground, zero radius, uppercase tracked eyebrows. The luxury of subtraction — everything on a pedestal, nothing competing for attention. Signature retracting-underline link hover.

Palette

Install the full kit

Drops 4 doc/token files plus 2 starter components.

DESIGN.md

# Plinth — Design Language

> High-fashion luxury minimalism. Pure white, true black, zero radius, uppercase eyebrows. The luxury of subtraction.

## Identity

Plinth design is the absence of design. The page is `oklch(1 0 0)` paper, the type is `oklch(0 0 0)` ink. There is no color, no ornament, no rounded edge. Mass and product photography do all the work. The only typographic system is a tight uppercase eyebrow → display headline → quiet CTA hierarchy. Hover states reveal themselves through hairline underlines that retract on hover, not appear on it — luxury defined by what is taken away.

The brand's design discipline operates on a single axiom: if removing an element does not damage the page, it must go. This applies at every scale — a section with too many words is a section that hasn't been edited yet.

## Palette

The entire language uses **four** colors. No accent. No status. No mode.

| Token | Value | Role |
|-------|-------|------|
| `--background` | `oklch(1 0 0)` pure white | Page surface — the silhouette |
| `--foreground` | `oklch(0 0 0)` true black | Type, hairlines |
| `--muted-foreground` | `oklch(0.45 0 0)` | Captions, secondary copy |
| `--border` | `oklch(0.9 0 0)` | Hairlines — the only structural element |

Aliases that map to the four:

| Token | Maps to |
|-------|---------|
| `--card`, `--popover` | white |
| `--primary` | black |
| `--primary-foreground` | white |
| `--secondary`, `--muted`, `--accent` | `oklch(0.97 0 0)` (subtle off-white for hover fills) |
| `--input`, `--border` | `oklch(0.9 0 0)` |

There is no `--accent` color. The word "accent" in this language means a hairline rule.

## Typography

One family. Helvetica Neue (system fallback). No display face, no serif, no mono.

### Scale

| Tier | Size | Weight | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(48px, 6vw, 96px)` | 300 | `-0.02em` | `1.05` |
| H1 | `clamp(36px, 4vw, 64px)` | 300 | `-0.015em` | `1.1` |
| H2 | `clamp(24px, 2.5vw, 36px)` | 400 | `-0.01em` | `1.2` |
| H3 | `20px` | 400 | `0` | `1.3` |
| Body | `15px` | 400 | `0` | `1.55` |
| Caption | `13px` | 400 | `0.01em` | `1.4` |
| Eyebrow | `11px` | 500 | `0.14em` | `1` (uppercase) |
| CTA | `12px` | 500 | `0.18em` | `1` (uppercase) |

Weights stop at 500. Never bold.

### Three signature utilities

```css
.plinth-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plinth-cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.plinth-link-underline {
  position: relative;
  display: inline-block;
}
.plinth-link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.plinth-link-underline:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}
```

`.plinth-link-underline` is the signature interaction — a hairline underline that **retracts** on hover. Use it on every navigation link.

## Spacing & geometry

### Spacing scale

| Token | Value | Use |
|-------|-------|-----|
| `space-2` | `8px` | Inline gap |
| `space-6` | `24px` | Container gutter mobile |
| `space-12` | `48px` | Container gutter desktop |
| `space-16` | `64px` | Card internal |
| `space-32` | `128px` | Section vertical (default) |
| `space-40` | `160px` | Section vertical (hero) |

### Container

```html
<div class="mx-auto max-w-[1480px] px-6 md:px-12">
```

### Radius

**`--radius: 0px`. Everywhere.** Buttons, cards, images, modals, dropdowns. No exceptions.

```css
--radius: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-2xl: 0px;
```

### Borders

1px hairlines via `--border`. The only structural element in the language. Never `border-2` or thicker.

## Motion

| Pattern | Easing | Duration |
|---------|--------|----------|
| Link underline retract | `cubic-bezier(0.22, 1, 0.36, 1)` | 400ms |
| Button color shift on hover | `ease` | 200ms |
| Page navigation | none (no view transitions) | n/a |

That's the entire motion budget. No fades. No reveals. No parallax. No transforms beyond the underline `scaleX`.

## Voice & copy

- French restraint. Single nouns. Single verbs.
- Product names stand alone: *"Cabas."* *"Bodysuit."* *"Trench."*
- CTAs are commands: *"Discover."* *"Shop."* *"Visit."*
- Section titles are categories, not statements: *"Women"*, *"Men"*, *"Accessories"*.
- Never marketing-speak. Never adjectives like "luxurious", "exclusive", "premium". The clothing already is — naming it cheapens it.

## Component recipes

### Hero
A single product image (full-bleed or constrained), a 2-word headline, a single `.plinth-cta` link. That's the whole hero. No subhead.

### Category grid
Three or six tiles, no captions on hover, captions visible at rest underneath in `.plinth-eyebrow`. Tiles never zoom on hover.

### Services / Sections module
A list of services, one per line, separated by `1px solid var(--border)`. Hover: subtle underline retract on the title.

### Product detail
Image-led on the left, type-led on the right. The right side has 5 elements max: eyebrow (collection), title (product), price (mono is NOT used — same sans), CTA, hairline-divided care/material notes underneath.

### Footer
Three columns of text, all `.plinth-eyebrow` size and uppercase. Newsletter input is a single line with a single underlined label. Bottom row: copyright + legal links, all hairline-divided.

## Anti-patterns

- ❌ Any color other than black, white, gray.
- ❌ Any radius (`rounded-*`). Use `rounded-none` or omit.
- ❌ Drop shadows, glows, blurs.
- ❌ Gradient fills.
- ❌ Bold weights (`font-bold`, `font-semibold`).
- ❌ Hover states that add visual mass (zooms, scales, overlays).
- ❌ Marketing adjectives in copy.
- ❌ More than one CTA per section.

## Accessibility

- The underline-retract pattern is decorative. Underlines on inline-body links should NOT retract — they should stay underlined for legibility.
- Eyebrows at 11px are the floor. Don't go smaller.
- Focus rings: `--ring` (`oklch(0.7 0 0)`) at 2px with 2px offset.
- True-black on white passes AA at every size — no contrast risk.
- Reduced motion: disable the underline-retract animation (set transition to `none`).

## What ships with the pack

- `tokens.css` — Tailwind v4 `@theme inline` + scoped vars on `[data-designlang="plinth"]`. Three signature utility classes: `.plinth-eyebrow`, `.plinth-cta`, `.plinth-link-underline`.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: none yet. The language is a tokens-only pack. Future passes will promote a category grid, services module, and full-bleed banner.
- Foundations — `Button`, `Card`.

Components (0)

No components in this language yet.