sentry
An inspired interpretation of Sentri's design language — a developer-tools brand built on a deep purple-violet midnight canvas, electric lime accents, and a slightly subversive illustrated personality. The system pairs a custom display sans (chunky, playful, near-condensed) with
colors
#150f23 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Sentri-Inspired-design-analysis
description: An inspired interpretation of Sentri's design language — a developer-tools brand built on a deep purple-violet midnight canvas, electric lime accents, and a slightly subversive illustrated personality. The system pairs a custom display sans (chunky, playful, near-condensed) with the open Rubik family for UI copy and Monaco for code, then leans on dark-on-light pricing surfaces, sticker-style mascots, and a single-color CTA hierarchy where black-violet buttons read as the primary action against either polarity.
colors:
primary: "#150f23"
ink-deep: "#1f1633"
on-primary: "#ffffff"
accent-lime: "#c2ef4e"
accent-pink: "#fa7faa"
accent-violet: "#6a5fc1"
accent-violet-deep: "#422082"
accent-violet-mid: "#79628c"
surface-canvas-dark: "#1f1633"
surface-canvas-light: "#ffffff"
surface-night: "#150f23"
surface-press-light: "#f0f0f0"
surface-press-stronger: "#efefef"
hairline-violet: "#362d59"
hairline-cool: "#cfcfdb"
hairline-cloud: "#e5e7eb"
ink: "#1f1633"
ink-press: "#1a1a1a"
on-dark-muted: "#bdb8c0"
on-dark-faint: "#3f3849"
ring-focus: "#9dc1f5"
typography:
display-hero:
fontFamily: "Sentri Display, Rubik, system-ui, sans-serif"
fontSize: 88px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0
display-large:
fontFamily: "Sentri Display, Rubik, system-ui, sans-serif"
fontSize: 60px
fontWeight: 500
lineHeight: 1.1
letterSpacing: 0
heading-xl:
fontFamily: "Rubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif"
fontSize: 30px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0
heading-lg:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 27px
fontWeight: 500
lineHeight: 1.25
letterSpacing: 0
heading-md:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 24px
fontWeight: 500
lineHeight: 1.25
letterSpacing: 0
heading-sm:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 20px
fontWeight: 600
lineHeight: 1.25
letterSpacing: 0
body-lg:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 2.0
letterSpacing: 0
body-strong:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0
body-md:
fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
fontSize: 16px
… components
display headline
body copy from sentry tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#150f23",
font: ""Rubik", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on sentry's visual identity.