Apex Dashboard

Overview

Apex Dashboard is a production-grade admin interface built on a philosophy of 'Data-Forward Clarity'—a design movement that prioritizes information hierarchy and actionable insights over decorative elements. The aesthetic combines neutral minimalism (predominantly white surfaces at #ffffff with gray accents at #e5e7eb) with strategic accent colors: a vibrant emerald green (#10b981) for primary actions and success states, teal (#0891b2) for secondary information, and warm amber (#f59e0b) for warnings. The brand personality is professional yet approachable, speaking to both technical and non-technical stakeholders with precision and calm. The UI evokes trust through consistent spacing (8px unit grid), predictable typography hierarchy, and restrained use of color—every hue serves a functional purpose rather than decoration. Example voice: 'Your revenue increased 12.5% this month. Direct traffic accounts for 35% of visits.'

Colors

The color system operates on a neutral-dominant foundation with three functional accent roles. The surface stack (white #ffffff → surface-container-highest #d0d0d0) provides depth through subtle gray increments, enabling layering without visual noise. Primary (#10b981, emerald green) is reserved exclusively for CTAs ('New Order' button), active states, and success indicators—it appears sparingly but commands attention when it does. Secondary (#0891b2, teal) supports data visualization and secondary navigation, appearing in charts and sidebar highlights. Tertiary (#f59e0b, amber) flags warnings and non-critical alerts. Error (#ef4444, red) is used only for destructive actions and error states. The on-* pairs ensure 4.5:1 minimum contrast: on-primary is white (#ffffff) for 21:1 contrast agai

Typography

The type system uses geistSans (system fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto) across all scales, creating visual cohesion through a single typeface family. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections; headline-lg (40px, 600 weight) titles major sections; headline-md (28px, 600 weight) breaks subsections; title-lg (20px, 600 weight) labels cards and modals; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry content; label-md (14px, 500 weight, 0.01em spacing) and label-sm (12px, 500 weight, 0.02em spacing) annotate UI controls. Weight hierarchy (400 for body, 500 for labels, 600+ for headings) creates visual rhythm without relying on color. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layer

Layout

The layout operates on a 12-column grid with a 1440px container max-width, enabling responsive scaling from mobile (single column) to desktop (full grid). The sidebar occupies 260px fixed width on desktop, collapsible on tablet/mobile. Main content area uses 24px gutter spacing (md token) between sections, with 40px (lg token) separating major layout blocks (hero, metrics, charts). Cards and metric containers use 24px internal padding (md token), with 12px (sm token) between nested elements. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for form field padding and list item spacing, md (24px) for card padding and section margins, lg (40px) for major section breaks, xl (64px) for hero/footer spacing. White space is treated as a first-class design

Elevation & Depth

Depth in Apex is achieved through a restrained shadow system that avoids the heavy drop-shadows common in older admin templates. Level 1 (Base): no shadow, flat surface at #ffffff. Level 2 (Cards, inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), a soft shadow with 4px blur and 12px spread, creating subtle lift without drama. Level 3 (Modals, popovers, hover states): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger blur (16px) and spread (40px) for pronounced depth. Focus states add a secondary ring: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(16, 185, 129, 0.1), layering

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting a professional rather than playful aesthetic. Buttons use lg radius (1rem / 16px) for a modern, approachable feel while maintaining clarity. Cards and containers use lg radius (16px) for consistency with buttons. Input fields use DEFAULT radius (0.5rem / 8px), slightly tighter than cards to signal interactivity without distraction. Small UI elements (badges, pills, close buttons) use full radius (9999px) for a polished, contained appearance. The rationale: lg radius (16px) is large enough to feel co

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses {colors.primary} (#10b981) background with white text, 40px height, 8px 16px padding, lg radius (16px), and {elevation.sm} shadow. On hover, shift background to #059669 (darker emerald) with a 200ms ease transition—never remove the shadow on hover, as it maintains visual hierarchy. On active/pressed, darken further to #047857. button-secondary uses transparent background with primary-colored text, a 1px outline at {colors.outline}, and no shadow; on hover, add {colors.surface-container-low} background. Both button variants use label-md typography (14px, 500 weight) for consistency.

Containers & Surfaces card is the foundational container: white background (#ffffff), lg radius (16px), md padding (24p

Do's and Don'ts

**Do**

• Do use {colors.primary} (#10b981) exclusively for primary CTAs, success states, and active navigation—never dilute its impact by overusing it.
• Do maintain 24px (md) spacing between major sections and 12px (sm) between nested elements; the 8px grid is the foundation of visual rhythm.
• Do apply {elevation.md} shadow (0 16px 40px rgba(0, 0, 0, 0.12)) only to modals, popovers, and elevated containers; cards use {elevation.sm}.
• Do use label-md (14px, 500 weight) for all button text and form labels; body-md (16px, 400 weight) for body copy.
• Do include a 3px focus ring at rgba(16, 185, 129, 0.1) on all interactive elements for keyboard accessibility and visual feedback.

**Don't**

• Don't use shadows on every element; reserve them for interactive surfaces (buttons on hover, cards, modals) to maintain visual clarity.
• Don't apply rounded corners smaller than 8px (DEFAULT) on interactive elements—sharp corners read as outdated in modern dashboards.
• Don't mix typefaces; geistSans is the system typeface across all scales—avoid serif or monospace except in code blocks.
• Don't use secondary (#0891b2) or tertiary (#f59e0b) colors for primary CTAs; they are supporting accents for data visualization and warnings only.
• Don't compress spacing below 12px (sm token) for readability; the 8px grid is a minimum unit, not a target for every gap.