# Design System: Tiger Loans, Inc. 奇虎贷款

> A complete brand design specification for Tiger Loans, Inc. — a licensed US home mortgage lender serving English and Chinese-speaking communities across 15 states.
>
> 奇虎贷款品牌设计规范 — 一家持牌美国住房抵押贷款机构，服务于全美15个州的英语和华语社区。

---

## 1. Visual Theme & Atmosphere

Tiger Loans is designed around a single core tension: **institutional authority with human warmth**. This is not the cold, corporate blue of a mega-bank. Nor is it the approachable-but-shallow aesthetic of a FinTech startup. Tiger Loans occupies a considered middle ground — a brand that feels like a trusted advisor who happens to have the credentials, knowledge, and access of a full-service lender.

The cornerstone of the brand is the **Tiger Mascot** — a cartoon tiger face with rounded, friendly features, golden fur, and expressive eyes. This character transforms what is typically an intimidating financial transaction into something approachable. In Chinese culture, the tiger represents strength, courage, protection, and good fortune. For the Chinese-American community that Tiger Loans primarily serves, this symbol carries deep resonance beyond mere branding.

The color palette speaks both languages of the brand: **Deep Navy (`#1A2744`)** grounds the system in authority, stability, and trust — the language of financial institutions. **Tiger Gold (`#F7B331`)** and **Tiger Amber (`#D1750C`)** bring warmth, prosperity, and the literal colors of the tiger's coat. **Tiger Orange (`#E7501C`)** provides energy and urgency for calls-to-action. **Cream (`#F5EDE0`)** offers a warm, inviting surface that avoids the clinical coldness of pure white.

Typography is anchored by a **serif headline system** (Playfair Display or similar), which conveys gravitas and expertise — the language of law firms and established financial institutions. This is balanced by **Inter** for all UI text and body copy: clean, modern, highly legible in both English and Chinese contexts. Chinese text uses **Noto Serif SC** for headings and **Noto Sans SC** for body, maintaining the same serif/sans hierarchy.

The overall impression should be: *"This is a company that has been around, knows what they're doing, and genuinely cares about your family's financial future."*

**Key Characteristics:**
- Deep Navy (`#1A2744`) as the authority anchor — used for headers, borders, and dark surfaces
- Tiger Gold (`#F7B331`) as the warmth and prosperity accent — the brand's signature color
- Tiger Orange (`#E7501C`) reserved exclusively for CTAs and critical highlights
- Cream (`#F5EDE0`) as the warm surface — never cold white for key content areas
- Serif headings (Playfair Display) for authority; Inter for all UI/body text
- Bilingual English + Simplified Chinese throughout all brand materials
- The cartoon tiger mascot as the brand's emotional anchor — always friendly, never fierce
- Conservative border-radius (8px–16px) — trustworthy, not tech-startup-playful
- Grid-based, structured layout — communicates discipline and professionalism

---

## 2. Color Palette & Roles

### Primary Brand Colors

| Name | Hex | Role |
|------|-----|------|
| **Tiger Navy** | `#1A2744` | Primary brand color. Page headers, dark sections, footer, borders, authoritative UI elements. |
| **Tiger Gold** | `#F7B331` | Signature accent. Hero highlights, mascot fur, gold badges, warm card backgrounds. |
| **Tiger Amber** | `#D1750C` | Secondary accent. Gradient pairs with Gold, hover states, warm borders. |
| **Tiger Orange** | `#E7501C` | CTA color. Primary buttons, urgent highlights, "Every month you wait costs you" banners. |
| **Tiger Cream** | `#F5EDE0` | Warm surface. Stat cards, feature card backgrounds, alternating section backgrounds. |

### Neutral Scale

| Name | Hex | Role |
|------|-----|------|
| **Deep Text** | `#1A2744` | Primary heading text (same as Tiger Navy — unifies text and brand) |
| **Body Text** | `#3D4B6B` | Secondary text, body copy, descriptions |
| **Muted Text** | `#6B7A99` | Captions, metadata, placeholder text |
| **Border** | `#D4D9E8` | Dividers, card borders, input outlines |
| **Surface Light** | `#F8F9FC` | Page background (subtle blue-tinted white, not pure white) |
| **White** | `#FFFFFF` | Cards on dark backgrounds, button text on dark CTAs |

### Semantic Colors

| Name | Hex | Role |
|------|-----|------|
| **Success Green** | `#4CAF50` | Positive indicators: savings, break-even, approval status |
| **Alert Red** | `#DC3545` | Warnings, rate increase alerts, negative change indicators |
| **Info Blue** | `#3B82F6` | Informational notes, help tooltips |

### Color Usage Ratios

- **60%** — Tiger Navy (`#1A2744`) + Surface Light (`#F8F9FC`) — structural foundation
- **30%** — Tiger Cream (`#F5EDE0`) + White (`#FFFFFF`) — content surfaces
- **10%** — Tiger Gold/Amber/Orange — accents and CTAs

### Dark Mode Palette (for dark-background sections)

| Name | Hex | Role |
|------|-----|------|
| **Dark Section BG** | `#1A2744` | Full-width dark section background |
| **Dark Surface** | `#243157` | Cards/panels inside dark sections |
| **Dark Border** | `#2E3D6B` | Borders inside dark sections |
| **Light Text on Dark** | `#A8B2D8` | Body text on navy background |
| **Gold on Dark** | `#F7B331` | Headings and highlights on navy background |

---

## 3. Typography Rules

### Font Families

**English Typography Stack:**
- **Display / Headings**: `Playfair Display` — serif, weights 400/700/900. Conveys authority, expertise, and institutional trust. Used for hero headlines, section titles, and large numbers.
- **UI / Body**: `Inter` — sans-serif, weights 300/400/500/600/700. Used for all body copy, navigation, buttons, labels, and data.
- **Monospace / Data**: `JetBrains Mono` — for loan numbers, rates, calculations, and financial data displays.

**Chinese Typography Stack:**
- **Display / Headings (ZH)**: `Noto Serif SC` — maintains the serif/authority principle in Chinese
- **Body (ZH)**: `Noto Sans SC` — clean, legible for body text in Chinese

### Type Scale

| Role | EN Font | ZH Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|---------|---------|------|--------|-------------|----------------|-------|
| Display Hero | Playfair Display | Noto Serif SC | 64px | 700 | 1.1 | -0.02em | Homepage hero, major campaign headlines |
| H1 | Playfair Display | Noto Serif SC | 48px | 700 | 1.15 | -0.01em | Page titles |
| H2 | Playfair Display | Noto Serif SC | 36px | 600 | 1.2 | 0em | Section headings |
| H3 | Playfair Display | Noto Serif SC | 28px | 600 | 1.25 | 0em | Card titles, sub-sections |
| H4 | Inter | Noto Sans SC | 20px | 600 | 1.4 | 0em | Feature titles, table headers |
| Body Large | Inter | Noto Sans SC | 18px | 400 | 1.7 | 0em | Hero body copy, key descriptions |
| Body | Inter | Noto Sans SC | 16px | 400 | 1.6 | 0em | Standard body text |
| Body Small | Inter | Noto Sans SC | 14px | 400 | 1.5 | 0em | Secondary descriptions, captions |
| Label | Inter | Noto Sans SC | 14px | 600 | 1.4 | 0.04em | Form labels, tags, badges |
| Caption | Inter | Noto Sans SC | 12px | 400 | 1.5 | 0.02em | Legal text, footnotes, metadata |
| Financial Data | JetBrains Mono | — | 16px | 500 | 1.4 | 0em | Rates, amounts, calculations |
| Headline Rate | JetBrains Mono | — | 48px | 700 | 1.0 | -0.02em | Hero rate displays (e.g., "6.125%") |

### Typography Rules

- Headings in English: always Playfair Display, never Inter
- Chinese headings: Noto Serif SC maintains the same weight and size hierarchy
- Financial numbers (rates, amounts, savings): always JetBrains Mono
- Never use Playfair Display below 20px — use Inter H4 for smaller headings
- Letter-spacing tightened on large display sizes only; 0em at body size
- Maximum line width: 680px for body copy (optimal reading measure)

---

## 4. Component Stylings

### Buttons

**Primary CTA (Tiger Orange)**
```
Background: #E7501C
Text: #FFFFFF, Inter 16px weight 600
Border-radius: 8px
Padding: 14px 28px
Hover: background #D1750C (Tiger Amber)
Focus: 3px solid #F7B331 outline offset 2px
Shadow: 0 4px 12px rgba(231,80,28,0.3)
```

**Secondary (Navy Outlined)**
```
Background: transparent
Border: 2px solid #1A2744
Text: #1A2744, Inter 16px weight 600
Border-radius: 8px
Padding: 14px 28px
Hover: background #1A2744, text #FFFFFF
```

**Ghost (Gold Accent)**
```
Background: rgba(247,179,49,0.12)
Border: 1px solid #F7B331
Text: #1A2744, Inter 16px weight 600
Border-radius: 8px
Padding: 14px 28px
Hover: background rgba(247,179,49,0.25)
```

**Button Sizes**
- Large: 16px / 56px height
- Default: 14px / 44px height
- Small: 13px / 36px height

### Cards

**Stat Card (Cream Surface)**
```
Background: #F5EDE0
Border: 1px solid rgba(209,117,12,0.2)
Border-radius: 16px
Padding: 24px
Number: JetBrains Mono 36px weight 700, color #E7501C
Label: Inter 14px weight 500, color #3D4B6B
```

**Feature Card**
```
Background: #FFFFFF
Border: 1px solid #D4D9E8
Border-radius: 12px
Padding: 28px
Shadow: 0 2px 16px rgba(26,39,68,0.06)
Title: Playfair Display 22px weight 600, color #1A2744
Body: Inter 15px weight 400, color #3D4B6B
Hover shadow: 0 8px 32px rgba(26,39,68,0.12)
```

**Navy Dark Card**
```
Background: #243157
Border: 1px solid #2E3D6B
Border-radius: 12px
Padding: 28px
Title: Playfair Display 22px weight 600, color #F7B331
Body: Inter 15px, color #A8B2D8
```

**Report/Analysis Card (the Refi Benefit Report style)**
```
Background: #FFFFFF
Border-top: 4px solid #1A2744
Border-radius: 0 0 12px 12px
Shadow: 0 4px 24px rgba(26,39,68,0.10)
Padding: 32px
```

### Navigation

```
Background: #1A2744 (dark navy)
Height: 72px
Logo: Left-aligned (tiger mascot + wordmark)
Links: Inter 15px weight 500, color #A8B2D8
Links hover: color #F7B331
CTA button: Tiger Orange pill, right-aligned
Mobile: hamburger → full-screen nav overlay (Navy background)
```

### Form Inputs

```
Background: #FFFFFF
Border: 2px solid #D4D9E8
Border-radius: 8px
Padding: 12px 16px
Text: Inter 16px, color #1A2744
Placeholder: color #9BA8C3
Focus border: 2px solid #1A2744
Error border: 2px solid #DC3545
Label: Inter 14px weight 600, color #3D4B6B, margin-bottom 6px
```

### Tags & Badges

**Product Badge**
```
Background: rgba(247,179,49,0.15)
Border: 1px solid #F7B331
Text: #D1750C, Inter 12px weight 600, letter-spacing 0.06em, UPPERCASE
Border-radius: 4px
Padding: 4px 10px
```

**Status Badge (Positive)**
```
Background: rgba(76,175,80,0.12)
Text: #2E7D32, Inter 12px weight 600
Border-radius: 4px
Padding: 4px 10px
```

**Loan Type Tags**: "Jumbo", "Conventional", "FHA", "VA", "Non-QM", "ARM"
- Each uses the product badge style with Tiger Gold border

### Alert/Banner Components

**Cost of Waiting Banner**
```
Background: #E7501C
Text: #FFFFFF, Inter 16px weight 700
Border-radius: 12px
Content: "Every month you wait costs you $[X]" — prominent, large
Icon: clock/timer icon left
```

**Rate Alert Banner**
```
Background: #1A2744
Border-left: 4px solid #F7B331
Text: #A8B2D8 body, #F7B331 highlight
Border-radius: 0 8px 8px 0
```

---

## 5. Layout Principles

### Spacing Scale (8px base unit)

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Icon gaps, tight inline spacing |
| sm | 8px | Component internal padding minimum |
| md | 16px | Standard component padding |
| lg | 24px | Card padding, section internal spacing |
| xl | 32px | Between related components |
| 2xl | 48px | Section padding (compact) |
| 3xl | 64px | Section padding (standard) |
| 4xl | 96px | Section padding (generous) |
| 5xl | 128px | Hero vertical padding |

### Grid System

- **Max content width**: 1280px
- **Container padding**: 0 24px (mobile) / 0 48px (tablet) / 0 80px (desktop)
- **Columns**: 4 (mobile) / 8 (tablet) / 12 (desktop)
- **Gutter**: 16px (mobile) / 24px (tablet) / 32px (desktop)

### Section Structure Pattern

The brand alternates between three section types:
1. **Light section** — `#F8F9FC` background, navy text, cream stat cards
2. **Cream section** — `#F5EDE0` background, navy text, white cards
3. **Dark section** — `#1A2744` background, gold/light-blue text, dark-surface cards

Pattern: Light → Dark → Cream → Light → Dark

### Whitespace Philosophy

Tiger Loans uses generous whitespace to signal trustworthiness and avoid the "busy" feeling of aggressive financial advertising. Content should feel like it has room to breathe. Hero sections: 128px top/bottom. Standard sections: 64–96px. Card padding: 24–32px.

---

## 6. Depth & Elevation

### Shadow System

```
Level 0 (flat):     none
Level 1 (card):     0 2px 16px rgba(26,39,68,0.06)
Level 2 (raised):   0 4px 24px rgba(26,39,68,0.10)
Level 3 (floating): 0 8px 32px rgba(26,39,68,0.14)
Level 4 (modal):    0 16px 64px rgba(26,39,68,0.20)
CTA glow:           0 4px 12px rgba(231,80,28,0.30)
Gold glow:          0 4px 16px rgba(247,179,49,0.25)
```

All shadows use `rgba(26,39,68,...)` — the brand navy color — making even shadows feel on-brand rather than generic gray.

### Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Tags, badges, small pills |
| sm | 8px | Buttons, inputs, small cards |
| md | 12px | Standard cards, panels |
| lg | 16px | Feature cards, stat cards |
| xl | 24px | Hero containers, modals |
| full | 9999px | Avatar circles, pill badges |

---

## 7. Logo & Brand Mark

### Logo Variants

**Primary (Light Background):** Tiger mascot left + "TIGER LOANS" serif wordmark right + "奇虎貸款" Chinese subtitle
- Use: white, cream, light gray backgrounds
- File: `tigerloans-logo-black.svg`

**Reversed (Dark Background):** Same layout, white wordmark on navy/dark backgrounds
- Use: navy sections, footers, dark overlays
- File: `tigerloans-logo.svg`

**Mascot Only:** Cartoon tiger face, no text
- Use: favicons, app icons, social media avatars, watermarks
- File: `tigerloans-logo-transparent.png`

### Mascot Usage Rules

The tiger mascot is the brand's most recognizable and valuable asset:
- Always use with clear space equal to 1× mascot height on all sides
- Never distort, rotate, recolor, or apply filters to the mascot
- The mascot should always feel **friendly, not fierce** — it is a brand ambassador, not a warning
- Use at full scale (not micro-sized where details are lost)
- The mascot's gold/orange palette is fixed — never place on backgrounds that clash

### Favicon Package

```
16×16   — Browser tab minimum
32×32   — Standard favicon  
110×110 — Transparent background (social media)
120×120 — Transparent background (iOS home screen)
180×180 — Apple Touch Icon
```

### Logo Don'ts

- Don't recolor the wordmark outside of black/white variants
- Don't stretch or distort proportions
- Don't use the mascot without adequate clear space
- Don't place the reversed logo on insufficient contrast backgrounds
- Don't render the Chinese text in a different font — it is SVG paths
- Don't place on backgrounds that compete with the gold/orange mascot colors

---

## 8. Brand Voice & Messaging

### Brand Personality

| Dimension | Tiger Loans IS | Tiger Loans is NOT |
|-----------|---------------|-------------------|
| Authority | Expert advisor | Intimidating bureaucrat |
| Warmth | Trusted family friend | Casual/unprofessional |
| Honesty | Transparent about timing and costs | Sales-at-all-costs pusher |
| Intelligence | Knows the market deeply | Oversimplifies or talks down |
| Community | Part of the Chinese-American community | Generic mass-market |

### Tone Guidelines

- **Honest first**: If now isn't the right time to refinance, say so. Trust is built by admitting when the math doesn't work.
- **Specific over vague**: Always use real numbers. "$1,036/month savings" beats "significant savings."
- **Expert but accessible**: Explain complex concepts simply. Avoid jargon unless defined.
- **Warm but professional**: The mascot is friendly; the advice is serious.
- **Action-oriented**: Show what the customer should do next, not just what's possible.

### Key Brand Phrases

**English:**
- "Your home. Your future. Our expertise."
- "No cost. Real savings. Zero games."
- "We'll watch the rates so you don't have to."
- "Every month you wait costs you $[X]."
- "This is your money — let's not leave it on the table."

**Chinese (Simplified):**
- "您的家。您的未来。我们的专业。"
- "零费用。真实节省。绝无隐患。"
- "我们替您盯着利率。"
- "每多等一个月，您就多花 $[X]。"
- "这是您的钱——我们不应该让它白白流失。"

### Bilingual Usage Rules

- All primary consumer-facing content must be available in both English and Simplified Chinese
- Chinese text should always use Simplified Chinese (简体) for primary display; Traditional Chinese (繁體) may be used for Traditional Chinese-speaking communities (Taiwan, Hong Kong)
- Language switcher: always visible in navigation
- Legal/compliance text: English primary, Chinese translation provided
- Numbers, rates, and financial figures are universal — never translate numbers

---

## 9. Iconography & Illustration

### Icon Style

- **Line icons** preferred — 2px stroke weight, rounded line caps
- Icon size: 20×20px (UI), 24×24px (feature), 48×48px (hero)
- Icon color: Tiger Navy (#1A2744) on light backgrounds; Tiger Gold (#F7B331) on dark backgrounds
- Never use flat-fill icons — Tiger Loans prefers the lighter, more elegant line style

### Illustration Principles

- The tiger mascot is the primary illustrative element — use it over generic stock illustrations
- For infographics and charts: use Tiger Gold + Tiger Orange + Navy palette exclusively
- For financial charts/graphs: bar charts and line charts preferred; avoid pie charts
- Data visualization should feel like a premium financial publication, not a generic dashboard

---

## 10. Do's and Don'ts

### Do's ✅

- Use Tiger Navy as the primary authority color for all headings and key UI
- Reserve Tiger Orange exclusively for CTAs — its scarcity makes it powerful
- Always show real, calculated numbers (never ranges or "up to" claims)
- Use the cream surface (`#F5EDE0`) for key stat cards — it signals warmth and prosperity
- Include Chinese text in all consumer materials
- Use generous whitespace — it signals trust
- Apply the multi-layer navy-tinted shadow system consistently
- Use Playfair Display for all English headings above H4 size

### Don'ts ❌

- Don't use Tiger Orange for decorative elements — only CTAs and urgency indicators
- Don't use pure white (#FFFFFF) as a page background — use `#F8F9FC`
- Don't use generic "bank blue" (#003087, #1565C0, etc.) — Tiger Navy is the only blue
- Don't mix Playfair Display and Inter in the same heading
- Don't use sans-serif for primary English headlines
- Don't show rate ranges ("6.0%–7.5%") — show the specific scenario rate
- Don't use more than 3 colors in a single component
- Don't compress or abbreviate Chinese text to fit — design for the full Chinese character count
- Don't use the orange CTA color for warnings/errors — use semantic red (#DC3545) instead
- Don't place the tiger mascot on backgrounds that don't provide sufficient contrast

---

## 11. Responsive Behavior

### Breakpoints

| Token | Width | Context |
|-------|-------|---------|
| mobile | <640px | Single column, touch-optimized |
| tablet | 640px–1024px | 2-column grids, adapted navigation |
| desktop | 1024px–1280px | Full layout |
| wide | >1280px | Constrained to max-width 1280px |

### Mobile Adaptations

- Navigation: hamburger → full-screen overlay with navy background
- Hero typography: Display 64px → 40px on mobile
- Stat cards: 4-column grid → 2×2 grid on tablet → stacked on mobile
- Buttons: full-width on mobile
- Language switcher: always visible (not hidden behind menu)
- Touch targets: minimum 44×44px for all interactive elements

### Chinese Text Responsive Rules

- Chinese text requires ~10% more horizontal space than English for equivalent content
- Never truncate Chinese text with ellipsis — wrap to next line instead
- Minimum Chinese body text size: 16px (14px is too small for character complexity)
- Line height for Chinese body: 1.8 (higher than English 1.6 — Chinese characters need more breathing room)

---

## 12. Agent Prompt Guide

### Quick Color Reference

```
Primary Navy:    #1A2744  — authority, headings, dark sections
Tiger Gold:      #F7B331  — warmth, prosperity, signature accent  
Tiger Amber:     #D1750C  — secondary accent, hover states
Tiger Orange:    #E7501C  — CTAs ONLY, urgency banners
Cream Surface:   #F5EDE0  — warm card backgrounds
Page Background: #F8F9FC  — subtle blue-tinted white
Body Text:       #3D4B6B  — secondary text
```

### Component Prompt Templates

**Hero Section:**
> "Create a hero section with navy (`#1A2744`) gradient background. Playfair Display 64px gold (`#F7B331`) headline with Chinese subtitle in Noto Serif SC. Body text white/muted (`#A8B2D8`). Tiger Orange (`#E7501C`) primary CTA button, 8px radius. Navy-outlined secondary button. Tiger mascot image right-aligned. Cream stat row at bottom with 4 key metrics."

**Stat Card:**
> "Create stat card with cream background (`#F5EDE0`), 16px radius, 1px amber border (`rgba(209,117,12,0.2)`). JetBrains Mono 36px Tiger Orange number. Inter 14px navy label below."

**Dark Section:**
> "Full-width section with Tiger Navy (`#1A2744`) background. Playfair Display 36px Tiger Gold heading. Inter 18px muted light-blue body text (`#A8B2D8`). Dark surface cards (`#243157`) with gold borders. Tiger Orange CTA button."

**Refi Report Card:**
> "White card with 4px navy top border. Playfair Display 24px navy title. Inter body. Cream background stat row showing before/after. Tiger Orange 'Every month you wait costs $X' banner at bottom. Equal Housing and NMLS footer in 12px muted text."

**Navigation:**
> "Full-width nav bar, navy background (`#1A2744`) 72px height. Tiger mascot + white wordmark left. Inter 15px muted blue links center. Tiger Orange CTA button right. Language switcher EN/中 in muted blue."

---

*This DESIGN.md was authored for Tiger Loans, Inc. (NMLS #1169300). All design decisions are based on the brand's existing visual identity, target audience (Chinese-American homebuyers and homeowners), and the company's positioning as a trusted, expert, community-focused mortgage lender.*

*Last updated: 2026-04-05*