#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.
Essence
sentry.io is an Explorer brand — cool, modern, adventurous and independent — anchored on #150f23 and Rubik, mixed motion.
Adjectives
- cool
- modern
- adventurous
- independent
Personality axes
Evidence
- #150f23 at 258° reads cool → cool (warmth -0.67)
- sans display face, flat material → modern (era +0.3)
- Axis fingerprint nearest the Explorer archetype (75% fit, vs Magician).
About
Logo
Colour
1 primary · 1 secondary · 1 accent · 9 neutrals · 29 total
Neutrals
#FFFFFF#D4D4D4#E1E4E8#6A737D#000000#1A1A1A#EFEFEF#584674#C1C1C1Full 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#584674WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.
Typography
4 families · 11 sizes · 4 weights
Specimen
Scale
| Step | Size | Sample |
|---|---|---|
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 |
Spacing
Base 2px · 13 steps captured
Rhythm
2px
16px
20px
24px
32px
35px
40px
44px
56px
64px
Shape
6 radii · 6 elevation tiers
Border radii
2px
6px
10px
13px
16px
50px
Elevation
xs
sm
md
lg
xl
2xl
Iconography
unknown · 24 captured
iconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconMotion
Feel: mixed · 5 durations · 3 easings
Duration scale
150ms
200ms
300ms
600ms
800ms
Easings
customease-in-outease-out
Components
tailwindcss · 1 component patterns captured
Mocks
Built from these tokens
Radius, primary, surface, text — all sampled from the live site.
Read more →Detected patterns
button
Voice
neutral · — · —
Headlines from the site
- Solutions
- Products
- Products
- AI Debugging
CTA verbs
×2×1×1×1×1×1×1×1
Accessibility
0 passing · 0 failing
No failing contrast pairs detected.
Tokens
Drop-in code for the most common stacks. All values from the live extraction.
:root {
--color-primary: #150f23;
--font-display: "Rubik";
--space-base: 2px;
--radius-md: 6px;
}
// 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).
Usage
-
Lead with the primary.
It belongs on calls-to-action and one accent moment per screen. Not on body copy.
-
Two type families, three weights.
Display for headlines, body for paragraphs. Resist a third unless there is a real reason.
-
Snap to the spacing scale.
Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.
-
Treat accessibility as a hard constraint.
When a colour pair fails WCAG, fix the colour — not the contrast check.