Glassmorphism / Frosted Acrylic

/* Synthesized from Trova family: Glassmorphism / Frosted Acrylic (glassmorphism-frosted) */
/* Evidence base: 4 curated reference(s) · Primary contrast 19.3:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f8fafc;
  --surface-elevated: #131624;
  --text-primary: #05070c;
  --accent-primary: #6366f1;
  --border-hairline: color-mix(in srgb, #05070c 16%, transparent);

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

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

# Glassmorphism / Frosted Acrylic — style sheet

> Backdrop-filter blur (16px), 1px white semi-transparent borders (rgba(255,255,255,0.2)), and iridescent background glow orbs.

Derived from 4 curated reference(s) in the `glassmorphism-frosted` 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/4
- JetBrains Mono — 2/4
- Satoshi — 1/4
- SF Mono — 1/4
- SF Pro Display — 1/4
- Space Mono — 1/4

## Color

- `#05070c` dark neutral — 3/4
- `#f8fafc` light neutral — 3/4
- `#6366f1` chromatic — 2/4
- `#131624` dark neutral — 1/4
- `#18132e` dark neutral — 1/4
- `#18181b` dark neutral — 1/4
- `#1e293b` dark neutral — 1/4
- `#a855f7` chromatic — 1/4
- `#3b82f6` chromatic — 1/4
- `#f43f5e` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#05070c` / `#f8fafc` — 19.3:1
- `#05070c` / `#6366f1` — 4.5:1
- `#131624` / `#f8fafc` — 17.2:1
- `#18132e` / `#f8fafc` — 17.1:1

## Moves

### texture/material

- Multi-layer acrylic glass (`backdrop-filter: blur(40px) saturate(180%)`) paired with a 1px directional border gradient that brightens at the top-left edge (rgba(255,255,255,0.38)) and fades to 0.06 at the bottom-right. — 125-apple-visionos-specular-spatial-glass-system
- Floating inspector panes use `background: rgba(24, 19, 46, 0.62)` with a top-edge radial highlight so stacked panels remain visually distinct over a dark constellation canvas. — 127-reflect-notes-translucent-command-backlink-graph

### component pattern

- Dragging a to-do item from the frosted sidebar onto the timeline morphs its width in real time to match the 60-minute column grid before drop release. — 126-amie-frosted-calendar-overlay-time-block-scheduler
- Glass bento cards combine a 1px inner border (`inset 0 1px 0 rgba(255,255,255,0.22)`) with a live status pill that refracts the underlying gradient mesh through a 24px blur. — 128-dimension-specular-developer-collaboration-hub

### motion/interaction

- Hovering an interactive control translates the plane +8px along the z-axis while casting a soft ambient contact shadow onto the recessed parent pane behind it. — 125-apple-visionos-specular-spatial-glass-system

### color

- Calendar events use 18% opacity tint fills over a `backdrop-filter: blur(16px)` card with a 3px saturated left accent bar, letting underlying hour gridlines show through without losing text contrast (11.2:1). — 126-amie-frosted-calendar-overlay-time-block-scheduler

### grid/layout

- The editor column locks to 640px centered while backlink drawers slide over the outer gutters as translucent sheets rather than reflowing the writing measure. — 127-reflect-notes-translucent-command-backlink-graph

### typography

- Display headlines set at 64px with `-0.03em` tracking use a subtle vertical luminance fade (#ffffff to #94a3b8) so the typography shares the same light source as the glass frames. — 128-dimension-specular-developer-collaboration-hub

## References

- 125-apple-visionos-specular-spatial-glass-system — Apple visionOS — Specular Spatial Glass System (exemplar)
- 126-amie-frosted-calendar-overlay-time-block-scheduler — Amie — Frosted Calendar Overlay & Time-Block Scheduler
- 127-reflect-notes-translucent-command-backlink-graph — Reflect Notes — Translucent Command & Backlink Graph
- 128-dimension-specular-developer-collaboration-hub — Dimension — Specular Developer Collaboration Hub