Eyris

Overview

Eyris is a professional React admin template designed for enterprise dashboards and data-driven applications. The design system embodies "Precision Minimalism"—a philosophy that prioritizes clarity, accessibility, and functional elegance over decorative flourishes. The brand serves product teams, developers, and business analysts who demand both visual polish and technical rigor. The UI evokes confidence and professionalism through a restrained color palette anchored by a vibrant cobalt blue (#286cf0) that commands attention on CTAs and interactive elements, paired with a neutral gray foundation that recedes gracefully. The emotional response is one of calm competence: users feel they are working with a tool built by experts, for experts.

The voice is direct, instructional, and never condescending. Eyris speaks in the language of efficiency: "Sign In," "Import Leads," "Filter," "Export data." Vocabulary favors action verbs and concrete nouns (dashboard, leads, qualified, unqualified) over marketing speak. The brand personality is approachable yet authoritative—a senior colleague who knows the domain and respects your time. Example sentence in Eyris voice: "Your app, supercharged—from elegant UI components to thoughtful page designs, build scalable web experiences with ease."

Colors

The Eyris color system is built on a foundation of neutral surfaces (surface: #fafafa, on-surface: #171717) that provide visual rest and reduce cognitive load in data-heavy interfaces. The primary accent, cobalt blue (#286cf0), is reserved exclusively for call-to-action buttons, active states, focus rings, and key interactive elements—it appears sparingly but with high impact. Primary-container (#4c86f4) and primary-fixed-dim (#1f56c0) provide hover and pressed states, creating a three-tier interaction hierarchy. Secondary blue (#3380fa) supports informational UI and secondary actions. Status colors are semantic and immediately recognizable: success (#00a85b) for confirmations, warning/tertiary (#f59e0b) for caution states, and error (#eb4137) for destructive actions. Each status color inc

Typography

The Eyris type system uses Geist, a geometric sans-serif optimized for screen legibility and modern UI contexts. The hierarchy spans eight levels from display (60px, 700 weight) down to label-sm (12px, 500 weight), with consistent line-height ratios (1.13–1.5) ensuring comfortable reading at all sizes. Display and headline-lg are reserved for page titles and hero sections; headline-md (28px, 600 weight) anchors section headers with -0.01em letter-spacing to tighten the visual mass. Body-md (16px, 400 weight) is the default paragraph text, paired with 24px line-height for 1.5 ratio—ideal for form labels and body copy. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) handle UI labels, button text, and metadata; the 500 weight provides subtle emphasis without heaviness. All text sm

Layout

Eyris uses a 12-column fluid grid with a fixed max-width of 1280px, centered with symmetric gutters of 24px on desktop and 12px on mobile. The page rhythm follows a three-tier spacing scale: lg (40px) separates major sections, md (24px) groups related components, and sm (12px) provides breathing room within components. The container-max-width of 1280px accommodates wide data tables and multi-column dashboards without overwhelming the viewport. Form layouts use vertical stacking (form-container vertical) with consistent 12px gaps between fields, and input heights are standardized at 36px (h-9 in Tailwind) to align with button heights for visual rhythm. Cards and containers employ 24px padding (md spacing) internally, with 8px (unit) used for micro-spacing within component internals (e.g., i

Elevation & Depth

Depth in Eyris is achieved through a three-level shadow system combined with subtle background color shifts. Level 1 (Base): flat surface with no shadow, background #fafafa. Level 2 (Standard Card/Input): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background #ffffff, used for cards, dropdowns, and form inputs. Level 3 (Elevated/Modal): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background #ffffff, reserved for modals, popovers, and floating panels. The shadow blur radius increases with elevation (8px → 40px) while the spread remains tight, creating a sense of lift without diffusion. Focus st

Shapes

Eyris employs "Functional Roundness"—a shape philosophy that balances approachability with precision. All interactive elements (buttons, inputs, cards) use rounded: lg (1rem / 16px) as the default radius, creating a friendly, modern appearance without excessive softness. Smaller UI elements like badges and status indicators use rounded: full (9999px) for pill-shaped containers, immediately signaling their compact, non-interactive nature. Form inputs and select dropdowns use rounded: lg (16px) to match button radii, creating visual cohesion in form layouts. The reasoning: 16px radius is large e

Components

Action Elements Buttons in Eyris follow a two-tier system: primary (bg-primary #286cf0, text-white, 36px height, 16px horizontal padding, rounded-lg) for main CTAs like "Sign In," and secondary (bg-white, border 1px outline-variant, text-on-surface) for alternative actions. Primary buttons transition to bg-primary-container (#4c86f4) on hover with a 150ms ease-out timing, and to bg-primary-fixed-dim (#1f56c0) on active/press. Secondary buttons shift to bg-surface-container-high (#f0f0f0) on hover. All buttons use label-md typography (14px, 500 weight) and include button-press-feedback class for tactile feedback on mobile. Social auth buttons (Google, GitHub) use the secondary style with a 1px border and 36px height for consistency.

Containers & Surfaces Cards use a white backgroun