Organic Modernism

---
name: organic-modernism
description: Apply the Organic Modernism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Organic Modernism, mentions organic modern, arch aesthetic, soft modernism, or describes arch-shaped image masks, deeply curved corners, terracotta olive and sand palette — 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
---

# Organic Modernism Design System

Sculptural softness: arch-shaped image masks, deeply curved corners, a sun-baked palette of terracotta, olive, and sand, and whitespace treated like gallery space around ceramic objects. Modernist discipline with every hard edge sanded off.

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 Organic Modernism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (organic modern, arch aesthetic, soft modernism, terracotta minimalism, curved minimalism), or describes its traits: arch-shaped image masks; deeply curved corners; terracotta olive and sand palette; sculptural whitespace; soft serif display type; matte earthy surfaces.

## Design tokens

### Color palette

- Warm sand ground: `#f4ede3` (--color-bg)
- Raised cards and panels: `#faf6ef` (--color-surface)
- Primary text, warm umber-black: `#38322a` (--color-text)
- Secondary text: `#6e6757` (--color-text-muted)
- Terracotta — buttons, links, key highlights: `#a04b26` (--color-accent)
- Olive green for tags, secondary accents, and illustration: `#6b6b3f` (--color-olive)
- Deeper sand for bands and image grounds: `#d9c8ae` (--color-sand-deep)
- Soft hairline separators: `#e6dccc` (--color-border)

### Typography

- Display / headings: Fraunces (fallback: Georgia, serif) (ideal: Canela, premium — use Fraunces as the free substitute)
- Body: DM Sans (fallback: Helvetica Neue, Arial, sans-serif)
- 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.15, letter-spacing -0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 128, 160 — Sculptural: each arch, card, or headline sits in generous negative space like an object on a plinth. Sections are tall and unhurried.
- Border radius: md 16px, lg 32px, arch 999px 999px 0 0, pill 999px — Nothing is square. The arch mask is the identity; ordinary cards take 16-32px curves.
- Border treatment: 1px solid #e6dccc — Borders are whispers; separation comes from tone shifts between sand layers.

### Shadows

- matte: `0 2px 8px rgba(56, 50, 42, 0.06)` — Default card lift — matte, never glossy
- hover: `0 12px 32px rgba(56, 50, 42, 0.10)` — Hover and modal elevation

### Layout

- Max content width: 1240px
- Colonnade rows: 2-4 arch-masked images or cards side by side
- Alternating sand and deeper-sand full-width bands instead of hairline section breaks
- Asymmetric two-column editorial passages: text column beside one tall arch image
- Center the hero; let everything below settle into calm asymmetry

### Effects

- Arch-masked photography (border-radius: 999px 999px 0 0)
- Occasional hand-drawn single-line botanical illustration in olive
- Very subtle grain on sand bands to suggest paper or plaster

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 200ms / 400ms / 700ms
- Slow gentle fades and small upward drifts on scroll entry
- Arch images scale very slightly (1.03) on hover, clipped inside the mask
- No bounce, no spring — movement should feel like weight settling

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f4ede3;
  --color-surface: #faf6ef;
  --color-text: #38322a;
  --color-text-muted: #6e6757;
  --color-accent: #a04b26;
  --color-olive: #6b6b3f;
  --color-sand-deep: #d9c8ae;
  --color-border: #e6dccc;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-arch: 999px 999px 0 0;
  --radius-pill: 999px;
  --shadow-matte: 0 2px 8px rgba(56, 50, 42, 0.06);
  --shadow-hover: 0 12px 32px rgba(56, 50, 42, 0.10);
  --border-default: 1px solid #e6dccc;
  --font-display: Fraunces, Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}
```

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

## Component recipes

- **Nav:** Transparent over the sand ground, Fraunces wordmark, pill-shaped terracotta CTA at right
- **Hero:** Fraunces headline in umber over sand, supporting line in DM Sans, one large arch-masked photograph anchoring the composition
- **Card:** Surface panel with 24px radius (or full arch for imagery), matte shadow, generous 32px padding
- **Button (primary):** Terracotta pill, sand-white text, no border; hover deepens the terracotta
- **Button (secondary):** Sand surface pill with 1px border and umber text
- **Form fields:** Surface fill, 12px radius, 1px soft border; focus warms the border to terracotta

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

The arch: images and cards masked with border-radius 999px 999px 0 0, standing in a row like a colonnade — the single geometric motif repeated at every scale from buttons to hero imagery. Spend boldness here; keep everything else quiet.

## Do

- Repeat the arch at multiple scales — imagery, cards, even avatars — so the motif reads as identity
- Keep the palette strictly sun-baked: sand, terracotta, olive, umber
- Give every object real negative space; crowding kills the sculptural quality
- Use matte shadows and tonal bands instead of hard rules

## Don't

- Don't introduce cool grays or pure white — the warmth is structural
- Don't square off corners anywhere; a single sharp rectangle breaks the spell
- Don't use glossy gradients or vivid saturated color
- Don't pack dense multi-column data into this style; it is for browsing, not scanning

## Accessibility notes

- Terracotta (#a04b26) passes on the sand ground for normal text but olive (#6b6b3f) is best kept to large text and decorative tags
- Tone-on-tone sand layering must never be the only cue separating interactive from static surfaces

## Reference sites

- Aesop: https://www.aesop.com
- Parachute Home: https://www.parachutehome.com
- Siteinspire: https://www.siteinspire.com

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

Install this skill

unzip organic-modernism.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → organic-modernism.zip