SecureVault

A premium, secure Flutter vault application designed for high-end security, data protection, and frictionless user privacy.

Features & Implementation

• App Lock & Biometrics: PIN, pattern, and biometric verification.
• Secure File Storage: On-device encryption for media, documents, and private data.
• Intruder Alerts: Camera capture for break-in attempts with localized logging.
• Media Player: Integrated secure audio and video viewers.
• Status Saver: Save WhatsApp statuses with auto-expiry controls.

---

📱 App Screens & UI Gallery

Here is a visual overview of the SecureVault user experience and layout:

🔒 Access & Authentication

Biometric Lock	Pattern Lock	PIN Lock

📊 Vault Dashboards

Grid View Dashboard	List View Dashboard

⚙️ Features & Utilities

Media Player (Video)	Settings & Security	WhatsApp Status Saver

🚨 Security Logs & Operations

Break-in Alerts Log	Import Options

---

Design System Specifications

This design system is engineered to evoke an immediate sense of "Fortress-like" security and elite precision. The aesthetic is Modern Glassmorphism layered over a Corporate/Technical foundation, using high-contrast surfaces and background blurs to create depth and indicate layers of protection.

🎨 Color Palette

Token	Hex Value	Color Preview
surface	#051424	⬛
surface-dim	#051424	⬛
surface-bright	#2c3a4c	🟦
surface-container-lowest	#010f1f	⬛
surface-container-low	#0d1c2d	🟦
surface-container	#122131	🟦
surface-container-high	#1c2b3c	🟦
surface-container-highest	#273647	🟦
on-surface	#d4e4fa	⬜
on-surface-variant	#c6c6cd	⬜
inverse-surface	#d4e4fa	⬜
inverse-on-surface	#233143	🟦
outline	#909097	⬜
outline-variant	#45464d	⬜
surface-tint	#bec6e0	🟪
primary	#bec6e0	🟪
on-primary	#283044	🟦
primary-container	#0f172a	🟦
on-primary-container	#798098	⬜
inverse-primary	#565e74	🟦
secondary	#c0c1ff	🟪
on-secondary	#1000a9	🟦
secondary-container	#3131c0	🟦
on-secondary-container	#b0b2ff	🟪
tertiary	#3cd7ff	🟦
on-tertiary	#003642	🟦
tertiary-container	#001b23	⬛
on-tertiary-container	#008daa	🟦
error	#ffb4ab	🟥
on-error	#690005	🟥
error-container	#93000a	🟥
on-error-container	#ffdad6	🟥
primary-fixed	#dae2fd	🟪
primary-fixed-dim	#bec6e0	🟪
on-primary-fixed	#131b2e	🟦
on-primary-fixed-variant	#3f465c	🟦
secondary-fixed	#e1e0ff	🟪
secondary-fixed-dim	#c0c1ff	🟪
on-secondary-fixed	#07006c	🟦
on-secondary-fixed-variant	#2f2ebe	🟦
tertiary-fixed	#b4ebff	🟦
tertiary-fixed-dim	#3cd7ff	🟦
on-tertiary-fixed	#001f27	🟦
on-tertiary-fixed-variant	#004e5f	🟦
background	#051424	⬛
on-background	#d4e4fa	⬜
surface-variant	#273647	🟦

Note: The primary accent scheme follows a "Void and Neon" approach for Dark Mode (Indigo to Vibrant Cyan accents over pure black/navy background).

🔤 Typography

Token	Font Family	Size	Weight	Line Height	Letter Spacing
display-lg	Manrope	32px	700	40px	-0.02em
headline-md	Manrope	24px	600	32px	Standard
headline-sm	Manrope	20px	600	28px	Standard
body-lg	Inter	16px	400	24px	Standard
body-md	Inter	14px	400	20px	Standard
label-numeric	JetBrains Mono	24px	500	32px	0.1em
caption	Inter	12px	500	16px	0.01em
display-lg-mobile	Manrope	28px	700	36px	Standard

📐 Layout & Spacing

• Base Grid: Hard 4px baseline shift.
• Mobile Layout: 4-column grid with 20px margins and 16px gutters.
• Desktop/Tablet Layout: 12-column centered grid with a maximum content width of 1280px.
• Spacing Scale: Power-of-two (4px, 8px, 16px, 32px, 64px) to promote generous structural spacing and clean alignment.
• Touch Targets: Minimum hit target of 44px for all interactive elements.

🔳 Corner Radii (Shapes)

• Small Elements (sm): 0.25rem (4px)
• Default Elements (DEFAULT): 0.5rem (8px) - Used for buttons, input fields, and small cards.
• Medium Elements (md): 0.75rem (12px)
• Large Containers (lg): 1rem (16px) - Used for vault folders and main dashboard cards.
• Extra Large (xl): 1.5rem (24px)
• Circular Elements (full): 9999px - Security icons, profiles, toggle switches.

🌫️ Elevation & Depth

• Level 0 (Base): Pure Black (#000000) for OLED deep black rendering.
• Level 1 (Surfaces): Deep Navy (#0F172A) with a subtle 1px inner border of 10% white.
• Level 2 (Modals/Overlays): Semi-transparent Slate (#1E293B at 80% opacity) with a 20px background blur (Glassmorphism).
• Interactive Focus States: Soft outer glow using accent colors (#6366F1 or #00D4FF) at 15-25% opacity with a 40px blur radius.

🧩 Component Specifications

• Glowing Accent Buttons: Primary actions use a gradient fill (Indigo to Cyan) with a soft outer glow.
• Glassmorphism Security Icons: Placed on a circular background with 20% opacity and a 10px backdrop blur.
• Minimalist Numeric Keypad: Uses JetBrains Mono font. Numbers have no borders and react with a circular ripple on tap.
• File Cards: Blurred preview thumbnail with a centered "Lock" icon. Metadata is displayed underneath in caption typography.
• Input Fields: Ghost-borders or bottom-border only. Border glows Cyan when focused.
• Bottom Navigation: Persistent frosted glass bar with active indicators highlighted in Indigo/Cyan.
• Vault Status Indicator: Large circular progress ring using a Cyan-to-Indigo gradient to visualize encryption strength.

---

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

• Learn Flutter
• Write your first Flutter app
• Flutter learning resources

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.