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.

First name
Last name
Email address
Job title
How can we help
Additional context

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.

Name | Width | Key Changes
--- | --- | ---
4K / Wide | ≥ 1440px | Full 4-tier pricing row; hero illustration at full scale
Desktop | 1152–1440px | 1152px content max-width; all 4-tier patterns hold
Laptop | 992–1151px | Pricing collapses to 2-up; nav remains horizontal
Tablet | 768–991px | 2-col feature grids → 1-up; nav compresses
Mobile L | 640–767px | Hamburger nav appears; hero drops 88 → 56px
Mobile | 576–639px | Single-column; section padding 96 → 32–48px
Small Mobile | ≤ 575px | Compact 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

- Hero display drops 88 → 60 → 48px through the breakpoint stair; lime keyword chip preserves its 4px radius and 12px padding at every step.
- Pricing tiers stair-step 4-up → 2-up → 1-up; the featured dark tier always stays visually distinguished.
- Sticker mascots shift from boundary-overlap to inline at tablet, then hide entirely on small mobile.
- Top nav collapses to hamburger below 768px; menu inherits canvas polarity from the host page.
- Code blocks preserve 16px Monaco at every breakpoint — they horizontal-scroll on overflow rather than wrap.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding