Oatmeal — Customer Support SaaS Kit — Référence de design web et prompt

# OATMEAL — TAILWIND CSS SAAS MARKETING KIT (OLIVE / INSTRUMENT THEME) — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "OATMEAL" SAAS MARKETING KIT (OLIVE + INSTRUMENT SERIF THEME), REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY PAGE, SECTION, HOVER STATE, AND SCROLL/ENTRANCE ANIMATION IS RECREATED FROM RECON ARTIFACTS. ALL ASSETS (FONTS, IMAGES, LOGOS, AVATARS, SCREENSHOTS) ARE VENDORED LOCALLY SO THE CLONE RUNS OFFLINE. THIS IS A STUDY OF SOMEONE ELSE'S DESIGN, BUILT FOR LEARNING — ALL CREDIT FOR THE ORIGINAL GOES TO TAILWIND PLUS (TAILWIND LABS).

REFERENCE: `https://tailwindcss.com/plus/kits/oatmeal/preview?theme=olive_instrument`

## SUMMARY

A PREMIUM SAAS MARKETING KIT FOR A FICTIONAL CUSTOMER-SUPPORT INBOX PRODUCT ("OATMEAL"). THE KIT IS A WARM, QUIET, EDITORIAL DESIGN BUILT ON A SOFT OLIVE / CREAM PALETTE WITH AN ELEGANT "INSTRUMENT SERIF" DISPLAY FACE PAIRED WITH INTER FOR BODY/UI. THE BUILD SPANS THIRTEEN PAGES — THREE HOME LAYOUTS, THREE ABOUT LAYOUTS, THREE PRICING LAYOUTS, TWO PRIVACY-POLICY LAYOUTS, AND TWO 404 PAGES — ALL SHARING A CONSISTENT TOP NAV (PRICING · ABOUT · DOCS · CENTERED "OATMEAL." WORDMARK · LOG IN · BLACK "GET STARTED" PILL) AND A LIGHT FOUR-COLUMN FOOTER (PRODUCT / COMPANY / RESOURCES / LEGAL + "STAY IN THE LOOP" EMAIL CAPTURE + X / GITHUB / YOUTUBE SOCIAL ICONS + "© 2025 OATMEAL, INC.").

THE ORIGINAL IS GENERATED BY TAILWIND PLUS AS STATIC HTML WITH AN INLINED, COMPILED TAILWIND CSS V4.1.16 STYLESHEET (OBFUSCATED UTILITY CLASS NAMES), AN OKLCH "OLIVE" COLOR RAMP, GOOGLE-HOSTED INTER + INSTRUMENT SERIF, AND THE PROPRIETARY `@tailwindplus/elements` MODULE FOR INTERACTIVITY (MOBILE MENU DIALOG, FAQ DISCLOSURES, PRICING MONTHLY/YEARLY TABS, COPY-TO-CLIPBOARD). THE CLONE PRESERVES THE ORIGINAL COMPILED STYLESHEET AND CLASS-DRIVEN MARKUP FOR FIDELITY, SELF-HOSTS THE FONTS AND VENDORS ALL IMAGERY, AND REPLACES THE PROPRIETARY ELEMENTS LIBRARY WITH A SMALL VANILLA-JS SHIM THAT REIMPLEMENTS THE SAME `command` / `commandfor` INVOKER BEHAVIORS (DIALOG SHOW-MODAL/CLOSE, `--toggle` DISCLOSURES, TAB GROUPS, `--copy`) PLUS AN INTERSECTIONOBSERVER ENTRANCE-REVEAL SYSTEM.