What is Sentri's primary brand color?

Sentri's primary action color is Midnight Violet — #150f23 — a near-black violet that fills primary buttons on light surfaces, code-block backgrounds, and the strongest dark cards. The signature accent is Electric Lime (#c2ef4e), used scarcely: it wraps single keywords inside the 88px hero headline as a syntax-highlight chip and draws the squiggly divider above the footer. Lime is never a button background. A secondary Hot Pink (#fa7faa) appears only on sticker outlines and chart points.

Does Sentri use a dark canvas or a light canvas?

Both — the system runs two complete polarities. Marketing and product feature pages sit on a deep violet midnight canvas (#1f1633 / #150f23) with starfield textures and floating mascots. Pricing, contact, and dense reference content flip to a pure white #ffffff canvas. The rule is hard: each page band picks one canvas and commits to it. The featured pricing tier is the only inversion — a dark #150f23 card inside the white pricing grid, replacing the conventional accent-bordered tier.

What typography does Sentri use, and what should I substitute for the display face?

Three families. A proprietary chunky display sans handles hero (88px / 700) and section openers (60px / 500). Rubik — an open-source Google Fonts family — carries every UI role: body at 16px, captions, eyebrows, and uppercase button caps at 14px / 700 with 0.2px tracking. Monaco runs in code blocks at 16px. For the proprietary display, Space Grotesk, Archivo, or Hubot Sans at heavier weights are the closest open substitutes — drop line-height by 0.05 when swapping since the proprietary face has tighter leading at large sizes.

How does Sentri handle corner radii and shape?

The radius scale runs from 4px (badges, the lime keyword chip) through 6px (text inputs), 8px (primary buttons, code blocks, select dropdowns), 10px (generic containers), 12px (pricing cards, navigation chrome), 18px (image containers, large hero illustrations), to the full pill 9999px (avatars, circular icon buttons). Most chrome lives at 8–12px. The 18px container is reserved for product UI screenshots, which are often tilted 2–3 degrees off axis to break the grid.

What's missing from this DESIGN.md spec?

A few things, documented in the Known Gaps section. Hover-state colors are intentionally omitted per the global no-hover policy — only Default and Pressed states are documented for buttons and inputs. The exact starfield texture (a low-opacity white-on-violet pinprick pattern) is described but not provided as an asset. The hand-drawn lime squiggle divider above the footer is specified at 3px stroke but ships as a project-specific SVG. And the proprietary display sans is named but not licensed for redistribution — use one of the substitute faces called out in the typography notes.

Sentri Inspired Design System

Sentri's observability design language as a DESIGN.md file.

About Sentri Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source sentry.io

Developer Tools & IDEs
Analytics & Data

Sentri's design language reads like a debugging console wearing a leather jacket. The product surfaces sit on a near-black violet midnight (#150f23 and #1f1633), strewn with starfield textures and floating sticker-style mascots — astronauts, monsters, traffic cones — that puncture the seriousness of an observability product. Headlines run in a chunky proprietary display sans at 88px / 700, where the most important keywords get wrapped in lime-green highlight chips (#c2ef4e), as if a developer redlined their own console output. The palette is deliberately narrow: midnight as the dominant canvas, electric lime as the primary attention-grabber, hot pink (#fa7faa) as secondary punctuation, and a mid-violet (#79628c) for tag chips and hairlines. Pricing and contact pages flip to a pure white #ffffff canvas with the same near-black ink doing double duty as background on dark surfaces.

This page packages the system into a single DESIGN.md file built on the Google Labs spec. Inside: 21 color tokens spanning the violet-and-lime brand palette plus surface, hairline, text, and semantic groups; 16 typography tokens running across a proprietary display sans, Rubik for every UI role, and Monaco for code; 7 corner radii from a 4px badge corner to the 18px image container; 8 spacing tokens on an 8px base with a 96px section unit; and 22 component entries covering buttons, cards, code blocks, form inputs, the pill-shaped nav, the lime keyword chip, and the sticker mascot signature. Every component references its tokens by name rather than hardcoded hex.

Feed the file to Claude, Cursor, or GitHub Copilot and the AI produces React components that match Sentri's "developer console" cadence — uppercase button caps with 0.2px tracking, two-polarity canvases, dark-inverted featured pricing tiers, single-primary CTA hierarchy — rather than a generic shadcn theme. Reference the tokens directly in Tailwind config or CSS variables. The discipline of treating lime as a typographic glyph rather than a color swatch is what gives the system its identity, and it's worth studying any time you're tempted to add a second accent.

What makes it distinct

Two-polarity canvas systemdeep violet #1f1633 for marketing, white #ffffff for pricing, with no half-measures between
Lime keyword chip#c2ef4e wraps single words inside the 88px hero display as a syntax-highlight glyph, never a button
Single-primary CTAnear-black #150f23 stays the dominant action whether the canvas is dark or light
Sticker mascot layerillustrated astronauts and monsters break section boundaries instead of drop shadows carrying depth
Three-family type stackproprietary display sans, Rubik for UI, Monaco for code, with 0.2px tracking on every button cap

Live at sentry.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

sentry.io

Explore Sentri Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.