PrecioLuzApp — Settings Tab
A high-fidelity iOS-inspired dark mode settings interface featuring glassmorphism, native-like UI components, and a carbon-black aesthetic. Designed for utilities, fintech, or IoT applications, it uses high-contrast typography (Inter) and vibrant accent colors (#276EF1, #10B981) against deep neutral backgrounds (#0A0A0A). Key features include bento-style settings cards, custom iOS-style toggle switches, and a blurred glass bottom navigation bar.
Summary
A sophisticated iOS dark-theme settings dashboard with a focus on hierarchy and visual clarity. The design utilizes elevated surfaces, subtle glass materials, and rounded corners (14px) to create a premium, system-level feel. It includes specialized controls for alerts, thresholds, and system configurations.
Style
The style is defined by a 'Carbon' dark theme (#0A0A0A) with 'Surface' cards (#1A1A1A). Typography is exclusively Inter, using a range of weights from 300 to 800. Glassmorphism is applied to informational and navigation elements using backdrop-filter: blur(20px) and a white/5 background. Visual accents denote states: green (#10B981) for low/safe, red (#EF4444) for high/danger, and blue (#276EF1) for system primary actions.
Layout & Structure
A vertical mobile layout with a fixed header, a scrollable main content area organized into themed sections, and a persistent floating glass navigation bar at the bottom.
Header
Grouped Settings Sections
Numerical Input Row
Glass Info Card
Bottom Navigation Bar
Components
iOS Toggle Switch
A pixel-perfect recreation of the iOS native switch control.
Icon Background Plates
Soft-colored tiles behind icons to indicate category.