Sunrise glass analytics dashboard
Organize metrics, trends and transactions into a warm frosted-glass dashboard with complete code and explicit data definitions.

Recipe typeUI design
Output formatSingle-page HTML/CSS/JS
DeliverablesMetrics / trends / sources / transactions
Version1.0
Organize metrics, trends and transactions into a warm frosted-glass dashboard with complete code and explicit data definitions. A compact direction to help the next screen feel deliberate, specific, and easy to remix.
02 / Prompt
Create a complete sunrise glassmorphism analytics dashboard as frontend page code. Focus on warm translucent frosted panels and readable data, not merely chart recommendations. Use a tool that generates HTML/CSS/JS.
INPUT
Product/users: [name, analytical goal, intended users]
Metrics: [label, value, unit, reporting date, definition; comparison period and baseline when available]
Trends/sources: [time points and values, categories and counts/percentages; pasted tables or JSON]
Transactions: [redacted name/ID, date, actual plan/item, actual status, amount and currency]
Goal: [target, current value, deadline; optional]
Behavior/technology: [actual date/search/export needs; supplied API or local data by default; standalone index.html by default]
Constraints: [brand colors, sensitive fields, available assets, copy language]
MISSING INFORMATION
Ask up to three blocking questions, prioritizing data, units/time definitions and permitted behavior. Missing values/series show “No data”; do not convert unknowns to zero. Create distinctly labeled demo data only when explicitly allowed. Report conflicts between totals and rows; never alter rows to fit a preferred total. Do not calculate growth without a comparison period or with a zero baseline. Never sum different currencies directly.
MAKE
1. Define fields, time range, formulas and sensitive-data handling. Map available material to an icon rail, title and real filters, up to four core metric cards, large trend area, source distribution, transactions and optional goals. Missing datasets receive explanatory empty states rather than fake charts.
2. Layer soft radial peach #ffd9a8, coral #ff9d7a, warm amber and pale rose gradients. Panels use roughly 0.56–0.74 alpha white, fine white borders, gentle warm shadows and moderate backdrop blur. Text: near-black #1c1512 with sufficiently dark secondary copy; coral #f2521b accents. Show background through frosted glass rather than making heavy clay shapes. Fall back to near-solid readable panels when filters are unsupported.
3. Pair available sans type with mono figures. Label metric units, periods and data status. Plot actual axes, legends and tooltips; gaps remain gaps. Derive source shares only with matching definitions and valid denominators. Never invent peaks through smoothing or force a truncated axis to exaggerate growth. Status uses text as well as color.
4. With local data only, date/search filter local arrays and all metrics/charts use that same range. Unsupported historical ranges show no data. Export only currently visible redacted records; omit it if unavailable. Mark unsupported navigation/notification/account actions unavailable rather than implying authentication, live updates or server persistence.
5. Desktop: four KPI columns with primary/secondary chart and transaction rows; tablet two columns; phone one. Tables scroll within their own container while retaining header semantics, without page overflow. Check actual text contrast over composited glass backgrounds, keyboard use, visible focus and reduced motion. Supply chart text summaries/data tables. Check 390px/1440px, empty series, zero baselines, absent goals, long names, conflicting values and no filter results.
DELIVER
A. Structure and field/unit/formula/period/gap definitions.
B. One complete index.html block with inline CSS/necessary JS and editable data/style variables; if a framework was specified, provide all required files rather than fragments.
C. Actual behavior/limitations plus performed and pending checks. Chart appearance is not proof of data accuracy; do not assert unmeasured contrast or live capabilities.
Site adaptation of Jason Zhou / Superdesign, Frosted Sunrise Analytics UI (prompt text CC0-1.0): https://github.com/superdesigndev/superdesign-prompts/blob/6c60906945208df5aa2187f19f8ddfe9b2948aa0/prompts/glassmorphism-dashboard-frosted-sunrise-analytics-ui/README.md . Upstream method reference: TemplateMo Glass Admin, https://templatemo.com/tm-607-glass-admin . Retains warm glass layout and adds data and behavior boundaries; no template code, upstream preview, fonts or third-party assets imported.03 / Negative prompt
invented metrics/trends, unknown treated as zero, growth from zero baseline, mixed-currency sums, unreadable filtered text, color-only status, fake live/export behavior, screenshot instead of full codeRecipe typeGlassmorphism UI
Output formatSingle-page HTML/CSS/JS
DeliverablesMetrics / trends / sources / transactions
Version1.0