aaPanel

Overview

aaPanel is a technical infrastructure platform that democratizes server management through an intuitive, open-source control panel. The design system embraces **Technical Clarity**—a philosophy that prioritizes information hierarchy, scannable layouts, and purposeful use of color to guide users through complex server operations. The brand serves developers, system administrators, and hosting providers who demand both power and simplicity. The UI evokes confidence through clean typography (Inter at 72px for headlines, 16px for body), generous whitespace (24px gutters, 40px section spacing), and a signature green accent (#20a53a) that signals actionable elements and system health. Voice: direct, precise, and reassuring. Example: "Install aaPanel in one command. Manage 3,000,000+ servers worldwide."

Colors

The color system is built on a **light, neutral foundation** with a vibrant green accent that commands attention without overwhelming. Primary (#20a53a) is the brand's signature—used exclusively on CTAs ("Install for free" button), active navigation states, and success indicators. It conveys growth, reliability, and forward momentum. Secondary (#1863dc) provides a technical blue for informational elements, links, and secondary actions. Tertiary (#f59e0b) is reserved for warnings and cautionary states. The surface stack progresses from pure white (surface: #ffffff) through cool grays (surface-container: #e2e8f0, on-surface-variant: #475569) to support layering without visual noise. Error red (#dc2626) is used sparingly for destructive actions and critical alerts. All interactive elements us

Typography

The type system follows a **technical hierarchy** where Inter (a geometric sans-serif) is the sole typeface, ensuring consistency across all platforms. Display (72px, 800 weight, -0.04em tracking) anchors hero sections with maximum impact; Headline-lg (40px, 700 weight) breaks major sections; Headline-md (28px, 700 weight) introduces subsections. Body-lg (18px, 400 weight) is used for feature descriptions and marketing copy, while Body-md (16px, 400 weight) handles standard paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, form labels, and navigation items to ensure legibility at smaller sizes. All headline text uses -0.02em to -0.04em negative letter-spacing to tighten the visual presentation and convey technical precision. Small labels over busy backgrou

Layout

The layout system uses a **12-column grid** with a max-width of 1280px, ensuring content remains scannable on desktop while adapting fluidly to tablets. The spacing scale is semantic: 24px (md) is the standard gutter between sections, 40px (lg) separates major content blocks (hero to features, features to pricing), and 64px (xl) is reserved for page-level breaks. Containers are never full-width; they maintain 24px padding on either side on desktop, creating breathing room. The hero section uses a 2-column layout (text left, visual right) with the headline at 72px and supporting copy at 18px, stacked vertically with 24px between them. Feature cards are displayed in a 3-column grid on desktop, each card 340px wide with 24px gaps. Input fields and form elements use 40px height with 12px inter

Elevation & Depth

Depth is conveyed through **subtle, layered shadows** rather than bold contrast. The elevation system has three tiers: Level 1 (sm, 0 1px 2px rgba(0,0,0,0.06)) is applied to interactive elements like buttons and small cards to indicate they are clickable. Level 2 (md, 0 4px 12px rgba(0,0,0,0.08)) is used on larger cards and dropdowns to separate them from the background. Level 3 (lg, 0 15px 40px rgba(0,0,0,0.12)) is reserved for modals and floating panels (e.g., the AI Assistant float box at top: 180px, right: 20px). On hover, cards transition from sm to md shadow (200ms ease-in-out) to signal

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used purposefully to soften the interface without sacrificing clarity. Buttons and primary CTAs use 1rem (16px) border-radius, creating a friendly, approachable feel while maintaining a modern aesthetic. Input fields and form elements use 0.5rem (8px) border-radius for a tighter, more technical appearance. Cards and larger containers use 1.5rem (24px) border-radius to create visual breathing room and reduce the perception of density. Badges and status indicators use full (9999px) border-radius to create pill-shaped elements that a

Components

Action Elements Buttons are the primary mechanism for user intent. The primary button (button-primary) uses {colors.primary} (#20a53a) with white text, 16px 40px padding, and 1rem border-radius. On hover, the background darkens to #1a8a2f and a 0 0 5px rgba(32, 165, 58, 0.5) glow appears (transition: 200ms ease-in-out). The secondary button (button-secondary) has a transparent background with a 2px solid primary border; on hover, it fills with {colors.primary-container} (#f4faf5) while maintaining the border. Both buttons use {typography.label-md} (14px, 600 weight) for legibility and emphasis. The "Install for free" CTA on the hero uses button-primary with an icon (download arrow) to the left of the text, creating a strong visual anchor.

Containers & Surfaces Cards (card componen

Do's and Don'ts

**Do**

• Do use the primary green (#20a53a) exclusively on CTAs and active states—it is the brand's signature and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing to ensure content remains scannable and not overwhelming.
• Do apply the full 12-column grid with a 1280px max-width to keep layouts predictable and responsive.
• Do use Inter at 72px (800 weight) for headlines and -0.04em letter-spacing to convey technical precision and confidence.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms with ease-in-out timing to signal responsiveness.
• Do use {elevation.md} shadow (0 4px 12px rgba(0,0,0,0.08)) on hover to create subtle depth without visual noise.
• Do apply 1px solid outline-variant borders on cards and inputs to create visual separation without harshness.

**Don't**

• Don't use the primary green on non-interactive elements or backgrounds—it must remain reserved for actions and active states.
• Don't apply shadows larger than {elevation.lg} (0 15px 40px rgba(0,0,0,0.12)) except on modals; excessive shadow creates visual clutter.
• Don't use typefaces other than Inter; system fonts and serif fonts break the technical clarity of the brand.
• Don't reduce padding below 12px on buttons or inputs; this compromises touch-friendliness and visual breathing room.
• Don't use the error red (#dc2626) for non-critical elements; reserve it for destructive actions and genuine alerts.
• Don't apply border-radius smaller than 0.25rem (4px) on any interactive element; it creates a harsh, dated appearance.
• Don't mix elevation levels within a single section; maintain consistency so users understand the visual hierarchy.