dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9ac09582d214f3c2e79315c4b9ef798080b624c7
WooNooW/TYPOGRAPHY-PLAN.md
Dwindi Ramadhana 9ac09582d2 feat: implement header/footer visibility controls for checkout and thankyou pages 
- 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
2025-12-25 22:20:48 +07:00

2.5 KiB
Raw Blame History

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

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