HUD Dashboard

Overview

HUD Dashboard is a data-intensive admin interface built on the aesthetic of 'Precision Minimalism'—a design philosophy that strips away visual noise to expose operational truth. The brand serves DevOps engineers, system administrators, and analytics teams who demand real-time clarity without distraction. The UI evokes a sense of controlled power: dark, focused, and responsive. Every pixel serves data; every color choice signals intent. The voice is direct, technical, and unadorned. Sentences are short and metric-driven. Example: 'CPU usage spiked 23% at 14:32 UTC. Disk C at 78.5% capacity.'

Colors

The color system is built on a dark-first foundation (#1a2332 surface, #0f1620 background) that reduces eye strain during extended monitoring sessions while maximizing contrast for critical alerts. Primary (#3cd2a5, a vibrant teal) is reserved exclusively for affirmative actions, success states, and the most important CTAs—it appears on the 'HUD ADMIN' button and all positive data indicators. Secondary (#0271ff, electric blue) supports interactive elements and secondary CTAs like 'SEE ALL' buttons (rendered at #c0cacf with 600 weight for reduced visual weight). Tertiary (#c0cacf, cool gray) is used for neutral labels, metadata, and secondary text. Error (#e00000, pure red) is deployed sparingly for critical warnings and system failures. The surface stack uses precise increments: surface-co

Typography

The type system uses Chakra Petch exclusively—a geometric, tech-forward typeface that reinforces the dashboard's precision aesthetic. Display (56px, 700 weight, -0.03em tracking) is reserved for hero statements and major section titles. Headline-lg (32px, 600 weight) anchors card titles and key metrics. Body-md (14px, 300 weight, 0.02em tracking) is the workhorse for data labels, table cells, and UI copy—the lighter weight (300) reduces visual density in data-heavy layouts. Label-md (12px, 600 weight, 0.05em tracking) is applied to badges, button text, and form labels, with increased letter-spacing to improve scannability in compact spaces. All text over backgrounds darker than #1a2332 should have a text-shadow of 0 1px 2px rgba(0, 0, 0, 0.3) to prevent haloing on low-contrast displays. He

Layout

The layout uses a 12-column grid with a max-width of 1320px, maintaining a fluid layout on desktop and collapsing to single-column on mobile. The left sidebar (fixed, 240px) contains navigation; the main content area uses lg spacing (24px) for section separation and md spacing (16px) for component grouping. Cards are arranged in a 2–4 column grid depending on viewport, with consistent 16px gutters. The container-max-width of 1320px ensures readability without excessive line lengths. White-space is used strategically: 24px margins between major sections, 8px padding within cards, and 16px padding around form inputs. The spacing scale (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 40px) is applied consistently to maintain rhythm. Modals and overlays use surface-container-highest (#354556) with a

Elevation & Depth

Depth is conveyed through a restrained shadow system and border hierarchy rather than dramatic layering. Level 1 (Base): no shadow, surface-container background (#1f2a38), 1px outline-variant border (#3d4a54). Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15) shadow, surface-container background, 1px outline-variant border. Level 3 (Elevated/Modal): 0 8px 24px rgba(0, 0, 0, 0.2) shadow, surface-container-high background (#2a3847), 1px outline border (#526872). Hover states elevate cards by one level: standard cards gain the Level 2 shadow and surface-container-high background. Focus state

Shapes

The shape philosophy is 'Architectural Precision'—minimal rounding that suggests structure without softness. Buttons and inputs use 4px border-radius (DEFAULT), creating a subtle, technical appearance. Cards and containers use 4px as well, maintaining visual consistency. Larger containers (modals, dropdowns) use 6px (md) or 8px (lg) to create subtle visual distinction without introducing organic curves. The full radius (9999px) is reserved for badges and pill-shaped elements like the theme color swatches. This restrained approach keeps the interface feeling engineered and purposeful. No elemen

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use {colors.primary} (#3cd2a5) with 8px 16px padding and 36px height, applied to affirmative actions like 'Save' or 'Deploy'. Secondary buttons use {colors.tertiary-container} (#a8b6bc) with reduced padding (4px 8px) and 28px height for less prominent actions like 'Cancel' or 'See All'. Hover states transition the background color over 150ms (transition: background-color 0.15s ease-out). Active/pressed states darken the background by one shade in the color hierarchy. Focus states add a 3px inset box-shadow: 0 0 0 3px rgba(60, 210, 165, 0.1) without removing the border.

Containers & Surfaces Cards are the primary container: {colors.surface-container} (#1f2a38) background, 1px {colors.outline-variant} border, 16px pa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#3cd2a5) exclusively for success states, affirmative CTAs, and positive data trends—never for warnings or neutral elements.
• Do apply {typography.body-md} (14px, 300 weight) as the default text size for data labels and table cells to reduce visual density in information-heavy layouts.
• Do maintain 24px (lg spacing) between major sections and 16px (md spacing) between component groups to create clear visual rhythm without excessive whitespace.
• Do use 0 3px 8px rgba(0, 0, 0, 0.15) shadows on cards and 0 8px 24px rgba(0, 0, 0, 0.2) on modals—never use softer or larger shadows that would blur the interface.
• Do apply 4px border-radius to buttons, inputs, and cards to maintain the 'Architectural Precision' aesthetic; reserve 8px+ only for modals and elevated containers.

**Don't**

• Don't use {colors.primary} (#3cd2a5) for neutral or secondary actions—it is reserved for affirmative CTAs and success indicators only.
• Don't apply font weights lighter than 300 or heavier than 700 in body text; the system is optimized for 300–600 weight ranges.
• Don't exceed 12px border-radius on any element; the dashboard's authority depends on sharp, engineered edges.
• Don't use colors outside the defined palette for UI elements—custom colors break the dark-mode contrast ratios and visual hierarchy.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.2)) or use multiple layered shadows; the system uses single, precise shadows for clarity.