RagIndex — File Upload (Security-Focused)
A high-security, corporate-grade dark mode design system tailored for technical SaaS and fintech. Features a neutral grayscale palette, precision-engineered UI elements like corner brackets and grid backgrounds, and a focus on reliability. Ideal for document management, cybersecurity dashboards, and AI indexing platforms that prioritize trust over visual drama. Includes editorial typography pairing (Cabinet Grotesk and General Sans), subtle micro-interactions, and a clear step-based flow.
Summary
A minimalist, security-centric dark UI featuring a subtle 48px grid background, editorial-style typography, and desaturated grayscale accents. The layout emphasizes a central focus area for file processing, bracketed by precision-styled navigation and status bars.
Style
The style is 'Professional Security-First Dark Mode'. It utilizes a deep black background (#0d0d0d) with a subtle white grid overlay (2.5% opacity) and radial vignette. Typography pairs the bold, geometric Cabinet Grotesk for headings with the clean, legible General Sans for UI elements. The color palette is strictly limited to blacks, grays, and whites to convey authority and neutrality. Interactive elements use semi-transparent white backgrounds (3-9% opacity) and thin borders (1px) to create depth without using drop shadows.
Layout & Structure
A vertical three-tier structure: a thin top navigation bar, a flexible central workspace, and a high-precision bottom status bar.
Navigation Bar
Central Workspace (Drop Zone)
Status Footer
Components
Format Pill
A small metadata tag for file types.
Precision Upload Box
Icon wrapper with hover animation.
Success Toast
Floating feedback notification.
Special Notes
MUST: Maintain a strict grayscale palette; any use of vibrant color will break the security-focused aesthetic. MUST: Use subtle delays in animations to create a premium feel. MUST: Ensure all borders are semi-transparent to allow the background grid to peek through slightly. DO NOT: Use heavy drop shadows or large blurs. DO NOT: Use standard system fonts; stick to the specified geometric and grotesque pairings.