Caty Lessons Learned

• ✅ Backgrounds: Off-white (#F9F9F9, #FAFAFA), light grays (#F5F5F5)
• ✅ Text colors: Dark gray (#333, #2C3E50), not pure black
• ✅ Accent colors: Professional blues (#3498DB), greens (#27AE60), muted oranges (#E67E22)
• ✅ Typography: System fonts (-apple-system, BlinkMacSystemFont), Inter, Roboto
• ✅ Spacing: Generous padding (2-3rem between sections)
• ✅ Borders: Subtle (1px solid #DDD), rounded corners (border-radius: 8px)

What to AVOID:

• ❌ Purple gradients (screams "AI-generated slop")
• ❌ Neon colors (unprofessional)
• ❌ Pure white backgrounds (#FFF too stark)
• ❌ Comic Sans or decorative fonts (never)
• ❌ Excessive animations (distracting)
• ❌ Stock photos of people in suits pointing at screens (cringe)

CATY Example:

body {
  background-color: #F9F9F9;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  line-height: 1.6;
  padding: 2rem;
}

.section {
  background: white;
  border: 1px solid #DDD;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

h1 {
  color: #2C3E50;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.highlight {
  background-color: #FFF3CD; /* Subtle yellow, not neon */
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

2. External Source Citations (Audit-Grade Provenance)

CATY Standard: Every claim has a traceable source with URL + date

Citation Format:

<p>
  CATY's total assets were $26.1B as of December 31, 2024
  <sup><a href="https://www.sec.gov/..." target="_blank">[1]</a></sup>.
</p>

<!-- Footnotes section -->
<div class="sources">
  <h3>Sources</h3>
  <ol>
    <li>
      <a href="https://www.sec.gov/Archives/edgar/data/..." target="_blank">
        SEC 10-K Filing, Cathay General Bancorp, December 31, 2024
      </a>
    </li>
  </ol>
</div>

Why This Matters:

• ✅ Audit trail: Partners can verify every fact
• ✅ Regulatory compliance: SEC/PCAOB require source documentation
• ✅ Credibility: Shows rigor, not just ChatGPT output
• ✅ Reproducibility: Anyone can re-pull the same data

CATY Practice:

• Every financial metric has SEC EDGAR URL
• Every industry statistic has FDIC/HMDA/regulatory source
• Every market comparison has peer company 10-K citation
• SHA-256 checksums on all downloaded files (ground-truth extends this)

3. Target Profile Framework (Reusable Template)

CATY Innovation: Built a company profile structure so good it works for ANY company

Sections (in order):

1. Executive Summary (1-page, C-suite friendly)
2. Business Model (revenue streams, customer segments, competitive position)
3. Financial Performance (5-year trends, peer benchmarks, profitability analysis)
4. Risk Factors (regulatory, market, operational, credit risks)
5. Critical Audit Matters (if public company, extracted from 10-K)
6. Valuation (DCF, comparables, sensitivity analysis)
7. Investment Thesis (bull case, bear case, recommendation)
8. Appendices (detailed financials, methodology, sources)

Why This Works:

• ✅ Big 4 teams recognize this structure (mirrors audit planning memos)
• ✅ Partners can skim or deep-dive (executive summary vs appendices)
• ✅ Modular: Drop sections not relevant to use case
• ✅ Scalable: Apply to 1 company or 1,000

Ground-Truth Application:

• Use this structure for each extracted company
• Generate HTML pages automatically (like CATY site)
• Partners navigate company profiles, not JSON files

4. Data Visualization Best Practices

CATY Standard: Charts are clean, readable, and tell a story

Chart Design Principles:

• ✅ Simple color palette: Max 4-5 colors per chart
• ✅ Clear labels: Axis titles, legends, data point values
• ✅ Trends over time: Line charts for 5-year revenue/earnings
• ✅ Peer comparisons: Grouped bar charts for benchmarking
• ✅ Responsive: Charts scale on mobile
• ✅ Accessible: High contrast, no red/green only (colorblind friendly)

What to AVOID:

• ❌ 3D charts (distort data, look dated)
• ❌ Pie charts with >5 slices (unreadable)
• ❌ Default Excel colors (ugly)
• ❌ Missing axis labels (confusing)
• ❌ Overfitted trendlines (misleading)

CATY Example (using Chart.js):

// 5-Year Revenue Trend
const ctx = document.getElementById('revenueChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2020', '2021', '2022', '2023', '2024'],
    datasets: [{
      label: 'Revenue ($M)',
      data: [1200, 1350, 1500, 1680, 1820],
      borderColor: '#3498DB',
      backgroundColor: 'rgba(52, 152, 219, 0.1)',
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'CATY Revenue Growth (2020-2024)',
        font: { size: 16, weight: '600' }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: (value) => '$' + value + 'M'
        }
      }
    }
  }
});

5. Interactive Elements (User Experience)

CATY Standard: Pages are navigable, searchable, and responsive

Interactive Features:

• ✅ Table of contents (sticky sidebar, jump to section)
• ✅ Search functionality (Ctrl+F works, or custom search)
• ✅ Collapsible sections (expand/collapse for long content)
• ✅ Hover tooltips (definitions for jargon)
• ✅ Mobile menu (hamburger icon, responsive nav)
• ✅ Print-friendly (CSS @media print rules)

CATY Example (Collapsible Section):

<details>
  <summary><h3>Risk Factors (click to expand)</h3></summary>
  <div class="risk-content">
    <p>Interest rate risk: CATY's net interest margin is sensitive to...</p>
    <!-- Full risk factors content -->
  </div>
</details>

<style>
summary {
  cursor: pointer;
  padding: 1rem;
  background: #F9F9F9;
  border-radius: 4px;
}