# Gamma — Gamma DESIGN.md

> The reference desk. Quiet paper, cobalt signals.

Gamma is the workspace system the explorer ships in. Surfaces stay close to white so the component under review carries the contrast, and a single cobalt accent marks action and focus. Shadows are tinted from the ink so elevation reads as depth rather than dirt.

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

## Point of view

- One accent. Cobalt marks action and focus; nothing else competes with the preview.
- Ink-tinted depth. Every shadow is a blue-gray lifted from the text color.
- Nine-pixel controls, twelve-pixel panels. Small radii keep the workspace precise.
- Motion explains state. Standard easing for changes, a soft spring only for elastic controls.

## Color — light

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#ffffff` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#f8faff` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#f2f5fb` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#17233a` | Primary text and icons. |
| `--gamma-muted` | `#65738b` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#e3e9f3` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#275bea` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#ffffff` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#edf2ff` | Selected and hovered tints. |
| `--gamma-success` | `#16845b` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#dff5ea` | Background behind success text. |
| `--gamma-danger` | `#c83e4c` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#fbe7e9` | Background behind danger text. |
| `--gamma-warning` | `#9a6200` | Attention that is not an error. |
| `--gamma-warning-soft` | `#fff4dc` | Background behind warning text. |

### Depth and focus

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-shadow-low` | `0 1px 3px rgba(27, 52, 93, 0.08)` | Resting depth. |
| `--gamma-shadow-mid` | `0 8px 28px rgba(27, 52, 93, 0.08)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 24px 64px rgba(27, 52, 93, 0.16)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 3px rgba(39, 91, 234, 0.22)` | Ring around focused controls. |
| `--gamma-selection` | `#cddaff` | Text selection. |

## Color — dark

Define these on the same scope under `[data-theme="dark"]`; do not invent a separate scale.

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#101521` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#151e2d` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#1d293b` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#eef3fb` | Primary text and icons. |
| `--gamma-muted` | `#9eabc0` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#29384c` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#7ca2ff` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#0b1224` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#1f3358` | Selected and hovered tints. |
| `--gamma-success` | `#5ccf98` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#153426` | Background behind success text. |
| `--gamma-danger` | `#ff8a94` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#3d1f24` | Background behind danger text. |
| `--gamma-warning` | `#f0bd5d` | Attention that is not an error. |
| `--gamma-warning-soft` | `#3a2c12` | Background behind warning text. |
| `--gamma-shadow-low` | `0 1px 3px rgba(0, 0, 0, 0.35)` | Resting depth. |
| `--gamma-shadow-mid` | `0 10px 28px rgba(0, 0, 0, 0.35)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 28px 70px rgba(0, 0, 0, 0.55)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 3px rgba(124, 162, 255, 0.32)` | Ring around focused controls. |
| `--gamma-selection` | `#2b4a8f` | Text selection. |

## Type

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

## Shape

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-radius-small` | `6px` | Chips, tags, and tiny controls. |
| `--gamma-radius-control` | `9px` | Inputs, slots, and menus. |
| `--gamma-radius-button` | `9px` | Primary and secondary buttons. |
| `--gamma-radius-panel` | `12px` | 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` | `130ms` | Hover and press feedback. |
| `--gamma-duration-base` | `200ms` | Routine state changes and reveals. |
| `--gamma-duration-slow` | `360ms` | Overlays, layout changes, and large arrivals. |
| `--gamma-ease-standard` | `cubic-bezier(0.2, 0.8, 0.2, 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, 1.3, 0.35, 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="gamma">
      <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.