Structure
Before
Style:
The
Geometry
of
Attention.
How elementa-ui translates human cognitive psychology into an intentional surface elevation system. See how chaotic flat interfaces transform into predictable, effortless workflows.
Simple yet Powerful
Single source of truth powered by unified Tailwind v4 design tokens. Synchronizes all surface elevation, text hierarchies, and primitives without visual drift.
Context-ful Design
Predictable Base vs. Overlay schemas ensure every element knows its spatial place. Recessed wells anchor navigation while raised cards group discrete interactions.
Fun and Fresh
5 dynamic energies and vibrant OKLCH palettes bring personality, emotion, and tactile delight to screens while preserving strict typographic cadence.
Intuitive Double Signifiers
Lightness shifts paired with crisp stroke boundaries ensure zero guesswork. Active and selected targets immediately stand out across both light and dark modes.
Flat Ambiguity vs. Intentional Elevation
Drag the comparison handle to observe how boundary luminance, recessed navigation wells, and raised cards eliminate visual guesswork.
Quick Compare:
Before: Flat UI
After: Elementa IA
Financial Overview
Flat canvas · No semantic surface distinction
TOTAL LIQUIDITY
$284,920.00
Same background tone as canvas
SETTLEMENT STREAM
$42,109.50
No visual boundary affordance
Overlay Blends Into Canvas
Without luminance shift and active triggers, the eye cannot tell what demands immediate action.
Financial Overview
5-Tier Surface Luminance Active
Total Liquidity
$284,920.00
+14.2%
Settlement Stream
$42,109.50
Attention Overlay Surface
High-contrast overlay surface with imperative active triggers for zero-ambiguity execution.
The Surface Elevation System
Surfaces are the fundamental spatial unit in elementa-ui. Interfaces are organized into distinct elevation tiers where higher elevation commands higher cognitive focus.
Higher Elevation = Higher Focus
Select any tier in the elevation stack to inspect its physical metaphor, semantic token mapping, and associated UI primitives.
Active Surface
Ink on the Paper
Imperative Action
Modal Surface
The Floating Paper
Critical Attention
Raised Surface
The Tray
Affordance & Object Boundary
Flat Surface
The Table
Structural Grouping
Base Surface
The Floor
Contextual Baseline
Raised Surface
--bg-raised-primary
Tier 2
Information Architecture Role
Interactive objects like Cards that sit above the base.
Raised surfaces act as discrete visual boundaries, signaling that everything inside is a single cohesive object (e.g. a Tallileo transaction or Khelo match).
Governing Rule
Affordance Rule: Visual boundaries that signal a discrete, clickable or inspectable entity.
Associated UI Atoms & Primitives
Cards
Avatars
Select Boxes
Metric Tiles
Panels
Live Surface Simulation
Affordance & Object Boundary
Discrete Transaction Card
Discrete object boundary
Same-Layer Distinction
When multiple components share the exact same elevation tier, Elementa keeps them unmistakable through chromatic lightness shifts, boundary strokes, and double signifiers.
Sibling Differentiation
Chromatic Contrast & Visual Boundaries
Elementa pairs each elevation tier with a Primary and Secondary lightness tone while using calibrated stroke tokens and intentional negative space. Sibling containers separate cleanly without bumping elevation layers.
Live Playground Controls
Chromatic Shift
Visual Strokes
Double Signifiers
Same-Tier Sibling Modules (Layer 2 Raised)
Layer 2 Raised Pair
Primary Tone
--bg-raised-primary
Standard Module
Baseline raised surface tone for primary domain cards.
Secondary Tone
--bg-raised-secondary
Shifted Sibling Module
Differentiated by calibrated OKLCH lightness shift on Layer 2.
Double Signifiers Principle
Pairing color accent shifts with explicit stroke boundaries guarantees instant recognition.
Implementation Paradigm
The Workspace Well Container Rule
The primary command canvas always occupies the cleanest, most stable surface in both light and dark themes. Sidebars and persistent navigation rails step into the flat surface tier to create a recessed structural well that never competes with the active task.
Navigation Well vs. Command Canvas
bg-bg-flat-primary + bg-bg-base-primary
Deriva Well
Recessed Nav
Platform
Treasury Canvas
Escrow Vaults
Aayush Goyal
Primary Workspace
Real-Time Settlement Ledger
Clean baseline surface isolates high-density financial telemetry from peripheral navigation.
Active Volume
$1,420,800.00
Nested Card Step-Down
The Core IA Rules
Unbreakable architectural invariants that dictate how elevation, affordance, attention, and imperative actions orchestrate user focus.
Base & Flat Surfaces
Contextual Stability
Permanent Anchors
These surfaces must be low-contrast and neutral. They represent the stable, permanent boundaries of the interface that the user safely ignores while immersed in work.
Raised Surfaces
Affordance Rule
Discrete Object Boundaries
Raised surfaces act as explicit visual boundaries. They signal that the content inside is a single discrete entity (like a transaction in Tallileo or a match in Khelo).
Overlay Surfaces
The Attention Rule
Temporary Focus Lock
Overlays must have the highest contrast. They physically block the layers below using a scrim or backdrop blur to focus the user entirely on finishing the task.
Active Surfaces
The Action Rule
Demands Immediate Action
The active layer is the top-most imperative surface. It demands direct user interaction. It can sit on top of any layer—even inside an active modal.
Surface Codex: The Luminance Shift Rule
Elementa communicates depth strictly through calibrated boundary luminance rather than artificial drop shadows or decorative blurs.
Authentic Surface Token Matrix
Consolidated OKLCH color token mappings across Layers 0 through 4.
Surface Layer | Light Mode Token | Dark Mode Token | Active Mode Swatch |
|---|---|---|---|
Base Layer 0 Global Background, Root Viewport | --color-amber-white-100 | --color-gun-metal-1100 | Base Tier |
Flat Layer 1 Sidebar, Navigation Well, Rails | --color-amber-white-200 | --color-gun-metal-1000 | Flat Tier |
Raised Layer 2 Cards, Avatars, Select, Tiles | Primary: --color-amber-white-300 Secondary: --color-amber-white-400 | Primary: --color-gun-metal-900 Secondary: --color-gun-metal-800 | Raised Tier |
Modal Layer 3 Dialogs, Sheets, Drawers, Popovers | Primary: --color-amber-white-500 Secondary: --color-amber-white-600 | Primary: --color-gun-metal-700 Secondary: --color-gun-metal-600 | Modal Tier |
Active Layer 4 Buttons, Controls, Sliders, Badges | Primary: --color-amber-white-700 Secondary: --color-amber-white-800 | Primary: --color-gun-metal-500 Secondary: --color-gun-metal-400 |
Low-Key Dark Mode: Step Lighter as you Elevate
gun-metal-1100 (Floor) → gun-metal-1000 (Well) → gun-metal-900 (Tray) → gun-metal-700 (Modal) → gun-metal-500 (Active)
Ecosystem Exploration
Build with elementa-ui
Dive deeper into the components, design tokens, OKLCH energies, and flagship products shaping the future of intentional interfaces.
UI Components & Blocks
Accessible, customizable components crafted on Radix primitives and Tailwind v4—built strictly on the surface elevation hierarchy.
Secondary Energy Select
Active Accent Pill
Dialogs & Sheets
Dynamic Energies
Vibrant, perceptually uniform color profiles that keep interfaces fresh, alive, and un-corporate.
Icon Library
Stroke-harmonized glyphs designed for instant recognition and predictable double signifiers.
Design Guidelines
Spatial ergonomics, typography scales (Rowan & Satoshi), and cognitive load reduction principles.
Spatial Ergonomics
Glancing tests & cognitive chunking
GitHub Repository
Contribute to elementa-ui, star the repository, file issues, and inspect the source architecture.
deriva-inc/elementa-ui
Deriva Products
See elementa-ui deployed in production across our flagship applications—including Tallileo for treasury execution and Khelo for real-time gaming.
Khelo
Elementa Design System
Crafted with intentional hierarchy & precision.