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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Notion-style playful hero section.
Design philosophy — friendly productivity:
1. Background: White (#F6F1EC) or very light warm gray (#FEFCFA). No gradients — Notion trusts flat color.
2. Headline: 52-72px (clamp(3.25rem, 5vw, 4.5rem)), font-weight 700, color #2F2E2B (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 #7D7870, 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 #2F2E2B, white text, px-6 py-3, text-base. On hover: slight scale (1.02) and shadow. Secondary — outlined, border #E4D9CE, 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.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.