Star Admin 2

Overview

Star Admin 2 is a professional, data-driven dashboard system designed for business operations, financial reporting, and e-commerce management. Built on a clean, light-mode foundation with strategic use of vibrant accent colors, the system prioritizes clarity, scannability, and actionable insights. The aesthetic movement is "Functional Minimalism with Chromatic Accents"—a disciplined approach that uses a neutral light background (rgb(244, 245, 247)) as the canvas, allowing data visualizations and interactive elements to command attention through color and hierarchy rather than decoration. The emotional response is one of professional confidence: users feel in control of complex information, never overwhelmed.

The brand voice is direct, precise, and business-focused. Vocabulary emphasizes clarity and action: "Active Balance," "Total Incomes," "Add Virtual Card." Tone is never casual or playful—it's authoritative without being cold. Example sentence in brand voice: "Your $9,470 active balance reflects total incomes of $1,699.0 against expenses of $1,699.0 this period."

Colors

The color system is built on a light, neutral foundation with three strategic accent colors that drive visual hierarchy and user action. Primary (rgb(31, 59, 179) / #1e3bb3) is the brand's signature accent—used exclusively on call-to-action buttons ("send," "Add Virtual Card"), active navigation states, and data highlights. It conveys trust and authority. Secondary (rgb(0, 205, 255) / #00cdff) is a bright cyan used for secondary metrics and supporting data points, creating visual rhythm without competing with primary. Tertiary (rgb(77, 167, 97) / #4da761) is a muted green reserved for positive indicators, growth metrics, and success states. Error (rgb(249, 95, 83) / #f95f53) is a warm coral used sparingly for warnings and negative values. The surface stack uses a light gray foundation (rgb

Typography

The type system uses Manrope, a geometric sans-serif from Google Fonts, across all scales. Manrope's clean, modern letterforms support the functional aesthetic while maintaining warmth. Display (56px, 700 weight) is reserved for hero headlines; Headline-lg (32px, 600 weight) anchors major sections like "Good Morning, John Doe"; Headline-md (28px, 400 weight) is used for secondary headings and metric titles. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) handle descriptive text and data labels. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and form labels. Letter-spacing is minimal (0 to 0.02em) to maintain density and professionalism. On small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure leg

Layout

The layout uses a 12-column grid with a fixed container max-width of 1280px, ensuring content remains scannable on large displays while maintaining focus. The page rhythm is driven by a semantic spacing scale: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for page-level margins. The sidebar navigation occupies 220px on desktop, leaving 1060px for the main content area. Cards are spaced md (24px) apart in grid layouts, creating visual breathing room without excessive whitespace. Gutters between grid columns are consistently 24px. The header is fixed at the top with a height of 64px, and the sidebar is fixed on the left. All metric cards use a 3-c

Elevation & Depth

Depth is conveyed through a subtle shadow system that creates clear visual separation without introducing darkness. The base elevation (Level 1) is the light background at rgb(244, 245, 247) with no shadow. Level 2 (Standard Cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that lifts content slightly from the background. Level 3 (Elevated/Modals and Hover States) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread shadow that indicates interactive focus or modal prominence. Dropdown panels and popovers use Level 2 shadows. On hover, cards transi

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the interface without sacrificing clarity or modernity. Buttons use a 12px border-radius (rounded.lg), creating a friendly, approachable form that invites interaction. Cards and containers use 8px border-radius (rounded.md), balancing softness with professional restraint. Input fields use 6px border-radius (rounded.DEFAULT), slightly tighter than cards to indicate functional purpose. Badges and pills use 9999px border-radius (rounded.full) for maximum softness, signaling secondary or supplementa

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use a solid background at rgb(31, 59, 179) with white text, 14px font-weight 600, 48px height, 10px vertical padding, 24px horizontal padding, and 12px border-radius. On hover, the background darkens to #1a2d8f and the shadow expands to 0 6px 16px rgba(30, 59, 179, 0.25), with a 200ms transition. On active/pressed state, the background becomes #152566. Secondary buttons use a transparent background with a 1px solid border at rgb(31, 59, 179) and matching text color; on hover, they fill with rgb(232, 240, 255) (primary-container). All buttons use Manrope 14px 600 weight. The "send" button in the top-right uses the primary button style; the "Add Virtual Card" button at the bottom-right uses the same primary

Do's and Don'ts

**Do**

• Do use primary blue (rgb(31, 59, 179)) exclusively on CTAs and active states—never on passive elements or backgrounds.
• Do maintain the light background (rgb(244, 245, 247)) as the canvas; let data and accent colors command attention.
• Do apply consistent 24px padding (md spacing) to all card containers and 12px padding (sm spacing) to internal component sections.
• Do use Manrope 600 weight for all interactive labels and headings; 400 weight for body content.
• Do transition all hover states over 200ms with easing: cubic-bezier(0.4, 0, 0.2, 1).
• Do reserve secondary (cyan) and tertiary (green) colors for data visualization and status indicators—never use them on primary CTAs.

**Don't**

• Don't use shadows exceeding 24px blur radius or rgba(0, 0, 0, 0.2) opacity—maintain a flat, modern aesthetic.
• Don't apply border-radius greater than 12px on buttons or 8px on cards—the system uses precise, controlled softness.
• Don't mix font families; Manrope is the only typeface in the system—icon fonts (Feather, MDI) are separate.
• Don't use near-black (rgb(0, 0, 0)) for text; always use rgb(31, 31, 31) for primary content and rgb(108, 117, 125) for secondary.
• Don't apply color to disabled states; use rgb(233, 236, 239) background with rgb(108, 117, 125) text and cursor: not-allowed.
• Don't exceed 48px height on standard buttons or 64px on large action buttons—maintain touch-target consistency.