---
version: alpha
name: Sentri Inspired
website: "https://sentry.io"
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.

seo:
  title: "Sentri Design System for React — Midnight #150f23, Lime #c2ef4e, Rubik"
  metaDescription: "Sentri's observability design language as a DESIGN.md file. Midnight #150f23, lime #c2ef4e, Rubik + Monaco, 22 components. For React, Next.js, and AI tools."
  highlights:
    - "Two-polarity canvas system — deep 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 CTA — near-black #150f23 stays the dominant action whether the canvas is dark or light"
    - "Sticker mascot layer — illustrated astronauts and monsters break section boundaries instead of drop shadows carrying depth"
    - "Three-family type stack — proprietary display sans, Rubik for UI, Monaco for code, with 0.2px tracking on every button cap"
  tags:
    - "Developer Tools & IDEs"
    - "Analytics & Data"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Sentri's primary brand color?"
      answer: "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."
    - id: "dark-mode"
      title: "Does Sentri use a dark canvas or a light canvas?"
      answer: "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."
    - id: "typography"
      title: "What typography does Sentri use, and what should I substitute for the display face?"
      answer: "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."
    - id: "shape-language"
      title: "How does Sentri handle corner radii and shape?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React developer-tools site?"
      answer: "Yes. The file is designed to feed Claude, Cursor, Copilot, or any AI tool that reads structured design tokens, and the agent will reproduce Sentri's two-polarity canvas, lime keyword discipline, and single-primary CTA hierarchy rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

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
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  eyebrow:
    fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  button-cap:
    fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: 0.2px
  button-cap-light:
    fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.29
    letterSpacing: 0.2px
  caption:
    fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  micro-cap:
    fontFamily: "Rubik, -apple-system, system-ui, sans-serif"
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.8
    letterSpacing: 0.25px
  code:
    fontFamily: "Monaco, Menlo, Ubuntu Mono, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  code-strong:
    fontFamily: "Monaco, Menlo, Ubuntu Mono, monospace"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-primary-pressed:
    backgroundColor: "{colors.surface-press-stronger}"
    textColor: "{colors.ink-press}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-inverted:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-inverted-pressed:
    backgroundColor: "{colors.surface-press-light}"
    textColor: "{colors.ink-press}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-ghost-on-dark:
    backgroundColor: "{colors.on-dark-faint}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.xl}"
    padding: 8px
  button-violet-token:
    backgroundColor: "{colors.accent-violet-mid}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-cap-light}"
    rounded: "{rounded.xl}"
    padding: 8px 16px
  button-disabled:
    backgroundColor: "{colors.hairline-cloud}"
    textColor: "{colors.on-dark-muted}"
    typography: "{typography.button-cap}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  pill-neutral-dark:
    backgroundColor: "{colors.surface-night}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
  chip-lime-keyword:
    backgroundColor: "{colors.accent-lime}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.xs}"
    padding: 0 12px
  text-input:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  text-input-focused:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  select-violet:
    backgroundColor: "{colors.accent-violet-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  card-pricing:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-pricing-featured:
    backgroundColor: "{colors.surface-night}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-feature-dark:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xxl}"
    padding: 32px
  card-spotlight-violet:
    backgroundColor: "{colors.accent-violet-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xxl}"
    padding: 32px
  code-block:
    backgroundColor: "{colors.surface-night}"
    textColor: "{colors.on-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px
  link-on-dark:
    backgroundColor: "{colors.surface-canvas-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 0px
  link-on-light:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 0px
  nav-bar-light:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 16px 24px
  footer-light:
    backgroundColor: "{colors.surface-canvas-light}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 32px 24px
---

## Overview

Sentri's design language reads like a debugging console wearing a leather jacket. The home and product surfaces sit on a near-black violet midnight (`{colors.surface-canvas-dark}` — #1f1633 — and `{colors.surface-night}` — #150f23), 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 (`{colors.accent-lime}` — #c2ef4e), as if the copy itself has been marked up by a developer redlining their own console output.

The palette is deliberately narrow: deep midnight as the dominant canvas, electric lime as the primary attention-grabber, hot pink (`{colors.accent-pink}` — #fa7faa) as a secondary punctuation, and a violet-mid (`{colors.accent-violet-mid}` — #79628c) for tag chips and hairline strokes. White appears in two roles — as text on dark, and as the canvas for pricing, contact, and content-heavy pages where developers need to scan dense tables. The "single primary CTA" is visually inverted depending on context: filled black-violet (`{colors.primary}` — #150f23) with white type on light surfaces, or filled white with dark type on dark surfaces. The button always reads as the strongest UI affordance regardless of polarity.

Typography splits cleanly between three families: a custom display sans for hero and section openers (chunky, near-condensed, slightly playful), Rubik for every UI text role (body, captions, eyebrow caps, button labels), and Monaco for code. Buttons and eyebrows almost always run in uppercase with a 0.2px tracking lift to give them the snap of console output.

**Key Characteristics:**
- Two-polarity canvas system: deep violet midnight (`{colors.surface-canvas-dark}` — #1f1633) for marketing hero and product feature pages, white (`{colors.surface-canvas-light}` — #ffffff) for pricing, contact, and dense reference content — the system never tries to blur the two.
- Lime keyword highlight (`{colors.accent-lime}` — #c2ef4e) treated as a typographic device, not a color swatch — it wraps single words inside the display headline to act as a syntax highlight on the reading flow.
- Sticker illustration system: floating mascot characters with hand-drawn outlines, appearing at section junctions, never inside cards — they create rhythm and personality between dense info blocks.
- Uppercase eyebrow + button caps in `{typography.button-cap}` and `{typography.eyebrow}`, with a consistent 0.2px tracking lift, give the brand its "developer console" cadence.
- Single-primary CTA hierarchy: every page has one filled button reading either `{colors.primary}` (#150f23) on light or `{colors.on-primary}` (#ffffff) on dark; outlined and ghost variants are downgraded.
- Card surfaces follow the canvas: dark sections nest dark cards (`{colors.ink-deep}` — #1f1633 — with subtle hairline) and light sections nest white cards with `{colors.hairline-cloud}` (#e5e7eb) borders — chrome stays consistent, only the polarity flips.
- A pricing-page color rhythm of cream-white tiers with one dark inverted "featured" tier (`{colors.surface-night}` — #150f23), avoiding the typical accent-bordered featured pattern.

## Known Gaps

- **Hover state colors:** intentionally not documented per the global no-hover policy — only Default and Pressed states are captured for buttons and inputs. The pressed state for inverted buttons is captured (`button-inverted-pressed`), but mid-press hover transitions are not.
- **Starfield hero texture:** described as a low-opacity white-on-violet pinprick pattern overlaid on the hero canvas, but ships as a project-specific background image rather than a generated CSS pattern. Producers should treat it as a placeholder asset.
- **Lime squiggly footer divider:** specified at ~3px stroke at full container width, but the exact hand-drawn SVG is not bundled with the spec — recreate it per project.
- **Sticker mascot library:** the illustrated astronauts, monsters, and traffic cones are characterized in prose (hand-rendered outlines, saturated `{colors.accent-pink}` and `{colors.accent-lime}` fills, no shadow) but no source library is provided — substitute house-style illustrations with the same color discipline.
- **Proprietary display sans:** the chunky near-condensed display face is named (`Sentri Display`) but not licensed for redistribution. Use Space Grotesk, Archivo, or Hubot Sans at heavier weights, adjusting line-height down by 0.05 to compensate for tighter leading at large sizes.
- **Loading skeletons:** not visible on the captured surfaces. Inherit the dark/light polarity rule — skeletons on dark canvas use `{colors.hairline-violet}` shimmer, on light canvas use `{colors.hairline-cloud}`.