# Anti-patterns — worked examples of wrong-pattern-on-wrong-surface > Each entry is a real mistake that's been made in this design system, with the diagnosis and the corrected move. Read these *before* defending a "but the pattern is in the system" decision. The design system describes moves Mitchell likes. It doesn't describe which moves belong on which surfaces — that's what the surface-type matrix in `principles.md` is for, and what these examples reinforce. --- ## ❌ Stadium block on a trust-led marketing surface **Project:** NativPay landing v1 **What I did:** Put the canonical stadium block (full-bleed lemon yellow, `THE SOUTH.` in Anton at 280px) as a hero break on a payments-processor landing. **Why it was wrong:** Stadium block is for editorial / cultural surfaces — event landings, brand splashes, the kind of moment where a Sam Fender stage screen is the right reference. NativPay sells card processing to Southern small business owners. The pitch is a printed quote on letterhead and a cellphone you can call on a Friday night. A giant yellow yelling word reads as music-poster bombast — wrong audience, wrong trust profile, wrong everything. **Diagnosis from the operator:** *"this design is great for a POS SaaS tool but for local payment company helping local businesses, it's too much and too over the top."* **The fix:** - Stadium block removed entirely - Hero graphic became an SVG storefront illustration (cream brick, blue striped awning, OPEN sign in the window) - Headline runs in PP Neue Montreal at 64px max — confident but quiet - Single italic-serif word reserved for the closer h2 ("not"), one accent moment per page **Surface-type rule reinforced:** stadium block requires a cultural / event / brand-moment surface. *"Payments isn't editorial."* --- ## ❌ Numbered `01 / 02 / 03` headings on a "Why us" section **Project:** NativPay landing v2 + v3 **What I did:** Used the design system's mono-numbering pattern (`01 / Show up`, `02 / In writing`, `03 / Pick up`) above each column of a 3-col Why-us strip. **Why it was wrong:** Mono numbered eyebrows are a real pattern — they work great on a multi-step process diagram, a how-it-works flow, a launch checklist. They do *not* work as decoration on a generic "Why us" section. They read as "AI design system template" because that's where every AI design system template puts them. Same problem on a 2×2 product grid with `01 / 02 / 03 / 04` indices and arrows. **Diagnosis from the operator:** *"this 1, 2, 3 design stuff is textbook AI creation."* **The fix:** - Removed all numbering from Why-us columns — just heading + body, hard vertical rule between - Reworked the products section from a numbered 2×2 grid into a two-column **prose + typed-menu** layout ("If you take a card at a counter, we have you. On a job site, we have you…") **Rule:** numbered eyebrows belong on sequences, not on column triplets. If the items aren't ordered, the numbers are decoration. If they're decoration, they're SaaS template chrome. --- ## ❌ Italic-serif accent on a prepositional phrase **Project:** NativPay landing v2 **What I did:** Wrapped "your street" in PP Neue York italic — *"Card processing for the businesses on **your street**."* **Why it was wrong:** The italic-serif slot in the system is for *one noun-phrase moment of warmth per surface* — "the **person** on the other end," "a real number, **not** a teaser rate." It's a soft emphasis on a single semantically loaded word. Putting it on a prepositional phrase ("your street") makes it read precious, because there's nothing being emphasized — just decoration on a sentence ending. **Diagnosis from the operator:** *"the 'on your street' doesn't work too with the italics."* **The fix:** - Italic-serif removed from the hero entirely - Reserved for *one* accent per page — currently "not" in the closer h2: *"A real number — not a teaser rate."* **Rule:** italic-serif accents a noun, a verb, or a single emphatic adverb. Never a prepositional phrase, never an article, never decoration on the last word of a clause. --- ## ❌ Fluorescent lime as default brand on a payments processor **Project:** NativPay landing v4 **What I did:** Set the brand color to a Clover-style fluorescent lime (`#c4f349`) after the operator mentioned VizyPay/Clover as references and asked for "lighter, brighter, fluorescent." **Why it was wrong:** I conflated "show me bright references" with "make our brand bright." VizyPay and Clover were uploaded as direction-cues — not as palette mandates. A fluorescent CTA on a credit-union-feeling product reads as borrowed-from-SaaS, not native-to-our-brand. The brief calls for trust; fluorescence reads as urgency / sales-energy / startup, not trust. **Diagnosis from the operator:** *"this is payment processing and we are local and it's a little more trust based … I think we can make this even smaller, less of the lime green? maybe we should do a light blue? cyan? make it hit less hard?"* **The fix:** - Brand swapped to soft sky blue `#7dd3fc` - Used only on CTA, SVG awning/welcome mat/chalkboard text, pricing bullets — and nowhere else **Rule:** when a reference image is provided, ask *which axis* it's pointing at — composition? color? type? scale? Don't lift everything. Especially: a competitor's color isn't a brand decision for our product. --- ## ❌ Fake proof-stat carousel ("612 merchants · 12 states · $0 PCI fees") **Project:** NativPay landing v3 + v4 **What I did:** Added a four-cell proof strip with invented numbers (active merchants, states, average effective rate, $0 PCI fees) right under the hero. **Why it was wrong:** The numbers were fake. Even if I'd been instructed to use placeholders, fake stats on a trust product are the worst category of design slop — they cost more trust than they build, because the audience reads them as the kind of thing competitors put on every page. A real "612 merchants" number is a sales asset; an invented one is a tax. **Diagnosis from the operator:** *"too many sections for what we need here, let's cut some of it."* **The fix:** - Proof strip cut entirely - Replaced with a *real* artifact in the hero: the paper-quote facsimile (sample customer, real-looking interchange-plus rates, signed by a named rep). That earns trust because it shows the product, not metrics about it. **Rule:** if a stat isn't real and verifiable, it doesn't go on the page. "Numbers as decoration" is forbidden on trust products. If we want a proof element, show the artifact (a quote, a receipt, a testimonial with a real name and a real shop), not metrics. --- ## ❌ Top operational phone strip ("Sales: 555-0100 · Customer Support: 555-0101 · Mon–Sat 7am–7pm CT") **Project:** NativPay landing v4 **What I did:** Added a Clover-style top strip (ink background, mono text, lime phone numbers) above the nav. **Why it was wrong:** Clover and VizyPay use it because they're national operations with separate sales and support call centers. NativPay is three reps in a pickup truck — there is *one* phone number, and copying the call-center chrome made us look bigger and more impersonal than we are. The strip is template chrome, not earned chrome. **Diagnosis from the operator:** *"this in the header can probably go too… this section is too AI still."* **The fix:** - Strip removed - Single phone number lives in the nav (mono, tabular numerals, sky-blue background marker so it's still findable) - Same number repeated in the closer **Rule:** every chrome pattern needs to earn its place against the actual business shape. If we're not multi-channel, don't render multi-channel chrome. --- ## ❌ Generic `np` logo box in the nav **Project:** All NativPay versions until v5 — and snuck back in during the Claude Code port **What I did:** Put a sky-blue square with white `np` in it next to the wordmark. **Why it was wrong:** The square-letter-box logo is the single most overused fintech lockup of the last decade. Every "Stripe-but-for-X" wears one. It actively erases differentiation — the brand reads as "yet another fintech" before the wordmark even registers. **The fix:** - Box removed - Wordmark stands alone: `nativpay` in Inconsolata 500. Mono is the brand mark, because mono is what receipts and terminals print in. The wordmark *is* the lockup. **Rule:** for a brand whose visual DNA is "receipts and printed quotes," the wordmark in the right typeface is the logo. Adding a box reduces it to generic. --- ## Patterns to watch — common drift on trust products Things that don't show up in this system as canonical patterns but creep in because they're the genre default for SaaS landings. All off for trust-led marketing: - 3D / isometric / abstract gradient hero illustrations - "Featured On" press-logo strips (especially fake ones) - Sticky bottom-of-screen "Talk to us" chat blob — unless it's actually answered by a human in real time - Customer-logo carousels marquee-scrolling at slow speed - Multi-column "use case" grids tiled into 6+ cards - Capitalized-first-letter sentence case in nav links (`What We Sell`) instead of normal sentence case (`What we sell`) - "Learn more →" as a generic CTA — use the verb of the actual action (`See what we sell →`, `Get this quote →`, `Talk to us →`) - Rounded-full pills + bright fills on small UI elements (chips, badges, micro buttons) When in doubt, default to off and let the operator request them in.