Claymorphism / Inflated 3D Matte

/* Synthesized from Trova family: Claymorphism / Inflated 3D Matte (claymorphism-inflated-3d) */
/* Evidence base: 3 curated reference(s) · Primary contrast 18.6:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #202228;
  --text-primary: #121316;
  --accent-primary: #191627;
  --border-hairline: color-mix(in srgb, #121316 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "DIN Next Rounded", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Claymorphism / Inflated 3D Matte — style sheet

> Rounded chunky pill buttons with thick inner shadows and pillowy rounded corners resembling smooth colorful modeling clay.

Derived from 3 curated reference(s) in the `claymorphism-inflated-3d` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Inter — 2/3
- DIN Next Rounded — 1/3
- Eina — 1/3
- JetBrains Mono — 1/3
- Nunito — 1/3

## Color

- `#ffffff` light neutral — 3/3
- `#121316` dark neutral — 1/3
- `#191627` dark neutral — 1/3
- `#202228` dark neutral — 1/3
- `#3c3c3c` mid neutral — 1/3
- `#6b53ff` chromatic — 1/3
- `#ff5c8a` chromatic — 1/3
- `#4d9fff` chromatic — 1/3
- `#1cb0f6` chromatic — 1/3
- `#58cc02` chromatic — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#121316` / `#ffffff` — 18.6:1
- `#191627` / `#ffffff` — 17.7:1
- `#202228` / `#ffffff` — 15.9:1
- `#3c3c3c` / `#ffffff` — 11:1

## Moves

### component pattern

- Pair the interactive 3D clay stage with a crisp, flat 12px monospace layer tree and material inspector so the playful 3D objects never compromise UI control precision. — 181-spline-design-matte-3d-clay-primitives-interactive-viewport-orbit
- Construct primary action buttons with a `border-bottom: 4px solid #46a302` extruded lip that translates `translateY(4px)` and zeroes `border-bottom-width` on `:active`, delivering physical arcade-button feedback in pure CSS. — 183-duolingo-path-tactile-inflated-3d-stepping-stones-depressable-lip-buttons

### texture/material

- Combine high-radius (`border-radius: 32px`) matte surfaces with dual inset shadows (`inset -8px -8px 16px rgba(0,0,0,0.35), inset 6px 6px 14px rgba(255,255,255,0.22)`) to simulate soft subsurface-scattered polymer clay. — 181-spline-design-matte-3d-clay-primitives-interactive-viewport-orbit

### color

- Anchor inflated lavender and marigold 3D avatars against a high-contrast `#191627` deep aubergine typography scale so the soft 3D renders act as focal anchors rather than background clutter. — 182-pitch-tactile-matte-3d-presentation-blocks-soft-inner-rim-lighting

### motion/interaction

- Scroll-linked slide cards float with subtle parallax tilt while keeping the interior slide typography locked to a flat, razor-sharp DOM layer. — 182-pitch-tactile-matte-3d-presentation-blocks-soft-inner-rim-lighting

### grid/layout

- Arrange lesson nodes along a sinusoidal S-curve vertical path so a 50-lesson curriculum reads as a spatial board game rather than a long checklist. — 183-duolingo-path-tactile-inflated-3d-stepping-stones-depressable-lip-buttons

## References

- 181-spline-design-matte-3d-clay-primitives-interactive-viewport-orbit — Spline Design — Matte 3D Clay Primitives & Interactive Viewport Orbit (exemplar)
- 182-pitch-tactile-matte-3d-presentation-blocks-soft-inner-rim-lighting — Pitch — Tactile Matte 3D Presentation Blocks & Soft Inner Rim Lighting
- 183-duolingo-path-tactile-inflated-3d-stepping-stones-depressable-lip-buttons — Duolingo Path — Tactile Inflated 3D Stepping Stones & Depressable Lip Buttons