DESIGN REFERENCE
A precise foundation.
Room for expression.
Exact public tokens, separate local semantic rules, and the relationships that turn individual values into a coherent interface.
Public evidence18 Sep 2026Observed sources. Explicit local contracts.
Color and semantic roles
--grey-900
#07080a--grey-400
#434345--grey-200
#9c9c9d--grey-50
#e6e6e6--color-yellow
#ffc533--grey-500
#2f3031--grey-300
#6a6b6c--red-dark
#ff6363--color-red
#ff6161--blue-dark
#56c2ff--color-green
#59d499--color-blue
#57c1ff--grey-800
#0c0d0f--grey-700
#111214--grey-100
#cdcece--grey-600
#1b1c1emeasuredComputed public variables; source values retained · Source and evidence
| Role | Local token | Rule |
|---|---|---|
| Canvas | --grey-900 · #07080a | Marketing shell and documentation background. |
| Nested surface | --grey-800 / --grey-700 | Keep depth subtle; use a border or shadow to establish the edge. |
| Primary text | --grey-50 / #fff | Headings and task-critical content. |
| Supporting text | --grey-200 · #9c9c9d | Local readable metadata. Original grey-300 is retained in evidence but not used for essential small text. |
| Accent | --red-dark · #ff6363 | Brand and a few selected highlights; never the only state cue. |
| Focus | --focus · #56c2ff | Original local accessibility addition: 2px outline with 4px offset. |
| Status | Green, yellow, red plus text | Pair color with a label/icon; errors remain understandable in forced colors. |
Spacing has an owner
--spacing-none
0px--spacing-0-5
4px--spacing-1
8px--spacing-1-5
12px--spacing-2
16px--spacing-2-5
20px--spacing-3
24px--spacing-4
32px--spacing-5
40px--spacing-6
48px--spacing-7
56px--spacing-8
64px--spacing-9
80px--spacing-10
96px--spacing-11
112px--spacing-12
168px--spacing-13
224pxA measured11.984px text gap is not automatically a12px spacing token. Parent padding, flex gap, line boxes, glyph side bearings and transforms are separate contributors. The geometry ledger keeps their original precision.
| Relationship | Owner | Local contract |
|---|---|---|
| Page → navigation | Fixed shell wrapper | 16px top and side inset; max 1204px. |
| Navigation content | Navigation box | 32px horizontal padding desktop;16px under880px. |
| Icon → button label | Button flex container | 8px gap;16px icon; no label margin. |
| Field → helper / error | Field grid | 8px row gap; text line height 18px. |
| Card siblings | Collection grid | 24px desktop,16px medium; one column at narrow widths. |
| Paragraphs and sections | Prose parent / section | Reading paragraphs20px; reference section 72px. Both reconstructed reading rules. |
Shape, light, and layers
Corner system
4
6
8
12
16
20
24
Controls8px; panels12–16px; hero and feature compositions20–24px. Fully rounded pills remain separate.
Elevation
The button uses a small outer glow and opposing inset highlights. Navigation adds a5px backdrop blur, a1px highlight, and a translucent dark gradient.
--button-shadow: 0 0 0 2px rgba(0,0,0,.5),
0 0 14px #ffffff30,
inset 0 -1px .4px #0003,
inset 0 1px .4px #fff;
/* Reconstructed reference layer ownership */
--layer-base: 0;
--layer-nav: 20;
--layer-popover: 30;
--layer-modal: 50;
--layer-toast: 70;Native dialog top-layer behavior takes precedence over numeric z-index. The values above document ownership in the reference, not private Raycast source.
Layout, grids, and breakpoints
| Constraint | Value | When / why |
|---|---|---|
| Large container | 1280px source variable | Wide product artwork where the source family uses it. |
| Main container | 1204px | Navigation and primary marketing grid. |
| Small container | 1064px | Dense story and feature sections. |
| Reading container | 746px | Long-form reference prose. |
| Home hero text | 818px wrapper /540px heading | Desktop64px heading,70.4px line height. |
| Type breakpoints | 480px /720px | Home h1:36→48→64px. |
| Navigation breakpoint | 880px | 58px mobile→76px desktop. |
| Reference grid | 720px /880px /1200px | Original addition supporting large reference inventories. |
Motion and preferences
| Pattern | Local rule | Reduced motion / failure |
|---|---|---|
| Control hover | 200ms color / border; no layout change | 0.001ms; focus remains visible. |
| Button press | 100ms; scale .98 | No persistent transform; state is also semantic. |
| Card emphasis | 200ms; translateY(−3px) | No translation under reduced motion. |
| Loading spinner | 0.8s linear rotation, only while pending | Static icon plus aria-busy label. |
| Skeleton | 1.8s shimmer only for local demonstration | Static filled blocks; loading text remains. |
| Hero artwork | Source WebGL frame captured at a fixed time | Static image in reference; no continuous render, audio or network. |
| Media | User activation; native controls; preload none | No autoplay. Caption and original source remain available. |
Source animations are time-dependent. A frozen frame establishes composition, not the private timing curve. The retained source contains a --spring-1 easing variable; the reference does not claim that every product animation uses it.
All observed custom properties
--Base-Black#000--Base-White#fff--background#07080a--blue-dark#56c2ff--color-bg#07080a--color-bg-100#101111--color-bg-200#18191a--color-bg-300#313133--color-bg-400#494b4d--color-blue#57c1ff--color-blue-transparent#57c1ff26--color-border#242728--color-button-bg#ffffffd0--color-button-bg-hover#fff--color-button-fg#18191a--color-fg#f4f4f6--color-fg-200#c2c7ca--color-fg-300#78787c--color-fg-400#5e6366--color-green#59d499--color-green-transparent#59d49926--color-red#ff6161--color-red-transparent#ff616126--color-yellow#ffc533--color-yellow-transparent#ffc53326--container-lg-width1280px--container-sm-width1064px--container-width1204px--container-xs-width746px--font-color-rgb255, 255, 255--font-geist-mono"GeistMono", ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace--font-inter"Inter", "Inter Fallback"--font-jetbrains-mono"JetBrains Mono", "JetBrains Mono Fallback"--grey-100#cdcece--grey-200#9c9c9d--grey-300#6a6b6c--grey-400#434345--grey-50#e6e6e6--grey-500#2f3031--grey-600#1b1c1e--grey-700#111214--grey-800#0c0d0f--grey-900#07080a--grid-gap32px--key-bg-end-colorrgb(13, 13, 13)--key-bg-start-colorrgb(18, 18, 18)--lightningcss-dark(empty sentinel)--lightningcss-light(empty sentinel)--lines-color-rgb255, 255, 255--main-font"Inter", "Inter Fallback", sans-serif--monospace-font"JetBrains Mono", "JetBrains Mono Fallback", Menlo, Monaco, Courier, monospace--navbar-container-padding-top16px--navbar-height76px--navbar-total-spacingcalc(76px + (2 * 16px))--navbar-width1204px--r20deg--radius-md6px--red-dark#ff6363--removed-body-scroll-bar-size0px--reverse-background#fff--reverse-font-color-rgb0, 0, 0--rounding-full100%--rounding-lg16px--rounding-md12px--rounding-none0px--rounding-normal8px--rounding-sm6px--rounding-xl20px--rounding-xs4px--rounding-xxl24px--spacing-0-54px--spacing-18px--spacing-1-512px--spacing-1096px--spacing-11112px--spacing-12168px--spacing-13224px--spacing-216px--spacing-2-520px--spacing-324px--spacing-432px--spacing-540px--spacing-648px--spacing-756px--spacing-864px--spacing-980px--spacing-none0px--spring-1linear(0 0%, .005927 1%, .022466 2%, .047872 3%, .080554 4%, .119068 5%, .162116 6%, .208536 7.0%, .2573 8%, .3075 9%, .358346 10%, .409157 11%, .45935 12%, .508438 13%, .556014 14.0%, .601751 15%, .645389 16%, .686733 17%, .72564 18%, .762019 19%, .795818 20%, .827026 21%, .855662 22%, .881772 23%, .905423 24%, .926704 25%, .945714 26%, .962568 27%, .977386 28.0%, .990295 29.0%, 1.00143 30%, 1.01091 31%, 1.01888 32%, 1.02547 33%, 1.03079 34%, 1.03498 35%, 1.03816 36%, 1.04042 37%, 1.04189 38%, 1.04266 39%, 1.04283 40%, 1.04247 41%, 1.04168 42%, 1.04052 43%, 1.03907 44%, 1.03737 45%, 1.03549 46%, 1.03348 47%, 1.03138 48%, 1.02922 49%, 1.02704 50%, 1.02486 51%, 1.02272 52%, 1.02063 53%, 1.01861 54%, 1.01667 55.0%, 1.01482 56.0%, 1.01307 57.0%, 1.01142 58.0%, 1.00989 59%, 1.00846 60%, 1.00715 61%, 1.00594 62%, 1.00485 63%, 1.00386 64%, 1.00296 65%, 1.00217 66%, 1.00147 67%, 1.00085 68%, 1.00031 69%, .999849 70%, .999457 71%, .999128 72%, .998858 73%, .99864 74%, .99847 75%, .998342 76%, .998253 77%, .998196 78%, .998169 79%, .998167 80%, .998186 81%, .998224 82%, .998276 83%, .998341 84%, .998415 85%, .998497 86%, .998584 87%, .998675 88%, .998768 89%, .998861 90%, .998954 91%, .999045 92%, .999134 93%, .99922 94%, .999303 95%, .999381 96%, .999455 97%, .999525 98%, .999589 99%, .99965 100%)--x0px