designlang
Brand guidelines #9ecbff

June 25, 2026

sentry.io

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

Page intent
landing
System grade
B 81/100
Tokens
29 colours · 11 sizes
Generated
designlang
Chapter 00

Essence

sentry.io is an Explorer brand — cool, modern, adventurous and independent — anchored on #150f23 and Rubik, mixed motion.

Explorer archetype · 75% fit · vs Magician

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 27% confidence
Material language
flat
Imagery style
photography
Component library
tailwindcss
Stack
unknown · Tailwind
Voice tone
neutral
Chapter 03

Colour

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

Primary #150F23
RGB
21, 15, 35
HSL
258°, 40%, 10%
Secondary #9ECBFF
RGB
158, 203, 255
HSL
212°, 100%, 81%
Accent #2D2340
RGB
45, 35, 64
HSL
261°, 29%, 19%

Neutrals

#FFFFFF
#D4D4D4
#E1E4E8
#6A737D
#000000
#1A1A1A
#EFEFEF
#584674
#C1C1C1

Full palette

#FFFFFF
#D4D4D4
#E1E4E8
#F97583
#9ECBFF
#6A5FC1
#B392F0
#150F23
#79B8FF
#6A737D
#000000
#4E2A9A
#85E89D
#1F1633
#FD44B0
#C2EF4E
#DBEDFF
#1A1A1A
#EFEFEF
#7553FF
#FFAB70
#362D59
#090D16
#2D2340
#422082
#FDAEB7
#79628C
#584674

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

Chapter 04

Typography

4 families · 11 sizes · 4 weights

Display
Rubik
Body
Monaco
Weights
400, 500, 700, 600

Specimen

Solutions
Products

Scale

StepSizeSample
t00 88px Solutions
t01 60px Solutions
t02 30px Solutions
t03 27px Solutions
t04 24px Solutions
t05 20px Solutions
t06 16px Solutions
t07 15px Solutions
t08 14px Solutions
t09 12px Solutions
Chapter 05

Spacing

Base 2px · 13 steps captured

Rhythm

2px
16px
20px
24px
32px
35px
40px
44px
56px
64px
Chapter 06

Shape

6 radii · 6 elevation tiers

Border radii

2px
6px
10px
13px
16px
50px

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
mixedFillStroke
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: mixed · 5 durations · 3 easings

Duration scale

150ms
200ms
300ms
600ms
800ms

Easings

Chapter 09

Components

tailwindcss · 1 component patterns captured

Mocks

Card

Built from these tokens

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

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
primary
Sizes
xl
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
0 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: #150f23;
  --font-display: "Rubik";
  --space-base: 2px;
  --radius-md: 6px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#150f23' },
      fontFamily: { display: ['Rubik', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '6px' },
    },
  },
};

Run npx designlang pack sentry.io 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.