# Raycast Dark
잉크빛 #07080a 캔버스 위에 순백 텍스트와 산호빛 코랄(#ff6363) 브랜드 액센트, 대각선 코랄·틸 광선 글로우와 유리처럼 도드라진 흰색 버튼이 시그니처인 다크 네이티브 런처 미학.
- taxonomy: cinematic-dark · dark-native, product-saas, launcher, coral-accent, high-contrast, inter-neutral-tracking, glossy-button, gradient-glow, developer-tool, refined-minimal · complexity=medium
- page types: landing, app, marketing, dashboard
- best for: 개발자·생산성 도구 마케팅 사이트, 다크 네이티브 앱·런처 UI, 커맨드 팔레트/키보드 중심 제품 히어로, 스타트업 프로덕트 랜딩
- avoid for: 따뜻하고 여백 많은 라이프스타일·리테일 브랜드, 인쇄 편집(에디토리얼) 감성 사이트, 밝고 파스텔한 소비자 앱, 사진 중심의 밝은 마케팅 페이지
- provenance: website (Raycast - Your shortcut to everything) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, dark=computed-css, light=vision-inferred
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Raycast Dark — theme.css (generated, do not edit) */
:root {
--radius: 12px;
--radius-selector: 8px;
--radius-field: 8px;
--font-sans: Inter, "Inter Fallback", "SF Pro Text", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
--spacing: 8px;
--shadow: 0px 2px 14px 0px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
--ks-display-weight: 600;
--ks-display-tracking: 0;
--background: oklch(0.994 0.001 250);
--foreground: oklch(0.205 0.008 262);
--card: oklch(1 0 0);
--card-foreground: oklch(0.205 0.008 262);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.205 0.008 262);
--primary: oklch(0.630 0.197 24.0);
--primary-foreground: oklch(0.99 0.002 250);
--secondary: oklch(0.965 0.004 258);
--secondary-foreground: oklch(0.28 0.01 262);
--muted: oklch(0.97 0.003 258);
--muted-foreground: oklch(0.505 0.012 261.8);
--accent: oklch(0.630 0.197 24.0);
--accent-foreground: oklch(0.99 0.002 250);
--destructive: oklch(0.585 0.207 25.3);
--destructive-foreground: oklch(0.99 0.002 250);
--border: oklch(0.915 0.004 258);
--input: oklch(0.915 0.004 258);
--ring: oklch(0.630 0.197 24.0);
--chart-1: oklch(0.630 0.197 24.0);
--chart-2: oklch(0.60 0.14 159.7);
--chart-3: oklch(0.60 0.13 236.8);
--chart-4: oklch(0.75 0.15 85.2);
--chart-5: oklch(0.62 0.10 233.7);
}
.dark {
--background: oklch(0.134 0.005 262.3);
--foreground: oklch(0.985 0 0);
--card: oklch(0.185 0.004 264.5);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.226 0.004 264.5);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.965 0 0);
--primary-foreground: oklch(0.226 0.004 264.5);
--secondary: oklch(0.309 0.002 247.9);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.226 0.004 264.5);
--muted-foreground: oklch(0.693 0.001 286.4);
--accent: oklch(0.700 0.191 23.4);
--accent-foreground: oklch(0.145 0.005 262.3);
--destructive: oklch(0.637 0.208 25.3);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.278 0.004 264.5);
--input: oklch(0.245 0.004 264.5);
--ring: oklch(0.700 0.191 23.4);
--chart-1: oklch(0.700 0.191 23.4);
--chart-2: oklch(0.785 0.140 159.7);
--chart-3: oklch(0.776 0.131 236.8);
--chart-4: oklch(0.853 0.163 85.2);
--chart-5: oklch(0.842 0.093 233.7);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Your shortcut to everything.
A collection of powerful productivity tools all within an extendable launcher. Fast, ergonomic and reliable.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/raycast.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `