PrecioLuzApp — Prices (icono de cálculo en todas las horas)
A sophisticated dark-mode utility interface designed for real-time monitoring and data tracking. Featuring a Carbon aesthetic with glassmorphism accents, it is ideal for Fintech, Energy Management, SaaS analytics, and IoT control apps. The design utilizes a high-contrast palette (#0A0A0A base) with semantic color coding (Green, Orange, Red) to denote status, supported by Inter typography for maximum legibility of tabular data. The layout features a bento-style summary grid and an interactive list of status-coded rows with integrated calculation actions.
Summary
A high-precision, dark-themed utility interface for monitoring time-based data. It combines a clean bento-grid summary section with a detailed list of actionable rows, each featuring semantic color indicators and a distinct calculator action. The aesthetic is defined by deep blacks, subtle borders, and glassmorphism elements.
Style
The style is defined by a 'Carbon' dark theme (#0A0A0A) using the Inter font family for a technical, modern feel. It uses a semantic color system for status (Cheap: #10B981, Mid: #F97316, Expensive: #EF4444) and an 'Accent' blue (#276EF1) for primary highlights. Surfaces are layered using slightly lighter grays (#1A1A1A, #141414) and glassmorphism (5% white opacity with 10% white borders). Typography heavily utilizes 'tabular-nums' for alignment of figures.
Layout & Structure
The layout is a vertical single-column mobile-first structure. It starts with a fixed-safe-area header, followed by a skeleton-loader placeholder, a 2x2 summary bento grid, an interactive list of status-coded rows, and a glass-docked bottom navigation bar.
Header
Summary Bento Grid
Hourly List Rows
Calculator Modal Preview
Bottom Navigation Bar
Components
Status Action Row
A complex list item combining status indicators and calculation triggers.
Glass Tab Bar
An iOS-style floating navigation dock with internal glass layering.