version: alpha name: Universal Elegant Web Design System description: Multi-style website design rules for clean, consistent, AI-generated frontends. Use one style pack per project or page. Do not mix packs without explicit approval. colors: background: "#F7F3EA" foreground: "#171412" surface: "#FFFDF8" surfaceRaised: "#FFFFFF" muted: "#EDE6DA" mutedForeground: "#6F665C" border: "#D8CCBA" accent: "#B85C38" accentHover: "#9D4728" accentForeground: "#FFFFFF" success: "#2F7D5B" warning: "#B7791F" danger: "#B44545" typography: display: fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: "clamp(3rem, 7vw, 6.5rem)" fontWeight: 650 lineHeight: 0.92 letterSpacing: "-0.06em" h1: fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: "clamp(2.5rem, 5vw, 5rem)" fontWeight: 650 lineHeight: 0.98 letterSpacing: "-0.055em" h2: fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: "clamp(1.875rem, 3.2vw, 3.5rem)" fontWeight: 620 lineHeight: 1.03 letterSpacing: "-0.045em" body: fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: "1rem" fontWeight: 400 lineHeight: 1.65 letterSpacing: "-0.011em" label: fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: "0.78rem" fontWeight: 650 lineHeight: 1 letterSpacing: "0.06em" mono: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace" fontSize: "0.875rem" fontWeight: 500 lineHeight: 1.5 rounded: none: "0px" sm: "6px" md: "10px" lg: "18px" xl: "28px" full: "999px" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" 4xl: "96px" 5xl: "128px" components: buttonPrimary: backgroundColor: "{colors.accent}" textColor: "{colors.accentForeground}" rounded: "{rounded.full}" padding: "12px 18px" buttonPrimaryHover: backgroundColor: "{colors.accentHover}" textColor: "{colors.accentForeground}" buttonSecondary: backgroundColor: "transparent" textColor: "{colors.foreground}" rounded: "{rounded.full}" padding: "12px 18px" card: backgroundColor: "{colors.surface}" textColor: "{colors.foreground}" rounded: "{rounded.lg}" padding: "24px" input: backgroundColor: "{colors.surfaceRaised}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: "12px 14px" badge: backgroundColor: "{colors.muted}" textColor: "{colors.mutedForeground}" rounded: "{rounded.full}" padding: "6px 10px" themes: warmEditorial: label: "Warm Editorial Intelligence" colors: background: "#F7F3EA" foreground: "#171412" surface: "#FFFDF8" surfaceRaised: "#FFFFFF" muted: "#EDE6DA" mutedForeground: "#6F665C" border: "#D8CCBA" accent: "#B85C38" accentHover: "#9D4728" accentForeground: "#FFFFFF" radiusMode: "soft editorial" bestFor: "AI tools, knowledge products, writing apps, founder pages, consulting SaaS" midnightCommand: label: "Midnight Command Center" colors: background: "#090A0F" foreground: "#F4F6FB" surface: "#11131C" surfaceRaised: "#171A26" muted: "#222637" mutedForeground: "#9AA3B2" border: "#2B3042" accent: "#8B5CF6" accentHover: "#A78BFA" accentForeground: "#FFFFFF" radiusMode: "precise medium" bestFor: "developer tools, AI agents, code products, data ops, security dashboards" softPremium: label: "Soft Premium Calm" colors: background: "#F6F1E8" foreground: "#1F2420" surface: "#FBF8F1" surfaceRaised: "#FFFFFF" muted: "#E6DED1" mutedForeground: "#6A635A" border: "#D7CDBD" accent: "#5D7C6B" accentHover: "#496657" accentForeground: "#FFFFFF" radiusMode: "large soft" bestFor: "wellness, productivity, personal CRM, finance calm UI, premium micro SaaS" swissBrutalist: label: "Swiss Brutalist Utility" colors: background: "#F4F4EF" foreground: "#090909" surface: "#FFFFFF" surfaceRaised: "#F9F9F6" muted: "#E2E2DA" mutedForeground: "#55554D" border: "#141414" accent: "#FF4D00" accentHover: "#D93D00" accentForeground: "#000000" radiusMode: "sharp or tiny" bestFor: "directories, tools, docs, utilities, technical blogs, launch pages with attitude" freshStartup: label: "Fresh Lime Startup" colors: background: "#FAFAF0" foreground: "#10130E" surface: "#FFFFFF" surfaceRaised: "#F1FFD9" muted: "#E7EED8" mutedForeground: "#5D684B" border: "#D3DFC0" accent: "#B7F34A" accentHover: "#9DDB2E" accentForeground: "#10130E" radiusMode: "friendly rounded" bestFor: "consumer SaaS, creator tools, social products, onboarding-heavy products" dataTrust: label: "Data Trust Console" colors: background: "#F8FAFC" foreground: "#0F172A" surface: "#FFFFFF" surfaceRaised: "#F1F5F9" muted: "#E2E8F0" mutedForeground: "#64748B" border: "#CBD5E1" accent: "#2563EB" accentHover: "#1D4ED8" accentForeground: "#FFFFFF" radiusMode: "controlled medium" bestFor: "B2B SaaS, analytics, admin systems, fintech, dashboards" obsidianLuxury: label: "Obsidian Luxury" colors: background: "#050505" foreground: "#F4EFE5" surface: "#0E0D0B" surfaceRaised: "#181610" muted: "#242017" mutedForeground: "#A8A094" border: "#3A3325" accent: "#D4A84F" accentHover: "#E5C46D" accentForeground: "#050505" radiusMode: "sharp premium" bestFor: "luxury landing pages, paid communities, high-ticket consulting, cinematic product pages" creativeGradient: label: "Creative Gradient Studio" colors: background: "#FBFAFF" foreground: "#13111C" surface: "#FFFFFF" surfaceRaised: "#F2EEFF" muted: "#EAE4FF" mutedForeground: "#635A7A" border: "#D7CDF5" accent: "#6D5EF6" accentHover: "#5849DF" accentForeground: "#FFFFFF" radiusMode: "expressive soft" bestFor: "creative tools, AI image/audio apps, portfolio, agencies, launch microsites"
Overview
This file gives AI coding agents a durable visual contract. The goal is not to make every website identical. The goal is to make every website internally consistent: one token system, one page theme, one radius language, one accent behavior, and multiple layout families that prevent generic output.
Use exactly one style pack per page unless a human explicitly approves a mixed brand system.
The Non-Negotiable Design Locks
-
Color Consistency Lock Use one primary accent across the page. Secondary colors may exist only for semantic states like success, warning, danger, or data visualization. Do not randomly introduce blue, purple, pink, or green CTAs in later sections.
-
Shape Consistency Lock Pick one radius language per page: sharp, controlled, soft, pill, or luxury-sharp. Cards, inputs, buttons, modals, and panels must feel like they come from the same object family.
-
Page Theme Lock A page is light, dark, or auto. Do not flip between light and dark sections unless the page is intentionally split-screen and the transition is a major art-directed moment.
-
Typography Lock Use one main sans stack. Add a serif only for editorial contrast, never for random decoration. Mono is reserved for code, metrics, timestamps, data labels, and technical metadata.
-
Spacing Lock Use a predictable spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Avoid arbitrary one-off spacing except for optical alignment.
Global Layout Rules
- Desktop max content width: 1180px to 1280px for standard SaaS, 1440px for cinematic or dashboard pages.
- Mobile content padding: 20px.
- Tablet content padding: 32px.
- Desktop content padding: 48px to 64px.
- Section vertical rhythm: 80px to 128px on desktop, 56px to 80px on mobile.
- Use 12 columns on desktop, 6 columns on tablet, 4 columns on mobile.
- Every page needs at least four layout families if it has more than seven sections.
- Never build a whole landing page from repeated centered text plus three equal cards.
Hero Rules
- Hero headline must fit in two desktop lines.
- Hero subtext should stay under 24 words.
- Primary CTA must be visible without scroll.
- Navigation height should stay under 80px on desktop.
- Do not add decorative scroll cues.
- Do not use fake version pills like v0.4, beta, invite-only unless it is truly a product launch.
- Hero should establish one of these structures:
- editorial split: copy left, image or proof right
- centered monument: one strong headline, one compact CTA row, one visual below
- product console: headline plus real product screenshot or live panel
- cinematic brand: minimal copy, large image, restrained CTA
- utility-first: search/input/action placed high above the fold
Style Pack 1: Warm Editorial Intelligence
Best for AI tools, knowledge products, personal operating systems, writing apps, research products, founder brands.
Mood: intelligent, calm, literary, premium, human.
Colors: - Background: #F7F3EA - Foreground: #171412 - Surface: #FFFDF8 - Muted: #EDE6DA - Border: #D8CCBA - Accent: #B85C38
Typography: - Use Inter, Public Sans, or Geist for UI. - Optional editorial serif for large quotes only: Georgia, Source Serif, Newsreader. - Headlines are tight, text blocks are readable, labels are quiet.
Layout: - Use warm empty space. - Prefer editorial split heroes, journal-style sections, quote blocks, comparison tables, and soft cards. - Cards should feel like paper or vellum, not floating glass.
Components: - Primary button: terracotta filled pill. - Secondary button: transparent with ink text and subtle border. - Cards: warm paper surface, 1px border, soft radius.
Avoid: - Neon gradients. - Heavy dashboards in the hero. - Overly cold blue CTAs.
Prompt phrase: Use Warm Editorial Intelligence: warm paper background, deep ink typography, one terracotta accent, editorial spacing, restrained premium SaaS layout.
Style Pack 2: Midnight Command Center
Best for developer tools, AI agents, code platforms, security, infrastructure, automations, technical dashboards.
Mood: precise, powerful, technical, cinematic, focused.
Colors: - Background: #090A0F - Foreground: #F4F6FB - Surface: #11131C - Muted: #222637 - Border: #2B3042 - Accent: #8B5CF6
Typography: - Use Geist, Inter, or IBM Plex Sans. - Mono is allowed for command snippets, logs, and metrics. - Tight letter spacing for large headlines.
Layout: - Use dark full-bleed background. - Prefer console-style product proof, two-column technical sections, sticky feature stacks, code blocks, and metric strips. - Use subtle borders and soft inner shadows instead of loud glows.
Components: - Primary button: violet filled or light text on violet. - Secondary button: dark surface with border. - Cards: dark panels with thin borders.
Avoid: - Generic AI purple mesh blobs. - Fake terminals built from meaningless div rows. - Too many neon colors.
Prompt phrase: Use Midnight Command Center: off-black surfaces, precise dark UI, one violet accent, technical density, real product proof, subtle motion.
Style Pack 3: Soft Premium Calm
Best for wellness, personal productivity, gentle finance, coaching, community, relationship or habit products.
Mood: soft, expensive, clear, caring, quiet.
Colors: - Background: #F6F1E8 - Foreground: #1F2420 - Surface: #FBF8F1 - Muted: #E6DED1 - Border: #D7CDBD - Accent: #5D7C6B
Typography: - Use Inter, Satoshi, or Avenir-style sans. - Avoid aggressive condensed type. - Body copy can be slightly larger: 17px to 18px.
Layout: - Use generous spacing and fewer elements per section. - Prefer large rounded cards, soft side-by-side sections, image plus copy, calm onboarding steps. - Let whitespace do the selling.
Components: - Primary button: muted green filled pill. - Cards: large radius, gentle border, no harsh shadow. - Forms: big tap targets, quiet focus rings.
Avoid: - Black-heavy contrast. - Aggressive sales-page urgency. - Tiny dense dashboards.
Prompt phrase: Use Soft Premium Calm: warm cream base, sage accent, generous whitespace, large rounded cards, calm high-trust layout.
Style Pack 4: Swiss Brutalist Utility
Best for directories, technical utilities, open-source projects, calculators, docs, changelogs, research indexes, opinionated launch pages.
Mood: direct, sharp, raw, credible, mechanical.
Colors: - Background: #F4F4EF - Foreground: #090909 - Surface: #FFFFFF - Muted: #E2E2DA - Border: #141414 - Accent: #FF4D00
Typography: - Use Helvetica Neue, Arial, Inter, or Neue Haas-style sans. - Large bold headlines, tight tracking, strong hierarchy. - Mono can label tables and filters.
Layout: - Use visible grid, strong dividers, asymmetric feature blocks, dense lists, and utility-first controls. - Sharp edges or tiny 4px radius. - More contrast is allowed, but it must be intentional.
Components: - Primary button: orange or black rectangular button. - Cards: hard border, no soft float. - Tables: strong header row, clean row separation, no overdone borders on every row.
Avoid: - Soft pastel friendliness. - Excessive rounded pills. - Decorative gradients.
Prompt phrase: Use Swiss Brutalist Utility: off-white canvas, black grid, one orange accent, sharp typography, asymmetric layout, direct utility feel.
Style Pack 5: Fresh Lime Startup
Best for consumer SaaS, creator tools, browser extensions, onboarding products, social apps, playful productivity.
Mood: fresh, fast, optimistic, simple, modern.
Colors: - Background: #FAFAF0 - Foreground: #10130E - Surface: #FFFFFF - Surface raised: #F1FFD9 - Muted: #E7EED8 - Border: #D3DFC0 - Accent: #B7F34A
Typography: - Use Inter, Plus Jakarta Sans, or DM Sans. - Friendly rounded UI is acceptable, but do not become childish. - Headlines can be bold but should stay clean.
Layout: - Use playful bento only when every cell has real content. - Good patterns: onboarding flows, feature walkthroughs, before-after panels, integration rows, pricing cards. - Add one or two delightful micro-interactions, not a circus.
Components: - Primary button: lime filled pill or rounded rectangle with dark text. - Cards: white surface with subtle green-tinted border. - Badges: pale lime with dark text.
Avoid: - Rainbow gradients. - Cartoon illustrations unless the brand demands it. - Empty bento cells.
Prompt phrase: Use Fresh Lime Startup: off-white base, bright lime accent, friendly rounded surfaces, energetic but clean consumer SaaS layout.
Style Pack 6: Data Trust Console
Best for B2B SaaS, analytics, fintech, admin panels, internal tools, CRM, compliance, reporting.
Mood: trustworthy, clear, structured, calm, competent.
Colors: - Background: #F8FAFC - Foreground: #0F172A - Surface: #FFFFFF - Muted: #E2E8F0 - Border: #CBD5E1 - Accent: #2563EB
Typography: - Use Inter, IBM Plex Sans, or system UI. - Body 14px to 16px for data-dense areas. - Use tabular numerals for metrics.
Layout: - Use clear dashboard grids, summary cards, tabbed sections, sidebars, filters, and data tables. - Marketing pages can borrow dashboard discipline without becoming boring. - Every metric needs a label, time range, and comparison context.
Components: - Primary button: blue filled rounded rectangle. - Cards: white with slate border and compact padding. - Tables: clean zebra-free rows, hover state, sticky header for large datasets.
Avoid: - Decorative fake charts. - Too much empty whitespace in admin views. - Consumer-style giant type everywhere.
Prompt phrase: Use Data Trust Console: light slate UI, blue accent, clean dashboard hierarchy, compact cards, trustworthy B2B clarity.
Style Pack 7: Obsidian Luxury
Best for high-ticket offers, luxury products, premium communities, executive consulting, cinematic portfolios.
Mood: rare, restrained, dramatic, expensive, confident.
Colors: - Background: #050505 - Foreground: #F4EFE5 - Surface: #0E0D0B - Muted: #242017 - Border: #3A3325 - Accent: #D4A84F
Typography: - Use a precise sans like Inter, Neue Haas-style, or Satoshi. - Optional elegant serif only for one large editorial headline or quote. - Use uppercase labels sparingly.
Layout: - Use fewer elements, larger images, dramatic spacing, and strong vertical rhythm. - Prefer cinematic heroes, case-study sections, testimonial quotes, and high-contrast pricing or application forms. - The product should feel expensive because the page refuses to shout.
Components: - Primary button: gold with black text or cream outline on black. - Cards: dark surface, subtle gold-tinted border. - Images: large, high-quality, never tiny thumbnails.
Avoid: - Cheap gold gradients. - Too many icons. - Excessive animation.
Prompt phrase: Use Obsidian Luxury: near-black canvas, warm ivory text, restrained gold accent, cinematic spacing, premium high-ticket confidence.
Style Pack 8: Creative Gradient Studio
Best for creative tools, AI image/audio/video products, agencies, portfolios, launch microsites.
Mood: expressive, fluid, polished, visual, modern.
Colors: - Background: #FBFAFF - Foreground: #13111C - Surface: #FFFFFF - Muted: #EAE4FF - Border: #D7CDF5 - Accent: #6D5EF6
Typography: - Use a clean sans like Inter, Space Grotesk, or Manrope. - Headlines may be large and sculptural. - Body must remain grounded and readable.
Layout: - Use one signature gradient moment, not gradient everywhere. - Good patterns: gallery grid, staggered cards, split hero, carousel, project tiles, tool preview panels. - Let media carry the energy.
Components: - Primary button: violet filled pill. - Cards: white or lavender-tinted surfaces. - Gradient: reserved for hero visual, CTA background, or one major transition band.
Avoid: - Generic mesh blob background across every section. - Low-contrast lavender text. - Overlapping decorative shapes with no purpose.
Prompt phrase: Use Creative Gradient Studio: clean white-lavender base, one controlled violet accent, art-directed gradient moment, media-first creative layout.
Component Rules
Buttons: - Primary action appears once per section maximum. - Buttons must have hover, focus-visible, active, and disabled states. - Button text should be concrete: Start building, View pricing, Create workspace, Analyze site.
Cards: - Cards need a clear reason: group related content, show a product state, quote proof, or compare options. - Do not use cards as decoration. - Card padding: 20px to 32px depending on density.
Navigation: - Desktop nav should fit on one line. - Mobile nav must collapse cleanly. - Avoid more than five primary nav items unless it is a marketplace or docs site.
Forms: - Inputs should be at least 44px tall. - Labels must stay visible. - Error messages need plain language. - Focus ring must be visible and use the page accent.
Pricing: - Do not make every plan visually equal. - Recommended plan may use accent border or filled badge. - Always expose billing period, limits, and primary action clearly.
Testimonials: - Use real names or anonymize honestly. - No decorative quote sections without a clear conversion role.
Motion Rules
- Default motion: 150ms to 220ms for UI hover and state changes.
- Section reveal: 350ms to 700ms, subtle opacity plus transform only.
- Avoid scroll-jacking.
- Use motion to clarify hierarchy, not to prove technical cleverness.
- If motion intensity is high, it must be visible in meaningful transitions, not only random hover effects.
Accessibility Rules
- Body text should pass WCAG AA contrast.
- Interactive text on filled buttons should pass WCAG AA contrast.
- Focus-visible must be present for keyboard users.
- Do not rely on color alone for status.
- Minimum interactive target size: 44px.
- Avoid pure #FFFFFF on pure #000000 as the default page pair; use off-white and off-black for a more polished feel.
Layout Recipes
-
Editorial Split Landing Hero split 6/6, proof row, feature essay section, asymmetric cards, testimonial quote, pricing, FAQ, footer. Best style packs: Warm Editorial, Soft Premium, Obsidian Luxury.
-
Product Console Landing Hero with product screenshot or live panel, integration strip, workflow steps, sticky feature stack, metrics, pricing, docs CTA. Best style packs: Midnight Command, Data Trust, Fresh Startup.
-
Utility Directory Search first, filter chips, ranked grid/list, detail preview, comparison table, FAQ, newsletter. Best style packs: Swiss Brutalist, Data Trust.
-
Premium Service Page Cinematic hero, credibility strip, problem narrative, process, case studies, offer stack, application form. Best style packs: Obsidian Luxury, Warm Editorial, Soft Premium.
-
Creative Tool Launch Bold visual hero, gallery proof, before-after, workflow cards, creator testimonials, pricing, CTA. Best style packs: Creative Gradient, Fresh Startup.
Anti-Slop Ban List
Do not generate these unless the product brief explicitly requires them:
- AI-purple mesh blob gradients as the default hero.
- Three equal feature cards repeated across the page.
- Fake dashboards, fake terminals, or fake charts built from meaningless divs.
- Decorative status dots that do not communicate real state.
- Scroll down cues.
- City/time/weather/location strips used as decoration.
- Section labels like 001, 002, 003 unless it is a real index system.
- Random pill labels floating on images.
- Too many unrelated accent colors.
- Heavy shadows on every card.
- Full pages built only from centered text blocks.
- Tiny gray text with poor contrast.
CSS Variable Contract
Use these semantic names in implementation. Change values per style pack, not per component.
:root {
--bg: #F7F3EA;
--fg: #171412;
--surface: #FFFDF8;
--surface-raised: #FFFFFF;
--muted: #EDE6DA;
--muted-fg: #6F665C;
--border: #D8CCBA;
--accent: #B85C38;
--accent-hover: #9D4728;
--accent-fg: #FFFFFF;
--success: #2F7D5B;
--warning: #B7791F;
--danger: #B44545;
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 28px;
--radius-full: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
}
Theme CSS Variables
[data-theme="warm-editorial"] {
--bg: #F7F3EA;
--fg: #171412;
--surface: #FFFDF8;
--surface-raised: #FFFFFF;
--muted: #EDE6DA;
--muted-fg: #6F665C;
--border: #D8CCBA;
--accent: #B85C38;
--accent-hover: #9D4728;
--accent-fg: #FFFFFF;
--radius-card: 18px;
}
[data-theme="midnight-command"] {
--bg: #090A0F;
--fg: #F4F6FB;
--surface: #11131C;
--surface-raised: #171A26;
--muted: #222637;
--muted-fg: #9AA3B2;
--border: #2B3042;
--accent: #8B5CF6;
--accent-hover: #A78BFA;
--accent-fg: #FFFFFF;
--radius-card: 14px;
}
[data-theme="soft-premium"] {
--bg: #F6F1E8;
--fg: #1F2420;
--surface: #FBF8F1;
--surface-raised: #FFFFFF;
--muted: #E6DED1;
--muted-fg: #6A635A;
--border: #D7CDBD;
--accent: #5D7C6B;
--accent-hover: #496657;
--accent-fg: #FFFFFF;
--radius-card: 28px;
}
[data-theme="swiss-brutalist"] {
--bg: #F4F4EF;
--fg: #090909;
--surface: #FFFFFF;
--surface-raised: #F9F9F6;
--muted: #E2E2DA;
--muted-fg: #55554D;
--border: #141414;
--accent: #FF4D00;
--accent-hover: #D93D00;
--accent-fg: #000000;
--radius-card: 4px;
}
[data-theme="fresh-startup"] {
--bg: #FAFAF0;
--fg: #10130E;
--surface: #FFFFFF;
--surface-raised: #F1FFD9;
--muted: #E7EED8;
--muted-fg: #5D684B;
--border: #D3DFC0;
--accent: #B7F34A;
--accent-hover: #9DDB2E;
--accent-fg: #10130E;
--radius-card: 22px;
}
[data-theme="data-trust"] {
--bg: #F8FAFC;
--fg: #0F172A;
--surface: #FFFFFF;
--surface-raised: #F1F5F9;
--muted: #E2E8F0;
--muted-fg: #64748B;
--border: #CBD5E1;
--accent: #2563EB;
--accent-hover: #1D4ED8;
--accent-fg: #FFFFFF;
--radius-card: 12px;
}
[data-theme="obsidian-luxury"] {
--bg: #050505;
--fg: #F4EFE5;
--surface: #0E0D0B;
--surface-raised: #181610;
--muted: #242017;
--muted-fg: #A8A094;
--border: #3A3325;
--accent: #D4A84F;
--accent-hover: #E5C46D;
--accent-fg: #050505;
--radius-card: 10px;
}
[data-theme="creative-gradient"] {
--bg: #FBFAFF;
--fg: #13111C;
--surface: #FFFFFF;
--surface-raised: #F2EEFF;
--muted: #EAE4FF;
--muted-fg: #635A7A;
--border: #D7CDF5;
--accent: #6D5EF6;
--accent-hover: #5849DF;
--accent-fg: #FFFFFF;
--radius-card: 24px;
}
Tailwind v4 Guidance
Map semantic CSS variables into Tailwind. Components should use roles, not raw colors.
@theme {
--color-background: var(--bg);
--color-foreground: var(--fg);
--color-surface: var(--surface);
--color-surface-raised: var(--surface-raised);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-fg);
--color-border: var(--border);
--color-accent: var(--accent);
--color-accent-hover: var(--accent-hover);
--color-accent-foreground: var(--accent-fg);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-xl: var(--radius-xl);
--radius-full: var(--radius-full);
}
Do:
- bg-background text-foreground
- bg-surface border-border
- bg-accent text-accent-foreground hover:bg-accent-hover
Do not:
- bg-purple-600 unless purple is the chosen semantic accent.
- rounded-[17px] unless there is a documented optical reason.
- shadow-2xl on every card.
AI Prompt: New Website
Use this prompt with Cursor, Claude Code, Codex, v0, Lovable, or similar agents.
Read DESIGN.md before writing UI.
Build a website using exactly one style pack from DESIGN.md.
Project:
- Product:
- Audience:
- Page kind:
- Chosen style pack:
- Conversion goal:
- Must include:
- Must avoid:
Before coding, declare:
1. Design read in one sentence
2. Chosen theme and why
3. Radius mode
4. Layout families you will use
5. Any risks that could make the page look generic
Then implement with:
- Semantic CSS variables only
- One accent lock
- One radius lock
- One page theme lock
- At least four layout families for long landing pages
- Real component states for hover, focus, active, disabled
- Responsive desktop, tablet, mobile layouts
After coding, run a design audit:
- Color lock: pass/fail
- Shape lock: pass/fail
- Theme lock: pass/fail
- Hero discipline: pass/fail
- Layout repetition: pass/fail
- Accessibility basics: pass/fail
- Anti-slop ban list: pass/fail
AI Prompt: Redesign Existing Website
Read DESIGN.md before changing UI.
Redesign this existing website without silently changing routes, nav labels, form field names, legal copy, or SEO-critical headings.
Site:
Mode: preserve brand / overhaul / unsure
Audience:
What works today:
What looks broken today:
Chosen style pack:
Step 1: Audit current design tokens, layout patterns, navigation, content hierarchy, conversion path, and obvious slop patterns. Stop after audit.
Step 2: Declare the redesign direction, theme tokens, layout families, and preservation constraints. Stop after declaration.
Step 3: Implement only after the direction is clear.
Final audit:
- Preserved routes
- Preserved nav labels
- Preserved form fields
- Preserved legal copy
- Color consistency
- Shape consistency
- Theme consistency
- Hero discipline
- Layout diversity
- Accessibility
Final Quality Gate
Before shipping any page, answer these honestly:
- Does the page use only one style pack?
- Are all colors mapped to semantic roles?
- Is there exactly one dominant accent?
- Are card, button, input, and modal radii from the same family?
- Does the hero fit the first viewport?
- Is the headline strong without decorative nonsense?
- Are at least four layout families used on long pages?
- Are repeated three-card rows avoided?
- Are fake product screenshots avoided?
- Do hover, focus, disabled, and active states exist?
- Does text contrast pass basic accessibility expectations?
- Would this page still look coherent if two more sections were added later?
If any answer is no, fix the system before polishing details.
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-DESIGN-05d387.md（仅本地保留，不入库不部署）