0COPY ACTIONS
INTERACTION_021CSS + JS
Count-Up Number
Metrics animate from zero when scrolled into view.
Typography / LightView
Back to promptsPROMPT_001 / LANDING PAGES PROMPT_002 / LANDING PAGES PROMPT_003 / BUTTONS
PROMPT_010 / DASHBOARDS
A DASHBOARD THAT ISN'T A TEMPLATE.
Dark, dense, monochrome app UI with tabular numerals, quiet states and precise spacing.
- BEST FOR
- Internal tools and SaaS app surfaces.
- DIFFICULTY
- Intermediate
- TOOLS
- Lovable · Cursor · Bolt
USE THIS IN LOVABLE
Redesign this dashboard as a dark, monochrome, high-density product surface. Layout: compact sidebar or top bar, a metric row with tabular numerals and count-up on first view, one primary chart panel, and a data table with quiet zebra-free rows separated by 1px 8% white rules. Details: 12-13px UI text, 10-11px uppercase monospace metadata labels, 14-18px radii, no shadows except on floating layers, and hover states limited to a background lift of one step. Loading uses layout-accurate skeletons, never spinners. Empty states get a short uppercase statement plus one action. No colored gradients, no rounded pill cards, no decorative illustrations. --- Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.
RECOMMENDED INTERACTIONS.
RELATED PROMPTS.
MAKE MY WEBSITE FEEL EXPENSIVE.
Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.
premiumlanding-pagemicrointeraction
BUILD A LANDING PAGE THAT LOOKS HIRED.
A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.
premiumlanding-pagedark-ui
GIVE MY CTA GRAVITY.
A reusable cursor-following button component with proper touch and reduced-motion fallbacks.
buttonmousepremium