Enforce a precise, minimal design system for Battery's dashboard UI. Use this skill when building admin interfaces, deployment management screens, or any dashboard components...
Battery is an enterprise deployment platform. The aesthetic should communicate:
All spacing uses multiples of 4px:
4px - Tight inline spacing8px - Related elements12px - Default padding16px - Section gaps24px - Major separations32px - Page-level spacingTop/Left/Bottom/Right must match. Never asymmetric padding.
// Correct
<div className="p-4">
<div className="px-4 py-3">
// Incorrect - asymmetric
<div className="pt-2 pb-4 pl-3 pr-5">
Use one system throughout:
rounded-none - Tables, code blocksrounded (4px) - Buttons, inputs, cardsrounded-lg (8px) - Modals, large containersPrefer borders over shadows for structure:
// Preferred - border-based depth
<div className="border border-gray-200 dark:border-gray-800">
// Use shadows sparingly for floating elements only
<div className="shadow-lg"> // Dropdowns, modals only
// Data should use monospace
<span className="font-mono text-sm">deploy_abc123</span>
<span className="font-mono tabular-nums">1,234</span>
Use Phosphor Icons (regular weight) throughout:
import { Rocket, Shield, Database } from '@phosphor-icons/react'
<Rocket size={20} />
// Status colors
<Badge variant="success">Deployed</Badge> // Green
<Badge variant="warning">Pending</Badge> // Yellow
<Badge variant="error">Failed</Badge> // Red
<Badge variant="default">Draft</Badge> // Gray
Never use:
Always question:
