Sentri Inspired Design System

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}.