VibeUI Logo
VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

Design ingredients for AI coding. Built for Cursor, Windsurf, and beyond.

Back to Explore

Notion Playful

Productivity tools should feel human, not corporate. An oversized sans-serif headline with a hand-drawn wavy underline beneath the key word, warm near-black text (#37352f) that's softer than true black, and a conversational subtitle that reads like a friend explaining their favorite tool. The approachability is strategic — lowering emotional resistance is the fastest path to a sign-up. Every pixel of warmth in the design is one fewer objection in the user's mind.

playfulwarmsaaseducationcreative

Interactive Preview

Notion PlayfulProductivity tools should feel human, not corporate.
Preview
Build a Notion-style playful hero section.

Design philosophy — friendly productivity:
1. Background: White (#ffffff) or very light warm gray (#fafaf8). No gradients — Notion trusts flat color.
2. Headline: 52-72px (clamp(3.25rem, 5vw, 4.5rem)), font-weight 700, color #37352f (Notion's signature warm black). Line-height 1.15. The key detail: one word or phrase should have a wavy underline decoration (using an SVG path or text-decoration-style: wavy in brand accent color).
3. Subtitle: 20px, font-weight 400, color #787774, line-height 1.6, max-width 520px. Conversational tone — write like you're talking to a friend, not pitching a VC.
4. CTA: Primary — rounded-md, bg #37352f, white text, px-6 py-3, text-base. On hover: slight scale (1.02) and shadow. Secondary — outlined, border #d3d1cb, same size.
5. Illustrations: Small (40-60px) emoji-style illustrations scattered around the heading at slight rotations. These should feel hand-placed, not algorithmically positioned.
6. Animation: Headline fades in, then the wavy underline draws itself left-to-right (stroke-dasharray trick, 600ms).

The result should make you smile, not just nod.