RagIndex — File Upload (Security-Focused)
A high-security, corporate-grade dark mode design system characterized by neutral grays, subtle grid backgrounds, and precise technical detailing. This style is ideal for fintech, cybersecurity, data management, and enterprise SaaS platforms where trust and reliability are paramount. It features a minimalist aesthetic using 'General Sans' for utilitarian UI and 'Cabinet Grotesk' for editorial impact, grounded by a #0d0d0d background and a 48px dot-grid pattern. Key visual markers include corner-bracket decorators, dashed boundaries, and low-opacity white borders.
Summary
A redesign of a file-upload interface that prioritizes a professional, security-first aesthetic over visual drama. It uses a neutral monochromatic palette, technical line-work, and subtle animations to convey stability and authenticity.
Style
The style is 'Technical Minimalist'. It uses a dark foundation (#0d0d0d) with a very subtle radial vignette and a 48px white grid pattern (2.5% opacity). Typography is layered: Cabinet Grotesk (Bold, 700) for headers to provide a structural feel, and General Sans (400, 500) for all functional UI elements. The color palette is strictly limited to blacks, grays, and whites, using opacity (ranging from 0.05 to 0.88) to create hierarchy rather than different hues. Border styles are thin (1px to 1.5px) and often dashed or used as corner accents.
Layout & Structure
A vertical three-tier layout: a slim fixed-height top navigation, an expansive flexible-height main content area housing the interactive drop zone, and a compact utility footer for status and security information.
Navigation Bar
Main Drop Zone
Footer Utility Strip
Components
Technical Format Pills
Small metadata tags for file formats.
Minimalist Success Toast
A non-intrusive status notification.
Corner Brackets
Decorative UI elements defining a framing area.
Special Notes
MUST: Maintain a strictly neutral color palette (avoid any blue, green, or red unless for critical errors). MUST: Use high-quality SVG icons with thin strokes (1px or 1.5px). MUST NOT: Use heavy shadows or vibrant gradients. MUST: Ensure all interactive components have a 0.2s transition on hover/focus.