/* ========================================================================== THE REAL COST CALCULATOR — Design System File: trcc-design-system.css Hosted at: https://therealcostcalculator.com/wp-content/uploads/calculators-data/trcc-design-system.css HOW TO USE ---------- 1. Add this link tag inside every calculator's HTML, before any calculator CSS: 2. In your calculator CSS, reference tokens using var(): background: var(--trcc-color-primary); font-size: var(--trcc-text-base); 3. Never hardcode a color, font size, or spacing value in a calculator file. Always use a token. If a token doesn't exist for what you need, add it here first. 4. All token names are prefixed with --trcc- to avoid collisions with WordPress theme variables or any other CSS on the page. VERSIONING ---------- When tokens change, increment the version comment below and note what changed. Calculators that need the old values can pin to a versioned copy of this file. Version: 1.0 Updated: June 2026 ========================================================================== */ /* ========================================================================== 1. COLOR — PRIMARY PALETTE The primary color is a confident financial green. It reads as trustworthy and positive without being aggressive. The scale runs from very light tints (for backgrounds and hover states) to deep shades (for text on light backgrounds). ========================================================================== */ :root { /* Primary green — main brand color Used for: primary buttons, active tab indicators, links, focus rings */ --trcc-color-primary: #1A7A4A; /* Base — main action color */ --trcc-color-primary-hover: #155E39; /* Darker — button hover state */ --trcc-color-primary-active: #0F4529; /* Darkest — button pressed state */ --trcc-color-primary-light: #E8F5EE; /* Very light tint — hover backgrounds, highlights */ --trcc-color-primary-subtle: #C8E6D5; /* Light tint — selected states, badges */ --trcc-color-primary-text: #0D3D24; /* Dark shade — green text on light backgrounds */ /* ========================================================================== 2. COLOR — NEUTRAL PALETTE Used for all text, borders, backgrounds, and surfaces. A warm-leaning neutral keeps the calculator feeling approachable rather than cold. ========================================================================== */ --trcc-color-white: #FFFFFF; --trcc-color-gray-50: #F9FAFB; /* Page background, zebra row tints */ --trcc-color-gray-100: #F3F4F6; /* Input backgrounds, disabled states */ --trcc-color-gray-200: #E5E7EB; /* Borders, dividers */ --trcc-color-gray-300: #D1D5DB; /* Placeholder text borders */ --trcc-color-gray-400: #9CA3AF; /* Placeholder text, disabled text */ --trcc-color-gray-500: #6B7280; /* Secondary text, captions, labels */ --trcc-color-gray-600: #4B5563; /* Body text */ --trcc-color-gray-700: #374151; /* Strong body text */ --trcc-color-gray-800: #1F2937; /* Headings */ --trcc-color-gray-900: #111827; /* Maximum contrast text */ /* ========================================================================== 3. COLOR — SEMANTIC PALETTE Communicates meaning: errors, warnings, success, and neutral info. Do not use these for decorative purposes — only for their intended meaning. ========================================================================== */ /* Error — invalid inputs, failed data fetch */ --trcc-color-error: #DC2626; --trcc-color-error-light: #FEF2F2; --trcc-color-error-border: #FECACA; --trcc-color-error-text: #991B1B; /* Warning — outdated formula version banner */ --trcc-color-warning: #D97706; --trcc-color-warning-light: #FFFBEB; --trcc-color-warning-border: #FDE68A; --trcc-color-warning-text: #92400E; /* Success — successful copy, successful share */ --trcc-color-success: #16A34A; --trcc-color-success-light: #F0FDF4; --trcc-color-success-border: #BBF7D0; --trcc-color-success-text: #14532D; /* Info — data loading, neutral notices */ --trcc-color-info: #2563EB; --trcc-color-info-light: #EFF6FF; --trcc-color-info-border: #BFDBFE; --trcc-color-info-text: #1E3A8A; /* ========================================================================== 4. COLOR — SOCIAL SHARE BUTTONS Each platform has an official brand color. These are used exclusively for share buttons and must not be used for any other purpose. Share buttons span the full width of the calculator on all screen sizes. ========================================================================== */ --trcc-color-facebook: #1877F2; --trcc-color-facebook-hover: #0C63D4; --trcc-color-x: #000000; /* X (formerly Twitter) */ --trcc-color-x-hover: #1A1A1A; --trcc-color-whatsapp: #25D366; --trcc-color-whatsapp-hover: #1DA851; --trcc-color-linkedin: #0A66C2; --trcc-color-linkedin-hover: #084E96; /* Share button text is always white regardless of platform */ --trcc-color-share-text: #FFFFFF; /* ========================================================================== 5. TYPOGRAPHY — FONT FAMILY Inter is chosen for its exceptional readability at small sizes, clean number rendering (critical for financial calculators), and minimal feel. The system font stack is the fallback if Inter fails to load. ========================================================================== */ --trcc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Monospace — used for citation text boxes and embed code snippets */ --trcc-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* ========================================================================== 6. TYPOGRAPHY — SIZE SCALE Based on a 16px root with a modular scale. All values are in rem so they respect the user's browser font size preferences (accessibility requirement). ========================================================================== */ --trcc-text-xs: 0.75rem; /* 12px — fine print, timestamps, legal notes */ --trcc-text-sm: 0.875rem; /* 14px — labels, captions, helper text */ --trcc-text-base: 1rem; /* 16px — body text, input values */ --trcc-text-md: 1.125rem; /* 18px — emphasized body, secondary headings */ --trcc-text-lg: 1.25rem; /* 20px — result values, section headings */ --trcc-text-xl: 1.5rem; /* 24px — primary results, large numbers */ --trcc-text-2xl: 1.875rem; /* 30px — calculator title */ --trcc-text-3xl: 2.25rem; /* 36px — hero result (e.g. total cost) */ /* ========================================================================== 7. TYPOGRAPHY — WEIGHT AND LINE HEIGHT ========================================================================== */ --trcc-font-normal: 400; --trcc-font-medium: 500; --trcc-font-semibold: 600; --trcc-font-bold: 700; /* Line heights — tighter for headings and numbers, looser for body text */ --trcc-leading-tight: 1.2; /* Headings, large numbers */ --trcc-leading-snug: 1.35; /* Subheadings, labels */ --trcc-leading-normal: 1.5; /* Body text, descriptions */ --trcc-leading-loose: 1.7; /* Long explanatory text */ /* ========================================================================== 8. SPACING SCALE A consistent 4px base unit. All padding, margin, and gap values must come from this scale. This keeps vertical rhythm consistent across all calculators. ========================================================================== */ --trcc-space-1: 0.25rem; /* 4px */ --trcc-space-2: 0.5rem; /* 8px */ --trcc-space-3: 0.75rem; /* 12px */ --trcc-space-4: 1rem; /* 16px */ --trcc-space-5: 1.25rem; /* 20px */ --trcc-space-6: 1.5rem; /* 24px */ --trcc-space-8: 2rem; /* 32px */ --trcc-space-10: 2.5rem; /* 40px */ --trcc-space-12: 3rem; /* 48px */ --trcc-space-16: 4rem; /* 64px */ /* ========================================================================== 9. BORDER RADIUS Slightly rounded — professional and balanced. Applied consistently so all interactive elements feel like they belong to the same system. ========================================================================== */ --trcc-radius-sm: 4px; /* Badges, tags, small chips */ --trcc-radius-md: 6px; /* Inputs, selects, textareas */ --trcc-radius-lg: 8px; /* Buttons, cards, panels */ --trcc-radius-xl: 12px; /* Modal dialogs, large containers */ --trcc-radius-full: 9999px; /* Pills, icon-only buttons */ /* ========================================================================== 10. SHADOWS Minimal and subtle — consistent with the clean and minimal style direction. Used to lift interactive elements without overwhelming the white space. ========================================================================== */ --trcc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --trcc-shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.08); --trcc-shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.10); --trcc-shadow-xl: 0 8px 32px 0 rgba(0, 0, 0, 0.12); /* Focus ring — applied to all interactive elements for keyboard accessibility */ --trcc-shadow-focus: 0 0 0 3px rgba(26, 122, 74, 0.25); /* ========================================================================== 11. BORDERS ========================================================================== */ --trcc-border-width: 1px; --trcc-border-color: var(--trcc-color-gray-200); --trcc-border-default: 1px solid var(--trcc-color-gray-200); --trcc-border-strong: 1px solid var(--trcc-color-gray-300); --trcc-border-focus: 1px solid var(--trcc-color-primary); --trcc-border-error: 1px solid var(--trcc-color-error); /* ========================================================================== 12. LAYOUT — CALCULATOR CONTAINER All calculators use the same max-width and padding. This keeps them consistent when embedded on external sites via iframe. ========================================================================== */ --trcc-calc-max-width: 780px; /* Maximum calculator width */ --trcc-calc-padding-x: var(--trcc-space-6); /* Horizontal padding */ --trcc-calc-padding-y: var(--trcc-space-8); /* Vertical padding */ --trcc-calc-bg: var(--trcc-color-white); --trcc-calc-border: var(--trcc-border-default); --trcc-calc-radius: var(--trcc-radius-xl); --trcc-calc-shadow: var(--trcc-shadow-lg); /* Section gap — vertical space between major sections inside the calculator */ --trcc-section-gap: var(--trcc-space-8); /* Input grid — two columns on desktop, one column on mobile */ --trcc-input-grid-cols: 2; --trcc-input-grid-gap: var(--trcc-space-4); /* ========================================================================== 13. INPUTS All text inputs, number inputs, selects, and textareas share these tokens. ========================================================================== */ --trcc-input-height: 44px; /* Minimum 44px for touch targets (WCAG) */ --trcc-input-padding-x: var(--trcc-space-3); --trcc-input-padding-y: var(--trcc-space-2); --trcc-input-font-size: var(--trcc-text-base); --trcc-input-font-weight: var(--trcc-font-normal); --trcc-input-color: var(--trcc-color-gray-800); --trcc-input-bg: var(--trcc-color-white); --trcc-input-border: var(--trcc-border-default); --trcc-input-radius: var(--trcc-radius-md); --trcc-input-shadow: var(--trcc-shadow-sm); --trcc-input-placeholder: var(--trcc-color-gray-400); /* Input states */ --trcc-input-focus-border: var(--trcc-border-focus); --trcc-input-focus-shadow: var(--trcc-shadow-focus); --trcc-input-error-border: var(--trcc-border-error); --trcc-input-error-bg: var(--trcc-color-error-light); --trcc-input-disabled-bg: var(--trcc-color-gray-100); --trcc-input-disabled-color:var(--trcc-color-gray-400); /* Labels — sit above each input */ --trcc-label-font-size: var(--trcc-text-sm); --trcc-label-font-weight: var(--trcc-font-medium); --trcc-label-color: var(--trcc-color-gray-700); --trcc-label-gap: var(--trcc-space-1); /* Space between label and input */ /* Helper text — sits below each input */ --trcc-helper-font-size: var(--trcc-text-xs); --trcc-helper-color: var(--trcc-color-gray-500); --trcc-helper-gap: var(--trcc-space-1); /* Error message — sits below each invalid input */ --trcc-error-font-size: var(--trcc-text-xs); --trcc-error-color: var(--trcc-color-error-text); --trcc-error-gap: var(--trcc-space-1); /* Range sliders */ --trcc-slider-track-height: 4px; --trcc-slider-track-bg: var(--trcc-color-gray-200); --trcc-slider-fill-bg: var(--trcc-color-primary); --trcc-slider-thumb-size: 20px; --trcc-slider-thumb-bg: var(--trcc-color-primary); --trcc-slider-thumb-shadow: var(--trcc-shadow-md); /* ========================================================================== 14. BUTTONS Three button types: primary action, secondary (outlined), and ghost (text). All buttons share the same height and radius for visual consistency. ========================================================================== */ --trcc-btn-height: 44px; /* Minimum 44px for touch targets (WCAG) */ --trcc-btn-padding-x: var(--trcc-space-5); --trcc-btn-font-size: var(--trcc-text-base); --trcc-btn-font-weight: var(--trcc-font-semibold); --trcc-btn-radius: var(--trcc-radius-lg); --trcc-btn-transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; /* Primary button — main action (Calculate, Download PDF) */ --trcc-btn-primary-bg: var(--trcc-color-primary); --trcc-btn-primary-color: var(--trcc-color-white); --trcc-btn-primary-hover: var(--trcc-color-primary-hover); --trcc-btn-primary-active: var(--trcc-color-primary-active); --trcc-btn-primary-shadow: var(--trcc-shadow-sm); /* Secondary button — outlined (Reset, Cancel) */ --trcc-btn-secondary-bg: transparent; --trcc-btn-secondary-color: var(--trcc-color-primary); --trcc-btn-secondary-border: var(--trcc-border-focus); --trcc-btn-secondary-hover-bg: var(--trcc-color-primary-light); /* Ghost button — no border, text only (minor actions) */ --trcc-btn-ghost-color: var(--trcc-color-gray-600); --trcc-btn-ghost-hover-bg: var(--trcc-color-gray-100); /* Danger button — destructive actions if needed */ --trcc-btn-danger-bg: var(--trcc-color-error); --trcc-btn-danger-color: var(--trcc-color-white); --trcc-btn-danger-hover: var(--trcc-color-error-text); /* ========================================================================== 15. SHARE BUTTONS Share buttons are always visible inside the Share tab of the Share/Embed/ Cite panel. They are never hidden behind an additional interaction. LAYOUT (from reference design): ┌─────────────────┬─────────────────┐ │ Facebook │ X │ ├─────────────────┼─────────────────┤ │ WhatsApp │ LinkedIn │ ├─────────────────┴─────────────────┤ │ Copy link │ └───────────────────────────────────┘ — Facebook and X sit side by side in row 1 (equal width, 50/50) — WhatsApp and LinkedIn sit side by side in row 2 (equal width, 50/50) — Copy link spans the full width of the panel below the 2×2 grid — On mobile (≤480px) all buttons stack to a single column, full width — Each button shows a platform icon on the left and a label on the right — "Include my results in the link" checkbox sits above the button grid PLATFORM COLORS: Facebook #1877F2 hover #0C63D4 X #000000 hover #1A1A1A WhatsApp #25D366 hover #1DA851 LinkedIn #0A66C2 hover #084E96 Copy link #374151 hover #1F2937 (dark neutral — not a platform color) All share button text and icons are white (#FFFFFF). ========================================================================== */ --trcc-share-btn-height: 52px; /* Taller than standard buttons */ --trcc-share-btn-font-size: var(--trcc-text-base); --trcc-share-btn-font-weight: var(--trcc-font-semibold); --trcc-share-btn-radius: var(--trcc-radius-lg); --trcc-share-btn-icon-size: 20px; --trcc-share-btn-gap: var(--trcc-space-2); /* Icon-to-label gap */ --trcc-share-btn-grid-gap: var(--trcc-space-3); /* Gap between buttons */ --trcc-share-btn-text: #FFFFFF; /* Platform colors */ --trcc-share-btn-facebook-bg: #1877F2; --trcc-share-btn-facebook-hover:#0C63D4; --trcc-share-btn-x-bg: #000000; --trcc-share-btn-x-hover: #1A1A1A; --trcc-share-btn-whatsapp-bg: #25D366; --trcc-share-btn-whatsapp-hover:#1DA851; --trcc-share-btn-linkedin-bg: #0A66C2; --trcc-share-btn-linkedin-hover:#084E96; --trcc-share-btn-copylink-bg: #374151; /* Dark neutral for Copy link */ --trcc-share-btn-copylink-hover:#1F2937; /* "Include my results" checkbox — sits above the button grid */ --trcc-share-checkbox-font-size: var(--trcc-text-sm); --trcc-share-checkbox-color: var(--trcc-color-gray-700); --trcc-share-checkbox-gap: var(--trcc-space-2); --trcc-share-checkbox-margin-b: var(--trcc-space-4); /* Space before button grid */ /* ========================================================================== 16. RESULTS CARD The results section where calculated totals and breakdowns are displayed. Uses a very light green background to visually separate it from inputs. ========================================================================== */ --trcc-results-bg: var(--trcc-color-primary-light); --trcc-results-border: 1px solid var(--trcc-color-primary-subtle); --trcc-results-radius: var(--trcc-radius-xl); --trcc-results-padding: var(--trcc-space-6); /* Total result — the main number the user came for */ --trcc-results-total-size: var(--trcc-text-3xl); --trcc-results-total-weight: var(--trcc-font-bold); --trcc-results-total-color: var(--trcc-color-primary-text); --trcc-results-total-leading: var(--trcc-leading-tight); /* Result label — sits above the total number */ --trcc-results-label-size: var(--trcc-text-sm); --trcc-results-label-weight: var(--trcc-font-medium); --trcc-results-label-color: var(--trcc-color-gray-600); /* Breakdown rows — individual line items below the total */ --trcc-results-row-size: var(--trcc-text-base); --trcc-results-row-color: var(--trcc-color-gray-700); --trcc-results-row-padding-y: var(--trcc-space-2); --trcc-results-row-border: 1px solid var(--trcc-color-primary-subtle); /* Breakdown values — the number column in each row */ --trcc-results-value-weight: var(--trcc-font-semibold); --trcc-results-value-color: var(--trcc-color-gray-900); /* ========================================================================== 17. SHARE / EMBED / CITE PANEL The modal-style panel that appears when the user clicks Share, Embed, or Cite. Tabs, panels, and internal layout are all defined here. ========================================================================== */ --trcc-panel-bg: var(--trcc-color-white); --trcc-panel-border: var(--trcc-border-default); --trcc-panel-radius: var(--trcc-radius-xl); --trcc-panel-shadow: var(--trcc-shadow-xl); --trcc-panel-padding: var(--trcc-space-6); --trcc-panel-max-width: 520px; /* Tabs — Share, Embed, Cite */ --trcc-tab-font-size: var(--trcc-text-sm); --trcc-tab-font-weight: var(--trcc-font-medium); --trcc-tab-color: var(--trcc-color-gray-500); --trcc-tab-active-color: var(--trcc-color-primary); --trcc-tab-active-border: 2px solid var(--trcc-color-primary); --trcc-tab-padding-x: var(--trcc-space-4); --trcc-tab-padding-y: var(--trcc-space-3); /* Cite format selector — Text, HTML, BibTeX */ --trcc-cite-menu-font-size: var(--trcc-text-sm); --trcc-cite-menu-weight: var(--trcc-font-medium); --trcc-cite-menu-color: var(--trcc-color-gray-600); --trcc-cite-menu-active: var(--trcc-color-primary-text); --trcc-cite-menu-active-bg: var(--trcc-color-primary-light); --trcc-cite-box-font: var(--trcc-font-mono); --trcc-cite-box-size: var(--trcc-text-sm); --trcc-cite-box-bg: var(--trcc-color-gray-50); --trcc-cite-box-border: var(--trcc-border-default); --trcc-cite-box-radius: var(--trcc-radius-md); --trcc-cite-box-padding: var(--trcc-space-3); /* ========================================================================== 18. BANNERS System messages shown inside the calculator: — Data error banner (fetch failed, using cached data) — Version outdated banner (user opened a shared link with old formula) ========================================================================== */ --trcc-banner-padding: var(--trcc-space-3) var(--trcc-space-4); --trcc-banner-radius: var(--trcc-radius-md); --trcc-banner-font-size: var(--trcc-text-sm); --trcc-banner-font-weight: var(--trcc-font-medium); /* Warning banner — outdated formula version */ --trcc-banner-warning-bg: var(--trcc-color-warning-light); --trcc-banner-warning-border: 1px solid var(--trcc-color-warning-border); --trcc-banner-warning-color: var(--trcc-color-warning-text); /* Error banner — data fetch failed */ --trcc-banner-error-bg: var(--trcc-color-error-light); --trcc-banner-error-border: 1px solid var(--trcc-color-error-border); --trcc-banner-error-color: var(--trcc-color-error-text); /* Info banner — loading state, neutral notice */ --trcc-banner-info-bg: var(--trcc-color-info-light); --trcc-banner-info-border: 1px solid var(--trcc-color-info-border); --trcc-banner-info-color: var(--trcc-color-info-text); /* ========================================================================== 19. TRANSITIONS Consistent motion timing across all interactive elements. Kept short and subtle — consistent with the minimal style direction. ========================================================================== */ --trcc-transition-fast: 0.1s ease; /* Instant feedback — focus rings, active states */ --trcc-transition-base: 0.15s ease; /* Standard — button hover, color changes */ --trcc-transition-slow: 0.25s ease; /* Panels, modals, expanding sections */ /* ========================================================================== 20. Z-INDEX SCALE Explicit z-index values prevent stacking conflicts with WordPress theme elements. Always use these tokens — never hardcode a z-index value. ========================================================================== */ --trcc-z-base: 0; --trcc-z-raised: 10; /* Dropdowns, tooltips inside the calculator */ --trcc-z-panel: 100; /* Share/Embed/Cite panel overlay */ --trcc-z-modal: 200; /* Any modal dialog */ --trcc-z-toast: 300; /* Toast notifications (e.g. "Copied!") */ /* ========================================================================== 21. RESPONSIVE BREAKPOINTS Note: CSS custom properties cannot be used directly inside @media queries. These are documented here as reference values. Use them as the numeric values in your calculator's media queries. --trcc-bp-sm: 480px Single-column input grid, share buttons stack --trcc-bp-md: 768px Standard tablet breakpoint --trcc-bp-lg: 1024px Standard desktop breakpoint Example usage in calculator CSS: @media (max-width: 480px) { .wb-input-grid { grid-template-columns: 1fr; } .wb-share-grid { grid-template-columns: 1fr; } } ========================================================================== */ } /* ========================================================================== 22. GOOGLE FONTS IMPORT Inter for all UI text. JetBrains Mono for citation and code boxes. This import is included in the design system file so calculators do not need to import fonts individually. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ========================================================================== 23. GLOBAL RESET — SCOPED TO TRCC CALCULATORS A minimal reset applied only inside .trcc-calc so it does not interfere with the WordPress theme outside the calculator container. ========================================================================== */ .trcc-calc *, .trcc-calc *::before, .trcc-calc *::after { box-sizing: border-box; margin: 0; padding: 0; } .trcc-calc { font-family: var(--trcc-font-family); font-size: var(--trcc-text-base); font-weight: var(--trcc-font-normal); line-height: var(--trcc-leading-normal); color: var(--trcc-color-gray-800); background: var(--trcc-calc-bg); max-width: var(--trcc-calc-max-width); padding: var(--trcc-calc-padding-y) var(--trcc-calc-padding-x); border: var(--trcc-calc-border); border-radius: var(--trcc-calc-radius); box-shadow: var(--trcc-calc-shadow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Enforce hidden attribute — WordPress themes sometimes ignore it */ .trcc-calc [hidden] { display: none !important; } /* ========================================================================== 24. PDF EXPORT REFERENCE — jsPDF VALUES ══════════════════════════════════════════════════════════════════════════ IMPORTANT: These values are DOCUMENTATION ONLY. CSS variables do not carry into jsPDF output — jsPDF bypasses the browser's rendering engine entirely and draws directly onto a virtual canvas using JavaScript calls. HOW TO USE THIS SECTION ─────────────────────── When Claude builds a calculator's PDF export function, it reads this section and manually translates each value into the corresponding jsPDF call. No CSS is involved in the PDF generation pipeline. Translation examples: Color #1A7A4A → doc.setFillColor('#1A7A4A') Font size 18pt → doc.setFontSize(18) X position 20mm → doc.text('Hello', 20, y) UNITS ───── jsPDF works in millimeters by default (unit: 'mm'). All measurements below are in millimeters (mm) or points (pt) where noted. Font sizes are always in points (pt) — jsPDF convention. 1 inch = 25.4mm. US Letter = 215.9mm × 279.4mm. PAGE SETUP ────────── Format: US Letter (215.9mm × 279.4mm) Orientation: Portrait Unit: mm Margin (all sides): 20mm Content width: 175.9mm (215.9 - 20 - 20) jsPDF initialization: const doc = new jsPDF({ unit: 'mm', format: 'letter', orientation: 'portrait' }); COLORS (hex — same values as screen design system) ─────────────────────────────────────────────────── Primary green: #1A7A4A → doc.setFillColor('#1A7A4A') Primary text: #0D3D24 → doc.setTextColor('#0D3D24') Primary light (bg): #E8F5EE → doc.setFillColor('#E8F5EE') Primary subtle: #C8E6D5 → doc.setFillColor('#C8E6D5') Body text: #1F2937 → doc.setTextColor('#1F2937') Secondary text: #6B7280 → doc.setTextColor('#6B7280') Border / divider: #E5E7EB → doc.setDrawColor('#E5E7EB') Row background: #F9FAFB → doc.setFillColor('#F9FAFB') White: #FFFFFF → doc.setFillColor('#FFFFFF') Error: #DC2626 → doc.setTextColor('#DC2626') TYPOGRAPHY (sizes in points) ───────────────────────────── Site name / branding: 9pt light weight color: #6B7280 Calculator title: 22pt bold color: #1F2937 Section heading: 13pt semibold color: #1A7A4A Input label: 9pt medium color: #6B7280 Input value: 10pt normal color: #1F2937 Result label: 9pt medium color: #6B7280 Result total: 24pt bold color: #0D3D24 Breakdown row label: 10pt normal color: #1F2937 Breakdown row value: 10pt semibold color: #1F2937 Footer text: 8pt normal color: #9CA3AF Disclaimer text: 8pt italic color: #9CA3AF Note: jsPDF supports Helvetica (normal, bold, italic) out of the box. Inter is not available natively in jsPDF — use Helvetica as the PDF font. It is visually close and widely accepted in generated documents. doc.setFont('helvetica', 'normal') doc.setFont('helvetica', 'bold') doc.setFont('helvetica', 'italic') LAYOUT — PDF PAGE STRUCTURE (top to bottom) ───────────────────────────────────────────── All Y positions are from the top of the page. Start Y after margin = 20mm. [20mm] Branding bar — Site name "The Real Cost Calculator" left-aligned, 9pt, #6B7280 — Thin green rule below: full content width, 0.5pt, #1A7A4A — Height of branding bar: 10mm [30mm] Calculator title — Calculator name, 22pt bold, #1F2937 — Subtitle or tagline if applicable, 11pt normal, #6B7280 — Bottom padding: 6mm [~46mm] Input summary block — Section heading "Your Inputs", 13pt semibold, #1A7A4A — Two-column grid of label + value pairs Left column X: 20mm Right column X: 107mm Each row height: 8mm Label: 9pt medium #6B7280 Value: 10pt normal #1F2937 — Bottom padding: 6mm [variable] Chart (if applicable) — Rendered via canvas.toDataURL('image/png') — Centered horizontally on the page — Max width: 80mm Max height: 80mm — doc.addImage(imgData, 'PNG', x, y, width, height) — Bottom padding: 6mm [variable] Results section — Light green background rectangle: full content width, #E8F5EE Rounded appearance: draw rectangle with 3mm radius doc.roundedRect(20, y, 175.9, height, 3, 3, 'F') — Result label: 9pt medium #6B7280, centered — Total amount: 24pt bold #0D3D24, centered — Bottom padding inside block: 6mm [variable] Breakdown table — Section heading "Cost Breakdown", 13pt semibold, #1A7A4A — Table header row: background #1A7A4A, text #FFFFFF, 9pt bold Columns: Category (120mm wide) | Amount (55.9mm wide) — Data rows alternating: #FFFFFF and #F9FAFB Row height: 8mm Cell padding left: 3mm Border between rows: 0.3pt #E5E7EB — Total row: background #E8F5EE, text bold #0D3D24 — Bottom padding: 8mm [20mm from bottom] Footer — Thin rule: full content width, 0.3pt, #E5E7EB — Left: "Generated by The Real Cost Calculator · therealcostcalculator.com" 8pt normal #9CA3AF — Right: generation date, 8pt normal #9CA3AF — Below footer: disclaimer in 8pt italic #9CA3AF "This calculator is for reference purposes only and does not constitute financial advice." FILENAME CONVENTION ──────────────────── Format: [calculator-slug]-[primary-variable]-[secondary-variable].pdf Example: wedding-budget-austin-120-guests.pdf The specific slug and variables are defined in each calculator's Per-Calculator Checklist in the requirements spec. PAGE OVERFLOW HANDLING ─────────────────────── If content exceeds one page (long breakdown tables), add a new page: if (y > 259) { doc.addPage(); y = 20; } Check remaining space before drawing each section, not just each row. ========================================================================== */ /* ========================================================================== END OF FILE Questions or additions: document in the calculator requirements spec first, then add the token here before using it in any calculator. ========================================================================== */