# Design System: Gone

## Overview

**Creative North Star: "Moonstone"**

Pearl daylight, or dusk, seen through frosted glass. Gone should feel calm, private, and quietly expensive: the opposite of a security dashboard. Trust comes from clarity and restraint. Nothing is hidden except the secret, and the secret is the only thing behind frost.

Each view is **one sheet of glass** floating over a soft light field. Inputs are recessed wells cut into that sheet, never cards stacked on cards. The header and footer sit directly on the backdrop.

The signature is the **frosted reveal**. On the receive page the secret sits behind frosted glass (a decorative, aria-hidden vault). When it opens, the message panel defrosts from blur to sharp. When it is gone, the eroding **G** of the brand mark stands alone on the pane.

Mode is **Operate** for send, receive, manage, request (the new-request form, the list and the request page) and reply, and **Read** for About.

**Key characteristics:**
- Frosted panes (36px backdrop blur, 130% saturation) with a bright top edge and a deep, soft shadow.
- A backdrop of three low-saturation light fields (lilac, peach, aqua) plus fine film grain. It drifts slowly on wide screens only.
- One dark (light mode) or moonlight (dark mode) primary button per view. Everything else is glass.
- One accent, moonstone violet, rationed to the accent word in headings, focus, progress, and the current lifecycle step. An operator may replace it with their own light and dark colours (`GONE_BRAND_ACCENT`); the server refuses either below 4.5:1 contrast on its theme's background.
- Geist for the interface, Geist Mono for anything a person might retype: messages, links, passphrases.

## Colors

Semantic tokens (`--color-*`, `--pane-*`, `--well*`, `--primary*`, `--danger*`, `--warn*` in `web/css/tokens.css`) resolve per theme through `light-dark()`. Components use only the semantic names.

### Backdrop
- **Pearl** `#eeecf1` (light) and **Dusk** `#121019` (dark) are the base.
- Light fields: lilac, peach and aqua radial gradients at 46 to 68% (light) or 26 to 46% (dark) alpha.

### Text
- **Ink** `#1c1a26` / **Moon** `#efedf6` for headings and body.
- **Ink 2** `#4a4658` / `#c3bed4` for leads and secondary text.
- **Ink 3** `#625e73` / `#a7a2ba` for hints and labels. Both pass 4.5:1 on the pane.

### Accent
- **Violet** `#4b3f8a` (light) / `#cfc6f7` (dark). The accent word in each `h1` (`.accent`), focus rings, progress fills, the current lifecycle step.

### Actions and status
- **Primary:** plum `#211e30` gradient in light mode, moonlight `#dcd6f4` in dark.
- **Danger:** muted rose `#a1283b` / `#ff9eac`. Only for deleting.
- **Warn:** amber `#7d5200` / `#f2c46e`, on a 10% tint. For the insecure-connection banner and all `.alert` callouts.

## Typography

**Geist** and **Geist Mono** are self-hosted as Latin variable woff2 files (weights 100 to 900, OFL) because the CSP allows fonts only from this origin.

- **Display (`h1`):** Geist 400, `clamp(1.875rem → 2.5rem)`, tracking -0.035em, balanced wrapping. The last word is set in the accent colour (`<span class="accent">`), never italic. Geist has no italic, and a synthesised one looks cheap.
- **Wordmark:** the eroding G (`web/img/gone-g-32.svg`, applied as a CSS mask so it follows the text colour) stands in for the capital. It is cap-height tall, sits on the baseline with the same 0.016em overshoot as the "o", and is followed by "one" in Geist 500 at -0.045em.
- **Data:** Geist Mono for the message textarea, the revealed secret, links and passphrases. It separates I, l, 1, O and 0, which matters when the content is a password.

## Layout

- The header and footer use `.wrap` (72rem max). Content is one centred `.view` (47.5rem, so the message well fits 71 monospace columns) holding one `.pane`. Prose inside keeps its own measure (`.lead` 46ch).
- Inside a pane: eyebrow chip, `h1`, lead, then a `.form` grid with 1.25rem gaps, then the lifecycle `.rail`.
- Mobile (≤40rem): the lifecycle rail becomes 2×2, passphrase buttons drop below the input, and action buttons stretch.

## Elevation & Depth

Depth comes from glass only:
- **Pane:** blur, a 1px light edge, an inset top highlight, and two soft shadows.
- **Wells:** recessed, with an inset shadow.
- **Lens:** the chosen segment is raised, with a top highlight and a small shadow.

`prefers-reduced-transparency` swaps every pane for a solid `--pane-solid`. Forced-colors mode draws pane borders and the mark in system colours.

## Shapes

- **Panes:** 22px corners (20px on phones).
- **Wells and callouts:** 13px.
- **Buttons, segmented tracks, link boxes and chips:** fully round (pills).

## Components

- **Buttons:**
  - `.btn-primary` is the one strong action per view.
  - `.btn-secondary` is glass.
  - `.btn-quiet` is text on hover tint.
  - `.btn-danger-ghost` starts a delete; `.btn-danger` confirms it.
  - `.btn-block` is the full-width main action. `.btn-small` is 2.5rem tall.
- **Wells:** `textarea`, `.input`, `.drop`, `.files li`, `.secret-panel` and `.linkbox` share the recessed well treatment. Focus turns the edge violet and adds a 4px soft ring.
- **Segmented control (expiry):** a pill track. The checked radio's label becomes a raised lens.
- **Link box:** the read-only link in a recessed pill, with its copy button inside the right end.
- **Share QR code:** opt-in. A glass **QR** button sits in the share link box before Copy (icon only at 40rem and below; its name stays "QR code" for screen readers). It is a disclosure (`aria-expanded`) that opens a white tile under the link box holding the code, with a 4-module quiet zone and one line of caption. The code is always black on white in both themes, because many scanners can't read an inverted code. Only the send result has it; request and reply links never get one.
- **Lifecycle rail:** four steps (Sealed, Waiting, Opened once, Gone) in a row along the foot of the pane.
  - Each step has a 2px top rule: hairline when upcoming, faint violet when done (`.is-done`), solid violet when current (`.is-now`).
- **Callouts:** `.alert` is amber, for warnings and errors; `.banner` is an alert floating above the pane. `.callout` is violet, for notes like "Passphrase protected".
- **Vault:** decorative frosted placeholder lines with a lock, shown before opening.
- **Covered message:** after Open, the message starts behind frost in case the recipient is sharing their screen. The frost carries blurred placeholder dots, a size pill ("4 lines", or characters for one line) and one line of explanation, never controls. The panel header holds "Message" on the left and, on the right, a **Show/Hide** toggle and **Copy**. The toggle never moves; only its label and eye icon change, like the passphrase field's reveal. Copy works while covered. The real text is not in the page while covered. "Always show secrets on this device" is a per-browser localStorage setting at the foot of the panel.
- **Gone hero:** the 64px drawing of the mark (`gone-g-64.svg`, masked), `h1`, lead, a `.next` well with what to do, one button.
- **Manage:**
  - Status details: a `.pill-status`, a `.facts` key/value list, and Check again.
  - Deleting: a `.zone` with Delete now, which expands into an inline rose `.confirm`.
- **Requests:**
  - The list of requests saved in this browser sits under a hairline at the foot of the `/request` pane, not in a card of its own. Each row is a well (like `.files li`) linking to the request, with its label, age and a `.pill-status`.
  - `.pill-status[data-state="ready"]` has a firmer violet edge and a slowly breathing dot (still under `prefers-reduced-motion`); `data-state="gone"` is muted ink with no fill.
  - The request rail reads Asked, Waiting, Replied, Opened once. The reply page's reads Asked, Your reply, Opened once, Gone.
  - Opening a reply reuses the receive page's vault, Open button and covered message unchanged.
- **Navigation:** **Send a secret**, **Request a secret** and About pills, centered on the page between the wordmark (left) and, on the right, the language picker and an icon-only theme toggle (moon in light mode, sun in dark) with an sr-only "Dark mode" label and `aria-pressed`. Both sit outside the `nav`.
  - The page you're on carries `aria-current="page"` and holds the hover fill (`--color-accent-soft`).
  - At 40rem and below the labels shorten to "Send" and "Request" (the rest stays for screen readers), the pills tighten, and they center in the space between the wordmark and the toggle. If a long language still doesn't fit, the links scroll sideways rather than push the picker and toggle off-screen. At 30rem and below About leaves the header; it is always in the footer.
- **Language picker:** a pill like the theme toggle holding a globe icon and the language code ("EN"; globe only at 24rem and below). It opens a small list on the same glass as the panes, on a solid base so page text never shows through, with the language in use raised like a segmented-control lens and ticked. The list names each language in itself (Español, Français, Deutsch, Português (Brasil)), each entry carries its `lang`, and there are no flags. The pill is a disclosure button (`aria-expanded`); the entries are buttons and the one in use has `aria-current`. Arrow keys, Home and End move through the list, Escape closes it and returns to the pill, and clicking or tabbing away closes it. Its sr-only name is "Language" in the page's language. Choosing one re-renders the page in place; nothing reloads.
- **Machine-translation note:** in any language but English, one quiet footer line says the translation was made by machine and links to the translation guide.

## Do's and Don'ts

### Do
- Put each view on exactly one pane. Use wells for anything inside it.
- Keep the accent to one word per heading plus focus and progress.
- Leave documentation titles without an accent word. Docs are for reading: the accent stays on actions, links and the app's own headlines.
- Use Geist Mono for anything a person might copy or retype.
- Keep the backdrop soft and low-saturation. It is light behind glass, not decoration.

### Don't
- Don't nest cards or add extra panes for grouping. Use hairlines, wells, or spacing.
- Don't use neon, purple-to-pink gradients, or glows on text.
- Don't italicise Geist.
- Don't add inline styles or scripts; the CSP forbids them.
- Don't scale the master mark down to header size. Use the 32px drawing (header) or 64px drawing (hero).