01 — Colors

Color Palette

A near-monochrome violet-and-lime system. Brand primary is a deep midnight; lime is a typographic device, not a button color.

Brand & Accent

Midnight Violet
#150f23
Primary action color and deepest surface tone.
Ink Violet
#1f1633
Hero canvas + body text on light surfaces.
Electric Lime
#c2ef4e
Headline keyword highlight chip and footer divider.
Hot Pink
#fa7faa
Sticker outlines, chart points, supporting accents.
Violet Link
#6a5fc1
Inline link emphasis beyond underline.
Deep Violet
#422082
Select dropdown fill, spotlight cards on dark.
Mid Violet
#79628c
Tag-chip fill, faint accent on dark.

Surface

Dark Canvas
#1f1633
Hero, product, feature page background.
Night
#150f23
Cards on dark, code blocks, featured tier.
Light Canvas
#ffffff
Pricing, contact, dense reference pages.
Press Light
#f0f0f0
Pressed state of inverted button on dark.
Press Stronger
#efefef
Active state of inverted/light buttons.
Hairline Violet
#362d59
1px borders on dark cards.
Hairline Cool
#cfcfdb
1px borders on text inputs and form fields.
Hairline Cloud
#e5e7eb
Pricing card borders, table dividers.

Text

On Primary
#ffffff
Text on dark canvas + filled CTA labels.
Ink
#1f1633
Body text on light canvas.
Ink Press
#1a1a1a
Pressed state of inverted buttons.
On Dark Muted
#bdb8c0
Secondary text on dark canvas.

02 — Typography

Typography Scale

Display tier uses a chunky proprietary sans (with Rubik fallback at heavier weights). UI copy is open-source Rubik. Monaco handles code.

display-hero88px / 700 / 1.2 / 0
Code breaks.
display-large60px / 500 / 1.1 / 0
Fix it faster.
heading-xl30px / 500 / 1.2
Pricing plans for dev teams
heading-lg27px / 500 / 1.25
Sub-section heading
heading-md24px / 500 / 1.25
Card title
heading-sm20px / 600 / 1.25
Compact card title
body-lg16px / 400 / 2.0
Marketing prose runs at 2.0 leading — extremely airy, generous breathing room. The brand reads like a blog post when it wants to.
body-md16px / 500 / 1.5
Default UI body, table cells, form labels — denser leading for functional surfaces.
eyebrow15px / 500 / 1.4
Section eyebrow
button-cap14px / 700 / 1.14 / 0.2px
Get started
caption14px / 400 / 1.43
Footer text, fine print, helper copy.
micro-cap10px / 600 / 1.8 / 0.25px
STATUS LABEL
code16px Monaco / 400 / 1.5
npm install @sentry/node

03 — Components

Button Variants

A single dominant CTA polarity-flipped per canvas. Filled black-violet on light, filled white on dark. Outlined and ghost variants are downgraded.

button-primary · light canvas
button-secondary
button-inverted · dark canvas
button-ghost-on-dark
button-violet-token
button-disabled

04 — Components

Card Examples

Pricing tiers cycle white → white → white → night-inverted (the featured tier). Feature cards on dark surfaces use the deeper ink tone for contrast.

Developer

Free

For solo developers shipping side projects.

  • Error monitoring
  • 5K events / month
  • Community support

Team

$29

Per month, for small product teams.

  • Everything in Developer
  • 50K events / month
  • Email + Slack alerts

Business

$80

For growing engineering teams.

  • Performance monitoring
  • 250K events / month
  • Priority support

Debugging needs context

See the line of code, the commit, the deploy, the user — all in one timeline.

Built to be secure

Designed not to get in your way. SOC 2 Type II, GDPR, HIPAA-ready.

05 — Components

Form Elements

Inputs sit on white with a cool hairline. Focus draws an inset shadow rather than a colored ring.

06 — Signature Components

Signature Components

The brand-distinctive components: lime keyword chip, sticker mascot system, code block, and the squiggly footer divider.

chip-lime-keyword

Code breaks. Fix it.

Inline highlight wrapping a single keyword inside the display headline.

code-block

$ npm install --save @sentry/node
$ sentry-cli login
$ sentry-cli releases new 1.0.0

pill-neutral-dark

JavaScript Python

Compact category pill for tech-stack indicators.

Lime squiggly footer divider

Hand-drawn lime squiggle replacing the hairline divider above the footer.

07 — Foundations

Spacing Scale

8px base unit, scaling to a 96px section gap on desktop.

xxs · 2px
xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
section · 96px

08 — Foundations

Border Radius Scale

Buttons land at 8px, pricing cards at 12px, image containers and large feature cards at 18px.

xs · 4px
sm · 6px
md · 8px
lg · 10px
xl · 12px
xxl · 18px
full · 9999px

09 — Foundations

Elevation & Depth

Depth on dark canvas comes from texture and illustration, not from drop shadows. Light surfaces use gentle 1–10% black shadows.

Level 0 · Flat
Level 1 · Inverted button lift
Level 2 · Floating card
Level 3 · Glow halo

10 — Responsive

Responsive Behavior

Six-step breakpoint stair from 4K down to small mobile, with sticker mascots progressively hiding to preserve content scan-ability.

NameWidthKey Changes
4K / Wide≥ 1440pxFull 4-tier pricing row; hero illustration at full scale
Desktop1152–1440px1152px content max-width; all 4-tier patterns hold
Laptop992–1151pxPricing collapses to 2-up; nav remains horizontal
Tablet768–991px2-col feature grids → 1-up; nav compresses
Mobile L640–767pxHamburger nav appears; hero drops 88 → 56px
Mobile576–639pxSingle-column; section padding 96 → 32–48px
Small Mobile≤ 575pxCompact mode; sticker mascots shrink or hide
375
576
768
992
1152
1440

Touch Targets

Primary buttons hit 44×44px minimum at mobile (12px vertical padding × 16px line-height). Pill tags stay above 32×32px. Form fields stay at 44px minimum height. WCAG AAA compliant across the system.

Collapsing Strategy