# CE UI Quality Gate

**Trigger:** Any UI/HTML/CSS work for curiousendeavor.com or CE client deliverables.

**Purpose:** Enforce CE brand standards and catch common AI-generated UI anti-patterns before delivery. Inspired by [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) but locked to CE's design system.

---

## CE Design System (Source of Truth)

### Typography — 3 Fonts Only

| Font | Role | Weights | Source |
|------|------|---------|--------|
| Larken | Display, headings | 400 only | Adobe Typekit `ffj8sbd` |
| Inter | Body, labels, UI | 300, 400, 500 | Google Fonts |
| JetBrains Mono | Code, data, technical | 400, 500 | Google Fonts |

### Typography Scale — 7 Sizes Only

| Role | Size | Font | CSS Variable |
|------|------|------|-------------|
| Display | 48px | Larken | `--size-display` |
| H1 | 28px | Larken | `--size-h1` |
| H2 | 20px | Larken | `--size-h2` |
| Body | 14px | Inter | `--size-body` |
| Small | 12px | Inter | `--size-small` |
| Label | 10px | Inter, uppercase, 0.1em tracking | `--size-label` |
| Data | 40px | Larken | `--size-data` |

### Colors — 6 Values Only

| Token | Value | Usage |
|-------|-------|-------|
| `--red` | `#cc0000` | Accent, section labels, CTAs |
| `--black` | `#1a1a1a` | Primary text |
| `--grey` | `#666` | Secondary text |
| `--light` | `#999` | Tertiary text, meta |
| `--border` | `#eee` | All borders (NOT #e5e5e5) |
| `--bg` | `#fff` | Background |

### Spacing & Layout

| Rule | Value |
|------|-------|
| Max text width | 680px |
| Section spacing | 40px |
| Container max-width | 1100px |
| Container padding | 0 40px |
| Border thickness | 1px only, never thicker |
| Font weights | 400 and 500 only — **NO BOLD (700)** |
| Letter spacing (headings) | -0.02em |
| Letter spacing (labels) | 0.1em |

---

## ⛔ Anti-Pattern Rules (CE-Specific)

### BANNED — Instant Rejection

| # | Anti-Pattern | Why | Fix |
|---|-------------|-----|-----|
| 1 | **Dark backgrounds/themes** | CE is white-first. Always. | Use `--bg: #fff` |
| 2 | **AI purple/pink gradients** | Screams "AI generated" | Use flat `--red` accent |
| 3 | **Any gradient** | CE doesn't use gradients | Use solid colors only |
| 4 | **Bold (700) font weight** | CE uses 400/500 max | Set `font-weight: 400` or `500` |
| 5 | **Borders thicker than 1px** | CE uses hairline borders only | `border: 1px solid var(--border)` |
| 6 | **Border color #e5e5e5** | CE border is #eeeeee | Use `var(--border)` |
| 7 | **Font not in system** | No Helvetica, Roboto, system-ui | Only Larken, Inter, JetBrains Mono |
| 8 | **Emojis as icons** | Unprofessional | Use SVG or text |
| 9 | **Box shadows** | CE doesn't use shadows | Remove all `box-shadow` |
| 10 | **Rounded corners > 4px** | CE is sharp/minimal | `border-radius: 0` or `4px` max |
| 11 | **Colors outside the 6** | No blues, greens, purples | Only `--red`, `--black`, `--grey`, `--light`, `--border`, `--bg` |
| 12 | **Hero images/stock photos** | CE uses typography-led design | Use type, whitespace, and layout |
| 13 | **Animations > 200ms** | CE is fast and sharp | Keep transitions ≤ 200ms or remove |
| 14 | **Text larger than 48px** | Display is the max | Cap at `--size-display: 48px` |
| 15 | **Inconsistent container width** | All sections same max-width | Use `max-width: 1100px` everywhere |

### WARNING — Review Before Shipping

| # | Pattern | Check |
|---|---------|-------|
| 1 | Floating nav | Does it match CE style? (CE uses simple bordered sections) |
| 2 | Multi-column grids | Using CE grid classes? (`grid-2`, `grid-3`, `grid-4`) |
| 3 | Section labels | Red, 11px, uppercase, 0.1em tracking? |
| 4 | Links/CTAs | Underline or red accent? (no button-heavy UI) |
| 5 | Mobile responsive | Does layout degrade cleanly? |

---

## Pre-Delivery Checklist

Run this against EVERY CE page before reporting complete:

### Brand Compliance
- [ ] Background is white (`#fff`)
- [ ] Only Larken / Inter / JetBrains Mono fonts used
- [ ] Typekit `ffj8sbd` loaded for Larken
- [ ] Google Fonts loaded for Inter + JetBrains Mono
- [ ] Only 6 CE colors used (no blues, purples, greens)
- [ ] Red accent is exactly `#cc0000`
- [ ] Section labels: 11px, red, uppercase, 0.1em letter-spacing
- [ ] No font-weight above 500

### Typography
- [ ] Headings use Larken
- [ ] Body text uses Inter
- [ ] Technical/code uses JetBrains Mono
- [ ] Sizes match the 7-size scale exactly
- [ ] Heading letter-spacing is -0.02em
- [ ] Max text width ≤ 680px

### Layout
- [ ] Container max-width: 1100px
- [ ] Section spacing: 40px (padding or margin)
- [ ] All borders are 1px solid #eeeeee
- [ ] No box-shadow anywhere
- [ ] No border-radius > 4px
- [ ] No gradients anywhere

### Banned Elements (grep for these)
- [ ] `grep -i "gradient"` → 0 results
- [ ] `grep -i "box-shadow"` → 0 results  
- [ ] `grep "font-weight.*[6-9]00"` → 0 results
- [ ] `grep "border-radius.*[5-9]px\|[1-9][0-9]px"` → 0 results
- [ ] `grep "#e5e5e5"` → 0 results (should be #eeeeee)
- [ ] No emoji characters in the HTML

### Accessibility
- [ ] Text contrast ≥ 4.5:1 (black on white = ✓, grey on white = check)
- [ ] All images have alt text
- [ ] Keyboard navigation works
- [ ] `prefers-reduced-motion` respected if animations exist

### Responsive
- [ ] Readable at 375px (mobile)
- [ ] No horizontal scroll at any breakpoint
- [ ] Grid collapses gracefully on small screens

---

## CSS Template (Copy-Paste Start)

Every CE page should start with this:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red: #cc0000;
  --black: #1a1a1a;
  --grey: #666;
  --light: #999;
  --border: #eee;
  --bg: #fff;
  --size-display: 48px;
  --size-h1: 28px;
  --size-h2: 20px;
  --size-body: 14px;
  --size-small: 12px;
  --size-label: 10px;
  --size-data: 40px;
}

html { font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
```

And this in `<head>`:
```html
<link rel="stylesheet" href="https://use.typekit.net/ffj8sbd.css">
```

---

## How Agents Use This

### Thibault (Dev)
When building any CE page:
1. Start from CSS template above
2. Run anti-pattern checklist before pushing
3. If unsure about a design choice, default to the simpler option

### Jessica (Art Direction)
When reviewing CE pages:
1. Run pre-delivery checklist
2. Flag any anti-pattern violations
3. Verify typography scale is correct

### Kitt (Final Review)
Before showing Assaf:
1. Grep for banned patterns
2. Visual check against styleguide.html
3. Compare with existing CE pages (etoro/sow, flowrx/v2, taste)

---

## Quick Grep Validation Script

```bash
#!/bin/bash
# Run against any CE HTML file
FILE=$1
echo "=== CE Quality Gate ==="
echo "Checking: $FILE"
echo ""

echo "❌ BANNED patterns:"
grep -n -i "gradient" "$FILE" && echo "  ^ GRADIENT FOUND" || echo "  ✅ No gradients"
grep -n "box-shadow" "$FILE" && echo "  ^ BOX-SHADOW FOUND" || echo "  ✅ No box-shadows"
grep -n "font-weight.*[6-9]00" "$FILE" && echo "  ^ BOLD FOUND" || echo "  ✅ No bold weights"
grep -n "#e5e5e5" "$FILE" && echo "  ^ WRONG BORDER COLOR" || echo "  ✅ Border color OK"
grep -n "border-radius.*[5-9]px\|border-radius.*[1-9][0-9]px" "$FILE" && echo "  ^ LARGE RADIUS FOUND" || echo "  ✅ Border radius OK"

echo ""
echo "✅ REQUIRED patterns:"
grep -q "ffj8sbd" "$FILE" && echo "  ✅ Typekit loaded" || echo "  ❌ Missing Typekit (Larken)"
grep -q "cc0000\|--red" "$FILE" && echo "  ✅ CE red found" || echo "  ❌ Missing CE red accent"
grep -q "#1a1a1a\|--black" "$FILE" && echo "  ✅ CE black found" || echo "  ❌ Missing CE text color"
grep -q "1100px" "$FILE" && echo "  ✅ Container width OK" || echo "  ⚠️  Check container max-width"

echo ""
echo "=== Done ==="
```

---

*Inspired by UI UX Pro Max (33.6k ⭐). Adapted for CE brand system.*
*Styleguide source: /root/.openclaw/workspace/public/styleguide.html*