{"id":"3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Raycast","summary":"Obsidian command terminal — a near-black void where UI surfaces emerge like backlit glass panels, depth created by shadow layering rather than color contrast.","description":"Raycast lives in near-total darkness — a #040506 void where UI surfaces emerge as barely-lighter charcoal strata rather than conventional cards. The signature move is depth through shadow layering: the keyboard-key shadow `rgba(0,0,0,0.4) 0px 1.5px 0.5px 2.5px, rgb(0,0,0) 0px 0px 0.5px 1px, rgba(0,0,0,0.25) 0px 2px 1px 1px inset, rgba(255,255,255,0.2) 0px 1px 1px 1px inset` makes interactive elements feel physically pressable — a tactile metaphor for keyboard shortcuts. The brand red (#FF6363) appears sparingly as a status signal and logo accent rather than a CTA color; primary download buttons are a near-white #E6E6E6 pill on black — inverted convention. Radial gradients with blue and purple cores bleed into the dark canvas at very low opacity, creating the impression of colored light sources behind frosted obsidian. Type is Inter with tight negative tracking at display sizes, shifting to loose positive tracking on micro labels and badges — creating a two-register system where headlines contract and metadata breathes.","industry":"productivity","colorScheme":"dark","colors":[{"name":"Void Black","hex":"#040506","role":"Dominant page canvas and deepest shadow color — the ground state everything floats above","group":"neutral"},{"name":"Deep Charcoal","hex":"#07080a","role":"Primary card and section backgrounds; the first surface level above canvas","group":"neutral"},{"name":"Graphite 700","hex":"#111214","role":"Secondary surface and elevated card backgrounds","group":"neutral"},{"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"},{"name":"Graphite 500","hex":"#363739","role":"Border color for dividers, shadow tones on elevated components","group":"neutral"},{"name":"Graphite 400","hex":"#454647","role":"Subtle borders, muted button borders, body divider lines","group":"neutral"},{"name":"Slate 300","hex":"#6a6b6c","role":"Secondary body text, icon fills, disabled states","group":"neutral"},{"name":"Slate 200","hex":"#9c9c9d","role":"Tertiary text, muted links, placeholder-level labels","group":"neutral"},{"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"},{"name":"Snow","hex":"#ffffff","role":"Primary text on dark surfaces, nav links, headline text, icon strokes, border highlights","group":"neutral"},{"name":"Ember Red","hex":"#ff6363","role":"Observed in body borderColor, other backgroundColor, other fill.","group":"brand"},{"name":"Ember Dark","hex":"#452324","role":"Observed in other backgroundColor, other borderColor.","group":"brand"},{"name":"Mint Signal","hex":"#59d499","role":"Observed in other backgroundColor. Semantic/state role was not supported by extracted badge/input evidence.","group":"accent"},{"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%)"},{"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))"},{"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))"}],"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\""}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.45,"letterSpacing":0.8},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0.1},{"role":"subheading","size":18,"lineHeight":1.4,"letterSpacing":0.06},{"role":"heading-sm","size":24,"lineHeight":1.33,"letterSpacing":-0.05},{"role":"heading","size":32,"lineHeight":1.2,"letterSpacing":-0.06},{"role":"heading-lg","size":56,"lineHeight":1.1,"letterSpacing":-0.11},{"role":"display","size":64,"lineHeight":1,"letterSpacing":-0.13}],"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"]},"components":[{"name":"Download Button Group","role":""},{"name":"Dark Badge / Status Indicator Collection","role":""},{"name":"Raycast Search Input — App Filter UI","role":""},{"name":"Primary Download Button","role":"Main CTA for app download"},{"name":"Ghost Navigation Link","role":"Top navigation items"},{"name":"Keyboard Key Element","role":"Interactive keyboard shortcut visualizer"},{"name":"Feature Card","role":"Marketing feature section cards"},{"name":"Glass Product Card","role":"Product screenshot / app UI demo containers"},{"name":"Outlined Highlight Card","role":"Extension/store item cards with white ring"},{"name":"Dark Badge","role":"Version numbers, category labels, status chips"},{"name":"Search Input","role":"In-app filter/search within product demo"},{"name":"Muted Inline Button","role":"Secondary text actions and version badges"},{"name":"Navigation Ring Link","role":"Circular icon links in nav or social areas"},{"name":"Ember Status Indicator","role":"Colored dot or label for status signals inside product UI"},{"name":"Section Atmosphere Backdrop","role":"Per-section colored radial glow behind content"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text primary: #FFFFFF\n- text secondary: #9C9C9D\n- text tertiary: #6A6B6C\n- background (canvas): #040506\n- surface (card): #07080a\n- border: #363739 (or rgba(255,255,255,0.06) for subtle)\n- accent/brand: #FF6363 (status and logo only)\n- primary action: #e6e6e6 (filled action)\n\n**Example Component Prompts**\n\n1. **Hero Section**: Full-viewport dark section, background #040506 with radial-gradient(84.6% 73.49% at 50% 26.51%, rgba(4,63,150,0.7), rgba(6,18,37,0.25)) layered behind. Full-bleed abstract photography at top 60% of viewport. Centered headline at 64px Inter weight 600, #FFFFFF, letter-spacing -0.13em, line-height 1.0. Subheadline at 18px Inter weight 400, #9C9C9D, line-height 1.4. Two side-by-side buttons below: #E6E6E6 background, #2F3031 text, 8px radius, 8px 12px padding; second button transparent, #9C9C9D text, 8px radius, 1px solid #454647 border.\n\n2. **Feature Card Grid**: 3-column grid with 15px gap. Each card: transparent background, border-radius 16px, padding 24px, border 1px solid #222225. Icon area 32px × 32px, icon color #6A6B6C. Card title at 20px Inter weight 600, #FFFFFF. Body text at 14px Inter weight 400, #6A6B6C, line-height 1.57.\n\n3. **Navigation Bar**: Fixed top, background #07080a, border-bottom 1px solid #1b1c1e, max-width 1200px centered, height 52px. Logo left (red flame icon #FF6363 + 'Raycast' text #FFFFFF Inter 14px weight 600). Center nav links at 14px Inter weight 400, #9C9C9D, gap 24px. Right: 'Log in' text link #9C9C9D + Download button #E6E6E6 bg, #2F3031 text, 8px radius, 8px 12px padding.\n\n4. **Dark Badge / Version Chip**: Background #1b1c1e, text #FFFFFF, border-radius 6px, padding 0px 6px, Inter 12px weight 500, letter-spacing +0.048px. Use for 'v1.104.14', 'macOS 13+', category labels.\n\n5. **Product Screenshot Section**: Centered heading at 32px Inter weight 600, #FFFFFF, letter-spacing -0.06em. Subheading 16px Inter weight 400, #9C9C9D, 8px below. Below: contained app window mockup at 70% page width, border-radius 12px, shadow rgba(0,0,0,0.28) 0px 1.189px 2.377px 0px, backdrop-filter blur(36px), border 1px solid rgba(255,255,255,0.1). Background of mockup #111214."},{"title":"Animation Philosophy","content":"Transitions default to `ease` (not ease-in-out) at 200ms for micro-interactions (color, opacity, box-shadow) and 400ms for transforms. The custom easing `cubic-bezier(0.23, 1, 0.32, 1)` (outQuint) is used for entrances — fast attack, long settle — giving UI elements a snap-in character rather than a float-in. Keyboard key elements animate `--key-bg-start-color` and `--key-bg-end-color` CSS custom properties at 200ms, enabling per-key gradient transitions without class toggling. Named animations `page_fade-in-up` use upward translate + opacity for section reveals. Motion is expressive but never decorative-slow — nothing exceeds 700ms."},{"title":"Gradient System","content":"Three gradient types serve distinct functions:\n\n1. **Section Atmosphere Radials** (blue, violet, steel variants): Positioned at top-center of each marketing section, covering ~85% width × ~75% height, fading from 0.7 opacity core to transparent edges. Color-codes sections: blue = AI/productivity, violet = Pro/premium, steel-gray = general features.\n\n2. **Product Feature Linear**: `linear-gradient(135deg, rgb(86,194,255) 0%, rgb(19,138,242) 100%)` used inside product UI illustration elements — a vivid sky-to-blue for chart/icon accents.\n\n3. **Hero Announcement Conic**: `conic-gradient(from 100deg at 113.455px 15px, rgba(0,0,0,0) 0deg, rgb(236,165,167) 20%, rgba(0,0,0,0) 25%)` — single-use rotating effect for the 'Introducing Glaze' announcement badge sweep animation.\n\nRule: All section backgrounds must use transparent-to-transparent radial gradients only. Never use opaque gradient fills as section backgrounds."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777459607676-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777459607676-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8-1777565414980-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8-1777565414980-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8-1777565414980-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8-1777565414980-preview-detail-poster.jpg"},"similarStyleIds":["90ce5883-bb24-4466-93f7-801cd617b0d1","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","c45b115b-dcb5-446d-8952-85aef740f8e4","8401cb26-91a3-4b46-941e-1c75790821eb","720c9806-2d70-4dd1-9a19-12efd71fc742","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","742b500d-3e10-4daa-bb89-d0d26272e5f6","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","733e6475-892a-4138-8835-bf40344df317","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","6323a42b-3b47-4774-92e4-15651a9ba2ac","c81d2be0-05b7-4755-8046-f2d19fbc448c","7b083729-e694-4b66-82a3-befb08451722","408a149c-702f-4442-99df-bea49d9c0d9b","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","4d4772a3-e1da-415f-a6d7-658dcefdcecd","8ce08850-085e-4954-a2f0-16acfb8dce23","c3ceca5c-d329-4559-b947-016172941ba2"],"exports":{"designMdUrl":"/references/refero/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8/design.md","tokensJsonUrl":"/references/refero/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8/tokens.json","tailwindV4Url":"/references/refero/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8/tailwind-v4.css","cssVariablesUrl":"/references/refero/3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8/tailwind-v4.css"}}