Nuxt Dashboard

Overview

Nuxt Dashboard is a professional, data-forward admin interface template that prioritizes clarity, scannability, and rapid decision-making. Built with Nuxt UI and Public Sans typography, it embodies a "Clean Modernism" aesthetic—combining a bright, neutral foundation (white surfaces, cool grays at #6c757d and #e9ecef) with a vibrant emerald-green accent (#00dc82) that signals actionability and success. The brand personality is confident yet approachable: precise, uncluttered, and designed for teams who value speed and accuracy over decoration. Voice: direct, data-informed, never verbose. Example sentence: "Revenue climbed 13% this period—your conversion rate is outpacing the forecast."

Colors

The color system is anchored in a neutral, light-mode-first palette that maximizes contrast and readability for data-dense interfaces. Primary (#00dc82) is the signature accent, reserved exclusively for call-to-action buttons, active states, and success indicators—it appears on the prominent '+' button and stat badges to draw the eye to key interactions. Secondary (#0066cc) supports informational hierarchy in secondary buttons and links. The surface stack uses pure white (#ffffff) as the base, with carefully calibrated grays (surface-container-low #f8f9fa, surface-container-high #f0f2f5, outline #dee2e6) to create subtle visual separation without introducing visual noise. Error states use #dc3545 (red) for destructive actions and alerts. All text on light surfaces uses on-surface (#212529,

Typography

Public Sans (from Nuxt UI's default stack) is the sole typeface, chosen for its geometric clarity and excellent on-screen rendering at all sizes. The type system follows a strict hierarchy: display (56px, 700 weight) for page titles, headline-lg (32px, 600 weight) for section headers, body-md (14px, 400 weight) for primary content, and label-md (13px, 600 weight) for UI labels and badges. Letter-spacing is minimal (-0.02em on display, -0.01em on headlines) to maintain density without sacrificing legibility. Line-height is generous (1.5x for body, 1.25x for headlines) to support rapid scanning of data tables and lists. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.08) on small labels (label-sm, 12px) when layered over colored backgrounds to ensure 4.5:1 contrast ratio.

Layout

The dashboard uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. The left sidebar (240px fixed) contains primary navigation; the main content area flows fluidly to fill remaining space. Spacing is semantic and consistent: gutter (24px) separates major sections, lg (24px) padding inside cards, md (16px) between list items, and sm (8px) for tight component grouping. White-space is generous—never less than 16px between interactive elements—to prevent accidental clicks and reduce cognitive load. Container padding is 24px on desktop, reducing to 16px on tablets and 12px on mobile. The grid maintains a 1:1.5 aspect ratio for stat cards (e.g., 240px × 160px) to balance visual weight.

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual heaviness of drop shadows. Level 1 (Base): flat white surface (#ffffff) with a 1px border at #dee2e6 (outline). Level 2 (Cards & Containers): 0 3px 8px rgba(0,0,0,0.15) with a 1px border at outline, creating a subtle lift. Level 3 (Modals, Floating Panels, Dropdowns): 0 8px 24px rgba(0,0,0,0.12) with a 1px border at outline-variant (#e9ecef), signaling maximum prominence. No blur filters or glassmorphism; the system relies on shadow offset and opacity to establish hierarchy. Hover states increase shadow to Level 2 (md)

Shapes

The shape philosophy is "Soft Geometric"—combining sharp, architectural precision with subtle softness to balance professionalism and approachability. Buttons use full (9999px) border-radius for a pill shape, signaling primary actions and reducing visual aggression. Cards and containers use lg (1rem / 16px) border-radius, creating a modern, friendly appearance without excessive roundness. Input fields use DEFAULT (0.5rem / 8px) border-radius, a compromise between geometric clarity and usability. Badges use full (9999px) to emphasize their role as compact, self-contained labels. The consistent

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use #00dc82 background, white text, full border-radius (9999px), 40px height, and 8px 16px padding. On hover (button-primary-hover), the background shifts to #00c16a (a darker green at 62.7% lightness) with no shadow change—the color shift alone signals interactivity. Secondary buttons (button-secondary) have a transparent background, on-surface text (#212529), a 1px outline border, and 36px height; on hover, the background becomes surface-container-high (#f0f2f5). All buttons use label-md typography (13px, 600 weight, 0.01em letter-spacing) and transition background-color in 150ms cubic-bezier(0.4, 0, 0.2, 1).

Containers & Surfaces Cards (card) are the primary container for grouped conte

Do's and Don'ts

**Do**

• Do use primary (#00dc82) exclusively for CTAs, success states, and active navigation items—never for passive text or backgrounds.
• Do maintain at least 24px gutter between major sections and 16px between cards to prevent visual crowding and support rapid scanning.
• Do apply md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) to all cards and containers to establish clear depth hierarchy.
• Do use label-md (13px, 600 weight) for all UI labels, badges, and button text to maintain consistent visual weight.
• Do transition interactive elements (buttons, list items) with background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) to signal state changes smoothly.

**Don't**

• Don't use primary (#00dc82) for body text, backgrounds, or decorative elements—it must remain reserved for high-priority interactions.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0,0,0,0.12)) to avoid visual heaviness and reduce contrast with the bright background.
• Don't mix border-radius values within a single component family (e.g., don't use both DEFAULT and lg on buttons in the same interface).
• Don't reduce padding below md (16px) inside cards or below sm (8px) between inline elements—whitespace is essential for scannability.
• Don't use color alone to convey status; always pair color with text labels or icons (e.g., badge-success with a checkmark icon) for accessibility.