---
source: gallery_raycast
---

# raycast.com — Atmosphere

> Minimalist dark-mode productivity tool with monochrome black-and-white palette, bold sans-serif type, and a confident, snappy voice.

> Extracted by [Coherent](https://getcoherent.design) from `https://raycast.com` on 2026-07-24 03:49:04 UTC.
> Mode: `dark` · captured in 9774ms · density: `compact`

<!-- coherent-extract: v1 -->

## Hero

**Detected via:** `h1` (64px)

> Your shortcut to everything.

## Color

| Token | Hex | Role | Usage |
|-------|-----|------|-------|
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | body text |
| `#9c9c9d` | ![#9c9c9d](https://placehold.co/16x16/9c9c9d/9c9c9d.png) | neutral | button-secondary text |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | input background |
| `#07080a` | ![#07080a](https://placehold.co/16x16/07080a/07080a.png) | brand | body background |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | a text |
| `#9c9c9d` | ![#9c9c9d](https://placehold.co/16x16/9c9c9d/9c9c9d.png) | neutral | button-primary text |

### Backgrounds

- **page** — `#07080a`

## Typography

**Font families**

- Inter
- Inter Fallback
- sans-serif
- GeistMono
- ui-monospace
- SFMono-Regular

**Scale**

| Role | Size | Weight | Line height | Family |
|------|------|--------|-------------|--------|
| display | `64px` | 600 | `70.4px` | Inter |
| body | `32px` | 400 | `36.8px` | Inter |
| small | `24px` | 500 | `38.4px` | Inter |

## Spacing

Scale: `8px` · `12px` · `16px` · `40px`

## Radius

Scale: `0px` · `3px` · `4px` · `5px` · `6px` · `8px` · `11px` · `12px` · `16px` · `19px` · `20px` · `31px`

## Shadows

- `rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset`
- `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset`
- `rgba(245, 48, 107, 0.1) 0px 0px 20px 0px`
- `rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
- `rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset`
- `rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
- `rgba(0, 0, 0, 0.2) 0px 0px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 4px 3px 0px, rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0) 0px 12px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- `rgba(0, 0, 0, 0.03) 0px 8.077px 3.462px 0px, rgba(0, 0, 0, 0.25) 0px 4.615px 4.615px 0px, rgba(255, 255, 255, 0.19) 0px 1.154px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 6px 0px`
- `rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- `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, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
- `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`

## Motion

| Duration | Easing | Property |
|----------|--------|----------|
| `200ms` | `ease` | color |
| `300ms` | `ease` | color |
| `300ms` | `ease` | border |
| `200ms` | `ease` | transform |
| `300ms` | `ease` | height |
| `300ms` | `ease` | transform |
| `200ms` | `ease-in-out` | all |
| `200ms` | `ease` | background-image |
| `200ms` | `ease` | background-color |
| `200ms` | `ease-in-out` | box-shadow |
| `100ms` | `ease-in-out` | transform |
| `200ms` | `ease` | all |
| `300ms` | `ease` | all |
| `400ms` | `cubic-bezier(0.23, 1, 0.32, 1)` | opacity |

## Gradients

- **linear** — `linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.9) 75.88%)`
- **conic** — `conic-gradient(from -80deg at 0px 15px, rgba(0, 0, 0, 0) 0deg, rgb(236, 165, 167) 20%, rgba(0, 0, 0, 0) 25%)`
- **radial** — `radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255, 150, 150, 0.11) 0px, rgba(222, 226, 255, 0.08) 45.83%, rgba(241, 242, 255, 0.02) 100%)`
- **linear** — `linear-gradient(rgb(255, 99, 99), rgb(215, 42, 42))`
- **linear** — `linear-gradient(135deg, rgb(86, 194, 255) 0%, rgb(19, 138, 242) 100%)`
- **linear** — `linear-gradient(181deg, rgba(0, 0, 0, 0.1) 4.5%, rgba(255, 255, 255, 0.03) 99.51%)`
- **linear** — `linear-gradient(137deg, rgb(17, 18, 20) 4.87%, rgb(12, 13, 15) 75.88%)`
- **radial** — `radial-gradient(79.21% 79.21% at 42.35% 0px, rgb(120, 120, 120) 0px, rgb(40, 40, 40) 100%)`
- **radial** — `radial-gradient(1139.98% 138.18% at 0px 0px, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0) 100%)`
- **linear** — `linear-gradient(rgba(0, 0, 0, 0), rgb(7, 8, 10) 50%)`

## Breakpoints

Strategy: `mobile-first`

| Name | Min/Max width |
|------|---------------|
| sm | `375px` |
| md | `520px` |
| lg | `784px` |
| xl | `1050px` |

## Container widths

- **h1** (unspecified) — `540px`

## Borders

- `1px solid #ffffff`
- `1px solid #ffffff`
- `1px solid #ffffff`
- `1px solid #ffffff`
- `2px solid #ffffff`
- `4px solid #ff6363`
- `1px solid rgba(0, 0, 0, 0)`
- `1px solid #ffffff`
- `1px solid #8e8c90`
- `1px solid #ffffff`
- `1px solid #434345`
- `1px solid #2f3031`

## Z-index scale

- **z-1** — `1`
- **z-2** — `2`
- **z-3** — `3`

## Glassmorphism

`backdrop-filter: blur(2px)`

## Voice

Tone: `confident` · `minimal` · `technical` · `snappy`

- *(hero)* "Your shortcut to everything."
- *(meta-description)* "A collection of powerful productivity tools all within an extendable launcher."
- *(body)* "Take shortcuts, not detours."
- *(body)* "Fast, ergonomic and reliable."
- *(cta)* "Install via homebrew or winget"


---
Captured deterministically from computed CSS. Numerical fields (color, motion, spacing) reflect the live site at extraction time.