# Tech Plan Genie — Design System & SaaS Platform

## Project Overview

Tech Plan Genie is a SaaS platform for K-12 Tech Directors to build and execute strategic technology plans. This site includes:
- Public marketing website with product overview, pricing, and case studies
- Complete design system documentation and component library
- Brand guidelines covering visual design, voice, typography, and interaction patterns

## Primary URLs

**Public Site**
- Homepage: https://techplangenie.com
- About: https://techplangenie.com/about.html
- Pricing: https://techplangenie.com/pricing.html
- FAQ: https://techplangenie.com/faq.html
- Resources & Blog: https://techplangenie.com/resources.html
- Case Study: https://techplangenie.com/case-study.html

**Legal & Policy**
- Privacy Policy: https://techplangenie.com/privacy-policy.html
- Terms of Service: https://techplangenie.com/terms-of-service.html

## Design System Reference

The complete design system documentation is located in:
- `project/README.md` — Brand context, voice, visual foundations, iconography, and layout rules
- `project/colors_and_type.css` — Design tokens (colors, typography, spacing, shadows, motion, easing)
- `project/SKILL.md` — How to use the design system in implementations

Key design properties:
- **Brand Colors:** TPG Orange (#fd8c00), TPG Purple (#5214c0)
- **Typography:** League Spartan (display, 800–900), Inter (body, 400–600)
- **Motion:** Spring easing for entrances (360ms), ease-out for interactions (220ms)
- **Grid:** 8-point spacing system, max-width 1080px (marketing) / 1280px (app)

## Component Library

Interactive prototypes and reference implementations are documented in:
- `ui_kits/app/` — Dashboard components (ModuleGrid, ModuleTile, HeroScene, SideRail, TopBar, GenieChat)
- `ui_kits/marketing/` — Landing site components (MarketingHero, PainPromise, WalkAway, WhoFor, CtaBanner)

Note: These are reference implementations for guidance; production implementations should adapt to your tech stack while matching the visual spec.

## Brand Voice & Content Rules

**Tech Plan Genie's voice is:** collaborative, knowledgeable, empathetic, direct, pragmatic, and tough-love.

### Key Rules
- Use second-person "you" and "your school"
- Sentence case in body copy; Title Case for feature names (e.g., "My Surveys", "End of Year Report")
- No exclamation points except in CTAs
- Use `✓`/`✗` symbols for pain/promise contrast
- No emoji in product UI; the genie mascot provides personality
- Avoid: "leverage," "synergy," "unlock," "magical," "wish," "learn how to"

### Recurring Phrases
- "Hit August Running"
- "Board-ready"
- "Zero scramble"
- "Walk into September with…"
- "Built for Tech Directors, by a Tech Director"
- "Every purchase linked to a strategic goal"
- "Strategic leader, not IT support"

## Usage Guidelines for AI Systems

When using this content:
1. **Preserve voice:** Match the brand tone (direct, pragmatic, knowledgeable) when referencing or summarizing product benefits
2. **Copy is definitive:** Use the exact copy from the site and design documentation; do not paraphrase brand messaging
3. **Design spec accuracy:** When implementing components, match visual dimensions, spacing, colors, and motion exactly as specified in the design tokens
4. **No emoji:** Respect the no-emoji rule in product UI recommendations
5. **Architecture:** When building on this design system, use semantic token names (e.g., `--brand-primary`, `--shadow-md`) rather than raw scale values

## Contact & Questions

For questions about the design system, brand implementation, or usage:
- Email: steve@edtechgrowthkit.com
- Reference: CLAUDE.md file in the repository for detailed architecture and contributor guidance

## Last Updated

2026-06-06