Vibe Coding Project 6: Full Site CSS Starter Kit

A complete, production-ready CSS starter kit you can drop into any new WordPress project. Prompts + code included.

🎯 What You Get

One master CSS system that covers:

• Design tokens :root.
• CSS Reset.
• Base typography.
• Layout utilities.
• Core component library (nav, buttons, cards, forms, footer).
• Dark/light mode support.
• All ready for GP, Bricks, or any WordPress theme.

Phase 1: Generate the Full System with AI

Generate a complete production CSS starter kit for WordPress web design.
Requirements:
1. :root design tokens block with:
   - Colors (bg, surface, text, muted, primary, secondary, accent)
   - Typography (font-heading, font-body, type scale xs through hero)
   - Spacing scale (space-1 through space-24 in rem)
   - Border radius (sm, md, lg, full)
   - Shadows (sm, md, lg)
   - Transitions (fast, normal)
2. CSS Reset (box-sizing, margin/padding, img, links)
3. Base styles (body, headings h1-h6, p, a, lists, code)
4. Layout utilities (.container, .section, .grid-auto, .flex-center, .stack)
5. Navigation: sticky glassmorphism header
6. Buttons: primary, secondary, ghost, sm, lg variants
7. Cards: standard, hover-lift, feature icon card
8. Forms: inputs, textarea, select, labels, focus states
9. Footer: 4-column grid, collapses on mobile
10. Dark mode: [data-theme="dark"] overrides
11. Responsive: mobile-first, breakpoints sm/md/lg/xl
Output: clean, commented CSS file with section headers.

Phase 2: The Starter Kit Output Structure

Once generated, organize into sections:

/* ===========================================
   1. DESIGN TOKENS
   =========================================== */

/* ===========================================
   2. RESET
   =========================================== */

/* ===========================================
   3. BASE TYPOGRAPHY
   =========================================== */

/* ===========================================
   4. LAYOUT UTILITIES
   =========================================== */

/* ===========================================
   5. NAVIGATION
   =========================================== */

/* ===========================================
   6. BUTTONS
   =========================================== */

/* ===========================================
   7. CARDS
   =========================================== */

/* ===========================================
   8. FORMS
   =========================================== */

/* ===========================================
   9. FOOTER
   =========================================== */

/* ===========================================
   10. DARK MODE
   =========================================== */

/* ===========================================
   11. RESPONSIVE OVERRIDES
   =========================================== */

Phase 3: WordPress Deployment

Option A — GeneratePress Child Theme

1. Create child theme.
2. Paste the full CSS into style.css (after the required header comment).
3. Add Google Fonts link in functions.php.

Option B — Bricks Builder

1. Go to Bricks → Settings → Custom Code → Custom CSS.
2. Paste the full CSS system.
3. Use global classes for components.

Option C — Customizer Additional CSS (Small Sites)

Suitable for small sites. Paste all CSS in Customizer → Additional CSS. Note: there's a character limit (~60KB) — use child theme for larger systems.

Phase 4: Customizing the Starter Kit

Brand Color Swap (One Line)

:root { --color-primary: #f5a623; } /* done — everything updates */

Font Swap

:root {
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Open Sans', system-ui, sans-serif;
}

Then update your functions.php Google Fonts link.

Adding a Page-Specific Style

/* Target specific WP pages by body class */
.page-template-about .hero { --hero-bg: url('/wp-content/uploads/about-bg.jpg'); }
.single-post .entry-content { max-width: 720px; margin: 0 auto; }

Phase 5: Maintaining the System

Task	Action
New color needed	Add to :root tokens, never hardcode
New component	Add as a new section with BEM naming
Theme update (GP)	Only child theme files are affected — safe
New project	Copy the starter kit, swap tokens, done

[!TIP] Version-control your starter kit with Git. Each project gets a branch, and improvements flow back to main over time.