HPL Design System

Interactive Demo

Live Demo

Experience the UI

Explore our world-class design system featuring vibrant gradients, smooth animations, and production-ready components.

Niche Switcher
Switch between AI assistants for different domains
Streaming Indicator
Shows when AI is generating a response
Enhanced Chat Interface
Message bubbles with avatars, timestamps, and code highlighting
JD

How can I improve my sprint velocity?

Great question! Here are some strategies to improve your sprint velocity:

  1. Break down stories better - Smaller, well-defined stories are easier to estimate and complete
  2. Reduce WIP - Focus on finishing tasks before starting new ones
  3. Address blockers quickly - Daily standups should surface and resolve blockers
  4. Invest in automation - CI/CD and testing automation reduce manual overhead
typescript
// Example: Track velocity over sprints
const velocityTrend = sprints.map(s => ({
  sprint: s.name,
  completed: s.completedPoints,
  committed: s.committedPoints
}));

Would you like me to analyze your team's specific metrics?

Status Badges & Button Variants
Semantic indicators and enhanced button styles

Status Badges

Success
Error
Warning
iInfo
Unique
Partial

Button Variants

Progress Bars

Indeterminate
75% Complete

Interactive Cards (Lift on Hover)

🔶

Claude Code

Hover to see the lift animation with elevated shadow and colored border.

Anthropic
⚡

Cursor

Hover to see the lift animation with elevated shadow and colored border.

Anysphere
🟣

Copilot

Hover to see the lift animation with elevated shadow and colored border.

GitHub
Color System
OKLCH-based colors with orange/cyan/purple brand identity

Primary Gradient

Accent Gradient

Card Surface

Muted Background

Shadow Elevation System
4-level shadow system for depth and hierarchy
Elevation 1
Elevation 2
Elevation 3
Elevation 4
Typography Scale
Space Grotesk for headings, DM Sans for body, JetBrains Mono for code

Heading 1 - Space Grotesk

Heading 2 - Space Grotesk

Heading 3 - Space Grotesk

Body text in DM Sans - clean and readable for long-form content.

const code = "JetBrains Mono for code blocks";

Ready to Get Started?

Experience the full power of our AI assistants. Sign up for free and transform your workflow.