SaglitzDesign · knowledge base
88 documents on how to design things properly
Platform design languages, components, UX, craft, real-world patterns, marketing, SEO and GEO — written as rules you can apply, with numbers and sources rather than adjectives. This is the knowledge base behind the SaglitzDesign MCP server, published in full so you can read it without installing anything.
npx -y saglitzdesign-mcpv0.19.1Design languages · 11
- Android App Design — Complete GuideStructural, app-level guide for Android apps. The general Material 3 system (color roles, shape scale, motion springs, component visuals) lives in the M3 doc — this covers what Android…
- Apple HIG & Liquid Glass (iOS 26)Introduced at WWDC 2025, Liquid Glass is Apple's biggest visual redesign since iOS 7 — a dynamic translucent material that reflects and refracts its surroundings ("lensing"), with specular…
- Apple Intelligence Design — AI Features on iOS & macOSDesigning AI features on Apple platforms is not the same as building a chatbot. Apple's model is AI woven into the existing UI — acting on the user's content, in place, with system…
- Cross-Platform Design Tokens & ThemingDesign tokens are named, platform-agnostic design decisions (color, spacing, type, motion, elevation) stored as data and transformed into per-platform outputs (CSS variables, Swift, Kotlin,…
- iOS App Design — Complete GuideStructural, app-level guide for iPhone/iPad apps in the Liquid Glass era. For the material itself (glass variants, lensing, .glassEffect), see apple-hig-liquid-glass. This doc covers what…
- macOS App Design — Complete GuideHow to design a real Mac app — window anatomy, menus, keyboard, pointer, and the conventions that separate native apps from web wrappers. Liquid Glass material details live in…
- Material 3 & Material 3 ExpressiveMaterial 3 (M3) is Google's design system for Android, Wear OS, and the web. Material 3 Expressive (announced May 2025, rolled out through 2025–2026 with Android 16 and Wear OS 6) is its…
- Microsoft Fluent 2 Design SystemFluent 2 is Microsoft's current cross-platform design system (web/React, Windows/WinUI, iOS, Android, macOS), powering Microsoft 365, Teams, and Windows 11. It is the most token-driven of…
- Modern Web Design Trends 2025–2026A prescriptive, mid-2026 reality check. Trends below are graded by real-world adoption, not hype. Use this to decide what to recommend, what to use sparingly, and what to skip. Modular,…
- visionOS & Spatial Design — Designing for Apple Vision ProvisionOS runs apps in the space around the user rather than on a flat screen: interfaces are lit by the room, sit at real distances, and are driven by where you look and a pinch of the…
- WWDC Design Principles (Fluid Interfaces, Liquid Glass, Typography, Haptics)Apple's WWDC design talks are the most rigorous public treatment of interaction craft that exists. This doc distills the principles into concrete rules you can apply on Apple platforms…
Components · 5
- Buttons — Complete Design GuideButtons are the single highest-leverage component in any interface. Get hierarchy, sizing, states, and labels right and most flows fix themselves. | Level | Use | Visual treatment |…
- Cards, Lists, Modals & Sheets — Design Guide- A card = one self-contained object with one primary destination. If the whole card is tappable, make the whole card the link (stretched link) and don't nest competing tap targets except…
- Forms & Inputs — Design GuideForms are where products lose users. Every field must earn its place. - Single column always (multi-column forms cause skipped fields and eye-path zigzag). Exception: tightly-related pairs…
- Navigation Patterns — Mobile & WebNavigation is the user's mental model of your product. If they can't predict where things live, nothing else matters. - Bottom tab bar = default for 3–5 top-level destinations. More than 5…
- Search — Placement, Suggestions, Scoping and the States Nobody DesignsSearch is how someone reaches a known item faster than they could navigate to it — and, increasingly, how they discover what they did not know was there. It is also the feature most often…
Patterns · 15
- Android Conventions & Top-App PatternsHow real top Android apps structure themselves, where they follow Material 3 (Expressive) vs go brand-custom, and the Android-specific conventions iOS-first designers miss. Companion to…
- E-commerce & Checkout — Cart, Payment & ConversionCheckout is the highest-leverage surface in commerce: Baymard Institute's aggregated research puts the average documented cart-abandonment rate at ~70%, and its large-scale usability…
- Fintech Design — Trust, Money Data & Sensitive FlowsIn a finance app, trust is the product. A user hands you their identity, their money, and their assumption that a displayed number is correct — and every one of those is revocable the…
- Mobile Checkout & Payment Method Selection PatternsBased on real screens from Zalando, Etsy, Woolworths, Warby Parker, UNIQLO, and Houzz on Mobbin. - Zalando shows a 5-node horizontal stepper under the nav bar: "Sign in ✓ — Address ✓ —…
- Mobile Empty States & Bottom Primary Button PatternsBased on real screens from Collect, Shake Shack, Lex, Coursera, Grab, Demo, Shop, Greg, Google Gemini, Apple Wallet, Weverse, Deepstash, and Snapchat on Mobbin. Illustration → bold headline…
- Mobile Home Feed & Bottom Tab Navigation PatternsBased on real screens from Reddit, Medium, BuzzFeed, and Neverthink on Mobbin. - BuzzFeed runs the classic 5-tab bar: Home, News, Shopping, Quizzes, Search — outline icons with text labels,…
- Mobile Login & Social Sign-In PatternsBased on real screens from Reddit, Balance, Strava, MyFitnessPal, Vocabulary, IMDb, and Airalo on Mobbin. - Reddit: close X top-left, "Sign up" link top-right, large "Log in" title, legal…
- Mobile Onboarding & Paywall PatternsBased on real flows from Brilliant, Nibble, UNIQLO, Wanderlog, Vocabulary, Alma, Apple News, CapWords, Jobber, and bless. on Mobbin. - Brilliant's onboarding uses a back chevron + slim…
- Mobile Settings & Grouped List PatternsBased on real screens from Base, Deepstash, Meta AI, NGL, Binance, TextNow, and Linktree on Mobbin. - Every screen groups rows under short section headers. Deepstash uses uppercase gray…
- SaaS Landing Page & Signup Page PatternsDerived from Mobbin web screens: landing pages from StackAI, Laravel Cloud, Coda, Airtable, Linear, OpenPhone, and Wrangle; signup pages from OpenAI Platform, Vercel, Intercom, Amie, Faire,…
- Web App Dashboard Patterns (Sidebar + Data Cards)Derived from Mobbin web screens of Frame, Dovetail, Felt, Sana AI (two screens), Amplitude, and Asana (July 2026 research pass). Every sampled product uses a fixed left sidebar (~220–260px)…
- Website Feature Section Patterns (Grids & Bento)Derived from Mobbin section screenshots of Better Stack, Square, Fibery, Eventbrite, PamPam, Attio, and Jitter (July 2026 research pass). Better Stack runs a 3×2 dark bento grid under the…
- Website Hero Section PatternsDerived from Mobbin section screenshots of Analogue Agency, ClickUp, Proton, Passionfroot, Retool, Figma, and Mural (July 2026 research pass). Passionfroot is the canonical example: a…
- Website Pricing Section PatternsDerived from Mobbin section screenshots of Clerk, Chronicle, Framer, Qatalog, Equals, Maze, and Sprig (July 2026 research pass). Chronicle (Free $0 / Pro $15 / Team $30), Maze (Free / paid…
- Website Social Proof & Footer PatternsDerived from Mobbin section screenshots: testimonials from Klarna, Sprout Social, Mixpanel, Notion, Hims, Tines, and Intercom; footers from In Common With, Spade, SOTF, Bird, Lightship,…
UX · 13
- Accessibility (WCAG 2.2) — Practical GuideAccessibility is a design constraint, not a QA pass. Target WCAG 2.2 AA. - Normal text: ≥4.5:1 against background. - Large text (≥24px, or ≥18.66px bold): ≥3:1. - Non-text UI (borders of…
- AI Product UX — Designing Chat, Streaming & Agentic InterfacesLLM-powered products break classic UX assumptions: output is non-deterministic, latency is measured in seconds not milliseconds, and the system can be confidently wrong. Good AI UX…
- Color Systems — Palettes, Semantics, Dark Mode- 60-30-10: ~60% neutral surfaces, ~30% secondary/structural, ~10% accent. Accent is scarce by design — that scarcity is what makes CTAs pop. - One brand/accent hue + full neutral ramp + 4…
- Conversion UX — Landing Pages, CRO, TrustWithin 5 seconds a visitor must be able to answer: What is this? Who is it for? Why should I care? What do I do next? - Headline: outcome-focused, specific, ≤10 words ("Ship your app in…
- Data Visualization: Charts, Dashboards, and Telling the Truth with NumbersA chart is an argument, not decoration. Every visualization you produce must make one point faster than the same numbers in a paragraph would. If it does not, remove it. This document is…
- Information Architecture — Structure, Labeling, FindabilityInformation architecture (IA) is how you arrange the parts of a product so the whole is understandable. It is the invisible skeleton under every menu, URL, and label. When IA is right,…
- Internationalization & Localization — Global-Ready UIInternationalization (i18n) is designing and building a product so it can adapt to any language and region without re-engineering. Localization (l10n) is the act of adapting it to a…
- Mobile App UX — Platform Rules & Ergonomics- Bottom third of the screen = easy reach; top corners = hardest. On 6.1–6.9" phones, one-handed use dominates. - Primary actions, tab bars, key CTAs → bottom. Destructive actions → out of…
- Motion & Micro-interactionsMotion exists to explain (where did this come from?), confirm (did that work?), and delight (sparingly). If an animation does none of these, delete it. | Interaction | Duration | Easing |…
- Onboarding & Permission Priming — Activation and Asking for PermissionsFirst-run onboarding has two jobs: get the user to first value fast (activation) and earn the OS permissions your product actually needs. This doc is the activation-and-permissions…
- Spacing, Grids & LayoutAll spacing, sizes, and positions on an 8px grid; 4px for fine adjustments (icon padding, tight label gaps). Canonical scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. | Token | Use |…
- Typography — Scale, Pairing, RhythmTypography is 90% of interface design. Most "this looks off" problems are type problems. Build from 16px base with a ~1.2–1.25 ratio; round to sensible values: | Token | Size / line-height…
- UX Principles & HeuristicsThe evaluation backbone. Every design review should walk these. 1. Visibility of system status — every action gets feedback within 100ms; loading >1s shows progress; background work shows…
Craft · 12
- Animation Craft — Motion That Separates Great Interfaces from SlopThis is the deep-craft companion to motion-microinteractions. That doc gives you the durations and easing table to memorize; this one gives you the judgment and the fine detail that…
- Brand Identity Inside Native Platforms — Where Yours Goes and Where Theirs StaysTwo teams get this wrong in opposite directions. One ships a skinned web app where every control is custom, nothing behaves the way the OS taught the user, and the brand is loud and…
- Clean App Design — How to Design Calm, Uncluttered InterfacesClean design is not "add less stuff." It is a set of disciplined constraints that make an interface feel calm, confident, and easy to act in. The rules below are the working cheat-sheet.…
- Design Critique & Scoring — How Experts Judge QualityA rigorous critique is scored, prioritized, specific, and honest. Vague feedback wastes everyone's time; "consider exploring…" is banned language. This file gives the rubric, the report…
- Design Engineering — Clean Code for UI, Done RightThere is a craft that sits between "designer" and "engineer": building interfaces that are correct, accessible, maintainable, and faithful to the design. This is design engineering, and it…
- Ethical Design — Avoiding Dark Patterns, Converting HonestlyPersuasion and deception share a toolbox but not a purpose. Persuasion helps a user do something they already want to do faster; deception ("dark patterns," now formally "deceptive…
- Iconography — Choosing and Using an Icon SystemIcons are a design system in miniature: get them consistent and they make a product feel considered; mix families, weights, or metaphors and everything looks unfinished. This is how to pick…
- Modern CSS Design Primitives — What the Browser Now Does For YouA design system written in 2022 hand-rolls things the browser now does natively: a second set of dark-mode variables, a Sass function for tints, a build step to pick text colour. Several of…
- Naming Features and Labels — Criteria, Process, EvaluationNaming is treated as the last five minutes of a feature and it decides how the feature is understood. A name is the first thing a person reads, the thing they search for, the thing they…
- Typography Craft — Typesetting Beyond the BasicsTypography carries most of the information on any screen. Good typography is invisible; bad typography is distracting. The goal is never "fancier" — it is clearer, more readable, more…
- UX Writing — Interface Copy That Reduces Cognitive LoadGood UX writing is invisible: users understand instantly without noticing the words. Vague copy creates support tickets and abandonment; specific copy gets users through the task. 1. Be…
- Visual Craft Standards — Expert-Level PolishWhat separates expert UI from amateur UI is rarely the big idea. It is spacing discipline, optical honesty, complete states, and a system applied without exceptions. This file is the…
Process · 5
- Design Handoff — Figma-to-Code & Design–Dev CollaborationHandoff is not an event; it is a continuous state. The moment you picture a fixed line where design "finishes" and engineering "starts," you have already lost — that line is where intent…
- Design Systems Methodology — Atomic Design, Patterns, Tokens & GovernanceA design system is not a component library. It is the shared language, principles, tokens, components, and governance that let a team ship coherent product faster than they could ad hoc.…
- Marketing Website Roadmap — Positioning to CRO LoopMarketing sites fail in this order: positioning → copy → structure → design → speed. Fix upstream first; a beautiful site with unclear positioning converts worse than an ugly one with sharp…
- Product Design Roadmap — From Idea to Shipped InterfaceThe canonical sequence for designing a website or app well. Phases overlap in practice, but skipping a phase always resurfaces as rework. Each phase lists its exit criteria — don't advance…
- Theming an Off-the-Shelf System — shadcn/ui, Radix, Material, Native Kitsdesign-systems-methodology says to adopt and theme an existing system rather than reinvent one, and lists "reinventing an off-the-shelf system" among its anti-patterns. This is the other…
Books · 11
- Design Psychology — Perception, Memory, Motivation (Weinschenk + Universal Principles)How people perceive, attend, remember, read, decide, err, and stay motivated — each finding stated as a rule an interface can obey. Grouped by cognitive function. 1. Proximity is your…
- Don't Make Me Think — Web Usability Rules (Steve Krug)Krug's first law: a page should be self-evident — obvious, self-explanatory — or at worst self-explanatory with minimal effort. Every question mark that pops into a user's head ("Is that…
- Emotional Design — Making Products Feel Human (Walter + Norman)People do not remember feature lists; they remember how a product made them feel. Two books define the field: Aarron Walter's Designing for Emotion (why and where to add personality) and…
- Grid Systems & Typography Classics — Müller-Brockmann, Lupton, BringhurstThree print-era canons, translated. Müller-Brockmann supplies the grid method, Lupton the working typographer's toolkit, Bringhurst the detailing standard. Shared thesis: structure and…
- Hooked & Habit Design — Retention Mechanics for AppsEyal's Hook Model: products form habits by cycling users through Trigger → Action → Variable Reward → Investment. Each pass strengthens the association between the user's internal itch and…
- Influence & Persuasion — Cialdini Applied to DesignCialdini identified seven universal levers of compliance. People use mental shortcuts to decide; each principle is a shortcut you can honestly trigger — or dishonestly exploit. This file…
- Interaction Design Classics: Cooper, Tidwell, and the Rules They ImplyTwo books define the discipline of interaction design as distinct from visual design: Alan Cooper's About Face and Jenifer Tidwell's Designing Interfaces. Cooper tells you how to decide…
- Positioning & Messaging — Ries/Trout + Dunford Applied to DesignPositioning is the input; messaging, homepage, hero, and nav are outputs. If the homepage is hard to write, the positioning is broken — fix upstream first. This file: Ries & Trout's laws of…
- Refactoring UI — Tactical Visual Design (Wathan & Schoger)The book's thesis: you don't need innate artistic talent to make interfaces look professional — you need a bag of concrete, repeatable tactics. These are those tactics, stated as rules with…
- StoryBrand, Made to Stick & Ogilvy — Website Copywriting PlaybookThree frameworks, one division of labor: - StoryBrand (SB7) decides WHAT to say and in what ORDER (page architecture). - Made to Stick (SUCCESs) decides HOW each message is phrased so it…
- The Design of Everyday Things — Interaction Fundamentals (Don Norman)Norman's core claim: when people fail to use something, it is the design's fault, not the user's. Every UI decision should answer two questions the user is silently asking: "What can I do…
Marketing · 11
- Ad Creative — Hooks, Formats, Specs & Testing- Post-ATT, with broad targeting and AI-driven delivery (Advantage+ / Smart+ / PMax), the algorithm finds the audience through the creative. Who the ad visually and verbally speaks to…
- Analytics & Experimentation — North Star, Activation, Retention & A/B TestingMeasurement is a design responsibility, not a post-launch afterthought. The person who designs a flow decides what "working" means and whether it can ever be proven. Instrument as you draw.…
- App Store Optimization (ASO) — Store Visibility & Install ConversionASO is the craft of getting your app found (visibility) and getting the finder to install (conversion). It splits cleanly into two loops that need different skills: a keyword/metadata loop…
- Branding & Identity — Strategy to Logo System- A brand is not a logo. A brand is a person's gut feeling about a product, company, or service. You don't own the brand — customers do. Design only shapes the inputs to that feeling. - Do…
- Content Distribution — Architecture, Repurposing, Community & LifecycleCreating content is the cheap part. Getting it seen, spread, and turned into retained relationships is the work. This doc covers what the SEO, GEO, and email docs deliberately leave out:…
- Email Marketing — Design, Lifecycle Flows & Deliverability- Width: 600–640 px max. Single column by default. Gmail clips messages over ~102 KB of HTML ("[Message clipped] View entire message") — keep HTML weight under 100 KB. - Layout: tables are…
- Growth Frameworks — Loops, AARRR, PLG & Retention MathHow growth actually compounds, how to measure it, and how design decisions move the numbers. This is the strategy layer above the tactical conversion work in conversion-ux.md, the retention…
- HTML Email Development — Building Emails That Render EverywhereThis is the coding counterpart to email-marketing (which covers lifecycle flows, copy, and deliverability). This doc is about the HTML itself: how to build a single template that survives…
- Paywall & Onboarding Conversion Benchmarks (2026)Real benchmarks from RevenueCat's State of Subscription Apps 2026 (115k+ apps, $16B+ tracked revenue). Use these to judge whether a paywall/onboarding is competitive — not vibes. | Metric |…
- Pricing Strategy — Value-Based Monetization & PackagingThe strategy of what to charge, how to meter it, and how to package it. This is distinct from the pricing-page design patterns (3 tiers, middle highlighted, annual toggle) in…
- Value Proposition & Jobs-to-be-Done — JTBD, ODI & the VPCBefore you design a hero section or write a headline, you need to know what progress the customer is trying to make. This doc covers the three tools that get you there — Jobs-to-be-Done,…
SEO · 3
- On-Page SEO 2026On-page SEO in 2026 optimizes for three consumers at once: Google's classic ranking systems, Google AI Overviews / AI Mode, and third-party answer engines (ChatGPT, Perplexity, Claude). The…
- SEO for Designers 2026Every design decision — hero media, font choice, navigation pattern, animation — becomes a Core Web Vitals number, a crawlability property, or an accessibility signal. This file maps design…
- Technical SEO 2026Technical SEO in 2026 has two audiences: Google's crawler/renderer and AI crawlers (GPTBot, ClaudeBot, PerplexityBot) that now account for roughly half of all crawler traffic and do not…
GEO · 2
- GEO Fundamentals — Generative Engine OptimizationGenerative Engine Optimization (GEO) is the practice of structuring content, sites, and brand presence so that AI answer engines — ChatGPT (with search), Perplexity, Google AI Overviews /…
- GEO Tactics Checklist — Get Cited by AI EnginesPrescriptive, in priority order. Apply to money pages first, then roll out sitewide. - [ ] Open every page with a self-contained answer block: 2–4 sentences, directly under the H1, that…