dzinesco
26a87d0d00
Major additions: - Territory manager system with application workflow - Custom pricing and page builder with Craft.js - Enhanced Stripe Connect onboarding - CodeReadr QR scanning integration - Kiosk mode for venue sales - Super admin dashboard and analytics - MCP integration for AI-powered operations Infrastructure improvements: - Centralized API client and routing system - Enhanced authentication with organization context - Comprehensive theme management system - Advanced event management with custom tabs - Performance monitoring and accessibility features Database schema updates: - Territory management tables - Custom pages and pricing structures - Kiosk PIN system - Enhanced organization profiles - CodeReadr integration tables 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
94 lines
2.4 KiB
Markdown
94 lines
2.4 KiB
Markdown
# 🎨 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.
|