Skip to content
raycast.com logo

Raycast

raycast.com

“Raycast embodies a hyper-efficient, developer-centric aesthetic that prioritizes speed and precision over decoration. The brand feels like a high-performance instrument: clean, dark-mode native, and meticulously crafted to reduce cognitive load while maximizing keyboard-driven workflow.”

minimalist
developer-first
high-performance
keyboard-native
precision
utilitarian
modern

Color Palette

Colors

Light Mode

#111214

primary

#ffffff

background

#242728

border

#9c9c9d

muted

#56c2ff

accent

Dark Mode

#07080a

background

#07080a

surface

#ffffff

text

#e6e6e6

secondaryText

#e6e6e6

muted

Typography

Fonts

Inter

body
400
500
self-hosted

Inter Fallback, sans-serif

Inter

heading
400
500
600
self-hosted

Inter Fallback, sans-serif

GeistMono

body
400
self-hosted

ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

Components

Design System

Download
secondary
8px
#e6e6e6#2f3031
outline
outline
86px
#6a6b6c
card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.05) 0px 0px 20px 3px, rgba(7, 13, 79, 0.05) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.1) 0px 0px 20px 3px, rgba(85, 0, 98, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(46, 212, 105, 0.05) 0px 0px 20px 3px, rgba(46, 212, 105, 0.05) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(3, 122, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(3, 30, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(3, 15, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(0, 0, 0, 0.5) 0px 30px 50px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(79, 7, 59, 0.1) 0px 0px 20px 3px, rgba(85, 0, 98, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(0, 0, 0, 0.5) 0px 30px 50px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.1) 0px 0px 20px 3px, rgba(85, 0, 98, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(3, 15, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(51, 3, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.1) 0px 0px 20px 3px, rgba(7, 40, 79, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(3, 23, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset

card
box-shadow

rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(154, 170, 255, 0.05) 0px 2px 40px 10px, rgba(154, 170, 255, 0.05) 0px 0px 16px -7px

card
box-shadow

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

card
box-shadow

rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px

button
box-shadow

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

button
box-shadow

rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px

button
box-shadow

rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset

button
box-shadow

rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px

gradient

conic-gradient(from calc(100deg) at 160.672px 15px, rgba(0, 0, 0, 0) 0deg, rgb(2...

Voice & Tone

Personality

Visual Energy

7/10

Design Era

contemporary-minimal

Emotional Tone

focused-competent

Target Audience

Software engineers, power users, and productivity enthusiasts who value keyboard shortcuts, native performance, and clean UI over flashy marketing.

Comparable Brands

Linear
Vercel
Notion
Arc Browser

Brand Rules

Dos & Don'ts

Do

  • Use Inter font for all body and heading text; apply weights 400, 500, and 600 for headings, and 400, 500 for body.
  • Format all headings in sentence-case (e.g., 'Your shortcut to everything') and maintain a body line-height of 18.4px.
  • Implement dark mode as the primary visual context using background #07080a and text #ffffff; reserve light mode (#ffffff background) for specific contrast needs.
  • Style secondary buttons with #e6e6e6 background, #2f3031 text, 8px border-radius, and a distinct 2px solid border in #2f3031.
  • Use GeisMono for any code snippets, technical data, or terminal-style elements to reinforce the developer-first identity.
  • Apply subtle, multi-layered shadows to cards: a top inset highlight of rgba(255, 255, 255, 0.1) 0px 1px 0px 0px and a bottom shadow of rgba(7, 13, 79, 0.05) 0px 0px 20px.
  • Utilize the accent color #56c2ff sparingly for interactive states, active indicators, or key highlights against the dark background.
  • Use a base spacing unit of 2px for consistent padding and margin calculations across components.

Don't

  • Do not use title case for headings; strictly adhere to sentence-case conventions.
  • Avoid heavy, colorful gradients; if used, limit to subtle conic gradients with low opacity and specific angles (e.g., 100deg) for background depth.
  • Do not use serif fonts; the brand relies exclusively on Inter and GeisMono for a technical, modern feel.
  • Avoid excessive emoji usage; keep copy professional and matter-of-fact with rare or no emojis.
  • Do not use large border radii on buttons; keep buttons to 8px or 12px, reserving 1000px (pill) only for specific outline elements if necessary.
  • Avoid bright white backgrounds in dark mode contexts; use #07080a for backgrounds to maintain the 'native app' aesthetic.
  • Do not use vague action verbs in CTAs; use direct, platform-specific verbs (e.g., 'Download', 'Open') without exclamation marks.
  • Avoid flat, single-shadow designs; cards should have a subtle top-light inset effect to create a sense of premium material depth.

Design Assets

Visual Elements

Design asset
png64×64
Design asset
png384×384
Design asset
png64×64
Design asset
png384×384
Design asset
png64×64
Design asset
png384×384
Design asset
png64×64
Design asset
png384×384
Design asset
png64×64
Design asset
png384×384

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/raycast.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free