Sentry Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

21tokens

10type steps

6radius steps

2pxspacing base

Sentry, in one page

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} / {colors.surface-night}), 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 where the most important keywords are wrapped in lime-green highlight chips ({colors.accent-lime}), 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}) as a secondary punctuation, and a violet-mid ({colors.accent-violet-mid}) 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}) 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}) for marketing hero and product feature pages, white ({colors.surface-canvas-light}) for pricing, contact, and dense reference content — the system never tries to blur the two.
Lime keyword highlight ({colors.accent-lime}) 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} on light or {colors.on-primary} on dark; outlined and ghost variants are downgraded.
Card surfaces follow the canvas: dark sections nest dark cards ({colors.ink-deep} with subtle hairline) and light sections nest white cards with {colors.hairline-cloud} 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}), avoiding the typical accent-bordered featured pattern.

Do's and don'ts

Do

Reserve {colors.accent-lime} for keyword-highlight chips inside display headlines and the footer squiggle divider — never use it as a button background, never as body text.
Pair every button-primary with {typography.button-cap} in uppercase with 0.2px tracking — the cadence is part of the brand, not a stylistic option.
Treat the dark canvas ({colors.surface-canvas-dark}) and light canvas ({colors.surface-canvas-light}) as two complete worlds — let one own marketing/feature pages and the other own transactional pages, with no half-measures.
Use sticker mascots to break section boundaries — let them overlap, tilt, and float; constraining them inside cards drains their personality.
Use card-pricing-featured (dark inverted tier) instead of an accent-bordered light tier for the featured pricing column.
Default body line-height to 1.5 on functional UI surfaces and 2.0 on marketing surfaces — the difference is intentional.

Don't

Don't introduce additional accent colors beyond {colors.accent-lime} and {colors.accent-pink} — adding teal, orange, or yellow dilutes the violet-and-lime signature.
Don't apply drop shadows to cards on dark canvas — depth comes from texture and illustration, not from light-on-dark shadows that would muddy the violet.
Don't use {typography.display-hero} (88px) for anything except the marketing hero — even sub-pages cap at {typography.display-large} (60px).
Don't put body text in {colors.accent-lime} — it's a chip color, not a type color, and breaks contrast at body sizes.
Don't soften the {colors.primary} button to a brand-violet — the near-black is the point; it reads as the most authoritative action regardless of canvas polarity.
Don't put illustrated mascots inside cards or constrained containers — their job is to break grid, not occupy it.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Sentry design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: Sentri Display, Rubik, -apple-system, Segoe UI
- scale: 10, 14, 15, 16, 20, 24, 27, 30, 60
- weights: 400, 500, 600, 700

Shape:
- radius: 4, 6, 8, 10, 12, 18

Spacing: 2, 4, 8, 12, 16, 24, 32, 96

Rules:
- Reserve `{colors.accent-lime}` for keyword-highlight chips inside display headlines and the footer squiggle divider — never use it as a button background, never…
- Pair every `button-primary` with `{typography.button-cap}` in uppercase with 0.2px tracking — the cadence is part of the brand, not a stylistic option.
- Treat the dark canvas (`{colors.surface-canvas-dark}`) and light canvas (`{colors.surface-canvas-light}`) as two complete worlds — let one own marketing/feature…
- Use sticker mascots to break section boundaries — let them overlap, tilt, and float; constraining them inside cards drains their personality.
- Use `card-pricing-featured` (dark inverted tier) instead of an accent-bordered light tier for the featured pricing column.
- Default body line-height to 1.5 on functional UI surfaces and 2.0 on marketing surfaces — the difference is intentional.

Avoid:
- Don't introduce additional accent colors beyond `{colors.accent-lime}` and `{colors.accent-pink}` — adding teal, orange, or yellow dilutes the violet-and-lime s…
- Don't apply drop shadows to cards on dark canvas — depth comes from texture and illustration, not from light-on-dark shadows that would muddy the violet.
- Don't use `{typography.display-hero}` (88px) for anything except the marketing hero — even sub-pages cap at `{typography.display-large}` (60px).
- Don't put body text in `{colors.accent-lime}` — it's a chip color, not a type color, and breaks contrast at body sizes.
- Don't soften the `{colors.primary}` button to a brand-violet — the near-black is the point; it reads as the most authoritative action regardless of canvas polar…
- Don't put illustrated mascots inside cards or constrained containers — their job is to break grid, not occupy it.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: home (/welcome/), product/error-monitoring, contact/enterprise, pricing.

Brand & Accent

Midnight Violet ({colors.primary} — #150f23): The system's primary action color and the deepest surface tone. Used for filled primary buttons on light surfaces, code-block backgrounds, and the strongest dark cards.
Ink Violet ({colors.ink-deep} — #1f1633): Slightly lifted from primary, this is the marketing hero canvas and the default body-text color on light surfaces — a single token doing double duty as background and ink.
Electric Lime ({colors.accent-lime} — #c2ef4e): The signature highlight color. Wrapped around individual headline keywords as a syntax-highlight chip ({rounded.xs} corner, no padding-y, 12px padding-x). Also used as the squiggly footer divider stroke. Never a button background.
Hot Pink ({colors.accent-pink} — #fa7faa): Secondary punctuation color used for sticker outlines, chart points, and supporting accents — never on buttons, never on type at body size.
Violet Link ({colors.accent-violet} — #6a5fc1): Inline link color when emphasis is needed beyond underline.
Deep Violet ({colors.accent-violet-deep} — #422082): The select-dropdown fill on contact forms; also used on spotlight cards inside dark sections.
Mid Violet ({colors.accent-violet-mid} — #79628c): Tag-chip fill and faint accent on dark surfaces.

Surface

Dark Canvas ({colors.surface-canvas-dark} — #1f1633): Hero, product, and feature-page background. Carries the deepest atmospheric weight.
Night ({colors.surface-night} — #150f23): Cards on dark canvas, code blocks, and the "featured" pricing tier.
Light Canvas ({colors.surface-canvas-light} — #ffffff): Pricing, contact, and dense-reference page background.
Surface Press Light ({colors.surface-press-light} — #f0f0f0) and Press Stronger ({colors.surface-press-stronger} — #efefef): The pressed/active fill of inverted buttons on dark surfaces.
Hairline Violet ({colors.hairline-violet} — #362d59): 1px borders on dark cards.
Hairline Cool ({colors.hairline-cool} — #cfcfdb): 1px borders on text inputs and form fields.
Hairline Cloud ({colors.hairline-cloud} — #e5e7eb): Pricing-table dividers and pricing-card borders on light canvas.

Text

On Primary ({colors.on-primary} — #ffffff): All text on dark canvas, all CTA labels on filled dark buttons.
Ink ({colors.ink} — #1f1633): Body text on light canvas; identical hex to the dark canvas, repurposed as type.
Ink Press ({colors.ink-press} — #1a1a1a): Reserved for the pressed/active state of inverted buttons.
On Dark Muted ({colors.on-dark-muted} — rgba(255,255,255,0.72)): Secondary text, captions, and table cell values on dark canvas.
On Dark Faint ({colors.on-dark-faint} — rgba(255,255,255,0.18)): Translucent surface-on-dark — used for ghost button fills and dimmed nav items.

Semantic

Focus Ring ({colors.ring-focus} — rgba(59,130,246,0.5)): Translucent blue focus ring — the only blue in the system, reserved for keyboard focus on form fields.

Type scaleRead the full spec

Font Family

The display tier is a proprietary geometric sans with chunky, near-condensed proportions and a slightly subversive personality (closing apertures, optical-stress letterforms). When unavailable, fall back to Rubik at heavier weights for visual continuity.

The UI tier is Rubik — an open-source Hebrew/Latin sans on Google Fonts — with system fallbacks (-apple-system, system-ui, Segoe UI, Helvetica, Arial). Rubik handles every body, caption, button, and eyebrow role.

The code tier is Monaco with Menlo and Ubuntu Mono fallbacks — used in code blocks, install snippets, and inline tokens.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-hero}`	88px	700	1.2	0	Marketing hero headline (single line of attention)
`{typography.display-large}`	60px	500	1.1	0	Section openers on dark surfaces
`{typography.heading-xl}`	30px	500	1.2	0	Page titles on light surfaces (e.g., "Pricing plans for dev teams of all sizes")
`{typography.heading-lg}`	27px	500	1.25	0	Sub-section headings, large card titles
`{typography.heading-md}`	24px	500	1.25	0	Card titles, in-page section headings
`{typography.heading-sm}`	20px	600	1.25	0	Compact card title, list-group title
`{typography.body-lg}`	16px	400	2.0	0	Marketing-paragraph body — the airy, two-line-leading variant used in hero subtext
`{typography.body-strong}`	16px	600	1.5	0	Emphasized body run, lead sentence
`{typography.body-md}`	16px	500	1.5	0	Default UI body, table cells, form labels
`{typography.eyebrow}`	15px	500	1.4	0	Section eyebrow above large headings, all-caps
`{typography.button-cap}`	14px	700	1.14	0.2px	Filled button labels (uppercase)
`{typography.button-cap-light}`	14px	500	1.29	0.2px	Ghost / outline button labels (uppercase)
`{typography.caption}`	14px	400	1.43	0	Footer text, fine print, helper copy
`{typography.micro-cap}`	10px	600	1.8	0.25px	Status labels, badge text, micro-eyebrow
`{typography.code}`	16px	400	1.5	0	Code block content
`{typography.code-strong}`	16px	700	1.5	0	Highlighted code keyword

Principles

Two leading worlds. Marketing copy uses 2.0 line-height on {typography.body-lg} — extremely airy, generous breathing room. Functional UI copy uses 1.5 line-height on {typography.body-md} — denser, closer to console output. The choice is deliberate: marketing reads like prose, the product reads like a log.
Caps with tracking. All button labels and eyebrows are uppercase with 0.2px tracking. This is the brand's typographic signature — a console-prompt cadence applied to UI affordances.
Headlines as syntax. The hero display is structured so a single keyword can be wrapped in a {colors.accent-lime} highlight chip without disrupting the reading order. Treat the lime chip as a glyph-level decoration, not a separate component.

Note on Font Substitutes

Rubik is open-source on Google Fonts and is the safe default for everything except the hero display. For the proprietary display sans, suitable open substitutes are Space Grotesk (heavier weights), Archivo (semi-condensed weights), or Hubot Sans with optical-size axis at heavier ends — all carry the same chunky, near-condensed silhouette. Adjust line-height down by 0.05 when substituting, since the proprietary face has tighter leading at large sizes.

Components and layoutRead the full spec

No hover states documented. Every spec below shows only Default and Pressed/Active states. Variants are formal entries in the front-matter components: block.

Buttons

button-primary — the dominant CTA across light surfaces.

Background {colors.primary}, text {colors.on-primary}, type {typography.button-cap} (uppercase, 14px / 700, 0.2px tracking), padding {spacing.md} {spacing.lg} (12px 16px), rounded {rounded.md}. On dark hero surfaces, add the level-3 glow halo for emphasis.
Pressed state lives in button-primary-pressed: background flips to {colors.surface-press-stronger}, text to {colors.ink-press}. The button effectively swaps polarities on press.

button-inverted — the dominant CTA on dark canvas; visually identical hierarchy, polarity-flipped.

Background {colors.on-primary} (white), text {colors.ink-deep}, same {typography.button-cap}, rounded {rounded.md}.
Pressed in button-inverted-pressed: background drops to {colors.surface-press-light}, text to {colors.ink-press}.

button-ghost-on-dark — secondary CTA on dark canvas (e.g., "Get Demo" beside "Get Started").

Translucent fill {colors.on-dark-faint}, text {colors.on-primary}, type {typography.button-cap}, padding {spacing.sm} (8px), rounded {rounded.xl}. The translucent fill lets the canvas texture show through.

button-violet-token — pill-shaped tag/category button used inline in product navs.

Background {colors.accent-violet-mid}, text {colors.on-primary}, type {typography.button-cap-light}, padding {spacing.sm} {spacing.lg} (8px 16px), rounded {rounded.xl}, 1px hairline border in a slightly deeper violet.

button-disabled

Background {colors.hairline-cloud}, text {colors.on-dark-muted}, otherwise identical to button-primary.

Cards & Containers

card-pricing — the standard tier card on the pricing page.

Background {colors.surface-canvas-light}, text {colors.ink-deep}, padding {spacing.xxl} 32px, rounded {rounded.xl} 12px, 1px {colors.hairline-cloud} border. Headline at top in {typography.heading-md}, price in {typography.display-large}, feature list in {typography.body-md}, primary CTA pinned to the bottom of the card.

card-pricing-featured — the dark inverted "featured" tier (Sentri uses the Business tier as the featured one).

Background {colors.surface-night}, text {colors.on-primary}, otherwise identical structure to card-pricing. The inversion (rather than an accent-bordered light card) is the brand's distinctive choice — the featured tier reads as the brand's voice, not as a marketing decoration.

card-feature-dark — large feature-band card on dark surfaces, used to anchor product feature explanations.

Background {colors.ink-deep}, text {colors.on-primary}, padding {spacing.xxl} 32px, rounded {rounded.xxl} 18px. Often holds a UI mock plus a 27px headline plus 16px body.

card-spotlight-violet — accent feature card with deeper violet fill, used for "Sentry-only" capability bands.

Background {colors.accent-violet-deep}, text {colors.on-primary}, padding {spacing.xxl}, rounded {rounded.xxl}. The deep violet reads as a feature highlight without breaking out of the brand's purple family.

code-block — code/install snippets.

Background {colors.surface-night}, text {colors.on-primary} rendered in {typography.code}. Padding {spacing.lg} 16px, rounded {rounded.md}. On dark canvas the code block is barely lifted from canvas — only the slightly deeper fill differentiates it.

Inputs & Forms

text-input — the contact-form first/last/email/etc. fields.

Background {colors.surface-canvas-light}, text {colors.ink-deep}, type {typography.body-md}, padding {spacing.sm} {spacing.md} (8px 12px), rounded {rounded.sm} 6px, 1px {colors.hairline-cool} border.
Focus state in text-input-focused: same fill, but adds an inset shadow rgba(0,0,0,0.15) 0 2px 10px inset to suggest depth pressed inward.

select-violet — the dropdown variant used inside dark contact panels.

Background {colors.accent-violet-deep}, text {colors.on-primary}, type {typography.body-md}, padding {spacing.sm} {spacing.lg}, rounded {rounded.md}. Distinctive because it doesn't mimic a plain text input — it reads as a deliberate brand surface.

Navigation

nav-bar-light — the standard top nav across light pages (pricing, contact, docs).

Background {colors.surface-canvas-light}, text {colors.ink-deep}, type {typography.body-md}. Logo wordmark on the left at ~145×32px, primary nav items mid-bar with dropdown carets, and a Get Demo ghost + Get Started filled button-primary pair on the right. Padding {spacing.lg} {spacing.xl} (16px 24px).

Top Nav (dark variant) — used on the home page; same structure but inverted polarity, sitting on {colors.surface-canvas-dark}. The right-side button becomes button-inverted.

Mobile nav — collapses to a hamburger toggle below the 768px breakpoint; dropdown carets become full-width accordion items.

Pills, Badges, and Highlight Chips

pill-neutral-dark — small status / category pill on dark surfaces.

Background {colors.surface-night}, text {colors.on-primary}, type {typography.caption} 12px, padding {spacing.xs} {spacing.sm} (4px 8px), rounded {rounded.xs} 4px.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
4K / Wide	≥ 1440px	Full 4-tier pricing row, hero illustration sits beside headline at full scale
Desktop	1152–1440px	Default content max-width sits at 1152px, all 4-tier patterns hold
Laptop	992–1151px	Pricing collapses to 2-up rows, nav remains horizontal
Tablet	768–991px	2-column feature grids collapse to 1-up; nav still horizontal but compresses
Mobile Large	640–767px	Hamburger nav appears; hero display drops from 88px to ~56px
Mobile	576–639px	Single-column everything; section padding collapses from 96px to 32–48px
Small Mobile	1–575px	Compact mode; sticker mascots drop in size or hide entirely to preserve content priority

Touch Targets

Primary buttons hit a minimum 44×44px on mobile (12px vertical padding × 16px font + line-height = ~44px). Maintains WCAG AAA touch-target spec.
Pill tags and badges in nav and feature surfaces stay above 32×32px even at small mobile breakpoints; they enlarge if necessary rather than shrink.
Form fields stay at the 44px minimum height on mobile contact pages.

Collapsing Strategy

Hero display headline drops from 88px → 60px → 48px across the breakpoint stair; the lime keyword chip preserves padding and corner radius at every step.
Pricing tiers stair-step from 4-up → 2-up → 1-up. The featured dark tier always remains visually distinguished — it never loses its inversion at any breakpoint.
Sticker mascots are progressively de-emphasized: at desktop they overlap section boundaries; at tablet they shift to inline within section padding; at small mobile most are hidden via display: none to keep the content scan-able.
Top nav collapses to a hamburger below 768px; the dropdown menu uses the same canvas polarity as the page (dark on hero, light on pricing).
Code blocks preserve 16px Monaco at every breakpoint — they never scale down — but switch to horizontal scroll on overflow rather than wrap.

Image Behavior

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-sentry {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #1f1633;
  --heading-color: #1f1633;
  --link-color: #150f23;
  --link-hover-color: #000000;
  --border-color: #d7d5da;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(31,22,51,0.06);
  --card-hover-shadow: 0 6px 18px rgba(31,22,51,0.12);
  --header-bg: #1f1633;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6d687a;
  --button-bg: #150f23;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 10px;
  --button-secondary-bg: #f2f1f3;
  --button-secondary-text-color: #1f1633;
  --button-secondary-hover-bg: #e4e3e7;
  --button-secondary-border: 1px solid #d7d5da;
  --prompt-bg: #f4f3f5;
  --prompt-text-color: #1f1633;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 10px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

spiral 72.7%
resend 70.4%
stripe 70.2%
superhuman 70.1%

Where this came from

Source document: volt/design-md/sentry/DESIGN.md · 34.4 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.