Metronic

Overview

Metronic is an enterprise-grade admin dashboard framework built on the principle of 'Structured Clarity'—a design philosophy that prioritizes information hierarchy, rapid pattern recognition, and professional polish. The aesthetic combines the precision of technical dashboards with the accessibility of modern SaaS interfaces, using a cool blue primary accent (#1b84ff) paired with a neutral light surface (#fcfcfc) to create visual calm without sacrificing urgency. The brand serves developers, product managers, and business analysts who need to monitor complex systems and make data-driven decisions at scale.

The voice is direct, confident, and solution-focused. Metronic avoids marketing hyperbole and instead speaks in concrete capabilities: 'Multi-demo support,' 'RTL ready,' 'Lifetime updates.' Sentences are short and action-oriented. Example: 'Grab your copy now and get life-time updates for free.' The typography system uses Inter exclusively—a typeface chosen for its exceptional clarity at small sizes (12px labels) and its neutral personality that doesn't distract from data visualization.

Colors

The color system is anchored by a professional blue primary (#1b84ff) used exclusively for interactive elements—buttons, links, focus states, and data highlights. This blue is never used for backgrounds or body text, maintaining its power as a call-to-action signal. The secondary accent is a vibrant green (#17c653) reserved for success states, positive metrics, and confirmatory actions. The tertiary accent is a warm rose (#f1416c) used for errors, warnings, and destructive actions—its warmth creates immediate visual distinction from the cool primary. The surface stack is built on near-white (#fcfcfc) as the base, with a carefully calibrated gray scale: surface-dim (#f5f5f5) for subtle backgrounds, surface-container (#eeeeee) for card containers, and surface-container-high (#e0e0e0) for hov

Typography

The type system uses Inter across all scales, chosen for its geometric clarity and exceptional hinting at small sizes. Display (56px, 700 weight) is reserved for page titles and hero statements; Headline-lg (36px, 600 weight) anchors major sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (16px, 400 weight) is the primary reading size for descriptions and longer content; Body-md (14px, 400 weight) is used for secondary information and metadata. Label-md (13px, 600 weight) is applied to button text, form labels, and small UI text; Label-sm (12px, 500 weight) is used for badges, timestamps, and tertiary information. Letter-spacing increases slightly at smaller sizes (0.03em at label-md, 0.04em at label-sm) to maintain legibility. On small labels over busy backgrounds,

Layout

Metronic uses a 12-column grid with a fixed max-width of 1280px, allowing for flexible layouts that scale from mobile (single column) to desktop (multi-column dashboards). The gutter is consistently 24px, creating rhythm and breathing room between sections. The spacing scale follows a 8px base unit: xs (4px) for micro-adjustments, sm (12px) for compact spacing, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. Cards and containers use md (24px) internal padding, creating a consistent visual rhythm. The page background is surface (#fcfcfc), a near-white that reduces eye strain during extended dashboard use while maintaining sufficient contrast for text and interactive elements. Sidebar navigation uses the full surface-conta

Elevation & Depth

Depth in Metronic is conveyed through a restrained shadow system and subtle elevation changes, avoiding the heavy shadows common in older dashboard templates. Level 1 (Base): the page background (surface, #fcfcfc) with no shadow. Level 2 (Standard Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), rounded: 1rem, border: 1px solid #dddddd. This creates a barely-perceptible lift that defines card boundaries without visual drama. Level 3 (Modals/Elevated Content): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), rounded: 1.5rem, border: 1px solid #dbdfe9. The increased blur radius (40px) and spread c

Shapes

The shape philosophy is 'Technical Approachability'—rounded corners are used consistently to soften the precision of data-heavy interfaces without introducing organic or playful aesthetics. Buttons use rounded.lg (1rem / 16px), creating a friendly but professional appearance. Cards and containers use rounded.lg (1rem) for consistency with buttons, reinforcing a cohesive component language. Input fields use rounded.DEFAULT (0.5rem / 8px), a tighter radius that signals form-specific functionality. Badges and pills use rounded.full (9999px) to create visual distinction as secondary UI elements. T

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: #1b84ff, textColor: #ffffff, padding: 12px 24px, height: 48px, rounded: 1rem, with a 150ms ease-in-out transition to #0d6efd on hover. The 48px height ensures touch-friendly targets on mobile and desktop. Button-secondary uses a transparent background with a 1px border (#cccccc) and primary text color, allowing for secondary actions without visual competition. Focus states add a 3px rgba glow (0 0 0 3px rgba(27, 132, 255, 0.1)) to support keyboard navigation.

Containers & Surfaces Cards are the primary container for grouped information. Standard cards use backgroundColor: #ffffff, rounded: 1rem, padding: 24px, boxShadow: 0 1px 2px rgba(0, 0, 0, 0.06), border: 1px solid #dddddd. O

Do's and Don'ts

**Do**

• Do use the primary blue (#1b84ff) exclusively for interactive elements—buttons, links, focus states—never for backgrounds or body text.
• Do maintain the 24px gutter and md spacing scale throughout layouts to create consistent visual rhythm and breathing room.
• Do apply the 150ms ease-in-out transition to all interactive state changes (hover, focus, active) to signal interactivity without jarring movement.
• Do use the full surface stack (surface-dim, surface-container, surface-container-high) to create subtle visual hierarchy without introducing new colors.
• Do use Inter at all sizes, with increased letter-spacing (0.03em–0.04em) at label sizes to maintain legibility at small scales.

**Don't**

• Don't use primary blue for backgrounds, cards, or non-interactive surfaces—reserve it exclusively for CTAs and focus states.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12) to avoid creating a dated, heavy aesthetic.
• Don't introduce new accent colors beyond primary (#1b84ff), secondary (#17c653), and tertiary (#f1416c)—use the surface stack for all other needs.
• Don't use rounded corners smaller than 0.5rem (8px) on buttons or cards—the minimum radius is reserved for form inputs.
• Don't apply text-shadow or other effects to body text—reserve text-shadow only for small labels (12px or smaller) over busy backgrounds.