TapNext

Warm, playful, and creator-friendly. Built around a warm cream background with electric blue as the hero color, anchored by golden yellow and hot pink accents. This is the default theme and the most expressive of the three.

Playful, warm, energetic, creator-friendly, social-media-native. 'You earned the tap. Make it count.'

Inspiration & Context

Derived from TapNext (tapnext.link) — a branded intermediary link platform for content creators. The aesthetic signals 'creator tool, not developer tool' — it looks like something a YouTuber or TikToker would use, not something a backend engineer built. The 24px border radius and sticker-style icons reinforce this approachable, consumer-grade feel.

Color Palette

Background

#fffaeb

Main page background — warm cream, like sunlight on paper

Foreground

#0f1729

Primary text color — deep slate, high contrast

Card

#ffffff

Card and elevated surface backgrounds

Primary

#1a6ef4

Primary actions, links, focus rings — vibrant electric blue

Secondary

#fbdd84

Secondary elements, highlights — soft golden yellow

Accent

#f6558e

Call-to-action emphasis, badges — energetic hot pink

Muted

#f1f5f9

Subtle backgrounds, dividers — cool light gray

Muted Foreground

#64748b

Secondary text, captions — slate 500

Border

#e5e7eb

Card borders, input borders — gray 200

Destructive

#ef4444

Error states, delete actions — red 500

Typography

Fredoka

--font-display-family

Display / Headings

A rounded geometric sans-serif with a playful character. Variable weight 300–700. Used for all headings (h1–h6). Gives the interface a soft, approachable, almost toy-like brand voice.

Outfit

--font-body-family

Body / UI Text

A clean geometric sans-serif designed for readability. Variable weight 100–900. Used for body copy, labels, and UI text. Modern and polished, complements Fredoka's playfulness with clarity.

Spacing & Radius

Border Radius Scale

1.5rem (24px) — Extremely rounded. 2.4x more rounded than the Fantastic Four theme. Creates a friendly, approachable, consumer-grade feel. Buttons and cards feel pill-like.

1.5rem (24px)

Base Radius

calc(1.5rem - 4px)

Radius SM

calc(1.5rem - 2px)

Radius MD

calc(1.5rem + 4px)

Radius XL

Dark Mode Variant

Background

#0f1729

Deep slate background

Foreground

#f8fafc

Light text on dark

Card

#131d34

Dark navy cards

Primary

#1a6ef4

Blue stays unchanged — anchor color

Secondary

#1e293b

Muted dark surfaces — playful colors are neutralized

Accent

#1e293b

Hot pink is neutralized in dark mode for readability

Best For

Consumer SaaS productsCreator tools and platformsSocial media dashboardsEducational apps and gamesAny product targeting Gen Z or creators