Dexora

Overview

Dexora is a premium SaaS dashboard platform designed for modern business management. It serves entrepreneurs, freelancers, and small-to-medium enterprises who need unified control over clients, projects, invoices, and finances. The aesthetic is "Dark Minimalism with Vibrant Accents"—a sophisticated dark canvas (pure black #000000 background with white #ffffff text) punctuated by a bold, warm orange accent (#ff933d) that draws the eye to critical actions and data points. The UI evokes precision, control, and professional confidence; every element is intentional, every interaction feels responsive and trustworthy.

The brand voice is direct, clear, and action-oriented. Dexora speaks to users as capable professionals who value efficiency over decoration. Sentences are concise and benefit-focused: "Manage clients, projects, invoices, and finances from one smart dashboard." The vocabulary avoids jargon while maintaining sophistication—terms like "smart," "streamline," and "grow faster" reinforce the platform's promise of intelligent simplification. The tone is never condescending; it assumes the user knows their business and just needs better tools.

Colors

The Dexora color system is built on a high-contrast dark foundation with a single, commanding accent. The primary color is a warm, energetic orange (#ff933d, rgb(255, 147, 61)) used exclusively for call-to-action buttons, active states, and key data highlights. This orange is never used for body text or large surface areas—it remains a focal point. The surface stack is a pure black (#000000) for the main background, with carefully calibrated grays for depth: surface-container-low (#0f0f0f) for subtle layering, surface-container (#1a1a1a) for cards and panels, and surface-container-high (#2a2a2a) for hover states and elevated surfaces. Text is primarily white (#ffffff) on dark surfaces, with secondary text in light gray (#cccccc) for reduced emphasis. The outline color (#666666) is used for

Typography

The type system uses Inter Tight exclusively, a modern, geometric sans-serif that conveys efficiency and contemporary design. The hierarchy is steep and intentional: display text (72px, weight 500, line-height 80px) commands attention in hero sections; headline-lg (40px, weight 600) anchors major sections; body-md (16px, weight 400, line-height 24px) is the workhorse for interface copy and data labels. All headings use a tight letter-spacing of -0.01em to -0.02em, creating visual density and sophistication. Body text uses 0em letter-spacing for maximum readability. Labels and buttons use weight 600 at 14px with 0.01em letter-spacing to ensure clarity in dense interfaces. On small labels over busy dashboard backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility

Layout

Dexora uses a 12-column fluid grid with a maximum container width of 1280px (1280px), ensuring the interface scales gracefully from mobile to ultra-wide displays. The page rhythm is built on a consistent 8px unit (spacing.unit), with semantic spacing tokens: sm (12px) for tight component spacing, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter width is 24px, providing comfortable breathing room between grid columns. White space is treated as a design element, not wasted space—sections are separated by lg spacing (40px) to create visual rest and guide the eye through content hierarchy. Cards and panels use md padding (24px) internally, with sm padding (12px) for compact list items. The container max-wi

Elevation & Depth

Depth in Dexora is achieved through layered surfaces and subtle shadows rather than dramatic effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on list items; md (0 4px 12px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and modals that float above the base surface; and lg (0 16px 40px rgba(0, 0, 0, 0.25)) for prominent modals and overlays. The dark background (#000000) means shadows are rendered as darker blacks rather than true shadows—this creates a subtle lift effect without the harshness of light-based shadows. Cards use

Shapes

The shape philosophy is "Functional Precision with Approachable Softness." Buttons and primary CTAs use a full pill shape (border-radius: 50px, or 9999px in CSS) to signal friendliness and encourage clicks—the rounded form contrasts with the sharp, data-driven nature of the dashboard. Cards and panels use a moderate radius (lg: 1rem or 16px) to feel modern without appearing playful. Input fields and smaller components use a subtle radius (DEFAULT: 0.5rem or 8px) for consistency and clarity. Navigation elements and dividers remain sharp (0px radius) to maintain the minimalist, professional aest

Components

Action Elements Buttons are the primary interaction mechanism and use the full pill shape (border-radius: 50px) with the primary orange (#ff933d) background and black text (#000000). The button-primary component has a height of 48px with padding of 17px 20px, using label-md typography (14px, weight 600). On hover, the background transitions to primary-container (#ffb380) over 150ms, creating a warm, inviting feedback. The button-secondary variant uses the off-white secondary color (#f7f2f0) with black text, maintaining the same dimensions and shape. All buttons include a subtle box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) on hover to lift them off the surface. Focus states add a 2px outline in the primary color (#ff933d) with a 2px offset, ensuring keyboard accessibility.

Containers

Do's and Don'ts

**Do**

• Do use the primary orange (#ff933d) exclusively for CTAs, active states, and critical data highlights—it is the brand's signature and must remain rare and impactful.
• Do maintain high contrast between text and background: white (#ffffff) on dark surfaces, dark text (#000000) on light surfaces—never use gray text on gray backgrounds.
• Do apply the full pill shape (border-radius: 50px) to all buttons and primary interactive elements to signal affordance and approachability.
• Do use the lg spacing token (40px) to separate major sections and create visual rest; white space is a design tool, not wasted real estate.
• Do include a 2px outline in the primary color (#ff933d) on all focus states to ensure keyboard accessibility and clarity for users navigating via keyboard.

**Don't**

• Don't use the primary orange (#ff933d) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and highlights.
• Don't apply rounded corners to navigation elements, dividers, or structural components; keep them sharp (0px) to maintain the minimalist, professional aesthetic.
• Don't use shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.25)) or they will appear garish on the dark background; subtle elevation is more sophisticated.
• Don't mix typefaces or use system fonts; Inter Tight is the exclusive typeface and must be loaded from Google Fonts to ensure consistency across all platforms.
• Don't reduce the border-radius on buttons below 50px (full pill shape); the rounded form is a core brand signal and must remain consistent across all button variants.