From e56d9ffe98cb6a08d06f625ded71ffcb92853863 Mon Sep 17 00:00:00 2001 From: QiuSW <105186638@qq.com> Date: Mon, 17 Aug 2026 11:44:37 +0800 Subject: [PATCH] chore: remove unused generated design system --- design-system/pdd-mobile-operations/MASTER.md | 227 ------------------ 1 file changed, 227 deletions(-) delete mode 100644 design-system/pdd-mobile-operations/MASTER.md diff --git a/design-system/pdd-mobile-operations/MASTER.md b/design-system/pdd-mobile-operations/MASTER.md deleted file mode 100644 index a284de6..0000000 --- a/design-system/pdd-mobile-operations/MASTER.md +++ /dev/null @@ -1,227 +0,0 @@ -# Design System Master File - -> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`. -> If that file exists, its rules **override** this Master file. -> If not, strictly follow the rules below. - ---- - -**Project:** PDD Mobile Operations -**Generated:** 2026-08-14 16:35:42 -**Category:** Smart Home/IoT Dashboard -**Design Dials:** Variance 3/10 (Centered / Minimal) | Motion 3/10 (Subtle) | Density 8/10 (Dense / Dashboard) - ---- - -## Global Rules - -### Color Palette - -| Role | Hex | CSS Variable | -|------|-----|--------------| -| Primary | `#0F172A` | `--color-primary` | -| On Primary | `#FFFFFF` | `--color-on-primary` | -| Secondary | `#1E293B` | `--color-secondary` | -| Accent/CTA | `#22C55E` | `--color-accent` | -| Background | `#020617` | `--color-background` | -| Foreground | `#F8FAFC` | `--color-foreground` | -| Muted | `#1A1E2F` | `--color-muted` | -| Border | `#334155` | `--color-border` | -| Destructive | `#EF4444` | `--color-destructive` | -| Ring | `#0F172A` | `--color-ring` | - -**Color Notes:** Dark bg + green positive indicators - -### Typography - -- **Heading Font:** Fira Code -- **Body Font:** Fira Sans -- **Mood:** dashboard, data, analytics, code, technical, precise -- **Google Fonts:** [Fira Code + Fira Sans](https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700) - -**CSS Import:** -```css -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap'); -``` - -### Spacing Variables - -*Density: 8/10 — Dense / Dashboard* - -| Token | Value | Usage | -|-------|-------|-------| -| `--space-xs` | `2px` / `0.125rem` | Tight gaps | -| `--space-sm` | `4px` / `0.25rem` | Icon gaps, inline spacing | -| `--space-md` | `8px` / `0.5rem` | Standard padding | -| `--space-lg` | `12px` / `0.75rem` | Section padding | -| `--space-xl` | `16px` / `1rem` | Large gaps | -| `--space-2xl` | `24px` / `1.5rem` | Section margins | -| `--space-3xl` | `32px` / `2rem` | Hero padding | - -### Shadow Depths - -| Level | Value | Usage | -|-------|-------|-------| -| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift | -| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons | -| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns | -| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards | - ---- - -## Component Specs - -### Buttons - -```css -/* Primary Button */ -.btn-primary { - background: #22C55E; - color: white; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - transition: all 200ms ease; - cursor: pointer; -} - -.btn-primary:hover { - opacity: 0.9; - transform: translateY(-1px); -} - -/* Secondary Button */ -.btn-secondary { - background: transparent; - color: #0F172A; - border: 2px solid #0F172A; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - transition: all 200ms ease; - cursor: pointer; -} -``` - -### Cards - -```css -.card { - background: #020617; - border-radius: 12px; - padding: 24px; - box-shadow: var(--shadow-md); - transition: all 200ms ease; - cursor: pointer; -} - -.card:hover { - box-shadow: var(--shadow-lg); - transform: translateY(-2px); -} -``` - -### Inputs - -```css -.input { - padding: 12px 16px; - border: 1px solid #E2E8F0; - border-radius: 8px; - font-size: 16px; - transition: border-color 200ms ease; -} - -.input:focus { - border-color: #0F172A; - outline: none; - box-shadow: 0 0 0 3px #0F172A20; -} -``` - -### Modals - -```css -.modal-overlay { - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); -} - -.modal { - background: white; - border-radius: 16px; - padding: 32px; - box-shadow: var(--shadow-xl); - max-width: 500px; - width: 90%; -} -``` - ---- - -## Style Guidelines - -**Style:** Exaggerated Minimalism - -**Keywords:** Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design - -**Best For:** Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial - -**Key Effects:** font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace - -### Page Pattern - -**Pattern Name:** Real-Time / Operations Landing - -- **Conversion Strategy:** For ops/security/iot products. Demo or sandbox link. Trust signals. -- **CTA Placement:** Primary CTA in nav + After metrics -- **Section Order:** 1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact) - ---- - -## Motion - -**Page Transition** (Subtle) — Trigger: route change | Duration: 200-300ms | Easing: `power1.inOut` - -```js -gsap.to(main, { opacity: 0, duration: 0.2, onComplete: () => { navigate(); gsap.fromTo(main, { opacity: 0 }, { opacity: 1, duration: 0.2 }); } }); -``` - -**Framework notes:** Pair with the router's transition hooks (Next.js App Router transitions, React Router's useNavigate, Vue Router's beforeEach/afterEach) - -- ✅ Preload the destination route's critical assets before the exit tween finishes -- ❌ Don't block navigation on animation; cap exit duration at ~250ms so the app never feels unresponsive -- ⚡ Exit animation should always resolve faster than entrance (asymmetric timing) so back/forward feels snappy - ---- - -## Anti-Patterns (Do NOT Use) - -- ❌ Slow updates -- ❌ No automation - -### Additional Forbidden Patterns - -- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons) -- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer -- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout -- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio -- ❌ **Instant state changes** — Always use transitions (150-300ms) -- ❌ **Invisible focus states** — Focus states must be visible for a11y - ---- - -## Pre-Delivery Checklist - -Before delivering any UI code, verify: - -- [ ] No emojis used as icons (use SVG instead) -- [ ] All icons from consistent icon set (Heroicons/Lucide) -- [ ] `cursor-pointer` on all clickable elements -- [ ] Hover states with smooth transitions (150-300ms) -- [ ] Light mode: text contrast 4.5:1 minimum -- [ ] Focus states visible for keyboard navigation -- [ ] `prefers-reduced-motion` respected -- [ ] Responsive: 375px, 768px, 1024px, 1440px -- [ ] No content hidden behind fixed navbars -- [ ] No horizontal scroll on mobile