---
name: webkreator-design-system
description: Generate and validate reusable WebKreator design systems for WordPress sites and landing pages from brand files, copy docs, screenshots, PDFs, or client folders. Use when Codex needs to define or apply colors, typography, spacing, contrast rules, headers, footers, blog styling, component tokens, or visual QA before building with WebKreator, GeneratePress, WordPress, Landing Krafter, Kopy Krafter, or AGENC-IA page copy.
---

# WebKreator Design System

## Overview

Use this skill before building or redesigning a WebKreator page/site when the visual rules are not already complete and validated. The output is a practical design system artifact that gives Codex enough structure to design freely without producing unreadable colors, oversized type, weak spacing, or generic layouts.

This skill does not write the final WordPress page by itself. It creates the design contract that a WebKreator builder skill or WordPress plugin/theme can apply.

## When To Use

Use this skill when the user provides any of these:

- A design system PDF, brand guide, logo, screenshots, or visual references.
- Landing Krafter, Kopy Krafter, Marketing Intelligence, Oferta Irresistible, or other upstream copy.
- A client folder with images and copy and asks Codex to design a page/site.
- Feedback such as "the H1 is too large", "blue text on blue background", "the palette is not intuitive", "make it look premium", or "use the design system".
- A request to configure WebKreator global colors, fonts, header/footer variants, blog list, or single-post design.

## Required Outputs

Produce two artifacts unless the user asks for a quick diagnosis only:

- `design-system.webkreator.md`: human-readable design direction, tokens, rules, component notes, and QA checklist.
- `webkreator-design-system.json`: machine-readable tokens and settings that can be mapped into WebKreator, WordPress, or a builder script.

Optionally produce `visual-qa.md` when auditing an existing page or screenshot.

## Workflow

1. Read the source material: copy, brand docs, screenshots, image URLs, existing page HTML/CSS, and current WordPress/WebKreator settings when available.
2. Define the visual direction: industry, audience, emotional tone, design keywords, one memorable visual idea, and what the site must never feel like.
3. Create color tokens:
   - Raw brand palette.
   - Semantic colors for backgrounds, headings, body text, CTAs, links, borders, cards, dark sections, alerts, and hover states.
   - A contrast matrix for every important text/background and button/background pair.
4. Create typography tokens:
   - Heading font, body font, accent font if useful.
   - Type scale for hero H1, section H2, compact H3, body, small text, nav, buttons, and labels.
   - Mobile overrides for 375-390px screens.
5. Create spacing and layout tokens:
   - Container width, section padding, grid gaps, card padding, media radius, stack spacing, and sticky header offset.
6. Create component rules:
   - Buttons, cards, badges, forms, media frames, icon rows, testimonial blocks, FAQ, header, footer, blog archive, and post detail.
   - Motion rules: parallax backgrounds, scroll reveals, hover movement, reduced-motion fallback, and when motion should be avoided.
7. Validate visually before page build:
   - Load `references/contrast-rules.md`.
   - Load `references/visual-qa-checklist.md`.
   - If creating JSON, follow `references/design-system-schema.md`.
8. Map tokens to WebKreator when relevant:
   - `--wk-color-1` to `--wk-color-12` for the global palette.
   - Semantic variables such as `--wk-primary`, `--wk-accent`, `--wk-bg`, `--wk-surface`, `--wk-heading`, and `--wk-text`.
   - Header/footer layout settings when the WebKreator plugin is active.

## Design Rules

- Do not build final page code until the design system has safe text/background pairs, unless the user explicitly asks to skip.
- Never use the same hue family for both background and text unless contrast is proven strong.
- Dark sections need explicit light heading and body colors.
- Blue CTAs usually need white text. Lime or yellow CTAs usually need dark text.
- H1 can be large only in true hero sections. Section headings must be tighter and easier to scan.
- If a provided design system lacks typography, spacing, contrast, or responsive rules, infer them and label them as proposed.
- Treat screenshots as inspiration, not as something to copy pixel-for-pixel.
- Prefer clear visual rhythm over repeating the same split section many times.
- Keep WebKreator outputs compatible with WordPress rendering: avoid relying on raw `<style>` blocks that WordPress may wrap incorrectly unless using a Custom HTML block or theme/plugin CSS.
- Use parallax backgrounds when they strengthen the page rhythm, especially in solid-color sections with text. In those cases, the solid brand color should become an overlay over the image/video/texture so readability remains controlled.
- Add scroll-triggered animations when they support hierarchy and polish: subtle fade, rise, reveal, count-up, image drift, or parallax movement. Keep them restrained, fast, and optional.
- Always include a `prefers-reduced-motion` fallback that disables parallax and scroll animation for users who request reduced motion.
- Do not animate long body text, legal disclaimers, dense FAQ answers, or anything that must be read without distraction.

## Handoff Format

When done, summarize:

- Design direction.
- Palette and semantic mapping.
- Typography and spacing decisions.
- Header, footer, blog, and component direction.
- QA risks or open decisions.
- Where the artifacts were saved.

If applying to a live WordPress site, verify the frontend after publishing and check at least desktop plus mobile width.
