# Add Signature Moment > Add Signature Moment - Skill: `automattic/add-signature-moment` (Agent Skill) - Install (CLI): `npx skillmds@latest add automattic/add-signature-moment` - Raw SKILL.md: https://api.skillmd.com/api/skills/automattic/add-signature-moment/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Automattic (https://skillmd.com/u/automattic) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/automattic/add-signature-moment --- # Add Signature Moment A polished site is not the same as a memorable site. A lot of teams stop when the work looks good. But “good” is rarely what people remember. This skill exists to add the one moment that makes the design stick. Not ten moments. Not a bag of clever tricks. One. The signature moment is the visual hook. It is the chorus. It is the thing people remember after the page is gone. It gives the brand recall, identity, and emotional lift. Use this skill only after the fundamentals are already strong: - typography is handled - spacing is disciplined - layout is coherent - motion is clean - color is intentional This is the final layer. The difference between polished and unforgettable. Extracted from proven patterns across Outseta, Hex, Shade, Reducto, Amplemarket, Cohere, Duna, Autosend, Incident, AngelList, and Antimetal. ## Core philosophy A signature moment should work like a hit song hook. It should: - arrive early - feel simple - feel inevitable - carry emotion quickly - be easy to describe - repeat just enough to stick - avoid overproduction Most sites fail not because they lack quality. They fail because they lack recall. The right signature moment gives the page: - identity - rhythm - emotional lift - memorability - a reason to be chosen over equally polished competitors The goal is not “wow, there are lots of effects here.” The goal is “I remember that site.” ## When to invoke Use this skill when: - the site is polished but forgettable - the design is competent but has no hook - the page has clarity but lacks recall - the user says “it looks good, but nothing stands out” - competitors have a distinctive visual idea and this one does not - typography, spacing, and baseline motion are already in place - the design needs the final 10% that creates memory Do not use this skill too early. A signature moment cannot rescue weak fundamentals. ## The Max principle: one hook, clearly delivered The strongest brands do not layer signature ideas endlessly. They commit to one and let it carry. Think in terms of: - verse = the baseline system - pre-chorus = the buildup - chorus = the signature moment If everything is the chorus, there is no chorus. A signature moment should: 1. appear early, ideally in the first viewport 2. feel native to the brand 3. be easy to notice 4. be easy to explain in one sentence 5. repeat lightly in one or two supporting places 6. never compete with three other ideas ## What this skill must do When invoked, this skill should: 1. diagnose why the current page is forgettable 2. identify the missing emotional quality 3. determine what kind of hook the brand can support 4. choose one pattern only 5. explain why that pattern fits 6. show how to place it in the first viewport 7. explain how to reinforce it without overusing it 8. warn against overproduction The response should feel like a producer choosing the lead single, not a designer emptying a toolbox. ## The decision filter Before choosing a signature moment, test it against these questions. ### 1. Is it memorable in one sentence? If someone saw the site for 20 seconds, could they describe the signature moment simply? Examples: - “It had those handwritten callouts around the hero.” - “The headline gradient followed your cursor.” - “The whole thing used this strange interlocking card shape.” - “The keyboard shortcuts looked like physical keys.” If it cannot be described simply, it is probably too diffuse. ### 2. Does it match the emotional tone of the brand? Do not force the wrong hook onto the wrong product. A compliance or finance product should not borrow a playful flourish that weakens trust. A creative tool should not use a sterile signature that kills personality. ### 3. Does it create recall, not just novelty? Novelty is not enough. The moment should feel connected to the brand and strong enough to survive repeated exposure. ### 4. Can it be repeated lightly? A good signature moment appears in the hero, then echoes once or twice elsewhere. A bad one either disappears completely or is sprayed everywhere until it gets cheap. ### 5. Is it stronger than doing nothing? Some pages are already strong enough that adding a signature moment would weaken them. Only add one if it increases clarity, emotional lift, or recall. ## Rules of restraint - Use one signature moment per site - Put it above the fold - Repeat it lightly, not aggressively - Make it feel native, not imported - Let the rest of the system stay quiet - If the signature is loud, simplify everything around it - If the signature is subtle, make sure it is still noticeable - Do not add a gimmick just to avoid simplicity - Do not confuse interactivity with memorability - Do not stack multiple “special” moves - Do not let the hook overpower the message ## Signature pattern playbook Pick one. --- ## Pattern 1: Handwritten marker annotations **Source idea**: Outseta **What it is** Handwritten notes, arrows, or callouts layered around hero content. This creates warmth, immediacy, and a human touch. **Best for** - personable SaaS - coaching - education - creator tools - brands with warmth and approachability **Why it works** This is a high-recall device. It feels human, quick, and emotionally legible. It creates a voice around the interface rather than just inside it. **Risk** Can become cheesy, juvenile, or too “launch page” if overused. **How to use it** - one to three annotations max - place around the main hero - keep the copy short - use it as emphasis, not explanation **Code** ```html

Your SaaS headline

← see what customers are building $100k in the first 48 hours →
``` ```css .hero { position: relative; background: linear-gradient(145deg, hsl(47deg 100% 87%), #2900290d 30%); } .annotation { position: absolute; font-family: 'Permanent Marker', cursive; color: #df37a7; font-size: 20px; } .annotation--left { top: 20%; left: 4%; transform: rotate(-8deg); } .annotation--right { top: 60%; right: 6%; transform: rotate(4deg); } ``` --- ## Pattern 2: Italic serif inside sans copy **Source idea**: Hex, Shade, Reducto **What it is** One or two emotionally charged words are swapped into an italic serif inside an otherwise disciplined sans system. **Best for** - editorial brands - AI products - thoughtful software - design-forward tools - brands that want intelligence and taste, not spectacle **Why it works** It is subtle, memorable, and deeply reusable. It creates a signature tone rather than a gimmick. This is one of the cleanest possible hook devices because it is both visual and emotional. **Risk** Loses impact if repeated too often. **How to use it** - only in the hero or one major supporting statement - choose emotional words, not random nouns - keep the surrounding type system very disciplined **Code** ```html

A notebook for the next era of intelligence.

Built by creatives, for creatives.

``` ```css p em { font-family: 'PP Editorial New', 'Instrument Serif', 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; } ``` --- ## Pattern 3: Mouse-tracking gradient headline **Source idea**: Amplemarket **What it is** A gradient inside the hero headline shifts position with the cursor, making the text feel alive. **Best for** - AI - sales tech - future-facing software - brands that want energy and motion **Why it works** The hook is immediate. It turns the headline into an event. Done well, it creates a living chorus in the first viewport. **Risk** Can feel trendy or performative if the rest of the page is weak. **How to use it** - hero only - avoid combining with other flashy hero effects - use restrained color logic **Code** ```html

Step into the future of sales

``` ```css .gradient-text { background: radial-gradient( 80% 109% at var(--mx, 50%) var(--my, 50%), #D0B2FF 0%, #FFEED8 50%, #E8400D 100% ); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: clamp(3rem, 2rem + 5vw, 6rem); letter-spacing: -0.04em; } ``` ```js document.addEventListener('mousemove', (e) => { const x = (e.clientX / window.innerWidth) * 100; const y = (e.clientY / window.innerHeight) * 100; document.documentElement.style.setProperty('--mx', `${x}%`); document.documentElement.style.setProperty('--my', `${y}%`); }); ``` --- ## Pattern 4: Cursor spotlight **Source idea**: Shade **What it is** A soft brand-colored spotlight follows the cursor across a quiet hero. **Best for** - creative tools - search products - media products - interactive brands with minimal surfaces **Why it works** This creates motion without clutter. It gives the page atmosphere and responsiveness while keeping the composition sparse. **Risk** Weakens quickly if the color is wrong or the hero is already too busy. **Code** ```html

Media storage that just works better

``` ```css .spotlight-hero { position: relative; background: #fafafa; overflow: hidden; } .spotlight-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 250px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 235, 87, 0.35), transparent 40% ); transition: background 50ms linear; } ``` ```js const hero = document.querySelector('.spotlight-hero'); hero.addEventListener('mousemove', (e) => { const rect = hero.getBoundingClientRect(); hero.style.setProperty('--mx', `${e.clientX - rect.left}px`); hero.style.setProperty('--my', `${e.clientY - rect.top}px`); }); ``` --- ## Pattern 5: Interlocking asymmetric radius grid **Source idea**: Cohere **What it is** Cards lock into one another through shared sharp corners and rounded outer corners, creating a signature panel logic. **Best for** - AI editorial products - feature grids - storytelling layouts - “published” software brands **Why it works** This creates a memorable structural rhythm. The hook is not an effect. It is a compositional rule. That makes it durable. **Risk** Needs consistency. Partial application weakens it. **Code** ```html
Feature 1
Feature 2
Feature 3
Feature 4
``` ```css .quilt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #e0e0e0; padding: 1px; } .quilt-card { background: #fff; padding: 32px; } .quilt-tl { border-radius: 20px 0 0 20px; } .quilt-tr { border-radius: 0 20px 20px 0; } .quilt-bl { border-radius: 20px 0 0 18px; } .quilt-br { border-radius: 0 20px 18px 0; } ``` --- ## Pattern 6: Binary radius system **Source idea**: Duna **What it is** Everything is either sharp or fully pill-shaped. Nothing in between. **Best for** - finance - compliance - infra - disciplined minimal brands - teams that want a rule strong enough to feel like a signature **Why it works** It creates identity through discipline, not ornament. This is the kind of signature move that changes the whole song without adding another instrument. **Risk** Needs conviction. Cannot be half-applied. **Code** ```css *, *::before, *::after { border-radius: 0; } .btn, .pill, .chip, .avatar { border-radius: 9999px; } ``` --- ## Pattern 7: Terminal-chrome buttons and labels **Source idea**: Autosend **What it is** Uppercase monospace buttons and navigation that make the UI feel like a refined command-line environment. **Best for** - developer tools - infra - technical SaaS - operator-facing products **Why it works** This is a strong tonal move. It changes how the product feels immediately and creates a linguistic as well as visual signature. **Risk** Can feel costume-y if the product is not actually technical. **Code** ```css .btn { font-family: 'Geist Mono', 'JetBrains Mono', monospace; text-transform: uppercase; font-size: 14px; font-weight: 600; padding: 6px 16px; height: 32px; border-radius: 12px; background: #6366f1; border: 1px solid #4f46e5; color: #fafafa; transition: all 75ms ease-in; } .btn:hover { background: #4f46e5; } .btn:active { transform: scale(0.95); box-shadow: none; } .nav-link { font-family: 'Geist Mono', monospace; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; } ``` --- ## Pattern 8: One committed brand gradient **Source idea**: Incident **What it is** A specific three-stop gradient becomes part of the brand itself, not just decoration. **Best for** - modern SaaS - incident products - AI tools - brands that want a strong color signature **Why it works** Specificity creates recall. When the same gradient logic appears in hero, logo, dividers, and select emphasis moments, it becomes mnemonic. **Risk** Weak if the gradient is generic. Needs a very specific blend and consistent reuse. **Code** ```css :root { --brand-gradient: linear-gradient(70deg, #f25533 31%, #f1cd98 82%, #f8f5ef 100%); } .hero { background: var(--brand-gradient); } .logo-mark { background: var(--brand-gradient); } .divider { background: var(--brand-gradient); height: 4px; } .brand-text { background: var(--brand-gradient); background-clip: text; color: transparent; } ``` --- ## Pattern 9: Oversized editorial gradient plates **Source idea**: AngelList **What it is** Large rounded gradient forms used like art plates or section dividers. **Best for** - editorial tech brands - publication-like products - art-adjacent software - companies that want a more cultured visual signature **Why it works** This acts like album art inside the page. It gives the system a memorable visual anchor. **Risk** Needs restraint. One or two plates go far. **Code** ```html
``` ```css .art-plate { border-radius: 300px; overflow: hidden; aspect-ratio: 2 / 1; position: relative; } .art-plate-inner { position: absolute; inset: 0; background: linear-gradient( 195.85deg, #6258ff -121%, #e06ab2 -69%, #fb8569 -36%, #ffb1b1 12%, #cdcbff 59%, #7e6f4a 127%, #32607f 173%, #fde8b5 277% ); } ``` --- ## Pattern 10: Glassy layered cards **Source idea**: Antimetal **What it is** Cards lit with a combination of ambient shadow, edge highlight, inner ring, and subtle bottom glow. **Best for** - dark mode - atmospheric dashboards - premium infrastructure products - products that want depth without clutter **Why it works** This becomes a signature material quality. It gives the interface production value and a tactile feel. **Risk** Easy to overdo. Should be a material system, not a party trick. **Code** ```css .glass-card { background: #fff; border-radius: 16px; box-shadow: 0 56px 88px rgba(10, 8, 6, 0.10), 0 16px 40px rgba(10, 8, 6, 0.05), 0 4px 12px rgba(10, 8, 6, 0.03), 0 0 0 1px rgba(10, 8, 6, 0.04), inset 0 4px 12px -6px rgba(224, 246, 255, 0.06), inset 0 .5px .5px rgba(224, 246, 255, 0.24), inset 0 0 0 1px rgba(224, 246, 255, 0.06), inset 0 -.5px .5px rgba(224, 246, 255, 0.24); } ``` --- ## Pattern 11: Blur-in staggered reveal **Source idea**: Antimetal **What it is** Hero lines rise into focus with blur and delay, giving the entrance cinematic lift. **Best for** - premium heroes - landing pages with strong message hierarchy - brands that want emotional pacing **Why it works** It creates a moment of arrival. This is temporal hook design: the memory comes from how it enters, not just how it looks. **Risk** Can feel overproduced if used on too many elements. **Code** ```html

Stop wasting money on cloud infrastructure you don't need

``` ```css .blur-reveal span { display: block; opacity: 0; transform: translateY(48px); filter: blur(4px); animation: blur-in 700ms cubic-bezier(.215,.61,.355,1) forwards; } .blur-reveal span:nth-child(1) { animation-delay: 0ms; } .blur-reveal span:nth-child(2) { animation-delay: 100ms; } .blur-reveal span:nth-child(3) { animation-delay: 200ms; } @keyframes blur-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } } ``` --- ## Pattern 12: 3D keycap keyboard prompts **Source idea**: Incident **What it is** Keyboard shortcuts rendered like physical keys. **Best for** - productivity tools - dev tools - technical products - apps with power-user behavior **Why it works** It turns a functional detail into a tactile brand signature. Small, memorable, repeatable. **Risk** Only works if keyboard interaction matters to the product. **Code** ```html Press ⌘ + K to search ``` ```css kbd { display: inline-flex; align-items: center; padding: 2px 8px; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; line-height: 1.4; color: #161618; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 3px 0 #d1d5db; transition: all 100ms ease; } kbd:active { transform: translateY(2px); box-shadow: 0 1px 0 #d1d5db; } ``` ## Choosing the right hook Match the brand voice to the pattern. | Brand voice | Best patterns | |---|---| | Warm, human, personable | Handwritten annotations | | Editorial, thoughtful, intelligent | Italic-in-sans, gradient plates | | Interactive, alive, future-facing | Mouse-tracking gradient, cursor spotlight | | Structured, published, design-led | Interlocking radius grid | | Minimal, disciplined, compliance-driven | Binary radius | | Developer, operator, technical | Terminal-chrome, keycap kbd | | Color-led brand system | Committed brand gradient | | Atmospheric, premium, dark | Glassy layered cards | | Cinematic, immersive | Blur-in reveal | ## Output format for this skill When invoked, respond in this order: ### 1. Why the page is forgettable Say what is missing in plain language. Examples: - The page is clean, but it has no memorable hook. - The design is polished, but nothing creates recall. - The system is competent, but there is no visual chorus. - Everything is good, but nothing is sticky. ### 2. Missing emotional quality Identify what is absent: - warmth - lift - identity - energy - atmosphere - humanity - play - confidence - memorability ### 3. Chosen pattern Pick one pattern only and explain why it fits. ### 4. Placement Explain exactly where it should appear first. ### 5. Reinforcement Explain where it may echo one or two more times. ### 6. What to cut Say what should stay quiet so the signature moment lands. ### 7. Risk warning Name the most likely way the team could overdo it. ## Anti-patterns - stacking multiple signature patterns - choosing a hook that fights the brand - hiding the signature below the fold - making the moment too subtle to notice - making the moment so loud it cheapens the site - using motion with no emotional purpose - using interactive flourishes that distract from the message - copying a competitor’s hook without adapting it to your own voice - letting the signature moment become visual spam ## Stronger critique language this skill should use Instead of: “This needs something extra.” Say: “The page is polished, but it has no real hook. Nothing is creating recall.” Instead of: “Let’s add a cool effect.” Say: “What this needs is one memorable visual chorus, not another layer of decoration.” Instead of: “This looks good already.” Say: “The foundation is strong, but it still lacks the one moment that makes the brand feel ownable.” Instead of: “Try a few options.” Say: “Pick one signature device, place it early, reinforce it lightly, and let it carry.” ## Final instruction Do not use this skill to make the page busier. Use it to make the page memorable. The right signature moment should feel: - immediate - simple - emotionally clear - native to the brand - easy to remember - hard to replace If the page feels overproduced, you went too far. If one moment keeps replaying in your mind after you close the tab, you are close.