# Nocturne — Gamma DESIGN.md

> A dark instrument panel. Sea-glass on blue-black.

Nocturne is designed dark first and stays dark; it does not follow the page theme. Surfaces step up in three blue-black tones, text is off-white rather than pure white, and one desaturated teal carries action, focus, and live indicators. Timing is fast and shadows are deep and colorless.

Generated from Gamma's design-system contract (`src/design-systems/nocturne.ts`). This file describes a design language: no third-party logos, copy, or imagery travel with it.

## Point of view

- Single mode. The system is authored in the dark and ignores the light theme.
- Three steps of blue-black. Canvas, surface, and well are close in value so the accent stays loud.
- Sea-glass, not neon. The teal is desaturated enough to sit on screens all day.
- Fast and flat. Sub-200ms transitions and no overshoot; feedback should feel mechanical.

## Color — dark

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#0e1118` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#141925` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#1b2130` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#e8ebf1` | Primary text and icons. |
| `--gamma-muted` | `#9aa4b8` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#262d3d` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#5fd3c0` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#07110f` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#173430` | Selected and hovered tints. |
| `--gamma-success` | `#7bd88f` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#15301d` | Background behind success text. |
| `--gamma-danger` | `#ff7b7b` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#3a1a1e` | Background behind danger text. |
| `--gamma-warning` | `#f2c261` | Attention that is not an error. |
| `--gamma-warning-soft` | `#332a14` | Background behind warning text. |

### Depth and focus

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-shadow-low` | `0 1px 2px rgba(0, 0, 0, 0.45)` | Resting depth. |
| `--gamma-shadow-mid` | `0 12px 32px rgba(0, 0, 0, 0.45)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 32px 80px rgba(0, 0, 0, 0.6)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 3px rgba(95, 211, 192, 0.35)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(95, 211, 192, 0.32)` | Text selection. |

## Color modes

Nocturne is designed for dark only. Do not synthesize a second mode.

## Type

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-font-ui` | `"Geist", ui-sans-serif, system-ui, sans-serif` | Interface copy, labels, and buttons. |
| `--gamma-font-display` | `"Geist", ui-sans-serif, system-ui, sans-serif` | Headings and the few largest statements. |
| `--gamma-font-code` | `"Geist Mono", ui-monospace, SFMono-Regular, monospace` | Data, measurements, token names, and code. |
| `--gamma-tracking-display` | `-0.02em` | Letter spacing for display headings. |

## Shape

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-radius-small` | `4px` | Chips, tags, and tiny controls. |
| `--gamma-radius-control` | `6px` | Inputs, slots, and menus. |
| `--gamma-radius-button` | `6px` | Primary and secondary buttons. |
| `--gamma-radius-panel` | `10px` | Cards, panels, sheets, and trays. |
| `--gamma-radius-pill` | `999px` | Switches, badges, and fully rounded controls. |
| `--gamma-hairline` | `1px` | Border width for every divider and outline. |

## Motion

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-duration-fast` | `90ms` | Hover and press feedback. |
| `--gamma-duration-base` | `160ms` | Routine state changes and reveals. |
| `--gamma-duration-slow` | `300ms` | Overlays, layout changes, and large arrivals. |
| `--gamma-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | Everyday state changes. |
| `--gamma-ease-emphasized` | `cubic-bezier(0.16, 1, 0.3, 1)` | Entrances and settles. |
| `--gamma-ease-spring` | `cubic-bezier(0.2, 0, 0, 1)` | Elastic movement and selection trails. |

## Rules for implementation

1. Read every color, font, radius, easing, and shadow from a `--gamma-*` custom property. Do not hardcode a value that a token can express.
2. Use `DesignSystemScope` for an island, or apply `data-design-system` to a region. The nearest scope wins.
3. Native elements own interaction: a button is a `<button>`, a choice is a radio group, and a disclosure exposes `aria-expanded`.
4. Every focused control has a visible `:focus-visible` ring. Do not remove the browser outline without a replacement.
5. Every animation has a `prefers-reduced-motion: reduce` rule that removes movement but keeps the state legible.
6. Numbers that change use `font-variant-numeric: tabular-nums`.
7. Arrivals use `--gamma-ease-emphasized`; routine state changes use `--gamma-ease-standard`; elastic movement uses `--gamma-ease-spring`.
8. Pair `accent` with `accent-ink` for text and icons. Never place `muted` on `surface-2` without checking contrast.

## Apply the system

```tsx
import { DesignSystemScope, GammaButton } from "@/components";

export function Panel() {
  return (
    <DesignSystemScope system="nocturne">
      <GammaButton>Save changes</GammaButton>
    </DesignSystemScope>
  );
}
```

Import `tokens.css`, `library.css`, and `design-systems.css` once. Pass `mode` to pin a mode instead of following the page theme.

## Source boundary

This brief is generated from Gamma's own token contract. It does not contain a third-party site's layout, copy, imagery, or code, and it is not a substitute for a license to reuse the sites that informed the library.