Pounce
The design language behind Panther's modern SIEM platform, engineered for security analysts who live in dark interfaces, dense data, and split-second decisions.
Origin &
Context
Panther is a cloud-native SIEM (Security Information and Event Management) platform that processes billions of security events daily. Its users, security analysts and engineers, spend hours navigating dense log data, writing detection rules in Python, and investigating incidents across complex cloud infrastructures.
Pounce was born from the need to create visual consistency across Panther's rapidly growing product surface. The design system had to serve a dark-first interface where readability at small sizes, color-coded severity levels, and information density are non-negotiable requirements. Every token decision is shaped by the operational reality of security work: late-night shifts, high-stakes alert triage, and the need to distinguish critical from informational at a glance.
Token Architecture
Pounce organizes tokens into semantic categories that map directly to the dark-interface patterns security analysts rely on. Every color, size, and spacing value exists as a named token; no magic numbers.
Surface Colors
7 surface tokens define the layering system, from primary backgrounds through modal overlays, creating depth without borders.
Text & Icons
Hierarchical text tokens (primary, secondary, tertiary) plus dedicated icon states ensure readability on dark surfaces at all sizes.
Status Palette
5-level severity system (Success, Warning, Error, Info, Critical) with both foreground and background variants for alert classification.
Dimension Tokens
14 spacing tokens, 6 border radii, 4 border widths, and 7 component sizes, all on a consistent 4px-base progression.
Color Tokens
A dark-first color system designed for prolonged screen time. Surface layers create depth through subtle value shifts, while status colors maintain WCAG AA contrast on dark backgrounds.
Surface
#0F1923
#162231
#1E2D3D
#243648
#2A3F54
#1A2B3C
rgba(10,22,40,0.8)
Text
#F1F5F9
#94A3B8
#64748B
#475569
#38BDF8
#0F172A
Border
#1E293B
#162032
#334155
#22D3EE
Status
#22C55E
#F59E0B
#EF4444
#3B82F6
#DC2626
Accent
#06B6D4
#14B8A6
#0891B2
Icon
#F1F5F9
#94A3B8
#475569
#22D3EE
Typography & Sizing
DM Sans provides a clean, geometric foundation optimized for data-dense interfaces. The type scale runs from 10px captions to 40px display headers, with component sizing tokens for controls and icons.
Font Size Scale
11 tokens · 10–40px
fontSize/xs
Security Log
10px
fontSize/sm
Security Log
12px
fontSize/md
Security Log
14px
fontSize/lg
Security Log
16px
fontSize/xl
Security Log
18px
fontSize/2xl
Security Log
20px
fontSize/3xl
Security Log
24px
fontSize/4xl
Alert
28px
fontSize/5xl
Alert
32px
fontSize/6xl
Alert
40px
Component Sizing
7 tokens · 16–48px
icon-sm
16px
icon-md
20px
icon-lg
24px
control-sm
32px
control-md
36px
control-lg
40px
control-xl
48px
Spacing & Layout
A 14-step spacing scale from 0 to 80px, with border radius and border width tokens that reinforce the system's clean, technical aesthetic.
Spacing Scale
14 tokens · 0–80px
Border Radius
6 tokens
none
0px
sm
4px
md
6px
lg
8px
xl
12px
pill
100px
Border Width
4 tokens
thin
0.5px
default
1px
thick
2px
heavy
3px
Components
Core UI building blocks optimized for security workflows. Every component references semantic tokens, supports dark-first theming, and is built for data-dense layouts.
Navigation
Sidebar, Tabs, BreadcrumbsInputs
Buttons, Fields, ControlsData Display
Tables, Tags, BadgesFeedback
Alerts, Toasts, ModalsSurfaces
Cards, Panels, DrawersNavigation
Inputs
Data Display
Feedback
Surfaces
Security Components
Purpose-built components for security workflows. These go beyond standard UI patterns to address the unique needs of threat detection, log analysis, and incident investigation.
JSON Preview
Syntax-highlighted JSON viewer with collapsible nodes, search, and copy-to-clipboard for inspecting raw log events and API payloads.
Code Editor
Embedded Python editor for writing detection rules with syntax highlighting, linting, and real-time validation against Panther's schema.
JSON Tree
Interactive tree visualization of nested JSON structures. Enables analysts to navigate deep log schemas and identify field relationships at a glance.
Design Principles
The guiding decisions that shape every token, component, and pattern in Pounce.
Dark-First Design
Security analysts work in low-light environments during long shifts. Every color token is designed and tested on dark surfaces first, with light mode as a secondary consideration. Surface layering creates depth without relying on shadows or borders.
Information Density
SIEM interfaces are inherently data-dense. The spacing scale, type sizes, and component dimensions are calibrated to maximize information per viewport without sacrificing readability. Compact modes exist for power users who need to see more logs on screen.
Severity Is Visual
The 5-level status palette (Success, Warning, Error, Info, Critical) is the backbone of Pounce. These colors appear in badges, table rows, chart segments, and alert banners. Every status color meets WCAG AA contrast on both surface/primary and surface/secondary.
Semantic Tokens Only
Components never reference raw hex values. Every visual property maps to a semantic token, enabling consistent theming and reducing maintenance overhead. Changing a single surface token propagates across every component that uses it.
Performance-Aware
Security tools must render large datasets without jank. Components are designed with virtualization in mind, spacing tokens account for row density in 10,000+ row tables, and animations are minimal to avoid disrupting investigation flow.
Accessibility & Readability
All text tokens maintain 4.5:1 contrast ratios on their intended surface. The cyan focus ring (border/focus) is visible in both themes. Keyboard navigation works everywhere; analysts shouldn't need a mouse to triage alerts at speed.
50+
Design Tokens
14
Spacing Steps
6
Color Categories
11
Type Sizes
7
Component Sizes
5
Severity Levels
Reflection
Building Pounce reinforced a core belief: domain-specific design systems outperform generic ones. A SIEM interface has fundamentally different needs than an e-commerce platform; the status palette carries operational meaning, dark mode isn't a preference but a requirement, and information density is a feature, not a compromise.
The most valuable decision was making the status color system a first-class token category rather than an afterthought. When severity is baked into the system's foundation, every new component naturally inherits the ability to communicate urgency. That consistency is what lets analysts scan a dashboard and immediately know where to focus.
Pounce continues to evolve as Panther's product surface grows. The token architecture ensures that new pages and features inherit the system's DNA without requiring designer intervention for every color and spacing decision.