# Signal — Gamma DESIGN.md

> Consumer energy. Pill actions, vermilion on white.

Signal spends its boldness on shape and one color. Buttons are full pills, panels are twenty-pixel rounded, and the vermilion accent is tuned to 4.7:1 on white so it can label as well as fill. Bricolage Grotesque gives headings character at display sizes while staying plain in controls. Springs are real but brief.

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

## Point of view

- Pills identify actions. Anything you press is fully rounded; anything you read is twenty-pixel rounded.
- Vermilion that passes. The accent is deep enough to be text, so links and quiet buttons stay on brand.
- One face at two sizes. Bricolage Grotesque tightens at display size and relaxes in controls.
- Brief springs. Overshoot on arrival, then still; nothing loops.

## Color — light

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#ffffff` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#f7f7f8` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#ececef` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#121317` | Primary text and icons. |
| `--gamma-muted` | `#5f626b` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#e1e2e7` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#d63a1c` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#ffffff` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#fdeae4` | Selected and hovered tints. |
| `--gamma-success` | `#1f8a4c` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#e2f5e9` | Background behind success text. |
| `--gamma-danger` | `#c92c2c` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#fde5e5` | Background behind danger text. |
| `--gamma-warning` | `#9a5600` | Attention that is not an error. |
| `--gamma-warning-soft` | `#fff0d6` | Background behind warning text. |

### Depth and focus

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-shadow-low` | `0 1px 2px rgba(18, 19, 23, 0.07)` | Resting depth. |
| `--gamma-shadow-mid` | `0 10px 28px rgba(18, 19, 23, 0.11)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 28px 70px rgba(18, 19, 23, 0.18)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 4px rgba(214, 58, 28, 0.24)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(214, 58, 28, 0.22)` | 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` | `#121317` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#1a1b21` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#24262e` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#f4f4f6` | Primary text and icons. |
| `--gamma-muted` | `#a1a3ad` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#2e3038` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#ff6a47` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#1a0a06` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#3a1d16` | Selected and hovered tints. |
| `--gamma-success` | `#5ecf8a` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#15301f` | Background behind success text. |
| `--gamma-danger` | `#ff7676` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#3b1c1c` | Background behind danger text. |
| `--gamma-warning` | `#f5c060` | Attention that is not an error. |
| `--gamma-warning-soft` | `#332a14` | Background behind warning text. |
| `--gamma-shadow-low` | `0 1px 2px rgba(0, 0, 0, 0.45)` | Resting depth. |
| `--gamma-shadow-mid` | `0 12px 30px rgba(0, 0, 0, 0.45)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 30px 70px rgba(0, 0, 0, 0.6)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 4px rgba(255, 106, 71, 0.35)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(255, 106, 71, 0.3)` | Text selection. |

## Type

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-font-ui` | `"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif` | Interface copy, labels, and buttons. |
| `--gamma-font-display` | `"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif` | Headings and the few largest statements. |
| `--gamma-font-code` | `"Fira Code", 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` | `8px` | Chips, tags, and tiny controls. |
| `--gamma-radius-control` | `14px` | Inputs, slots, and menus. |
| `--gamma-radius-button` | `999px` | Primary and secondary buttons. |
| `--gamma-radius-panel` | `20px` | 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` | `120ms` | Hover and press feedback. |
| `--gamma-duration-base` | `220ms` | Routine state changes and reveals. |
| `--gamma-duration-slow` | `420ms` | 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.34, 1.56, 0.64, 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="signal">
      <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.