9ac09582d2
- Created LayoutWrapper component to conditionally render header/footer based on route - Created MinimalHeader component (logo only) - Created MinimalFooter component (trust badges + policy links) - Created usePageVisibility hook to get visibility settings per page - Wrapped ClassicLayout with LayoutWrapper for conditional rendering - Header/footer visibility now controlled directly in React SPA - Settings: show/minimal/hide for both header and footer - Background color support for checkout and thankyou pages
102 lines
2.5 KiB
Markdown
102 lines
2.5 KiB
Markdown
# WooNooW Typography System
|
|
|
|
## Font Pairings
|
|
|
|
### 1. Modern & Clean
|
|
- **Heading**: Inter (Sans-serif)
|
|
- **Body**: Inter
|
|
- **Use Case**: Tech, SaaS, Modern brands
|
|
|
|
### 2. Editorial & Professional
|
|
- **Heading**: Playfair Display (Serif)
|
|
- **Body**: Source Sans Pro
|
|
- **Use Case**: Publishing, Professional services, Luxury
|
|
|
|
### 3. Friendly & Approachable
|
|
- **Heading**: Poppins (Rounded Sans)
|
|
- **Body**: Open Sans
|
|
- **Use Case**: Lifestyle, Health, Education
|
|
|
|
### 4. Elegant & Luxury
|
|
- **Heading**: Cormorant Garamond (Serif)
|
|
- **Body**: Lato
|
|
- **Use Case**: Fashion, Beauty, Premium products
|
|
|
|
## Font Sizes (Responsive)
|
|
|
|
### Desktop (1024px+)
|
|
- **H1**: 48px / 3rem
|
|
- **H2**: 36px / 2.25rem
|
|
- **H3**: 28px / 1.75rem
|
|
- **H4**: 24px / 1.5rem
|
|
- **Body**: 16px / 1rem
|
|
- **Small**: 14px / 0.875rem
|
|
|
|
### Tablet (768px - 1023px)
|
|
- **H1**: 40px / 2.5rem
|
|
- **H2**: 32px / 2rem
|
|
- **H3**: 24px / 1.5rem
|
|
- **H4**: 20px / 1.25rem
|
|
- **Body**: 16px / 1rem
|
|
- **Small**: 14px / 0.875rem
|
|
|
|
### Mobile (< 768px)
|
|
- **H1**: 32px / 2rem
|
|
- **H2**: 28px / 1.75rem
|
|
- **H3**: 20px / 1.25rem
|
|
- **H4**: 18px / 1.125rem
|
|
- **Body**: 16px / 1rem
|
|
- **Small**: 14px / 0.875rem
|
|
|
|
## Settings Structure
|
|
|
|
```typescript
|
|
interface TypographySettings {
|
|
// Predefined pairing
|
|
pairing: 'modern' | 'editorial' | 'friendly' | 'elegant' | 'custom';
|
|
|
|
// Custom fonts (when pairing = 'custom')
|
|
custom: {
|
|
heading: {
|
|
family: string;
|
|
weight: number;
|
|
};
|
|
body: {
|
|
family: string;
|
|
weight: number;
|
|
};
|
|
};
|
|
|
|
// Size scale multiplier (0.8 - 1.2)
|
|
scale: number;
|
|
}
|
|
```
|
|
|
|
## Download Fonts
|
|
|
|
Visit these URLs to download WOFF2 files:
|
|
|
|
1. **Inter**: https://fonts.google.com/specimen/Inter
|
|
2. **Playfair Display**: https://fonts.google.com/specimen/Playfair+Display
|
|
3. **Source Sans Pro**: https://fonts.google.com/specimen/Source+Sans+Pro
|
|
4. **Poppins**: https://fonts.google.com/specimen/Poppins
|
|
5. **Open Sans**: https://fonts.google.com/specimen/Open+Sans
|
|
6. **Cormorant Garamond**: https://fonts.google.com/specimen/Cormorant+Garamond
|
|
7. **Lato**: https://fonts.google.com/specimen/Lato
|
|
|
|
**Download Instructions:**
|
|
1. Click "Download family"
|
|
2. Extract ZIP
|
|
3. Convert TTF to WOFF2 using: https://cloudconvert.com/ttf-to-woff2
|
|
4. Place in `/customer-spa/public/fonts/[font-name]/`
|
|
|
|
## Implementation Steps
|
|
|
|
1. ✅ Create font folder structure
|
|
2. ✅ Download & convert fonts to WOFF2
|
|
3. ✅ Create CSS @font-face declarations
|
|
4. ✅ Add typography settings to Admin SPA
|
|
5. ✅ Create Tailwind typography plugin
|
|
6. ✅ Update Customer SPA to use dynamic fonts
|
|
7. ✅ Test responsive scaling
|