Developer Tools

Sentry

sentry.io17 colors6 componentsRubikMulti-page · 12 screens

Application performance monitoring for developers & software teams to see errors clearer, solve issues faster & continue learning continuously. Get started at sentry.io.

Remix Visit

Remix

Visit

12 screenshots captured· sentry.io

1 / 12 · Application Performance Monitoring & Error Tracking Software | Sentry · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from sentry.io

Primary

#FFFFFF

Primary CTA, brand accent, active state; Headings / primary text

#A48977

Brand hue used alongside the achromatic primary

#362D59

Accent / decorative

#452650

Accent / decorative

#FD44B0

Accent / decorative

#E91E63

Accent / decorative

#4D0A55

Accent / decorative

#79628C

Accent / decorative

Neutral

#1F1633

Default page background

#4E2A9A

Card / panel background

#1B1228

Alternating section band

#E2ABE0

Body copy

#333232

Captions, secondary text

#222222

Label colour on brand surfaces

#000000

Neutral

#E2E8F0

Neutral

Semantic

#6A5FC1

Focus Ring

Typography · Rubik

body16px · 400 · 24px

body14px · 700 · 14px

button14px · 500 · 14px

link14px · 500 · 18px

body14px · 400 · 24px

h324px · 500 · 30px

button16px · 400 · 32px

h140px · 500 · 50px

h232px · 500 · 40px

heading16px · 600 · 24px

body16px · 500 · 16px

body16px · 700 · 24px

caption12px · 400 · 18px

label14px · 600 · 19.6px

body18px · 400 · 28px

label15px · 500 · 21px

button24px · 400 · 30px

body27px · 500 · 33.75px

body20px · 400 · 25px

body27px · 400 · 33.75px

heading30px · 400 · 36px

body15px · 500 · 18.75px

button12px · 600 · 24px

h140px · 700 · 50px

h232px · 700 · 40px

h328px · 600 · 35px

h416px · 700 · 32px

table-header12px · 500 · 16px

body14px · 500 · 20px

heading20px · 700 · 28px

heading32px · 500 · 40px

heading24px · 700 · 30px

heading32px · 400 · 24px

button14px · 400 · 17.5px

body14px · 600 · 20px

heading18px · 700 · 22.5px

body24px · 600 · 33px

caption12px · 600 · 16px

nav-link14px · 500 · 18px

h324px · 700 · 30px

Typography · IBM Plex Mono

code16px · 400 · 32px

Typography · Dammit Sans

h188px · 700 · 105.6px

h260px · 500 · 66px

Typography · Monaco

code16px · 400 · 24px

code16px · 700 · 24px

Typography · -apple-system

caption12px · 400 · 24px

Spacing

16px

20px

8px

24px

32px

144px

64px

40px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgb(31, 22, 51) 0px 0px 0px 10px

rgba(43, 34, 51, 0.04) 0px 1px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

Components · 6

Remixes of Sentry

Latest remixes

No public remixes yet. Be the first to make one.

Remix it