Volt — Electric-Lime Fitness Dashboard
superdesignCC0-1.0Prompt onlyDashboard · dashboardExperimental · experimentalLight · lightHigh (data-dense) · highGreen · greenMedium · mediumSerif · serifGeneral · general
An electric-lime fitness/health dashboard on near-black: a big animated step-progress ring, stat chips, a weekly-activity bar chart, health insights, a workouts list, a challenge card, and an achievements grid with a bottom nav. Category: Dashboards. Prompt author listed upstream: Jason Zhou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Volt — Electric-Lime Fitness Dashboard" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/volt-electric-lime-fitness-dashboard-a7544c · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A high-energy fitness / health tracker home dashboard on a near-black charcoal base with an ELECTRIC-LIME accent: a large animated circular step-progress ring (steps vs goal), a row of stat chips (distance / calories / minutes), a weekly-activity bar chart with a Steps/Cal/Dist toggle, a health-insights (sleep) card, a 'Today's Workouts' list, a weekly-challenge card with progress, an achievements grid (locked + unlocked), and a bottom tab nav. Sporty, high-contrast, decidedly NOT warm-orange.",
"style": {
"description": "Electric sport: near-black charcoal with electric-lime primary + cyan secondary; high-energy, high-contrast.",
"prompt": "Near-black charcoal base (ink #070A06 / #10130C / #191E13) with ELECTRIC LIME #C6F135 (#A3E635) as the high-energy primary accent (ring, active bar, CTA, active nav) and cyan #22E3DA as secondary; ice text #EFFAE0, plus a brighter grey label token (#C4CDB6) for small labels so they clear 4.5:1. Subtle ambient lime/cyan glow blobs. Fonts: Space Grotesk (display + tabular numerals) + Sora (body). NO warm orange, NO indigo/violet/blue."
},
"layout_and_structure": {
"description": "Single mobile dashboard, vertical: status bar, header, step ring, stat chips, weekly chart, insights card, workouts list, challenge card, achievements grid, bottom nav.",
"prompts": [
{"part": "Header", "prompt": "Status bar; a date eyebrow + bold app/user name on the left, a circular avatar on the right."},
{"part": "Step ring (hero)", "prompt": "A large circular progress ring (lime gradient on a dark track) with the big step count centered, a 'STEPS TODAY' label, and a 'Goal 10,000' sub-label."},
{"part": "Stat chips", "prompt": "A 3-up row of bordered stat chips: distance (km), calories (kcal), active minutes — each with a small cyan/lime icon + value + unit."},
{"part": "Weekly chart", "prompt": "A 'Weekly Burn' card with a Steps/Cal/Dist segmented toggle and a 7-bar weekday chart; the current day's bar is bright lime, the rest a readable olive."},
{"part": "Health insights", "prompt": "A 'Health Insights' sleep-quality card with a score + a thin progress bar."},
{"part": "Workouts list", "prompt": "A 'Today's Workouts' list: rows with an icon tile, title, duration/calories, chevron; plus an 'Add Workout' row."},
{"part": "Challenge card", "prompt": "A 'Weekly Challenge' card with a '3 days left' pill, a progress bar (e.g. 3/5), and a lime 'View Challenge' button."},
{"part": "Achievements + nav", "prompt": "A 3-column achievements grid (unlocked = lime/cyan glyph, locked = dimmed with a lock); a bottom tab bar (Home active in lime, Stats, Train, Profile)."}
]
},
"special_ui_components": [
{"component": "Lime progress ring", "description": "The hero metric.", "prompt": "A circular SVG progress ring with a lime gradient stroke on a dark track, big numeral + labels centered."},
{"component": "Segmented chart toggle", "description": "Metric switch.", "prompt": "A small segmented control (Steps/Cal/Dist) above a weekday bar chart; active segment is a lime pill."}
],
"special_notes": "Keep small labels ≥4.5:1 on the dark base (the glow lifts the local bg). Lime is the energy accent, cyan secondary; never warm orange or slop-purple. Real mobile proportions; reflow at 360/768."
}
---
"Volt — Electric-Lime Fitness Dashboard" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Volt — Electric-Lime Fitness Dashboard. \"Volt — Electric-Lime Fitness Dashboard\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-volt-electric-lime-fitness-dashboard-a7544c",
"license": "CC0-1.0",
"attribution": "\"Volt — Electric-Lime Fitness Dashboard\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#effae0"
},
"foreground": {
"$type": "color",
"$value": "#070a06"
},
"card": {
"$type": "color",
"$value": "#effae0"
},
"card-foreground": {
"$type": "color",
"$value": "#070a06"
},
"primary": {
"$type": "color",
"$value": "#070a06"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#10130c"
},
"secondary-foreground": {
"$type": "color",
"$value": "#070a06"
},
"accent": {
"$type": "color",
"$value": "#10130c"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#e1ebd3"
},
"muted-foreground": {
"$type": "color",
"$value": "#5e605d"
},
"border": {
"$type": "color",
"$value": "#ced7c1"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#070a06"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Volt — Electric-Lime Fitness Dashboard" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520. */
:root {
--background: #effae0;
--foreground: #070a06;
--card: #effae0;
--card-foreground: #070a06;
--primary: #070a06;
--primary-foreground: #fafaf9;
--secondary: #10130c;
--secondary-foreground: #070a06;
--accent: #10130c;
--accent-foreground: #fafaf9;
--muted: #e1ebd3;
--muted-foreground: #5e605d;
--border: #ced7c1;
--destructive: #dc2626;
--ring: #070a06;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Volt — Electric-Lime Fitness Dashboard" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520. */
/** Tailwind theme extend for Volt — Electric-Lime Fitness Dashboard (superdesign-volt-electric-lime-fitness-dashboard-a7544c) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#effae0",
"foreground": "#070a06",
"card": "#effae0",
"primary": "#070a06",
"primary-foreground": "#fafaf9",
"secondary": "#10130c",
"accent": "#10130c",
"muted": "#e1ebd3",
"border": "#ced7c1",
"destructive": "#dc2626",
"ring": "#070a06"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Volt — Electric-Lime Fitness Dashboard" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/volt-electric-lime-fitness-dashboard-a7544c @ 6c6090694520. */
@layer base {
:root {
--background: #effae0;
--foreground: #070a06;
--card: #effae0;
--card-foreground: #070a06;
--primary: #070a06;
--primary-foreground: #fafaf9;
--secondary: #10130c;
--secondary-foreground: #070a06;
--accent: #10130c;
--accent-foreground: #fafaf9;
--muted: #e1ebd3;
--muted-foreground: #5e605d;
--border: #ced7c1;
--destructive: #dc2626;
--ring: #070a06;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}