Sentry

Sentry

Error and performance monitoring

Application error and performance monitoring, presented through a dense dark dashboard with a signature pink-purple accent.

sentry.io

Color palette

Accent

Primary#150f23

Primary brand color — key actions and emphasis.

Accent Lime#c2ef4e

Accent color used within the product's own UI.

Accent Violet#6a5fc1

Accent color used within the product's own UI.

Accent Violet Deep#422082

Accent color used within the product's own UI.

Accent Violet Mid#79628c

Accent color used within the product's own UI.

Ring Focus#9dc1f5

Accent color used within the product's own UI.

Neutral

Ink Deep#1f1633

Primary text color.

On Primary#ffffff

Text and icon color on a solid primary fill.

Accent Pink#fa7faa

Primary text color.

Surface Canvas Dark#1f1633

Page background.

Surface Canvas Light#ffffff

Page background.

Surface Night#150f23

Card and panel surfaces.

Surface Press Light#f0f0f0

Pressed or hover state of its base color.

Surface Press Stronger#efefef

Pressed or hover state of its base color.

Hairline Violet#362d59

Borders and dividers.

Hairline Cool#cfcfdb

Borders and dividers.

Hairline Cloud#e5e7eb

Borders and dividers.

Ink#1f1633

Primary text color.

Ink Press#1a1a1a

Pressed or hover state of its base color.

On Dark Muted#bdb8c0

Text and icon color on a solid primary fill.

On Dark Faint#3f3849

Text and icon color on a solid primary fill.

Type scale

Display Hero
88px · 700 · 1.2
Display Large
60px · 500 · 1.1
Heading Xl
30px · 500 · 1.2
Heading Lg
27px · 500 · 1.25
Heading Md
24px · 500 · 1.25
Heading Sm
20px · 600 · 1.25
Body Lg
16px · 400 · 2
Body Strong
16px · 600 · 1.5
Body Md
16px · 500 · 1.5
Code
16px · 400 · 1.5
Code Strong
16px · 700 · 1.5
Eyebrow
15px · 500 · 1.4
Button Cap
14px · 700 · 1.14
Button Cap Light
14px · 500 · 1.29
Caption
14px · 400 · 1.43
Micro Cap
10px · 600 · 1.8

Fonts

PrimaryRubikWeights 400, 500, 600, 700Fallback: -apple-system, system-ui, Segoe UI, Helvetica
SecondarySentri DisplayWeights 500, 700Fallback: Rubik, system-ui, sans-serif
SecondaryMonacoWeights 400, 700Fallback: Menlo, Ubuntu Mono, monospace

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Section
96px
Xs
4px
Sm
6px
Md
8px
Lg
10px
Xl
12px
Xxl
18px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Rubik, Sentri Display, Monaco).
  • Use one of the documented corner radii (4px, 6px, 8px, 10px, 12px, 18px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 96px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.