Neon Scroll

Neon Scroll is a bold, high-energy design system built for vertical content consumption on dark canvases. Electric aqua and vibrant pink collide against deep blacks, creating a neon-lit atmosphere that pulses with youth culture and creative expression. Every element is designed for full-screen, thumb-driven interaction — bold at a glance, effortless in motion

Primary#FE2C55
Secondary#25F4EE
Neutral#8A8B91
Background#000000
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

micro/timestampPlus Jakarta Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body/captionPlus Jakarta Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

usernamePlus Jakarta Sans · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section titlePlus Jakarta Sans · 20px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

effect textPlus Jakarta Sans · 28px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

hero/splashPlus Jakarta Sans · 36px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Neon Scroll is a bold, high-energy design system built for vertical content consumption on dark canvases. Electric aqua and vibrant pink collide against deep blacks, creating a neon-lit atmosphere that pulses with youth culture and creative expression. Every element is designed for full-screen, thumb-driven interaction — bold at a glance, effortless in motion

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

HashtagSound

Do's & Don'ts

Do

Design for full-screen vertical video as the primary canvas — all UI overlays on content
Use text-shadow (0 1px 3px rgba(0, 0, 0, 0.6)) on all text overlaid on video
Keep the aqua (#25F4EE) and pink (#FE2C55) in tension — they create the brand's neon energy together
Design all interactive targets at minimum 44px for thumb-driven mobile use
Use snap-scroll for vertical video feeds with exactly one video per viewport
Animate aggressively — bouncing hearts, spinning music discs, sliding panels — motion is part of the personality

Don't

Use light backgrounds; this is a dark-mode-only system
Overuse both neon colors simultaneously; use pink for primary actions and aqua for secondary/follow states
Add heavy UI chrome — every pixel of chrome takes away from content
Use subtle or muted color choices; in a neon system, boldness is clarity
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.9 KB
Downloads 28
Copies 3
bold dark mobile-app playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/neon-scroll and implement it in my code

Don't have the MCP? Install it here