知识库首页 知识库-世界 UNIVERSAL_DESIGN.md

UNIVERSAL DESIGN

本地来源：Knowledge/World/设计配色/UNIVERSAL_DESIGN.md

version: "alpha" name: "Universal Elegant Tool Site System" description: "A reusable anti-slop design rulebook for AI-generated tool websites. Pick exactly one style pack per project, then obey all shared layout and component locks." colors: primary: "#171717" secondary: "#6F7378" accent: "#2F6BFF" neutral: "#F7F8F5" typography: display: fontFamily: "Geist, Satoshi, Cabinet Grotesk, system-ui, sans-serif" fontSize: "clamp(3rem, 7vw, 5.8rem)" fontWeight: 650 lineHeight: "0.96" letterSpacing: "-0.055em" body: fontFamily: "Geist, system-ui, sans-serif" fontSize: "1rem" fontWeight: 400 lineHeight: "1.65" letterSpacing: "-0.01em" mono: fontFamily: "Geist Mono, JetBrains Mono, SF Mono, monospace" fontSize: "0.8125rem" fontWeight: 500 lineHeight: "1.4" rounded: sm: "6px" md: "12px" lg: "20px" xl: "28px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "24px" xl: "40px" section: "96px"

Mission

Create clean, premium, consistent websites for tools, SaaS, AI apps, developer products, small utilities, directories, and personal products.

This file is not a decorative moodboard. It is a design constitution. The agent must pick one visual direction, commit to it, and avoid mixing styles mid-page.

Operating Principle

Before writing UI, output one sentence:

Reading this as: [page kind] for [audience], with a [style pack] visual language, leaning toward [layout foundation].

Then choose exactly one style pack below. Do not blend packs unless explicitly instructed.

Global Quality Locks

  1. One accent color per page. Do not introduce random blue, green, purple, and orange accents in different sections.
  2. One radius system per page. Pick sharp, soft, or pill-led. Document the exception if buttons and cards differ.
  3. One theme per page. Light, dark, or system. Do not flip from light hero to dark pricing unless that is the entire concept.
  4. Hero must fit the first viewport. Desktop headline max 2 lines. Subtext max 20 words. Primary CTA visible without scroll.
  5. Navigation is 64px to 72px by default, 80px max on desktop. It must stay one line.
  6. Avoid the default AI stack: purple mesh gradients, centered hero, three equal feature cards, fake glass everywhere, Inter plus slate, and generic startup copy.
  7. An 8-section page must use at least 4 different layout families.
  8. Do not use the same section header pattern repeatedly. Most sections do not need an eyebrow label.
  9. Use real visuals. Generated images, real screenshots, real product UI, or editorial photography. Do not build fake screenshots from rectangles.
  10. Every multi-column layout must define a mobile fallback below 768px.
  11. CTA labels should be short. Prefer 1 to 3 words. One intent gets one label across nav, hero, and footer.
  12. Every interactive component needs hover, focus, active, disabled, loading, empty, and error states where relevant.

Style Pack 1: Quiet Precision

Use for: B2B SaaS, AI tools, productivity apps, devtools, directories, dashboards marketed as products.

Mood: restrained, expensive, calm, exact.

Tokens: - Canvas: #F7F8F5 - Surface: #FFFFFF - Elevated surface: #F1F3EF - Text: #171717 - Muted text: #6F7378 - Border: #E3E6DF - Accent: #2F6BFF - Accent text: #FFFFFF

Typography: - Display: Geist, Satoshi, Cabinet Grotesk - Body: Geist or system-ui - Mono: Geist Mono or JetBrains Mono

Layout: - Hero: left-aligned split, 55 percent copy, 45 percent product visual. - Sections: asymmetric bento, feature detail split, compact proof strip, pricing cards with restrained borders. - Grid: max-width 1200px to 1320px, generous gutters, no full-bleed chaos.

Components: - Buttons: 10px to 12px radius, solid accent primary, neutral outline secondary. - Cards: 16px radius, 1px border, almost no shadow. - Tags: small, muted, not colorful unless semantic.

Do not: - Use colorful feature icons in every card. - Use gradient text. - Use three identical feature cards.

Style Pack 2: Editorial Stone

Use for: AI research, education tools, writing tools, philosophy products, newsletters, knowledge products, premium personal sites.

Mood: intelligent, literary, calm, institutional.

Tokens: - Canvas: #FAF9F5 - Surface: #F0EEE6 - Deep surface: #141413 - Text: #141413 - Muted text: #6F6D67 - Border: #D8D4C8 - Accent: #D97757 - Accent text: #141413

Typography: - Display: a justified editorial serif only when the product truly needs it. Use Newsreader, Tiempos, Cormorant Garamond, or a brand serif. - Body and UI: Geist, Satoshi, or a clean grotesk. - Mono: IBM Plex Mono or Geist Mono for metadata.

Layout: - Hero: article-like title block with one strong visual or a right-side editorial card. - Sections: alternating parchment and near-black bands, full-width quotes, essays, case-study cards. - Decorative system: underline, spacing, and typography. Not gradients.

Components: - Buttons: simple rectangular or soft 8px, sparing accent. - Cards: large editorial cards with clear type hierarchy. - Dividers: thin warm-gray lines.

Do not: - Use serif just because you want it to feel premium. - Use many colors. - Use fake poetic copy.

Style Pack 3: Midnight Command

Use for: developer infrastructure, API tools, cybersecurity, automation, AI agents, technical command centers.

Mood: dark, precise, technical, alive but not noisy.

Tokens: - Canvas: #0D1117 - Surface: #151A22 - Elevated surface: #1B2230 - Text: #F0F6FC - Muted text: #9198A1 - Border: #283041 - Accent: #8DD6FF - Accent text: #08111A

Typography: - Display: Geist, Satoshi, or a tight technical grotesk. - Body: Geist. - Mono: JetBrains Mono, Geist Mono, or IBM Plex Mono.

Layout: - Hero: split screen with real product screenshot, generated interface frame, or actual component preview. - Sections: dark cards, command palette strips, architecture diagrams, integration grids. - Density: medium. Do not pack the first page like a cockpit unless the product is genuinely data-dense.

Components: - Buttons: 6px to 10px radius, accent outline or filled accent. - Cards: 16px to 24px radius, subtle border, no heavy glow. - Code blocks: real code, not decorative nonsense.

Do not: - Use fake terminal content. - Use neon outer glows everywhere. - Use black #000000 as the canvas.

Style Pack 4: Soft Structuralism

Use for: health, wellness-adjacent tools, consumer productivity, portfolios, friendly AI apps, relationship or habit products.

Mood: calm, spacious, humane, tactile.

Tokens: - Canvas: #F8F8F6 - Surface: #FFFFFF - Soft surface: #EEF1ED - Text: #1E2428 - Muted text: #707A7C - Border: #E2E6E1 - Accent: #7FAE9B - Accent text: #102019

Typography: - Display: Cabinet Grotesk, Satoshi, Plus Jakarta Sans, or Geist. - Body: Geist or system-ui. - Mono: use very sparingly.

Layout: - Hero: large calm headline with one soft image, device mockup, or floating interaction cluster. - Sections: wide white space, staggered cards, soft feature panels, testimonials with photos. - Motion: spring-like, gentle, opacity and transform only.

Components: - Buttons: 999px pill allowed for small buttons, but keep cards soft 20px to 28px. - Cards: nested soft shells, low-opacity shadows, generous padding. - Forms: labels above inputs, clear focus rings.

Do not: - Use childish pastel overload. - Use over-rounded cards and over-rounded buttons without a rule. - Use generic wellness beige.

Style Pack 5: Cobalt Authority

Use for: fintech, analytics, business ops, legal-tech, compliance, B2B services, high-trust tools.

Mood: crisp, credible, modern, sharp.

Tokens: - Canvas: #FAFBFC - Surface: #FFFFFF - Steel surface: #EEF2F6 - Text: #0E1726 - Muted text: #64748B - Border: #D9E1EA - Accent: #245BFF - Accent text: #FFFFFF

Typography: - Display: Satoshi, Geist, Suisse-style grotesk, or system-ui. - Body: Geist or IBM Plex Sans. - Mono: IBM Plex Mono for numbers and metrics.

Layout: - Hero: left-aligned value prop, right-side metric panel or real dashboard screenshot. - Sections: metric rows, trust modules, compact comparison tables, proof cards. - Density: medium. Numbers should breathe.

Components: - Buttons: 8px radius, strong cobalt primary. - Cards: 12px radius, crisp borders, no heavy shadows. - Tables: grouped blocks, not endless bordered rows.

Do not: - Use playful gradients. - Use vague claims without concrete numbers. - Use too many icon tiles.

Style Pack 6: Industrial Swiss

Use for: engineering portfolios, technical agencies, hardware tools, data-heavy editorial, products that need mechanical seriousness.

Mood: raw, grid-based, disciplined, print-like.

Tokens: - Canvas: #F4F4F0 - Surface: #EAE8E3 - Text: #111111 - Muted text: #5F5F58 - Border: #1A1A1A - Accent: #D71920 - Accent text: #FFFFFF

Typography: - Display: Archivo Black, Monument Extended, Neue Haas Grotesk Black, or a heavy grotesk. - Body: IBM Plex Sans, Helvetica Neue, or system-ui. - Mono: IBM Plex Mono or JetBrains Mono.

Layout: - Hero: massive uppercase headline, strict grid, visible column lines. - Sections: modular grid, specs as grouped tiles, oversized numerals, raw dividers. - Motion: minimal. Hover states are sharp and utilitarian.

Components: - Buttons: square or 2px radius. - Cards: sharp rectangles, visible borders, no shadows. - Navigation: compact, uppercase, mono metadata allowed.

Do not: - Mix this with soft gradients. - Use rounded pill buttons. - Overdo CRT scanlines unless the brief explicitly asks.

Style Pack 7: Forest Instrument

Use for: premium consumer tools, climate, outdoor, craft, personal finance with warmth, local service products.

Mood: grounded, quiet, mature, warm without looking like every beige craft site.

Tokens: - Canvas: #F6F4ED - Surface: #FFFFFF - Deep surface: #1D2A22 - Text: #182019 - Muted text: #687064 - Border: #DAD6C9 - Accent: #A44A3F - Accent text: #FFFFFF

Typography: - Display: Satoshi, Cabinet Grotesk, or a restrained serif only for heritage brands. - Body: Geist or system-ui. - Mono: minimal.

Layout: - Hero: editorial product shot or landscape crop, left-aligned headline. - Sections: material cards, story blocks, grouped specs, testimonial cards. - Use dark green as atmosphere, brick as the single interaction accent.

Components: - Buttons: 10px to 14px radius. - Cards: 18px radius, warm dividers, little to no shadow. - Images: real photography, not illustrations.

Do not: - Use brass, oxblood, espresso, and beige as the automatic premium palette. - Use fake artisan labels. - Use long spec tables.

Universal Page Layout Recipe For Tool Sites

Default section sequence:

  1. Nav: logo, 3 to 5 links, one CTA.
  2. Hero: one value proposition, one primary CTA, one supporting visual.
  3. Proof: logo wall, usage stats, or short testimonial. Keep it separate from hero.
  4. Problem: concrete pain, not fluffy market copy.
  5. Product: real visual, workflow, screenshot, or interactive preview.
  6. Differentiators: asymmetric grid, not three equal cards.
  7. Workflow: 3 to 5 steps, each with one sentence.
  8. Use cases or audience segments: segmented tabs, cards, or scroll-snap.
  9. Pricing or conversion: simple plan cards or waitlist block.
  10. FAQ and footer: compact, readable, no decorative clutter.

Layout Families To Rotate

  • Split hero
  • Asymmetric bento
  • Full-width editorial band
  • Two-column narrative and visual
  • Sticky side index with scrolling cards
  • Horizontal scroll-snap pills
  • Metric strip
  • Case-study cards
  • Compact comparison grid
  • Quote and proof band

Never use the same family twice in a row. Across 8 sections, use at least 4 families.

Component Rules

Buttons: - Primary button uses the single accent color. - Secondary button is neutral outline or ghost with visible border. - No duplicate CTA labels for the same intent. - Text must fit on one line at desktop.

Cards: - Cards exist only when they clarify grouping. - No default shadow-md, shadow-lg, or black shadows. - Prefer borders, spacing, and subtle surface changes.

Typography: - Headline hierarchy comes from type scale, weight, and spacing, not random color. - Body copy max width 65ch. - Section headline: 6 to 10 words when possible. - Avoid startup clichés: seamless, next-gen, unlock, unleash, elevate, game-changing.

Images: - Use generated or real images first. - Use actual product screenshots when possible. - Do not create fake dashboards out of styled divs. - Minimal sites still need at least 2 to 3 real visual assets.

Forms: - Label above input. - Placeholder is not a label. - Error text below input. - Focus ring must be visible.

Accessibility: - Text and component contrast must pass WCAG AA. - Do not depend on color alone for state. - Respect reduced motion. - Keyboard focus must be visible.

Anti-Slop Ban List

Avoid by default:

  • AI-purple mesh gradient hero
  • Centered hero unless the message itself is the design
  • Three equal feature cards
  • Fake terminal or fake dashboard built from rectangles
  • Decorative status dots everywhere
  • Scroll cues
  • Version labels in hero unless product-launch status is the point
  • Section numbering eyebrows such as 01, 02, 03
  • Overusing uppercase mono eyebrow labels
  • Heavy drop shadows
  • Pure black #000000 or pure white #FFFFFF in most premium systems, except intentionally stark monochrome systems
  • Random icon styles mixed together
  • Long bordered spec tables
  • Placeholder names like Acme Corp or John Doe
  • Generic copy like seamless, next-gen, unleash, elevate

Pre-Flight Check

Before shipping, answer Pass or Fail:

  1. Did you choose exactly one style pack?
  2. Is the accent color consistent across the whole page?
  3. Is the radius system consistent?
  4. Does the hero fit in the initial viewport?
  5. Is the hero headline max 2 lines on desktop?
  6. Is the hero subtext max 20 words?
  7. Is the primary CTA visible without scroll?
  8. Does nav fit one line and stay under 80px?
  9. Does the page use at least 4 layout families across 8 sections?
  10. Are there no three-equal-card feature rows?
  11. Are visuals real, generated, or actual product UI rather than fake screenshots?
  12. Does mobile collapse work explicitly below 768px?
  13. Are CTA labels consistent by intent?
  14. Are all text and button contrasts readable?
  15. Did you remove generic startup copy?

Any Fail blocks completion.

Prompt Template

Use this when asking an agent to build a site:

I have loaded UNIVERSAL_DESIGN.md as the dominant design source.

Brief: - Page kind: [landing / tool / directory / portfolio / marketing] - Product: [name and one-line description] - Audience: [specific audience] - Vibe words: [choose 2 to 4] - Preferred style pack: [one of the seven packs, or let the agent infer] - Avoid: [patterns to avoid]

Step 1. Output one design read sentence, the chosen style pack, and the three dial values: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY. Stop.

Step 2. Build the page with at least 8 sections and at least 4 layout families. Use one theme, one accent, one radius system, and real visuals.

Step 3. Run the Pre-Flight Check and list Pass or Fail for every item.

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-UNIVERSAL_DESIGN-ccbcb6.md（仅本地保留，不入库不部署）