Geex Modern Admin Dashboard

Overview

Geex is a modern admin dashboard system designed for financial platforms, invoicing workflows, and multi-tenant SaaS applications. The aesthetic embraces 'Vibrant Data Visualization'—a design movement that treats dashboard cards as colorful, gradient-filled containers that transform raw metrics into emotionally engaging visual stories. The brand personality is approachable yet authoritative: it speaks to finance professionals and developers with clarity and precision, never condescending, always actionable. The UI employs a light lavender background (rgb(243, 242, 247)) paired with bold, saturated accent cards in purple (#ab54db), teal, orange, and red—each color carries semantic meaning (purple for primary actions, red for alerts, teal for success). Voice example: 'Your balance stands at $1,500.00 as of Tuesday, 9:24 AM—track pending invoices in real time.'

Colors

The color system is built on a 'Semantic Saturation' philosophy: every hue carries functional intent, not decoration. Primary (#ab54db, a vibrant orchid purple) anchors all CTAs, focus states, and brand-critical interactions—it appears on the 'Sign Up' button and primary metric cards. Secondary (#5840ff, a deep indigo) supports secondary actions and highlights. Tertiary (#ffa500, a warm golden orange) marks warnings and tertiary information. The surface stack uses cool lavenders and near-whites (surface: #f3f2f7, surface-bright: #ffffff) to provide breathing room around the saturated cards. Error red (#ff0f0f) is reserved exclusively for destructive actions and critical alerts. On-surface text (#464255, a warm charcoal) ensures 7:1 contrast on light backgrounds. Gradients are applied to me

Typography

The type system uses Poppins (a geometric sans-serif from Google Fonts) across all scales, creating a friendly yet professional voice. Display (60px, 700 weight) is reserved for hero headlines; Headline-lg (40px, 600 weight) anchors page titles like 'Invoicing'; Headline-md (28px, 600 weight) breaks sections; Title-lg (20px, 600 weight) labels card headers; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry narrative content; Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) tag buttons, badges, and metadata. Letter-spacing ranges from -0.04em (display, for tightness) to 0.02em (labels, for clarity). Line-height is set to unitless values (1.5 for body, 1.33 for headlines) to scale fluidly. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on white-text labels over gra

Layout

The layout follows a 12-column grid system with a max-width of 1280px, centered on the viewport. The left sidebar occupies 280px (fixed), leaving 1000px for the main content area. Sections are separated using lg spacing (40px) vertically; cards within a section use md spacing (24px) for gutters. The metric card grid is 2×2 on desktop, collapsing to 1×4 on tablet and 1×1 on mobile. Container padding is consistently md (24px) on all sides. White-space is generous: the background color (#f3f2f7) is never fully covered—cards float with 24px margins, creating a 'breathing' effect. The gutter between grid items is 24px, enforced via CSS Grid gap. This rhythm prevents visual clutter and allows the eye to rest between data-dense cards.

Elevation & Depth

Depth is conveyed through layered shadows and subtle transforms. Level 1 (Base surface): no shadow, flat background (#f3f2f7). Level 2 (Standard cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), border: 1px solid #b9bbbd. Level 3 (Metric cards with gradient): box-shadow: 0 8px 24px rgba(130, 49, 211, 0.15), creating a purple-tinted depth that reinforces the primary brand color. On hover, metric cards elevate to box-shadow: 0 12px 32px rgba(130, 49, 211, 0.25) and translate 2px upward (transform: translateY(-2px)) over 300ms (cubic-bezier(0.4, 0, 0.2, 1)), signaling interactivity. Input field

Shapes

The shape philosophy is 'Rounded-Technical': corners are softened but not organic, reflecting a balance between approachability and precision. Buttons and badges use lg (1rem / 16px) border-radius, creating a pill-like appearance that feels modern and clickable. Metric cards use xl (1.5rem / 24px) for a more generous curve that softens the bold gradient fills. Input fields use DEFAULT (0.5rem / 8px) for subtle rounding that doesn't distract from content. The sidebar and modals use xl (24px) for consistency with large containers. Full (9999px) is applied only to circular icon badges (the checkm

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#ab54db) with white text, 14px Poppins 600-weight, 48px height, 24px horizontal padding, and lg (16px) border-radius. On hover, the background shifts to #9a3fc8 (a darker purple) with a 0.2s ease transition. The button-secondary variant uses a transparent background with rgba(171, 84, 219, 0.15) and a 1px border at rgba(171, 84, 219, 0.3); on hover, the background increases to rgba(171, 84, 219, 0.25) and the text color shifts to primary. Both variants use a 48px height to ensure touch-friendly targets (minimum 44px per WCAG).

Containers & Surfaces Metric cards (card-metric) are the visual centerpiece. Each card has a solid background color (primary purple, secondary

Do's and Don'ts

**Do**

• Do use the primary purple (#ab54db) exclusively for primary CTAs, focus rings, and brand-critical interactions—it is the visual anchor of the system.
• Do apply metric card shadows with the purple tint (rgba(130, 49, 211, 0.15)) to reinforce brand cohesion across the dashboard.
• Do maintain the 24px gutter between grid items and 40px section separation to preserve the 'breathing' white-space aesthetic.
• Do use Poppins 600-weight for all headlines and labels; reserve 400-weight for body text to establish clear hierarchy.
• Do apply the hover transform (translateY(-2px)) and shadow elevation on interactive cards to signal clickability without relying on color alone.

**Don't**

• Don't use the primary purple on non-interactive elements (backgrounds, borders, text) unless they are CTAs or focus states—it dilutes the accent's impact.
• Don't apply border-radius greater than xl (24px) to buttons or input fields; the system uses graduated rounding, and over-rounding reads as unprofessional.
• Don't mix font families; Poppins is the sole typeface—Arial and Lato are legacy fallbacks and should not appear in new components.
• Don't exceed 40px blur radius on shadows; the system maintains a 'close-to-surface' aesthetic, and excessive blur creates a floating, disconnected feel.
• Don't use the error red (#ff0f0f) for non-critical states; it is reserved for destructive actions and alerts to maintain semantic clarity.