Raycast

Dark-native high-contrast palette with atmospheric accent spots — white-on-black editorial with stage-lighting gradient moments. No light mode detected in extract.

• Background dominant: #000000 (near-black) · #1b1c1e (card surface) · #2f3031 (elevated surface)
• Text: #ffffff (primary, 3448 freq) · #9c9c9d (secondary) · #6a6b6c (tertiary) · #434345 (borders/dividers)
• Brand-tier accents (recurring surface): #63a1ff sky-blue (25 measured uses) · #ff6363 coral / `--red-dark` (12 uses) · #2e6fcf navy-link (9 uses)
• Supporting one-off accents (1-5 measured uses each): #9ebed7 muted blue · #59d499 mint · #d72a2a scarlet · #452324 cabernet warm · #02193b deep navy panel
• Gradient-only stops (not in palette colors[] but resolved through atmospheric gradients): rgb(86, 194, 255) cerulean (#56c2ff), rgb(17, 18, 20) → rgb(12, 13, 15) panel ramp, rgb(18, 18, 18) → rgb(13, 13, 13) page atmosphere
• Gradient hero stops use rgba() with alpha — depth through transparency, not solid tones

radial-gradient(75% 75% at 50% 91.9%, rgb(18,18,18) 0px, rgb(13,13,13) 100%) — base page atmosphere
linear-gradient(135deg, rgb(86,194,255) 0%, rgb(19,138,242) 100%) — cerulean CTA / feature highlight
linear-gradient(137deg, rgb(17,18,20) 4.87%, rgb(12,13,15) 75.88%) — card surface gradient
radial-gradient(84.6% 73.49% at 50% 26.51%, rgba(4,63,150,0.7), rgba(6,18,37,0.25)) — hero stage light
radial-gradient(86.88% 75.47% at 50% 24.53%, rgba(82,48,145,0.7), rgba(26,11,51,0.14)) — purple section stage light
radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255,150,150,0.11), ...) — coral accent section
Total 12 gradients (mostly radial) — stage-lighting arrangement, not hero decoration

• Primary body + editorial: Inter (self-hosted Next.js /static/media/ *.woff2, weights 100-900 variable)
• Chrome + controls: SF Pro Text + SF Pro (macOS-native stack fallback for controls, menus)
• Code: JetBrains Mono + GeistMono (weights 100-900 / 100-800 variable)
• Next.js font optimization active: Inter Fallback + JetBrains Mono Fallback detected (local metric fonts)
• Weight ladder deployed: 400 · 500 · 600 · 700 (full operational range within 100-900)
• Body: 16px / 18.4px line-height / w400 (tight 1.15 ratio — editorial density)
• Display-5: 32px / 36.8px / w400 (large editorial display, not display-jumbo)
• Heading-large: 24px / 27.6px / w500 · SF Pro Text (chrome heading — macOS feel)
• Heading-medium: 23.75px / 27.3125px / w500 · SF Pro Text (half-pixel precision!)
• Small: 13-14px ladder with letterSpacing 0.1-0.3px tight tracking
• Strategy: mixed (self-hosted subset via Next.js /static/media/ + fallback metric-matched locals)

• Extract-derived scale: 2 · 4 · 6 · 8 · 10 · 12 · 15 · 20 · 22 · 24 · 29 · 32 (multi-base 2+5+7+10 mixed progression)
• CSS var spacing tokens (canonical): --spacing-none (0) · --spacing-0-5 (4) · --spacing-1 (8) · --spacing-1-5 (12) · --spacing-2 (16) · --spacing-2-5 (20) · --spacing-3 (24) · --spacing-4 (32) · --spacing-5 (40) · --spacing-6 (48) · --spacing-7 (56)
• Container ladder: 320 · 364 · 400 · 456 · 488 · 1204px — narrow reading columns + one wide feature band
• Gutters flex-driven, no fixed grid column system

• Page ground (#000000): flat, no elevation
• Card surface: gradient fill (137deg 17,18,20 → 12,13,15) + inset 1px rgba(255,255,255,0.05) top highlight
• Elevated card: rgba(0,0,0,0.28) 0px 1.189px 2.377px 0px — soft sub-pixel shadow
• Keyboard-key primitive: 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 — triple-stack key-cap shadow
• Elevated button: rgba(255,255,255,0.1) 0px 1px 0px 0px inset + focus ring rgba(0,0,0,0.5) 0px 0px 0px 2px
• Feature chip (warm glow): rgba(215,201,175,0.05) 0px 0px 20px 5px — cream backlight

• Radii small (max 9px) — editorial precision over rounded-pill
• CSS var canonical ladder: --rounding-none (0) · --rounding-xs (4) · --rounding-sm (6) · --rounding-normal (8) · --rounding-md (12) · --rounding-lg (16) · --rounding-xl (20) · --rounding-xxl (24) · --rounding-full (100%)
• Half-pixel 2.5px allowed for precision keyboard-key chrome
• Buttons: 6-8px radius rectangular
• Cards: 12-16px radius (--rounding-md to --rounding-lg)

• CTA button (primary — cerulean gradient)

  background

  linear-gradient(135deg, #56c2ff 0%, rgb(19,138,242) 100%)

  color

  #ffffff

  padding

  10px 20px

  fontSize

  14px

  fontWeight

  500

  fontFamily

  Inter

  borderRadius

  8px

  boxShadow

  rgba(255,255,255,0.1) 0px 1px 0px 0px inset, rgba(0,0,0,0.5) 0px 0px 0px 2px

  transition

  opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)

  Tailwind

  Copy

  inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-br from-[#56c2ff] to-[rgb(19,138,242)] rounded-lg shadow-[rgba(255,255,255,0.1)_0px_1px_0px_0px_inset] transition-all duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90

• Keyboard key chip (skeuomorphic)

  background

  linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%)

  color

  #ffffff

  padding

  4px 8px

  minWidth

  24px

  fontSize

  13px

  fontWeight

  500

  fontFamily

  JetBrains Mono

  borderRadius

  4px

  boxShadow

  rgba(255,255,255,0.05) 0px 1px 0px 0px inset, rgba(0,0,0,0.4) 0px 1.5px 0.5px 2.5px, rgb(0,0,0) 0px 0px 0.5px 1px

  Tailwind

  Copy

  inline-flex items-center justify-center min-w-[24px] px-2 py-1 text-[13px] font-medium font-mono text-white bg-gradient-to-br from-[#111214] to-[#0c0d0f] rounded-[4px] shadow-[rgba(255,255,255,0.05)_0px_1px_0px_0px_inset,rgba(0,0,0,0.4)_0px_1.5px_0.5px_2.5px]

• Card surface (atmospheric dark)

  background

  linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%)

  color

  #ffffff

  padding

  32px

  border

  1px solid #1b1c1e

  borderRadius

  16px

  boxShadow

  rgb(27,28,30) 0px 0px 0px 1px, rgb(7,8,10) 0px 0px 0px 1px inset

  Tailwind

  Copy

  relative p-8 bg-gradient-to-br from-[#111214] to-[#0c0d0f] text-white border border-[#1b1c1e] rounded-2xl shadow-[rgb(27,28,30)_0px_0px_0px_1px,rgb(7,8,10)_0px_0px_0px_1px_inset]

• Heading display (SF Pro Text chrome)

  fontFamily

  SF Pro Text, Inter

  fontSize

  24px

  lineHeight

  27.6px

  fontWeight

  500

  letterSpacing

  0.2px

  color

  #ffffff

  Tailwind

  Copy

  font-[SF_Pro_Text,Inter,system-ui] text-[24px] leading-[27.6px] font-medium tracking-[0.2px] text-white

• link-inline

  color

  #ffffff

  textDecoration

  underline

  textDecorationColor

  rgba(255,255,255,0.35)

  textDecorationThickness

  1px

  textUnderlineOffset

  3px

  transition

  text-decoration-color 200ms cubic-bezier(0.23, 1, 0.32, 1)

  Tailwind

  Copy

  text-white underline decoration-white/35 decoration-[1px] underline-offset-[3px] transition-[text-decoration-color] duration-[200ms] ease-[cubic-bezier(0.23,1,0.32,1)] hover:decoration-white focus-visible:outline-none focus-visible:decoration-white

• Primary easing: cubic-bezier(0.23, 1, 0.32, 1) (ease-out-expo) carries most micro-interactions.
• Supporting easings: cubic-bezier(0.215, 0.61, 0.355, 1) (ease-out-cubic) and cubic-bezier(0.165, 0.84, 0.44, 1) (ease-out-quart) for slightly different acceleration profiles; CSS keyword ease and ease-in-out for legacy transitions.
• Five durations captured: 0.2s (hover), 0.3s (state shift), 0.4s (compound transitions), 0.7s (atmospheric beat), 1.5s (long ambient reveal).
• Multi-property transitions allowed (opacity + transform + box-shadow + color chained).
• Custom CSS property animations (--key-bg-*) for advanced state transitions.

• Hover: opacity + transform chained at 200-300ms ease-out-expo (buttery snap)
• Focus: inset shadow + 2px outer ring preserved (accessibility) enhanced with cerulean tint on CTAs
• Key-cap press: compound transition on --key-bg-start-color / --key-bg-end-color (advanced CSS property animation)
• Card hover: box-shadow elevation shift + subtle transform lift at 300ms ease-out-expo

sm=375 (iPhone base), md=720 (tablet landscape — tighter than Tailwind 768), lg=900 (desktop-small — tighter than 1024), xl=1200 (desktop — tighter than 1280), 2xl=1536. Tight breakpoints compress mid-viewport layouts earlier than the Tailwind default ladder.

• Below 375px: single-column stack, key-caps drop to full-width inline chips
• 375-720px: 2-column small chip grids emerge, hero still single-column
• 720-900px: primary 2-column hero layout activates, feature rows stack
• 900-1200px: 3-column comparison + feature grids, hero composition widens
• Past 1200px: 1204px max content band, margins absorb further width

• Text #ffffff on #000000 ≈ 19.1:1 — AAA far exceeds (optical brilliance intentional)
• Secondary #9c9c9d on #000000 ≈ 7.2:1 — AAA for 14-16px body
• Tertiary #6a6b6c on #000000 ≈ 4.1:1 — AA for 18px+ or bold
• CTA cerulean gradient (rgb(19,138,242) end stop) vs white ≈ 4.6:1 — AA compliant at 14px weight 500
• Focus ring 2px outer high-contrast ring preserved on all interactive elements
• Font strategy display: swap — prevents FOIT, metric-matched Inter Fallback + JetBrains Mono Fallback minimize CLS
• Sub-pixel shadow effects supplement but don't replace focus visibility

Self-hosted Inter + JetBrains Mono + GeistMono via Next.js font pipeline (subset-optimized woff2 with display swap). SF Pro Text/Pro declared without self-host — relies on native macOS rendering + Inter Fallback elsewhere. Eighty CSS variables exposed as the primary design-token surface (--rounding-*, --spacing-*, color tokens, shadow tokens). Atmospheric gradients as CSS property strings (linear + radial, twelve total). Transitions declared inline via CSS transition shorthand with custom easing. Key-cap state animation uses custom CSS property transitions (--key-bg-start-color, --key-bg-end-color).

• Self-host Inter + JetBrains Mono subsets via Next.js font optimization (generates metric-matched fallbacks)
• Declare SF Pro Text / SF Pro in font-family stack without self-host — Apple devices render native, others fall back to Inter
• Expose design tokens as CSS custom properties with semantic naming (--rounding-xs through --rounding-full, --spacing-none through --spacing-7)
• Use CSS custom property transitions for advanced state animations (--key-bg-start-color shift on key press)
• Radial gradients arranged as stage lighting per section — different focal point + color temperature per content zone
• Skeuomorphic shadow composition: inset white highlight top + outset dark depth bottom (triple-stack for key caps)

• Do commit to dark-native with no light-mode parity unless your product warrants it
• Do pair Inter and SF Pro Text as complementary voices (editorial + chrome) when macOS-fluency is a brand statement
• Do expose design tokens as CSS variables with semantic naming (--rounding-*, --spacing-*)
• Do use radial gradients as stage lighting per section, not as hero decoration
• Do calibrate shadow offsets at sub-pixel scale (0.5px, 1.5px, 2.5px) for precision chrome elements
• Do anchor micro-interactions on the primary cubic-bezier(0.23, 1, 0.32, 1) ease-out-expo; reach for the supporting cubic-bezier(0.215, 0.61, 0.355, 1) and cubic-bezier(0.165, 0.84, 0.44, 1) only when the acceleration profile genuinely needs to differ.

• Don't port macOS visual vocabulary if your product isn't keyboard-native — the aesthetic requires product alignment
• Don't expose eighty design tokens if you can't maintain them — undisciplined token sprawl destroys credibility fast
• Don't pair Inter with SF Pro without verifying x-height parity — other pairings will look like a style conflict, not a duet
• Don't use skeuomorphic key-cap shadows for non-keyboard elements — reads as retro instead of native
• Don't invent a sixth easing beyond the captured set {cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.165, 0.84, 0.44, 1), ease, ease-in-out} — the constraint is the feature.
• Don't copy the 1204px max-width without Raycast's narrow-column content discipline — wide-only layouts look empty

• Palette dark-only: no light-mode parity detected or needed
• Typography dual-family constraint: Inter + SF Pro Text, code layer JetBrains Mono/GeistMono
• Radii capped at 9px + full (100%) — no mid-size pill buttons
• Borders solid-only (dashed not in system)
• Easing palette: cubic-bezier(0.23, 1, 0.32, 1) primary plus four supporting curves (cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.165, 0.84, 0.44, 1), ease, ease-in-out)
• Containers narrow-dominant (320-488) + one wide (1204) — no mid-width defaults
• CSS variables are the canonical token surface (not utility class abstractions)

• Font families grep: Inter + JetBrains Mono + GeistMono present in @font-face declarations; SF Pro Text + SF Pro in font-family stack
• CSS variable count ≥ 80 — --rounding-* (9 names) + --spacing-* (11 names) + color/shadow tokens
• Gradient count: exactly 12 (radial-dominant, linear secondary)
• Hex palette check: #ffffff · #000000 · #1b1c1e · #2f3031 · #434345 · #6a6b6c · #9c9c9d · #63a1ff (brand-tier) · #ff6363 (brand-tier) · #2e6fcf (brand-tier) · #02193b · gradient stops rgb(86, 194, 255) and rgb(19, 138, 242)
• Breakpoint values: 375 / 720 / 900 / 1200 / 1536 (NOT the Tailwind default 640/768/1024/1280)
• Motion primary easing: cubic-bezier(0.23, 1, 0.32, 1) appears ≥ 6 times across transitions; supporting cubic-bezier(0.215, 0.61, 0.355, 1) and cubic-bezier(0.165, 0.84, 0.44, 1) appear in slower atmospheric beats.
• Durations: 0.2 / 0.3 / 0.4 / 0.7 / 1.5 s (NOT 150 ms or 500 ms — those values are not in the captured set)
• Border style: solid-only (no dashed usage)
• Shadow pattern: at least one triple-stack key-cap composition (inset highlight + outset depth + sub-pixel detail)
• Radii include half-pixel precision (2.5px detected in scale)