# 🎨 CrispyGoat Design System – UI Style Guide

This guide defines the visual identity for all CrispyGoat properties. It ensures design consistency, professionalism, and that unmistakable “CrispyGoat feel.”

---

## 🧱 Layout & Spacing

- Use an **8pt spacing scale**: `8, 16, 24, 32, 48, 64, 96`
- All sections must use consistent vertical spacing
- **Content containers**:
  - Max width: `1440px`
  - Horizontal padding: `32px`
  - Center-aligned on wide screens
- **Cards / Panels**:
  - Internal padding: `24px` minimum
  - Internal spacing (gap): `16px`
  - Vertical spacing between cards: `32px`

---

## 🖋 Typography

- **Font Family**: `Inter`, fallback `sans-serif`
- **Base Font Size**: `16px`, `line-height: 1.5`
- **Font Scale**:
  - `h1`: `48px`
  - `h2`: `36px`
  - `h3`: `28px`
  - `h4`: `22px`
- **Margins**:
  - Headings must have `margin-bottom: 16px`
  - Paragraphs use `margin-bottom: 16px`

---

## 🎛 Buttons & Inputs

- **Buttons**:
  - Min height: `48px`
  - Border-radius: `12px`
  - Font: `Inter`, semi-bold
  - Padding: `0 24px`
  - Use high-contrast states (hover, focus, disabled)
- **Inputs**:
  - All form elements must have associated `<label>`
  - Padding: `12px 16px`
  - Border-radius: `8px`
  - Border: `1px solid #CCC`
  - On focus: use visible outline (`2px solid` or shadow)

---

## 🌘 Light & Dark Modes

- **Dark mode is primary**: It reflects our hand-crafted identity.
- **Light mode** must feel white-label — neutral, polished, elegant.
- **Do not invert** components — manually design both modes.
- Backgrounds:
  - Dark: `#111` to `#1A1A1A`
  - Light: `#FFFFFF`, sections use `#F7F7F7`
- Text contrast: Use WCAG-compliant ratios at all times.

---

## 🖼 Imagery & Visual Elements

- **Use full-bleed images** on hero and feature sections
- **Icons** must be vector-based (SVG preferred)
- Images must have rounded corners: `16px`
- Avoid drop shadows unless intentional and consistent

---

## ⚠️ Do Not

- Do not use unstyled system fonts
- Do not break the spacing scale
- Do not mix inconsistent border radii
- Do not rely on default button/input styles
- Do not allow console logs in production

---

## ✅ Summary

CrispyGoat designs should feel:
- Considered
- Balanced
- High-end (like a modern mountain interior designer)
- Strict in rules, generous in feel

Use this guide for all visual QA, prompt-based evaluations, and auto-theming pipelines.