# Kupp-west Design System ## What this is A design system for **Kupp-west**, a German automotive-parts seller specializing in towbars (Anhängerkupplungen) and vehicle-specific 13-pin wiring harnesses (Elektrosätze). The brand sells "Komplettsets" (complete kits) — hitch + wiring harness + mounting hardware — matched to a customer's exact vehicle, primarily through an eBay product listing page. ## Source material This system was built from a single reference asset provided by the user: - `kuppwest_template_stitch_premium_ebay_towbar_template/screen.png` — a full-page **desktop** screenshot of an eBay "Premium" product listing template for a towbar + wiring-harness complete kit (product: "Anhängerkupplung & 13-pol Elektrosatz Komplettset" for a VW Touran Typ 5T1). Copied into this project at `reference/screen.png`, with detail crops in `reference/crop_*.png`. - A second screenshot supplied directly in chat: the **mobile** version of the same page (same product, same VW Touran fit, same pricing) — including page chrome not visible on the desktop crop: a header (menu + wordmark + cart), a bottom tab bar (Shop/Search/Orders/Support), and a footer. Copied to `reference/screen_mobile.png`, crops in `reference/cropm_*.png`. **No codebase, Figma file, real logo asset, icon set, or slide deck was attached or accessible.** **Brand-name note:** the template's placeholder copy renders the shop as "ENGINEERING ATELIER" (header wordmark, footer wordmark, footer copyright "© 2024 Engineering Atelier Automotive") with a generic car-silhouette mark. That's leftover template demo content, not the user's brand — the user's stated company is **Kupp-west**, and the folder name (`kuppwest_template_stitch_...`) confirms this is a Stitch-generated *template* meant to be rebranded. This system uses the **Kupp-west** wordmark everywhere a brand name appears, and treats the generic template mark as a placeholder (not a real logo — see Logo section). Everything below (colors, type, spacing, component inventory) was reverse-engineered by pixel-sampling and close reading of that one screenshot. This is a much thinner source than a full codebase/Figma export — see Caveats at the end. If a codebase, Figma link, real logo files, or brand guidelines exist, attaching them will let this system be corrected and greatly expanded. ## Product surfaces Only one surface is evidenced: the **eBay product listing page** for towbar/wiring-harness kits (`ui_kits/ebay-listing/`). No app, marketing site, or admin surface was provided, so none was invented. ## Index - `styles.css` — root stylesheet, imports every token file. Link this one file. - `tokens/` — `colors.css`, `typography.css`, `spacing.css`, `radius.css`, `shadow.css`, `fonts.css` - `guidelines/` — foundation specimen cards (colors, type, spacing, radius, shadow, iconography, brand) - `components/` - `core/` — Button, Badge, RibbonFlag - `cards/` — IconFeatureCard, OfferCard, NoticeCard - `data/` — SpecTable, FaqAccordion - `navigation/` — VehicleFilterBar, AppHeader, BottomTabBar - `product/` — ProductGallery, HeroBanner - `layout/` — SiteFooter - `ui_kits/ebay-listing/` — full click-through recreation of the product page: a desktop screen (bare content, as embedded in an eBay listing) and a mobile screen (full app shell — header, tab bar, footer) - `assets/` — logo status (none provided), icon note - `reference/` — the original screenshot and crops used for extraction - `SKILL.md` — portable skill file for using this system in Claude Code ## Intentional additions No component library or codebase was provided, so the component inventory below was authored from what's visibly used on the reference pages only (not a "standard kit" of unrelated primitives like Dialog/Toast/Tabs, which don't appear in the source). One addition beyond the literal inventory: `components/core/Icon.jsx`, a thin wrapper that renders any Lucide CDN icon as a recolorable glyph — needed because the source has no icon font/sprite of its own, and every other component needs a consistent way to render one. --- ## Content fundamentals Copy is German, written for a purchase decision under uncertainty ("will this actually fit my car?"). - **Formality:** Formal *Sie/Ihr* throughout — "Bitte wählen Sie Ihr Fahrzeug", "Passend für **Ihr** Fahrzeug", "In diesem Angebot enthalten". Never casual *du*. - **Reassurance-first framing:** Headlines and badges exist to kill doubt about fit and safety before price: "PASSEND FÜR IHR FAHRZEUG", "Vollständig integriertes System für maximale Sicherheit und nahtlose Fahrzeugkommunikation." - **Compound technical nouns, used confidently, never dumbed down:** *Anhängerkupplung*, *Elektrosatz*, *CAN-Bus-Freischaltung*, *PDC-Abschaltung*, *D-Wert*. The copy assumes the reader knows or will look up these terms — it doesn't over-explain jargon inline. - **Benefit line under every spec/feature:** each bolded feature title is followed by one plain-language payoff line, e.g. "3500 kg Zugkraft" → "Maximale Stabilität für schwerere Anhänger." Pattern: **spec noun phrase**, then *why it matters*. - **Short declaratives, no exclamation points, no hype adjectives.** No "amazing", "revolutionary" — the closest to a sales word is "Premium" and "Komplettset". Tone is closer to a technical data sheet than an ad. - **Numbers are exact and unrounded:** "3500 kg", "13-polig", "12.5 kN", "2500 kg" — precision itself is the trust signal. - **FAQ handles objections directly**, phrased as the customer would ask them: "Muss die Anhängerkupplung eingetragen werden?", "Ist der Elektrosatz wirklich passgenau?", "Wie lange dauert die Installation?" - **CTAs are verb + object, no filler:** "Jetzt kaufen", "Angebot anzeigen", "Kompatibilität prüfen", "In den Warenkorb", "Upgrade wählen" — never "Click here" or "Learn more". - **Trust lines are compact caption-caps noun phrases:** "ERSTAUSRÜSTER QUALITÄT" (OEM quality) sits alone above a partner-brand strip — no supporting sentence needed, the claim is the label. - **One inconsistency worth preserving as-is:** the mobile bottom tab bar labels ("Shop", "Search", "Orders", "Support") are English while every other string on the page is German. Recreated as found rather than "fixed", since it's a real trait of the source, not a typo to silently correct. - **No emoji, anywhere.** The only non-text marks are functional icons (dot/check/lightning glyphs inline before short labels). - **Eyebrow labels are short, uppercase, and blue:** "TOP MERKMALE", "UNSERE EMPFEHLUNG", "MEHR KOMFORT", "DATEN ANHÄNGERKUPPLUNG" — always noun phrases, 1-3 words, never full sentences. - **Vibe:** engineer-to-buyer, not marketer-to-shopper. Confident, precise, unembellished. Trust is built through specificity (exact numbers, named standards like CAN-Bus/PDC) rather than adjectives. --- ## Visual foundations **Color.** One brand blue (`#003dc9`) carries every call-to-action, active state, link, and eyebrow label — it is the single accent color, used with real restraint (most of the page is white/near-white/light-gray). A softer periwinkle-blue (`#6f7dd6`) is reserved for supporting icon glyphs inside feature circles, never for text or buttons, keeping a visual hierarchy between "act here" (saturated blue) and "illustrative" (soft blue). A near-black ink (`#0f1115`) carries headings; a mid gray (`#4b4f58`) carries body copy. Backgrounds alternate white sections and very light gray sections (`#f9f9f9`) to separate content groups without borders. No warm colors, no gradients on backgrounds — the one gradient in the whole page is reserved for a single highlighted "Premium" pricing card (`#0038c8 → #0050f4`, diagonal, darker at top-left), which makes it read as the elevated/upgrade option purely through color. **Type.** A single geometric/grotesque sans family for everything — no serif, no display face, no monospace. Weight, not style, creates hierarchy: extra-bold for the ~32px product headline, bold for section headings (~22px), semibold for card titles (~17px), regular for body (~15px/1.6). Eyebrow labels are small (~11px), bold, uppercase, letter-spaced, and always colored brand blue rather than gray — labels double as accent color, not just hierarchy. **Spacing.** Generous, airy — section padding in the 32–64px range, card padding ~20–24px, tight 4–8px gaps only inside icon+label clusters. Content sits in a comfortably narrow single column (this is a mobile/eBay-listing-width page, not a wide desktop layout). **Backgrounds.** No illustration, no texture, no pattern, no photographic backgrounds behind sections — the only photography is the product's own hero shot (car towing a caravan) and product thumbnails. Flat color fields only. **Animation.** Not observable from a static screenshot — no motion evidence either way. Recommend the safe, brand-consistent default: fast, subtle transitions (150–200ms ease-out) on hover/press only; no bounce, no parallax, nothing decorative. Documented as a recommendation, not an extracted fact. **Hover/press states.** Not directly observable (static screenshot). Extrapolated conservatively from the brand's restrained, technical tone: hover = darken primary blue one step (`#003dc9 → #00248a`) or add the card shadow; press = darken further, no scale/shrink effects (nothing in the source suggests playful motion). **Borders.** Thin, low-contrast (`#e7e8f2` lavender-gray) — used as quiet dividers and default card edges, not as decoration. The one exception is the "recommended" pricing card, which gets a full brand-blue outline to compete visually with the neighboring gradient-filled "Premium" card without using fill. **Shadows.** Soft and very low-contrast on white cards (barely-there elevation, e.g. `0 2px 8px rgba(15,17,21,.06)`) — shadows suggest a card is a surface, not that it's floating. The Premium gradient card is the one place a colored (blue-tinted) glow shadow would be appropriate, matching its fill. **Corner radii.** Consistently rounded, scaled to element size: small controls and thumbnails ~8-10px, cards ~16px, pricing cards ~16-20px, pill badges and CTA buttons fully rounded (999px pill) is NOT used for buttons — buttons use a moderate ~10px radius, not a pill; only status labels are pill-shaped. **Cards.** White fill, 1px `#e7e8f2` border or soft shadow (not both heavily), 16px radius, no colored left-border accent stripe anywhere in the source (avoid inventing one). Icon-feature cards sit on the light-gray section background rather than white, distinguishing "supporting content" cards from the white "primary content" cards (product panel, pricing cards). **Transparency & blur.** None observed — no glassmorphism, no backdrop-blur, no translucent overlays. The one soft-edged effect is a dark linear scrim over the bottom of the mobile hero photo so white headline text stays legible over the road photo. **Two badge shapes, two jobs.** A fully-rounded **pill** (white/light bg, colored text+icon, thin border) marks *reassurance* copy that sits inline in flow — "PASSEND FÜR IHR FAHRZEUG", "PASSGENAU GARANTIERT". A **ribbon/flag** (solid brand-blue fill, white bold caps text, one clipped/angled corner, pinned to a card's top-right corner) marks *merchandising* callouts — "AKTUELLES ANGEBOT", "DIESES ANGEBOT". Don't use them interchangeably: pill = trust signal, ribbon = commercial flag on a pricing card. **Premium card has two legitimate fills — pick one per surface, don't mix.** On desktop, the upgrade/"Premium Max" plan is a **diagonal blue gradient** (`#0038c8 → #0050f4`). On mobile, the same plan is a **solid deep navy** (`#001452`) instead. Both are real, both are in the source (not a drift/inconsistency to fix) — treat them as two OfferCard variants (`variant="gradient"` for wide/desktop layouts, `variant="solid-navy"` for narrow/mobile layouts), each always paired with white/light-lavender text and icons. **Chrome only shows up at mobile width.** The desktop crop is a bare content page (no header/footer/nav — it's embedded as an eBay listing description, which never gets that chrome). The mobile crop is a full app-like shell: sticky header (hamburger + wordmark + cart), content, footer, and a bottom tab bar — meaning the real product is closer to a mobile storefront/PWA than a plain listing page. Recreate both: the UI kit's "desktop" screen omits chrome (matches source), the "mobile" screen includes it (matches source). **Imagery.** The one photo (hero shot of a car towing a caravan at golden hour) is a natural, warm-toned, realistic automotive lifestyle photo — not studio-white, not black & white, no heavy grain or filter. Product thumbnails are clean white-background product photography. **Layout rules.** Single-column, vertically stacked sections; two-column grids appear only for paired comparison content (two pricing cards; two spec-table columns; two notice cards) — always exactly two, never three+, keeping side-by-side content easy to scan on a narrow page. --- ## Iconography Small, single-weight line icons (not filled, not duotone) are used throughout — feature bullets (truck-bed/hitch icon, wifi/harness icon, wrench, book, shield-check), spec-table section headers (trailer/hitch icon, small car icon), notice cards (calendar, lightning bolt), the mobile header (menu, cart), bottom tab bar (shop/search/box/wrench), and Premium-card bullets (lightning, circle-check, headset). No icon font, no PNG icon sprite, and no emoji were found in the source, and no icon asset files were recoverable from a screenshot alone. The one brand-partner logo strip ("ERSTAUSRÜSTER QUALITÄT") renders as an illegible gray placeholder box even in the source screenshot — so it was never a real asset to recover; this system leaves it as a labeled placeholder too. **Substitution:** this system links [Lucide](https://lucide.dev) icons from CDN (`unpkg.com/lucide-static` / `lucide` npm package) as the closest stroke-style match to what's visible (rounded caps, ~1.75px stroke, 24px grid). This is a flagged substitution — if Kupp-west has an actual icon set or codebase, swap it in and update `components/*/*.jsx` icon references. ## Logo **No real logo file was provided or found.** The reference screenshots contain a generic car-silhouette-in-a-square mark, but it's paired with the placeholder brand "Engineering Atelier" (see brand-name note above) and reads as template filler, not a Kupp-west asset — so, per design-system policy, it was **not** copied forward or treated as the brand's logo. Everywhere a mark would go, the wordmark **"Kupp-west"** is set in plain type using the condensed display face (`--text-wordmark` / `--font-condensed`, matching the weight/casing/tracking the source used for its own wordmark). See `assets/README.md`. ## Fonts No font files were attached. Two typefaces are evidenced: - **Body/UI text** — a plain geometric/grotesque sans with single-story letterforms, closely matched by **Inter** (Google Fonts). - **Wordmark only** — the header/footer brand text is a bold condensed uppercase face, closely matched by **Oswald** (Google Fonts). Used only for the brand wordmark, never for body or headings. `tokens/fonts.css` loads both via Google Fonts CDN. **Flag:** both are substitutions — if Kupp-west's actual template uses licensed or different fonts (common eBay-template stacks also use Roboto, Arial, or a system font), please share the real font files or names so this can be corrected. ## Caveats — please read This system was built from **two screenshots of one page** (desktop + mobile breakpoints), not a codebase or Figma file. That means: - Only one product surface/page (the towbar+wiring-harness product page) and no others (no storefront home, no cart, no account, no checkout, no search results) — because none were shown, even though the mobile chrome (tab bar, cart icon) implies those pages exist in the real product. - No real logo, icon set, or font files — substitutions are flagged above. The brand name itself was inferred (see brand-name note) from a mismatch between the stated company ("Kupp-west") and the template's placeholder copy ("Engineering Atelier") — please confirm this is correct. - Hover/press/animation behavior is inferred, not observed (screenshots are static). - The component inventory below covers only what appears on these two page renders; there may be other real Kupp-west screens/components (storefront home, cart, account, search, checkout) this system knows nothing about. - Partner/compatibility logos visible in the desktop source (Thule, Brink, Westfalia, Oris, VDO/Jaeger) are **third-party trademarks**, not Kupp-west assets — they were intentionally **not** copied into `assets/`. The UI kit represents that row with plain-text placeholders instead. The mobile source's equivalent trust-logo slot is an illegible placeholder box even in the original, so nothing was lost there. **Ask:** if you can attach the real codebase, a Figma link, actual logo/font files, or even a few more page screenshots (homepage, cart, other listing variants), this system can go from "one page reverse-engineered" to an accurate, complete brand system. Please share what you can and I'll iterate.