claude-theme/docs/PLAN.md

A warm, professional VS Code theme inspired by Claude's design system

# Claude VS Code Theme Implementation Plan

## Overview
Create a VS Code theme inspired by Claude's design system, featuring both light and dark variants that capture Claude's warm, professional, and approachable aesthetic.

## Claude Design System Analysis

### Colors
- **Primary Color**: Warm rust-orange (#C15F3C "Crail")
- **Supporting Colors**: Off-white and light-grey neutrals
- **Philosophy**: Warm, professional colors that evoke calmness and intellectual depth

### Typography
- **Primary Fonts**: Custom serif fonts with fallbacks
- **Font Stack**: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
- **Brand Fonts**: Styrene family + Tiempos family (Commercial Type/Klim)
- **Character**: Clean, readable, with subtle personality

### Design Philosophy
- **Core Values**: Warmth, professionalism, empathy, approachability
- **Visual Style**: Soft rounded edges, subtle colors, human-centric design
- **Academic Foundation**: Named after Claude Shannon, hints at technical depth

## Implementation Strategy

### 1. Project Structure Setup
```
vscode-claude-theme/
├── package.json
├── README.md
├── CHANGELOG.md
├── icon.png
├── themes/
│   ├── claude-light-color-theme.json
│   └── claude-dark-color-theme.json
├── PLAN.md
└── TODO.md
```

### 2. Theme Configuration
- Configure package.json with proper VS Code extension metadata
- Set up theme contributions for both variants
- Include font recommendations
- Add proper categorization and keywords

### 3. Color Palette Development
- **Light Theme**: Warm rust-orange accents, cream/off-white backgrounds, soft greys
- **Dark Theme**: Maintain warm accents, use appropriate dark backgrounds with good contrast
- **Syntax Colors**: Professional palette that maintains readability and Claude's warmth

### 4. Font Integration
- Recommend serif font stack in theme settings
- Provide font weight and styling guidelines
- Include optional font family suggestions for users

### 5. Testing & Validation
- Test syntax highlighting across multiple programming languages
- Verify UI theming consistency
- Ensure accessibility compliance (contrast ratios)
- Test on both light and dark system preferences

## Success Criteria
- [ ] Both themes properly themed with Claude's aesthetic
- [ ] Excellent readability for code editing
- [ ] Consistent UI theming throughout VS Code
- [ ] Proper font recommendations implemented
- [ ] Themes install and activate correctly
- [ ] Professional appearance matching Claude's brand values

## Future Enhancements
- Icon theme to complement color themes
- Additional theme variants (high contrast, etc.)
- Community feedback integration
- Marketplace publication