designlang
Brand guidelines #ff6363

June 25, 2026

raycast.com

A reading of the visual language at https://raycast.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
C 75/100
Tokens
18 colours · 14 sizes
Generated
designlang
Chapter 00

Essence

raycast.com is a Jester brand — warm, kinetic, bold, modern and fun — anchored on #ff6363 and Inter, responsive motion.

Jester archetype · 81% fit · vs Creator

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
photography
Component library
unknown
Stack
next
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 9 neutrals · 18 total

Primary #FF6363
RGB
255, 99, 99
HSL
0°, 100%, 69%
Secondary #8CD6FF
RGB
140, 214, 255
HSL
201°, 100%, 77%
Accent #56C2FF
RGB
86, 194, 255
HSL
202°, 100%, 67%

Neutrals

#FFFFFF
#6A6B6C
#9C9C9D
#434345
#E6E6E6
#2F3031
#1B1C1E
#8E8C90
#111214

Full palette

#FFFFFF
#6A6B6C
#9C9C9D
#434345
#E6E6E6
#2F3031
#08090C
#1B1C1E
#452324
#FF6363
#8E8C90
#9EBED7
#8CD6FF
#59D499
#56C2FF
#FFC531
#111214
#D72A2A

WCAG 100% · 10 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

4 families · 14 sizes · 5 weights

Display
Inter
Body
SF Pro Text
Weights
400, 500, 700, 600, 300

Specimen

Quick brown fox jumps over the lazy dog.
AaBbCc 0123456789 ?!&

Scale

StepSizeSample
t00 64px Quick brown fox jumps over t
t01 56px Quick brown fox jumps over t
t02 32px Quick brown fox jumps over t
t03 24px Quick brown fox jumps over t
t04 23.75px Quick brown fox jumps over t
t05 22px Quick brown fox jumps over t
t06 20px Quick brown fox jumps over t
t07 18px Quick brown fox jumps over t
t08 16px Quick brown fox jumps over t
t09 14px Quick brown fox jumps over t
Chapter 05

Spacing

Base 2px · 22 steps captured

Rhythm

1px
45px
56px
64px
72px
80px
96px
102px
120px
128px
Chapter 06

Shape

14 radii · 6 elevation tiers

Border radii

2px
5px
8px
11px
16px
19px

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
roundedCaps
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: responsive · 6 durations · 4 easings

Duration scale

100ms
200ms
300ms
500ms
850ms
1500ms

Easings

Chapter 09

Components

unknown · 2 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

card

Slots
heading, description, media, footer
Variants
—
Sizes
—

button

Slots
label, icon, badge
Variants
—
Sizes
—
Chapter 10

Voice

neutral · — · —

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
10 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #ff6363;
  --font-display: "Inter";
  --space-base: 2px;
  --radius-md: 5px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#ff6363' },
      fontFamily: { display: ['Inter', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '5px' },
    },
  },
};

Run npx designlang pack raycast.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.