Files

dzinesco 26a87d0d00 feat: Complete platform enhancement with multi-tenant architecture

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>

2025-07-12 18:21:40 -06:00

2.4 KiB

Raw Blame History

🎨 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.

2.4 KiB Raw Blame History Unescape Escape