Neumorphism / Soft Dual Emboss

/* Synthesized from Trova family: Neumorphism / Soft Dual Emboss (neumorphism-soft-emboss) */
/* Evidence base: 3 curated reference(s) · Primary contrast 14.3:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f4f4f0;
  --surface-elevated: #4b3621;
  --text-primary: #1f2328;
  --accent-primary: #181818;
  --border-hairline: color-mix(in srgb, #1f2328 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "IBM Plex Mono", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

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

# Neumorphism / Soft Dual Emboss — style sheet

> Low-contrast plastic surfaces where elements pop out or press in using paired light and dark drop shadows.

Derived from 3 curated reference(s) in the `neumorphism-soft-emboss` 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

- IBM Plex Mono — 2/3
- Akzidenz-Grotesk — 1/3
- Helvetica Neue — 1/3
- Neue Haas Grotesk — 1/3
- Universal Sans — 1/3

## Color

- `#1f2328` dark neutral — 2/3
- `#f4f4f0` light neutral — 2/3
- `#181818` dark neutral — 1/3
- `#4b3621` dark neutral — 1/3
- `#3b82f6` chromatic — 1/3
- `#ff4f00` chromatic — 1/3
- `#d97706` chromatic — 1/3
- `#c5a059` chromatic — 1/3
- `#e0e2e5` light neutral — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#1f2328` / `#f4f4f0` — 14.3:1
- `#181818` / `#f4f4f0` — 16.1:1
- `#1f2328` / `#e0e2e5` — 12.2:1
- `#4b3621` / `#f4f4f0` — 10.3:1

## Moves

### texture/material

- Avoid low-contrast neumorphic mush by pairing a soft dual-shadow extruded keywell (`6px 6px 12px #bec1c6, -6px -6px 12px #ffffff`) with a crisp `1px solid rgba(31,35,40,0.18)` machined parting line and high-contrast `#1f2328` legends. — 187-teenage-engineering-op-1-field-extruded-aluminum-soft-shadow-rotary-dials

### color

- Color-code the four physical rotary encoders with strict functional semantics (Blue = pitch/frequency, Green = envelope, White = sustain/balance, Orange `#ff4f00` = modulation/grid). — 187-teenage-engineering-op-1-field-extruded-aluminum-soft-shadow-rotary-dials

### component pattern

- Circular calculator buttons use a subtle radial highlight (`radial-gradient(circle at 35% 30%, #3a3d42, #1e1f22)`) to convey a convex thumb dome, reserving the single `#d97706` ochre cap exclusively for the `=` execution key. — 188-braun-et66-calculator-study-convex-domed-polymer-keys-recessed-lcd-well

### grid/layout

- Recess the numeric readout inside a deep inner-shadow bezel (`inset 0 3px 6px rgba(0,0,0,0.65)`) separated from the keypad matrix by an explicit horizontal chassis seam. — 188-braun-et66-calculator-study-convex-domed-polymer-keys-recessed-lcd-well

### motion/interaction

- Surround the central extruded volume wheel with 60 radial tick marks that sequentially illuminate in warm champagne gold (`#c5a059`) as the user drags circularly. — 189-devialet-controller-study-matte-ceramic-volume-wheel-dual-light-well

### typography

- Center the current decibel level (`-18.5 dB`) inside the rotary well in `tabular-nums` grotesk so the finger never occludes the numeric readout during adjustment. — 189-devialet-controller-study-matte-ceramic-volume-wheel-dual-light-well

## References

- 187-teenage-engineering-op-1-field-extruded-aluminum-soft-shadow-rotary-dials — Teenage Engineering OP-1 Field — Extruded Aluminum Soft-Shadow Rotary Dials (exemplar)
- 188-braun-et66-calculator-study-convex-domed-polymer-keys-recessed-lcd-well — Braun ET66 Calculator Study — Convex Domed Polymer Keys & Recessed LCD Well
- 189-devialet-controller-study-matte-ceramic-volume-wheel-dual-light-well — Devialet Controller Study — Matte Ceramic Volume Wheel & Dual-Light Well