# lib-theme-porcelain

A calm, neutral **bone-china** theme warmed by a single restrained clay accent — the "iCloud / Apple-Settings calm, but warm" answer for a back-of-house personal-cloud utility (me.sky-ai.com). Cool porcelain off-white field (never a cream wash), warm charcoal ink, one muted terracotta accent used on ≤10% of the surface (primary action, selection, focus, links). Albert Sans for body/UI, Newsreader as a restrained serif for headings, JetBrains Mono for code. Whisper-soft neutral elevation, calm-modern 0.875rem radius.

## Design philosophy

- **Surface treatment:** Porcelain. A cool off-white field with pure-white cards, hairline borders and whisper-soft neutral shadows — calm resting tiles, not floating chrome. No glass, no offsets.
- **Color:** Neutral-dominant. The background is held OUT of the AI cream/sand band by keeping chroma to a whisper (≤0.004) and the hue faintly cool (~265, bone china) at very high L (0.985) — clean-neutral, not warm parchment. Ink is a warm-leaning near-black charcoal (hue ~55). The one warm note is a muted clay primary (L≈0.54, C≈0.11, H≈47), deepened so a white label clears 4.5:1. Status quartet is spaced clearly in hue (clay 47 / red 27 / green 150 / amber 78 / blue 245) so nothing muddies against the accent.
- **Typography:** Newsreader for headings (restrained modern serif, kept calm at weight 560 — not editorial-loud). Albert Sans for body and UI. JetBrains Mono for code. Product register: fixed rem sizes, full `--text-*` role ramp.
- **Motion:** Calm and product-fast — 150 / 300 / 420ms. Springs alias to standard easings (no overshoot); personality lives in the values, not in bounce.
- **Elevation:** Whisper-soft neutral shadows (near-black at very low alpha), low-key. Same altitude, same shadow.
- **Radius:** 0.875rem — calm-modern.
- **Borders:** Hairline (1px, alpha 0.10 of the ink) so separation stays subtle.

## Usage

In a consuming app's `app.css`:

```css
@import "../../lib-theme-porcelain/theme.css";
```

## Fonts

The theme does not load fonts (contract ban — fonts load from the consuming app's entry CSS). Add this Google Fonts `@import` at the very top of the app's entry CSS:

```css
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,560;6..72,600&family=JetBrains+Mono:wght@400;500&display=swap');
```

Or install locally via Fontsource:

```bash
npm install @fontsource-variable/albert-sans @fontsource-variable/newsreader @fontsource-variable/jetbrains-mono
```

## Dark mode

Supported via class-based `.dark`. Warm graphite (`oklch(0.20 0.006 60)`) — very low chroma at a warm hue so it reads as a neutral warm charcoal, not blue-black and not umber-brown. The clay accent brightens to L≈0.66 and carries dark ink (dark-ink-on-bright, per the contract); shadows deepen.