Use the "Notion Playful" design system. A warm, friendly productivity vibe. Sunset ember colors, playful pop typography, pill-capsule shapes, organic fibonacci spacing and elastic bouncy motion — serious tools that don't take themselves too seriously.

Use a warm sunset ember palette with a deep burgundy-black background (#1C1117). Primary actions in burnt orange (#EA580C), secondary elements in bright orange (#F97316), and highlights in golden amber (#FBBF24). Cards use warm dark (#2D1B1E). Text is warm white (#FFF7ED) and sandy secondary (#D4A574). This palette conveys energy, warmth, and creativity.

Use a playful, buoyant typography system targeting consumer app joy. Headings use Outfit (font-weight: 800) for a bouncy, energetic geometry. Body text relies on Quicksand (font-weight: 500) ensuring extremely rounded terminals and friendly legibility. Use Outfit 700 for pill-shaped buttons and bright callouts. The aesthetic breathes positivity, ease-of-use, and fun.

Implement a layered paper shadow system that mimics real stacked sheets. Base state uses three layers: tight contact (0 1px 1px #0000000D), medium ambient (0 2px 4px #0000000A), and atmospheric (0 5px 10px #00000008). On hover, expand to four layers for a convincing floating effect: contact (0 2px 3px #00000012), ambient (0 6px 12px #0000000D), atmospheric (0 12px 24px #0000000A), and ultra-wide (0 24px 48px #00000005). The 4th layer on hover creates a "paper lifting off the desk" illusion. Pair with a 1px border at 8% opacity. Transition over 250ms ease. Never scale — the paper metaphor relies on shadow depth, not zoom. This shadow conveys quiet craftsmanship and tactile authenticity.

Use the Pill Capsule radius system for maximum roundness. All buttons, inputs, badges, and tags use 9999px (full pill shape). Cards use 20px, modals 24px. This creates a bubbly, modern aesthetic where everything feels soft and approachable. Interactive elements are always pills. The only exception is full-width containers which use 20-24px rounding.

Use a holographic foil gradient flowing from warm coral (#FF7EB3) through electric lavender (#B490FF), sky blue (#7DD3FC), to soft mint (#86EFAC) at a 150-degree angle. Position stops at 0%, 35%, 65%, 100% for balanced prismatic distribution. Apply to premium badges, hero section accents, and CTA button backgrounds. For subtle usage, reduce each stop to 10-12% opacity as a shimmer wash on cards. Animate via background-size: 200% with background-position shift over 3s ease infinite for the signature holographic light-catching effect. This gradient conveys premium quality, playful iridescence, and cutting-edge creativity.

Use the Fibonacci Organic spacing system for naturally harmonious proportions. Scale follows the Fibonacci sequence: 3, 5, 8, 13, 21, 34, 55, 89. Each value is the sum of the two before it, creating golden ratio proportions. Button padding: 8px 13px. Card padding: 21px. Section spacing: 55px. Page margin: 34px. This creates organic visual rhythm — balanced but not mechanical. Best for creative and editorial layouts.

Use the Elastic Pop easing system for high-energy, reactive interfaces. Primary curve: cubic-bezier(0.68, -0.55, 0.27, 1.55) at 600ms — pronounced overshoot on both ends creates an elastic, rubber-band feel. Use 400ms for pop-in notifications, 600ms for card reveals, 300ms for button feedback. The -0.55 and 1.55 control points create visible overshoot — elements wind up then pop past their target before settling. Apply to achievement badges, notification toasts, like animations, and gamification elements.

Create a Notion-inspired whisper button that prioritizes content over chrome. The button has zero visual weight by default: transparent background, no border, no shadow. Text is warm dark (#FFF7ED) at 14px, font-weight 500. Icons (if present) are 16px in muted gray (#D4A574), placed left of text with 6px gap. On hover, a warm gray fill appears (#FFF7ED14) with border-radius 6px. On active/pressed state, the fill deepens to (#FFF7ED1F). On focus-visible, show a 2px ring in soft blue (#EA580C) at 2px offset for keyboard accessibility. Transition is 80ms ease — must feel instant. The design philosophy is "the interface disappears when you're not looking at it." This button conveys quiet confidence, content-first thinking, and sophisticated restraint.

Create a Spotify-inspired now-playing card. The container is a rounded-2xl frosted glass surface (#2D1B1EB3) with backdrop-blur-2xl and a thin border (#FFF7ED1A). Behind the card, render 2 blurred radial gradients at 35% opacity extracted from album art colors (position at 20% 30% and 80% 70%). Inside the card: a 56x56 rounded-xl album art thumbnail on the left with a subtle ring shadow (0 0 0 1px #FFF7ED14), a vertical stack of track title (#FFF7ED, 15px, font-weight 600, letter-spacing -0.01em) and artist name (#D4A574, 13px), and minimal playback controls on the right (prev/play/next icons at 20px, #FFF7ED, play button slightly larger at 24px). Below the content, a 4px progress bar with rounded-full ends: bright green track (#EA580C) on a dark rail (#44282D). On hover, lift the card with shadow (0 8px 32px #00000066) and brighten the border. This card conveys musical energy, immersive content, and premium quality.

Build a Notion-style breadcrumb navigation bar.

Design philosophy — navigation as context:
1. Background: White (#1C1117) with a 1px bottom border (#44282D). The border only appears on scroll (not visible at top).
2. Layout: Fixed top, full-width. Left side: breadcrumb trail. Right side: action icons (share, favorite, more).
3. Breadcrumb: Each segment is 14px, font-weight 400, color #D4A574 for ancestors, #FFF7ED for current page. Segments separated by "/" in #44282D. Each ancestor segment is a link with hover underline.
4. Current page: The last breadcrumb segment is larger (14px, weight 500) and can optionally appear as an inline-editable text input.
5. Icons: Right-side actions use 16px icons in #D4A574, hover → #FFF7ED. Spacing: gap-1. Common actions: Share, Star/Favorite, Clock (history), More (...).
6. Height: 45px. Slim and unobtrusive.
7. Hover behavior: Breadcrumb segments show a subtle rounded-md bg (#2D1B1E) on hover.

The nav should feel like a file manager breadcrumb, not a marketing nav.

Build a Notion-style playful hero section.

Design philosophy — friendly productivity:
1. Background: White (#1C1117) or very light warm gray (#2D1B1E). No gradients — Notion trusts flat color.
2. Headline: 52-72px (clamp(3.25rem, 5vw, 4.5rem)), font-weight 700, color #FFF7ED (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 #D4A574, 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 #FFF7ED, white text, px-6 py-3, text-base. On hover: slight scale (1.02) and shadow. Secondary — outlined, border #44282D, 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.

Implement a film grain texture overlay using an inline SVG noise filter. Create a pseudo-element (::after) on the target container with position absolute, inset-0, pointer-events-none, and z-index 1. The background is an inline SVG containing an feTurbulence filter (type="fractalNoise", baseFrequency="0.65", numOctaves="4", stitchTiles="stitch") applied to a full-size rect at 5% opacity. Tile the SVG at 200x200 with repeat. Use a slightly smaller tile size than 256px to create finer, more film-like grain density. The grain is most effective on warm off-white (#1C1117) or cream surfaces, adding organic warmth that flat digital colors lack. For dark themes, increase opacity to 7-9% and add mix-blend-mode: soft-light. This background conveys analog authenticity, editorial refinement, and handcrafted quality.

Build a Notion-style block drag handle micro-interaction.

Design philosophy — direct manipulation:
1. Handle: A 6-dot grid (2 columns × 3 rows, 3px dots, 5px gap) in #FFF7ED4D. Appears 24px to the left of a block when the mouse hovers within 40px of the block's left edge.
2. Appear animation: Opacity 0→1 over 150ms ease-out. The delay prevents the handle from flickering during normal mouse movement across the page.
3. Cursor change: On handle hover, cursor changes to 'grab'. On mousedown, cursor becomes 'grabbing'.
4. Drag ghost: The dragged block becomes semi-transparent (opacity 0.6) with a slight rotation (1-2deg) and elevated shadow (0 8px 24px #0000001F). The ghost follows the cursor with a spring lag (using transform with requestAnimationFrame).
5. Insertion indicator: A horizontal line (2px height, 100% width) in #EA580C (blue) that appears between blocks where the item will be dropped. The line slides to the nearest valid position with 150ms ease-out.
6. Drop animation: On release, the block animates from its ghost position to its new position using a spring curve (300ms, cubic-bezier(0.34, 1.56, 0.64, 1)). The opacity returns to 1 and rotation returns to 0.
7. Plus button: A "+" icon appears below the handle on hover, allowing quick block insertion.

The interaction should feel like rearranging physical cards on a table.