{"id":"3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","name":"Raycast","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","originalSiteUrl":"https://raycast.com","capturedAt":"2026-04-29T10:49:17.653Z","colors":[{"name":"Void Black","hex":"#040506","role":"Dominant page canvas and deepest shadow color — the ground state everything floats above","group":"neutral","cssVariable":"--color-void-black"},{"name":"Deep Charcoal","hex":"#07080a","role":"Primary card and section backgrounds; the first surface level above canvas","group":"neutral","cssVariable":"--color-deep-charcoal"},{"name":"Graphite 700","hex":"#111214","role":"Secondary surface and elevated card backgrounds","group":"neutral","cssVariable":"--color-graphite-700"},{"name":"Graphite 600","hex":"#1b1c1e","role":"Observed in other boxShadow, link boxShadow, badge backgroundColor. Extracted usage does not support a distinct primary control color.","group":"neutral","cssVariable":"--color-graphite-600"},{"name":"Graphite 500","hex":"#363739","role":"Border color for dividers, shadow tones on elevated components","group":"neutral","cssVariable":"--color-graphite-500"},{"name":"Graphite 400","hex":"#454647","role":"Subtle borders, muted button borders, body divider lines","group":"neutral","cssVariable":"--color-graphite-400"},{"name":"Slate 300","hex":"#6a6b6c","role":"Secondary body text, icon fills, disabled states","group":"neutral","cssVariable":"--color-slate-300"},{"name":"Slate 200","hex":"#9c9c9d","role":"Tertiary text, muted links, placeholder-level labels","group":"neutral","cssVariable":"--color-slate-200"},{"name":"Ash 50","hex":"#e6e6e6","role":"Primary download/CTA button background — warm near-white on black for maximum contrast without pure white aggression","group":"neutral","cssVariable":"--color-ash-50"},{"name":"Snow","hex":"#ffffff","role":"Primary text on dark surfaces, nav links, headline text, icon strokes, border highlights","group":"neutral","cssVariable":"--color-snow"},{"name":"Ember Red","hex":"#ff6363","role":"Observed in body borderColor, other backgroundColor, other fill.","group":"brand","cssVariable":"--color-ember-red"},{"name":"Ember Dark","hex":"#452324","role":"Observed in other backgroundColor, other borderColor.","group":"brand","cssVariable":"--color-ember-dark"},{"name":"Mint Signal","hex":"#59d499","role":"Observed in other backgroundColor. Semantic/state role was not supported by extracted badge/input evidence.","group":"accent","cssVariable":"--color-mint-signal"},{"name":"Sky Signal","hex":"#56c2ff","role":"Observed in other backgroundColor. Semantic/state role was not supported by extracted badge/input evidence.; Hero gradient highlight — linear-gradient(135deg, #56c2ff 0%, #138af2 100%) used for product feature illustration accents","group":"accent","gradient":"linear-gradient(135deg, rgb(86, 194, 255) 0%, rgb(19, 138, 242) 100%)","cssVariable":"--color-sky-signal"},{"name":"Nebula Glow","hex":"#043f96","role":"Radial section atmosphere gradient — low-opacity blue bloom behind hero and feature sections","group":"accent","gradient":"radial-gradient(84.6% 73.49% at 50% 26.51%, rgba(4, 63, 150, 0.7), rgba(6, 18, 37, 0.25))","cssVariable":"--color-nebula-glow"},{"name":"Violet Haze","hex":"#523091","role":"Radial section atmosphere gradient — low-opacity purple bloom for alternate feature sections","group":"accent","gradient":"radial-gradient(86.88% 75.47% at 50% 24.53%, rgba(82, 48, 145, 0.7), rgba(26, 11, 51, 0.14))","cssVariable":"--color-violet-haze"}],"typography":[{"role":"Universal UI font covering everything from 11px badge labels to 64px hero headlines. The negative tracking at display sizes (-0.11em at 56px) is the anti-convention choice — most launcher/productivity tools use neutral tracking, but Raycast's headlines contract inward, creating pressure and density. Feature settings 'ss03' (alternate 'a') distinguish it from default Inter. At small sizes (11–13px), tracking goes strongly positive (up to +0.073em) making metadata scannable at tiny scales.","sizes":"11px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 24px, 32px, 56px, 64px","family":"Inter","weight":"400, 500, 600","lineHeight":"1.0–1.71 depending on size (tighter at display, looser at body)","substitute":"Inter (Google Fonts) — identical; this is the Google-hosted version","letterSpacing":"-0.112px at 56px (≈-0.002em), up to +4.088px at 56px positive range; small sizes use +0.004em to +0.073em","fontFeatureSettings":"\"calt\", \"kern\", \"liga\", \"ss03\"; alternately \"liga\" 0, \"ss02\", \"ss08\""},{"role":"Monospaced font for version strings (v1.104.14), code snippets, homebrew install commands, and keyboard shortcut labels. Weight 300 at 10px for ultra-minimal metadata; weight 500 at 14px for readable code. Positive tracking (+0.017em to +0.05em) keeps characters from colliding at small sizes.","sizes":"10px, 12px, 14px","family":"GeistMono","weight":"300, 400, 500","lineHeight":"1.0–1.6","substitute":"JetBrains Mono or IBM Plex Mono","letterSpacing":"+0.017em to +0.05em across all sizes","fontFeatureSettings":"\"calt\", \"kern\", \"liga\", \"ss03\", \"ss09\""},{"role":"System font fallback appearing in macOS-rendered product screenshots and simulated app UI within the page. Not a deliberate web font choice — appears in contexts where the browser renders macOS system UI.","sizes":"16px, 24px, 32px","family":"SF Pro Text","weight":"500, 700","lineHeight":"1.15","substitute":"Inter weight 500/700","fontFeatureSettings":"\"calt\", \"kern\", \"liga\", \"ss03\""},{"role":"SF Pro — detected in extracted data but not described by AI","sizes":"13px","family":"SF Pro","weight":"700","lineHeight":"1.23","fontFeatureSettings":"\"calt\", \"kern\", \"liga\", \"ss03\""}],"spacing":{"radius":{"cards":"11px","icons":"99999px","badges":"6px","inputs":"8px","modals":"16px","buttons":"8px","cardLarge":"20px","buttonPill":"86px"},"elementGap":"15px","sectionGap":"80px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"cards":"11px","icons":"99999px","badges":"6px","inputs":"8px","modals":"16px","buttons":"8px","cardLarge":"20px","buttonPill":"86px"},"shadows":{"surfaces":[{"hex":"#040506","name":"Canvas","level":0,"purpose":"Page background — the absolute ground state, near-pure black"},{"hex":"#07080a","name":"Base Surface","level":1,"purpose":"Primary card and section backgrounds floating above canvas"},{"hex":"#111214","name":"Raised Surface","level":2,"purpose":"Elevated cards, modals, dropdown containers"},{"hex":"#1b1c1","name":"Overlay Surface","level":3,"purpose":"Badges, tooltip backgrounds, highest floating elements"}]},"guidelines":{"do":["Use #040506 as the page canvas ground — never a warm or cool-tinted near-black, only this near-pure neutral void","Apply the keyboard key shadow stack (rgba(0,0,0,0.4) outer, rgba(255,255,255,0.2) inset top highlight) on any element meant to feel physically pressable","Keep headline letter-spacing negative at display sizes: -0.11em at 56px, -0.13em at 64px — critical to the compressed, dense headline feel","Use radial gradients (blue or violet, max 0.7 opacity core fading to transparent) as per-section atmosphere layers behind content — never flat colored sections","Badge and chip text: Inter weight 500, positive letter-spacing +0.04em to +0.073em, on #1B1C1 background — the tracking contrast with headlines is part of the two-register system","For primary CTAs use #E6E6E6 background with #2F3031 text at 8px radius — not white, not a chromatic color","Use GeistMono weight 300–400 for all code, version strings, and terminal commands at 10–14px with +0.017em to +0.05em tracking"],"dont":["Do not use any colored backgrounds for section containers — all surface backgrounds must be from the #040506 → #1B1C1 neutral stack only","Do not apply border-radius above 20px to cards — the design uses 8px, 11px, 16px, 20px; rounder forms break the precision instrument aesthetic","Do not use #FF6363 as a button fill or large background — it appears only as a small status dot, icon accent, or single-word label text","Do not use white (#FFFFFF) as a button background — the primary action uses #E6E6E6 specifically; pure white reads as system/OS chrome at this scale","Do not use positive letter-spacing on headings above 24px — all display and heading text must track neutral-to-negative","Do not create dividers between sections using horizontal rules or color changes — section separation happens through 80px vertical gaps and radial gradient shifts only","Do not use drop-shadows with color tints (blue, red, etc.) — all shadows must be rgba(0,0,0,x) or rgba(255,255,255,x) only, keeping elevation monochromatic"]}}