# Raycast Dark

## Overview
A dark-native aesthetic for launchers, developer tools, and productivity products. Pure-white text sits on an ink-black canvas (`oklch(0.134 0.005 262)` / `#07080a`) for a crisp, high-contrast, premium feel. Two signatures make it read as "Raycast" and not generic cinematic-dark: (1) diagonal coral/red gradient light-beams — with teal/cyan fringe — sweeping behind the hero, and (2) a glossy "keycap" primary button (a near-white pill with a soft glow and inset top highlight). Coral (`#ff6363`) is the single brand accent, used sparingly.

## Colors & Roles
Ink-black `background` with pure-white `foreground`; surfaces step up in lightness — `background` (0.134) → `card` (0.185) → `popover` (0.226) — rather than relying on shadow. The brand is a single coral (`accent` = `ring` = `chart-1`, `oklch(0.700 0.191 23.4)`) reserved for focus, emphasis, and the hero glow. **A deliberate, screenshot-faithful call: `primary` is NOT coral.** The measured CTA is a near-white pill (`#e6e6e6` bg / `#2f3031` text), so in dark mode `primary` is near-white with dark `primary-foreground`. In light mode a white pill would vanish, so light promotes coral to `primary`. On coral surfaces, text is dark — white text fails AA against coral (L≈0.70). Green, cyan, and yellow (`chart-2/3/4/5`) are status/data signals only, never brand color. Dark is canonical (measured); light is a synthesized counterpart.

## Typography Rules
One family: Inter (Google Fonts fallback: Inter), with GeistMono (fallback: Geist Mono) for keycaps, install commands, and code. Weights 400 body / 500 subheads, labels, emphasis / 600 display and H1. **Tracking is the inverse of Linear's:** measured H1 (64px/600) has `letter-spacing: normal` (0), and subheads/labels carry a slight *positive* `+0.2px`. Never apply tight negative tracking. Scale ratio ≈1.25; H1 ~4rem, body 1rem/1.5.

## Layout Principles
Centered container, max ~1200px, 12-column / 24px gutter. Hero is centered: a large title, a short subtext, and a CTA pair, over the diagonal coral glow. Below, denser card grids (2–3 columns) and product-UI mockups. Section rhythm is large: `clamp(5rem, 10vw, 9rem)`. The empty ink canvas at the top of the hero is the premium signal.

## Depth & Elevation
Elevation is built primarily from background tonal steps (`background → card → popover`) plus thin 1px borders (translucent white ~10% or `#2f3031`), not heavy drop-shadows. The exception is the signature CTA: a glossy keycap treatment — inset white top highlight, a soft `rgba(255,255,255,0.19) 0 0 14px` glow, and a 2px dark ring. The flat shadow token only approximates this; reproduce the button with an explicit inset highlight. Soft drop-shadows belong to floating menus, popovers, and the command palette.

## Shapes
Medium radii: cards 12px (feature/emphasis cards 16–20px), fields and buttons 8px, pills/badges 9999px. Corners are soft but not bubbly.

## Effects
Signature hero: diagonal (~45°) coral/red light-beams with teal/cyan fringe, softly blooming over the near-black. A faint film grain (noise ≈0.03) adds texture. Backdrop-blur on the sticky/floating nav and panels. Keep the glow to hero and emphasis sections — the rest of the canvas stays flat ink-black.

## Component Stylings
- **Button**: primary = near-white pill, dark text, radius 8px, 14px/500, padding 8×12px, glossy keycap look (inset white highlight + soft glow + 2px ring). Secondary = translucent-white 5% fill, 1px border, foreground text. Ghost = transparent, muted-foreground → foreground on hover. Focus = 2px coral ring, 2px offset. Coral action buttons take dark text.
- **Card**: `card` bg, 1px border, radius 12px, padding 24–32px; no default shadow. Emphasis cards may carry a subtle inset top highlight or coral glow.
- **Input**: translucent-white 5% bg, 1px border, radius 8px, padding 8×12px, 14px text; placeholder muted-foreground; focus border → coral + thin ring.
- **Nav**: backdrop-blurred translucent near-black, often a floating pill bar. Coral logo mark left, ghost links center, "Log in" text + white "Download" keycap button right; 1px bottom hairline.
- **Badge**: radius 8px or pill, 12px/500. Status colors are chart-* tinted 10% bg + colored text; coral only for "New"/emphasis.

## Motion
Smooth, quick, restrained: opacity fades + 8–12px slides, tiny hover scale and background/border transitions, and a subtle pulse on the coral glow. Durations 120/200/400ms. No bounce, spring overshoot, or heavy parallax.

## Do's and Don'ts
**Do:** design dark-first and derive light with the same coral brand; keep `primary` a white keycap button and coral to accent/ring/glow; lay diagonal coral beams behind the hero; keep tracking neutral (0 to +0.2px); build hierarchy from tonal steps and white/gray contrast.
**Don't:** apply Linear-style negative tracking; flood coral as a button fill; put white text on coral; treat a bright light background as canonical; overuse gradients/pastels/bounce.

## Responsive Behavior
The 12-column grid collapses to one column on mobile; display type scales via `clamp()`. The hero glow scales down but stays diagonal. The floating nav condenses to a compact bar.

## Agent Prompt Guide
> Build this in the 'Raycast Dark' style: ink-black canvas (`#07080a`), pure-white text, a single coral accent (`#ff6363`) for focus/emphasis/hero-glow only. Primary buttons are near-white glossy "keycap" pills with dark text — coral is never the primary fill. Diagonal coral/red light-beams with teal fringe behind a centered hero. Inter with neutral tracking (0 on headings, +0.2px on subheads — NOT negative), weights 400/500/600, radius 8–12px, elevation by 1px borders + background tonal steps. Green/cyan/yellow are status signals only. Dark text on coral. Author light mode as a white counterpart that promotes coral to primary.

## Known Gaps / Confidence
Colors, typography, and radii are measured from the live site (`computed-css`). Color-role assignment, taxonomy, motion, layout, and effects are `vision-inferred` from screenshots. **Dark is the real, measured canonical set** (the site is genuinely dark; `#07080a` background); the extractor could not toggle a media query, so its "light" and "dark" walks were identical — the **light set here is a synthesized counterpart** (`vision-inferred`) that keeps the same coral brand. The glossy keycap button and multi-beam hero glow are distinctive effects that the flat shadow/gradient token schema can only approximate — reproduce them with explicit inset highlights and layered radial gradients. Inter and GeistMono are the site's real fonts and are freely available via Google Fonts.