DESIGN.md@.agents/tools/design/library/brands/raycast · git:20260404.2e83279 · 2026-04-04 · sha256 ee633deb6f5900c8

DESIGN.md@.agents/tools/design/library/brands/raycast git:20260404.2e83279A

Immutable. This exact content is served forever at /api/v1/blob/ee633deb6f5900c8.

<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Raycast

Dark, macOS-native precision tool aesthetic. Near-black blue-tinted background (`#07080a`), multi-layer inset shadows, Raycast Red (`#FF6363`) as punctuation accent, Inter with positive letter-spacing.

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Visual theme & atmosphere, key characteristics |
| 2 | [02-color-palette.md](02-color-palette.md) | Full color palette — primary, accent, surface, neutrals, semantic, gradients |
| 3 | [03-typography.md](03-typography.md) | Font families, type hierarchy table, typographic principles |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, navigation, images, keyboard keys, badges |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels table, shadow philosophy, decorative depth |
| 7 | [07-dos-donts.md](07-dos-donts.md) | Do's and don'ts — common mistakes and correct patterns |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

| Token | Value |
|-------|-------|
| Background | `#07080a` (near-black, blue-tinted — NOT pure black) |
| Primary text | `#f9f9f9` |
| Brand accent | `#FF6363` (Raycast Red) |
| Interactive | `hsl(202, 100%, 67%)` / `#55b3ff` (Raycast Blue) |
| Card surface | `#101111` |
| Border | `hsl(195, 5%, 15%)` / `#252829` |
| Body weight | 500 (medium — not 400) |
| Body tracking | +0.2px (positive — not negative) |
| Hover pattern | opacity 0.6 transition (not color swap) |
| Primary font | Inter + OpenType `calt kern liga ss03` |
| Code font | GeistMono |