skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-sentry

Apply Sentry's design system tokens and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#dark mode#sentry#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-sentry-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-sentry
Source: https://github.com/deepparser/skills/tree/main/design-sentry
Command: npx skills add https://github.com/deepparser/skills --skill design-sentry-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Sentry's visual identity requires exact design tokens — colors, typography, shadows, and spacing — which are tedious to reverse-engineer manually from the live site. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact hex values, font stacks (Dammit Sans, Rubik, Monaco), spacing scales, border radii, and elevation shadows extracted from Sentry's dark-mode-first aesthetic. - Component Specifications: Defines button variants (muted purple, glass white, white solid, deep violet), form inputs, cards, and navigation with precise CSS values including inset shadows and frosted glass effects. - Visual Reference Previews: Bundled light and dark theme HTML previews let you verify exact visual implementation details before generating UI. - Use Case: When asked to build a developer tool landing page styled like Sentry, use this Skill to generate a hero section with deep purple backgrounds (#1f1633), lime-green accents (#c2ef4e), and uppercase letter-spaced buttons. ## Quick Start Use the design-sentry skill to create a dark-themed landing page styled like Sentry's website.

Frequently Asked Questions about design-sentry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a UI to look like Sentry's website?▼

Use deep purple backgrounds (#1f1633, #150f23) instead of pure black, Rubik as the primary UI font, and muted purple buttons (#79628c) with inset shadows. Add lime-green (#c2ef4e) sparingly as a high-visibility accent and apply uppercase text with 0.2px letter-spacing on buttons and labels.

What fonts does the Sentry design system use?▼

Sentry uses Dammit Sans for hero display headings at 88px weight 700, Rubik for all functional UI text in weights 400 through 700, and Monaco for code snippets. Dammit Sans is display-only and should never be applied to body text.

Does this design system support light mode?▼

The skill is dark-mode-first, reflecting Sentry's actual aesthetic, but it bundles both a light theme preview (preview.html) and a dark theme preview (preview-dark.html). Both files contain full CSS token definitions you can reference for either variant.

What button styles are included in the Sentry design system?▼

Four variants are defined: muted purple primary with inset shadow and 13px radius, frosted glass white with backdrop blur, white solid that transitions to purple on hover, and deep violet for selects and dropdowns. All use uppercase 14px Rubik text with 0.2px letter-spacing.

When should I not use the lime-green accent color?▼

Use lime-green (#c2ef4e) at most once per section for maximum impact, and never mix it with coral or pink accents in the same component. It is reserved for high-visibility CTAs, badge highlights, and section labels.

Related Skills

Explore More Design & Creative Skills→
scanbottscanbott

ads-dna

Extract brand colors, typography, voice, and imagery into a brand-profile.json.

Community
Advanced
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
alirezarezvanialirezarezvani
25.3k

apple-hig-expert

Audits and designs Apple-platform interfaces against the Human Interface Guidelines with quantitative compliance checks.

Community
Intermediate
sekkasekka

designing-brand

Design unified brand identity systems with design tokens and guidelines.

Community
Advanced