TailAdmin

Overview

TailAdmin is a data-driven eCommerce dashboard template that prioritizes operational clarity and business intelligence through a clean, accessible interface. Built with Tailwind CSS and designed for modern SaaS platforms, it embodies a "Functional Minimalism" aesthetic—where every visual element serves a purpose in communicating metrics, trends, and actionable insights. The brand personality is professional yet approachable: precise, trustworthy, and never cluttered. The UI uses a light, neutral foundation (off-white surfaces at #f9fafb) punctuated by a vibrant cobalt blue accent (#465fff) that draws attention to primary actions and key data points, creating visual hierarchy without visual noise.

The voice is direct and data-literate: "You earn $3287 today, it's higher than last month. Keep up your good work!" Rather than breathless enthusiasm, TailAdmin speaks in measured, factual tones that respect the user's time and intelligence. Typography relies on Outfit, a geometric sans-serif that conveys modernity and clarity. The design system emphasizes consistency, accessibility (WCAG AA contrast ratios throughout), and responsive behavior across all viewport sizes.

Colors

The color system is anchored in a neutral, light-mode-first palette with strategic accent colors for interactivity and status indication. **Primary (#465fff)** is the brand's signature cobalt blue, used exclusively for call-to-action buttons, active states, focus rings (applied as a 3px box-shadow in rgba(70, 95, 255, 0.2)), and key interactive elements. It commands attention without aggression and conveys trust and professionalism. **Secondary (#fb6514)** is a warm orange accent reserved for secondary actions, alerts, and trend indicators (e.g., negative performance deltas). **Tertiary (#344054)** is a dark slate used for body text and structural elements, ensuring readability at 16px on light backgrounds. The surface stack progresses from pure white (#ffffff, surface-bright) through soft

Typography

The type system uses Outfit (Google Fonts, weights 400, 500, 600, 700) across all scales, creating a cohesive, modern voice. **Display (56px, 700 weight, -0.02em tracking)** anchors hero sections and major page titles. **Headline-lg (36px, 600 weight)** introduces dashboard sections; **headline-md (28px, 600 weight)** breaks up card content. **Title-lg (20px, 600 weight)** labels cards and modals. **Body-lg (18px, 400 weight, 28px line-height)** is reserved for introductory text and descriptions; **body-md (16px, 400 weight, 24px line-height)** is the default for all body copy, input fields, and list items. **Label-md (14px, 500 weight, 0.01em tracking)** is applied to button text, form labels, and secondary UI text; **label-sm (12px, 500 weight, 0.02em tracking)** is used for badges, help

Layout

The layout follows a 12-column grid system with a max-width of 1280px, centered on the viewport with symmetric 24px gutters on desktop (reduced to 16px on tablet, 12px on mobile). The sidebar navigation occupies 290px on desktop, collapsing to an icon-only state at 768px breakpoint. Main content area uses a fluid grid: dashboard cards are typically 1/3 width (4 columns) on desktop, 1/2 width (6 columns) on tablet, and full-width (12 columns) on mobile. Vertical rhythm is maintained through consistent spacing: 40px (lg) separates major sections, 24px (md) separates card groups, 12px (sm) separates list items within cards. The container-max-width of 1280px prevents content from becoming unwieldy on ultra-wide displays. White-space is treated as a first-class design element: cards have 24px i

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered colors. **Level 1 (Base)**: Surface elements (cards, inputs) use a 1px solid border in outline-variant (#d0d5dd) with no shadow, sitting flush on the background. **Level 2 (Elevated/Hover)**: On hover or focus, cards elevate to box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a gentle lift. **Level 3 (Modals/Dropdowns)**: Modals and dropdown panels use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), establishing clear separation from the page. All shadow transitions occur over 150ms using ease timing. Focus sta

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are applied consistently but conservatively, avoiding the extremes of sharp 90° angles or overly organic curves. **Buttons and inputs** use 8px border-radius (1rem), striking a balance between modern softness and professional restraint. **Cards and containers** use 12px border-radius (1.5rem) to establish a clear visual distinction from interactive elements. **Badges and pills** use 9999px border-radius (full) to create a capsule shape that signals compactness and status. **Modals and dropdowns** use 12px border-radius for consistency

Components

Action Elements **Button-primary** (48px height, 12px vertical / 24px horizontal padding, 8px border-radius) uses primary (#465fff) background with white text at label-md weight. On hover, the background darkens to #3641f5 over 150ms. On active/press, apply a 2px inset box-shadow in rgba(0, 0, 0, 0.1). On focus (keyboard), add a 3px outset box-shadow in primary-container (rgba(236, 243, 255, 0.8)). Disabled state: background becomes surface-container (#f2f4f7), text becomes on-surface-variant (#475467), cursor becomes not-allowed.

**Button-secondary** (48px height, 12px vertical / 24px horizontal padding, 8px border-radius) uses primary-container (#ecf3ff) background with primary (#465fff) text. On hover, background darkens to #dde9ff. On active, apply a 2px inset box-shadow in rgba(7

Do's and Don'ts

**Do**

• Do use primary (#465fff) exclusively for CTAs, focus states, and active navigation items—never for decorative elements or backgrounds.
• Do maintain 24px (lg) spacing between major sections and 12px (sm) between items within cards to preserve visual breathing room.
• Do apply 150ms ease transitions to all interactive state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use Outfit at 400 weight for body text and 600+ weight for headings to create clear typographic hierarchy.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on card hover to elevate without overwhelming the light background.
• Do use 8px border-radius on buttons and inputs, 12px on cards, and 9999px on badges to create a consistent, tiered shape language.

**Don't**

• Don't use secondary (#fb6514) or tertiary (#344054) as primary action colors—reserve them for secondary actions and status indicators.
• Don't apply shadows darker than rgba(0, 0, 0, 0.12) on light backgrounds; they create visual heaviness that contradicts the minimalist aesthetic.
• Don't mix border-radius values arbitrarily; stick to the 8px / 12px / 9999px scale to maintain visual consistency.
• Don't use color alone to communicate state (e.g., error, success); always pair color with an icon, text label, or border treatment for accessibility.
• Don't reduce padding below 12px on interactive elements or below 24px on card interiors; this creates visual clutter and reduces scannability.
• Don't apply transitions longer than 150ms on interactive states; slower transitions feel sluggish and reduce perceived responsiveness.