Design Foundations

The Recura design system is built on a modular foundation of consistent scaling, high-contrast typography, and curated color palettes.

Color ecosystem

Curated HSL-balanced branding tokens

Brand Primary

Recura Purple

#7C3AED

Secondary

Deep Indigo

#4F46E5

App Background

Void Dark

#0D0518

Interface Base

Pure White

#FFFFFF

Positive State

Vibrant Success

#10B981

Error State

Recura Rose

#F43F5E

Warning State

Amber Gold

#F59E0B

System Info

Azure Info

#3B82F6

Typography scales

Inter & Outfit modular font architecture

Heading 1 / GiantOutfit / Black

md:text-7xl

tracking-tighter

Building the future of SaaS

Heading 2 / DisplayOutfit / Bold

md:text-5xl

tracking-tight

Consistent Design System Architecture

Lead / MediumInter / Medium

text-xl

tracking-tight

Designed for high-performance dashboards and enterprise applications that require absolute clarity.

Body / TechnicalInter / Medium

text-base

tracking-tight

Atomic components are the building blocks of a maintainable UI system. Every element here is rigorously tested for accessibility and scale.

Spatial depth

Elevation layers and shadow optics

Elevation L1

Small

Low-profile interactive elements like input fields and simple buttons.

Elevation L2

Medium

Standard component shells including cards, sidebars, and navigation headers.

Elevation L3

High

Floaters, modals, and critical notifications requiring distinct visual priority.

Modular system rules

By strictly adhering to these design tokens, Recura maintains a professional visual logic across every pixel of the application.

Responsive first

Native Dark Mode

Vibrant Lighting

Z-index Hierarchy