Certificate Template Designer - HTML/CSS Templates for PDF Generation PROJECT OVERVIEW Client: MatMgr - Martial Arts Academy Management Platform Project: Certificate Template System Purpose: Generate professional PDF certificates for martial arts students We need a designer to create HTML/CSS certificate templates that will be rendered to PDF. These templates will have dynamic content (student names, dates, ranks, etc.) inserted by our system. The templates must be print-ready at 8.5" x 11" (Letter size) and look professional when printed or viewed digitally. CERTIFICATE TYPES NEEDED We need templates for 5 certificate types. Each type should have 2-3 style variations (e.g., traditional/formal, modern/clean, elegant/ornate). 1. Color Belt Promotion Certificate Purpose: Awarded when a student advances to a new colored belt rank Tone: Celebratory, achievement-focused Key Elements: - Student name (prominent) - New rank achieved (e.g., "Blue Belt Level 2") - Promotion date - Academy name - Instructor signature area - Optional: Academy logo placement 2. Black Belt Induction Certificate Purpose: Special recognition for achieving black belt status Tone: Prestigious, formal, momentous Key Elements: - Student name (very prominent) - Black belt degree (e.g., "1st Degree Black Belt", "3rd Dan") - Induction date - Academy name - Instructor signature area - Space for inspirational text/quote - Should feel more "elite" than color belt certificates - Optional: Academy logo placement 3. Attendance Award Certificate Purpose: Recognizes top attendance during a training cycle Tone: Achievement, dedication, commitment Key Elements: - Student name - Student's current rank - Placement (1st Place, 2nd Place, 3rd Place, or Top 10) - Training cycle name (e.g., "Winter 2026") - Cycle dates (e.g., "October 14, 2025 - January 10, 2026") - Number of classes attended (e.g., "47 Classes") - Academy name - Visual distinction between 1st/2nd/3rd place (ribbons, badges, colors) - Optional: Academy logo placement 4. Instructor Attendance Award Certificate Purpose: Same as above but for instructor staff Tone: Professional, leadership recognition Key Elements: Same as Attendance Award, but: - Styled for adults/professionals - Emphasizes leadership and dedication - May include title (e.g., "Senior Instructor") 5. Achievement Certificate Purpose: General-purpose award for special accomplishments Tone: Flexible - can be used for various achievements Key Elements: - Student name - Achievement title (e.g., "Outstanding Leadership Award", "Tournament Champion") - Date - Academy name - Description area (optional, 1-2 sentences) - Instructor signature area - Optional: Academy logo placement TECHNICAL REQUIREMENTS Document Specifications: - Page Size: 8.5" x 11" (US Letter) - Orientation: Portrait (primary), Landscape versions are a bonus - Bleed: None required (will be printed on standard paper) - Safe Margin: Keep important content at least 0.5" from edges - Output Format: HTML + CSS files HTML/CSS Requirements: - Single HTML file per template (CSS can be inline or in <style> tags) - Use web-safe fonts OR Google Fonts (we'll provide font loading) - All positioning should use CSS (absolute positioning is fine) - Use inches (in) or points (pt) for measurements - these translate directly to print - No JavaScript required - No external images - SVG graphics should be inline - Colors as hex codes (#8B1538) or RGB Page Setup CSS - Each template should start with: @page { size: 8.5in 11in; margin: 0; } body { width: 8.5in; height: 11in; margin: 0; padding: 0; position: relative; } DYNAMIC CONTENT PLACEHOLDERS Use these exact placeholder tokens in your HTML. Our system will replace them with real data: {{student_name}} - "James Pearson" (varies in length) {{rank_name}} - "Blue Belt Level 2" or "3rd Degree Black Belt" {{academy_name}} - "Tiger Rock Martial Arts of Columbia" {{promotion_date}} - "January 10, 2026" {{signer_name}} - "Michael Martin" (instructor name) {{signer_title}} - "Head Instructor" or "Master Instructor" {{verification_code}} - "ABCD-EFGH-JKLM" (small, usually in corner) Attendance certificates only: {{placement}} - "1st Place" or "Top 10" {{cycle_name}} - "Winter 2026" {{cycle_dates}} - "Oct 14, 2025 - Jan 10, 2026" {{attendance_count}} - "47" (number of classes) Achievement certificates only: {{achievement_title}} - "Outstanding Leadership Award" {{date_display}} - "January 10, 2026" LOGO PLACEHOLDER Include a designated area for academy logos: <div class="logo-area"> {{academy_logo}} </div> - Recommended size: 1.5" - 2" wide - Position: typically top-center or top-left - We will handle logo insertion; just leave a clearly marked space VERIFICATION CODE AREA Each certificate needs a small verification area (bottom corner): <div class="verification"> <div class="qr-code">{{qr_code}}</div> <div class="code">Verify: {{verification_code}}</div> </div> - QR code will be ~0.5" x 0.5" - Verification code in small text (7-8pt) - Should be subtle, not prominent DESIGN GUIDELINES Typography Recommendations: - Student Name: Script or elegant serif font (Great Vibes, Cormorant Garamond, Playfair Display) - Headings: Strong serif or sans-serif (Cinzel, Montserrat, Roboto) - Body Text: Clean, readable (Roboto, Open Sans, Lato) - Keep fonts to 2-3 per template maximum Color Considerations: - Traditional Style: Deep reds (#8B1538), navy (#1a237e), gold accents (#D4AF37), black - Modern Style: Clean blacks, grays, single accent color - Elegant Style: Cream backgrounds, burgundy, gold, classic colors Each template should work with ONE primary color scheme. We may request color variants later. Visual Elements to Consider: - Decorative borders (single line, double line, ornate) - Corner flourishes or decorations - Subtle background patterns or watermarks - Ribbons or badge graphics for placement awards - Signature lines with labels - Decorative dividers between sections What to Avoid: - Clipart or cheesy graphics - Too many fonts or colors - Crowded layouts - white space is good - Elements too close to page edges - Overly complex decorations that distract from content SAMPLE DATA FOR TESTING Use this sample data when designing: Color Belt Certificate: Student: Alexandra Montgomery-Richardson (long name test) Rank: Purple Belt Level 3 Date: January 10, 2026 Academy: Tiger Rock Martial Arts of Columbia Instructor: Michael Martin, Head Instructor Black Belt Certificate: Student: James Lee Rank: 2nd Degree Black Belt Date: January 10, 2026 Academy: Tiger Rock Martial Arts Instructor: Grand Master Richard Kim, 7th Degree Attendance Certificate: Student: Sarah Chen Rank: Brown Belt Level 2 Placement: 1st Place Cycle: Winter 2026 Dates: Oct 14, 2025 - Jan 10, 2026 Classes: 47 Academy: Tiger Rock Martial Arts of Columbia DELIVERABLES Per Template, Please Provide: - HTML file - Complete, standalone HTML document - Preview image - PNG or JPG screenshot at 100% scale - Font list - Which Google Fonts or web fonts are required File Naming Convention: color_belt_traditional.html color_belt_modern.html black_belt_formal.html black_belt_elegant.html attendance_standard.html attendance_elite.html (etc.) Total Deliverables Expected: - 5 certificate types x 2-3 variations each = 10-15 templates - Each template in portrait orientation - Landscape versions are a bonus (nice to have, not required) See attached sample certificates for reference.