🐯Brand Guidelines 2026品牌指南 2026

Tiger Loans, Inc.

奇虎貸款

Brand Guidelines品牌指南

Tiger Loans Mascot
15
States Licensed获牌州数
6.125%
Sample Rate Today当日参考利率
1169300
NMLS License ID全美抵押贷款牌照号
2
Language Markets核心语言市场

Mascot vs. Wordmark Usage

🏹 Mascot Only
  • Community events & sponsorships
  • Social media profile images
  • Customer-facing app icon
  • Marketing & merchandise
  • Advertising campaigns
📄 Wordmark Only
  • Rate sheets & loan documents
  • Regulatory filings
  • Official disclosures
  • Professional correspondence
  • Legal documents
🏆 Full Logo
  • Website headers & footers
  • Email signatures
  • Presentations
  • Business cards
  • Co-branding materials

Color Palette

色彩系统

Every color has a purpose. Navy anchors authority. Gold signals warmth and prosperity. Orange drives action. Cream creates comfort. Together they tell the Tiger Loans story.

每种颜色都有其意义。深蓝色象征权威;金色传递温暖与繁荣;橙色驱动行动;奶油色营造舒适感。

Color Usage Ratio — 60 / 30 / 10色彩使用比例 — 60 / 30 / 10

60%
30%
10%
60% — Navy + Page Background深蓝色 + 页面底色
30% — Cream + White surfaces奶油色 + 白色底面
10% — Gold / Amber / Orange accents金色 / 琥珀 / 橙色点缀

Primary Brand Colors主品牌色

Tiger Gold
虎金色
#F7B331
--gold
Signature warmth. Highlights, badges, prosperity.
标志性温暖。高亮、徽章、繁荣象征。
1.8:1 vs White ✗ FAIL7.2:1 vs Navy ✓ AAA
Tiger Amber
虎琥珀色
#D1750C
--amber
Secondary accent. Hover states, warm borders.
次级点缀色。悬停状态、暖色边框。
3.1:1 vs White ✓ AA4.8:1 vs Navy ✓ AA
Tiger Orange
虎橙色
#E7501C
--orange
CTA only. Buttons, urgency banners. Use sparingly.
仅用于行动号召。按钮、紧急横幅。谨慎使用。
3.8:1 vs White ✓ AA4.0:1 vs Navy ✓ AA
Tiger Cream
虎奶油色
#F5EDE0
--cream
Warm surface. Stat cards, alternating sections.
温暖底面。数据卡片、交替区块背景。
1.1:1 vs White ✗ FAIL10.2:1 vs Navy ✓ AAA

Neutral & Semantic Colors中性色阶与语义色

Surface Light
#F8F9FC
Page background
页面背景
Body Text
#3D4B6B
Body copy
正文文本
Muted Text
#6B7A99
Captions, meta
说明文字
Light on Dark
#A8B2D8
Text on navy
深底浅文
Success Green
#4CAF50
Savings, approvals
储蓄、批准
Alert Red
#DC3545
Warnings, errors
警告、错误

Dark Section Palette深色区块调色板

Dark Surface
#243157
--dark-surface
Cards in dark sections
深色区块内的卡片
Dark Border
#2E3D6B
--dark-border
Borders in dark sections
深色区块的边框
Navy Gradient
#1A2744 → #243157
Section backgrounds
区块背景渐变

Design Token Names设计令牌名称

Use these semantic names in code for maintainability.在代码中使用这些语义化名称。

TokenValueHex
--color-brand-primaryNavy#1A2744
--color-brand-accentGold#F7B331
--color-cta-defaultOrange#E7501C
--color-cta-hoverAmber#D1750C
--color-surface-warmCream#F5EDE0
--color-surface-lightSurface#F8F9FC
--color-text-on-darkLight on Dark#A8B2D8
--color-headingNavy (headings)#1A2744

Type System

字体系统

Playfair Display anchors authority in English headings. Inter keeps UI clean and readable. Noto maintains the same hierarchy in Chinese. JetBrains Mono brings precision to financial data.

Playfair Display赋予英文标题权威感;Inter保持界面简洁易读;Noto在中文中保持相同的层次结构;JetBrains Mono为金融数据带来精确感。

Playfair Display — EN Headings
AaBbCc
Authority & Trust
400 · 600 · 700 · 900
Display / H1 / H2 / H3
Inter — UI & Body
AaBbCc
Clean & Modern
300 · 400 · 500 · 600 · 700
Body / Labels / Nav
Noto Serif/Sans SC — ZH
字体样本
专业可信赖
Serif: 标题层级
Sans: 正文
JetBrains Mono — Financial
6.125%
$1,036/mo
400 · 500 · 700
Rates / Amounts / Data

Type Scale字体比例表

RoleEnglish Sample中文样本Spec
Display HeroTiger Loans奇虎贷款64px / 700
Playfair Display
H1Home Mortgage住房抵押贷款48px / 700
Playfair Display
H2Your Best Rate最优惠利率36px / 600
Playfair Display
H3Loan Options贷款方案28px / 600
Playfair Display
H4Monthly Payment月供金额20px / 600
Inter
Body LargeWe make mortgage simple.我们让抵押贷款更简单。18px / 400
Inter · lh 1.7
BodyStandard body text for descriptions.标准正文,用于说明内容。16px / 400
Inter · lh 1.6
Financial Data6.125% APR · $2,847/mo · $342,000 loan16px / 500
JetBrains Mono
Headline Rate6.125%48px / 700
JetBrains Mono
CaptionNMLS #1169300 · Equal Housing Lender全美抵押贷款许可系统编号12px / 400
Inter

Components

组件库

A consistent set of UI components built on the Tiger Loans design system. Every component communicates trust, clarity, and action.

基于奇虎贷款设计系统构建的一致UI组件集,每个组件都传达信任、清晰和行动力。

Buttons按钮

Stat Cards数据卡片

$1,036
Monthly Savings
每月节省
vs. 当前月供
6.125%
New Rate
新利率
30年固定利率
18 mo
Break-Even Period
回本周期
含结算费用
$248K
30-Year Savings
30年总节省
贷款期内

Feature Cards功能卡片

🏠
Home Purchase
购房贷款

Competitive rates for primary residences, vacation homes, and investment properties across 15 states.

为自住、度假和投资房产提供竞争性利率,覆盖15个州。

💰
Refinancing
再融资

Lower your monthly payment, access equity, or shorten your term with our no-cost refi analysis.

通过我们的零费用再融资分析降低月供、获取权益或缩短还款期。

📊
Rate Watch
利率监控

We monitor rates daily and alert you the moment refinancing makes financial sense for your situation.

我们每日监控利率,当再融资对您有利时立即提醒。

Navy Dark Cards深蓝色卡片

Tags & Badges标签与徽章

JumboConventionalFHAVANon-QMARM
✓ Pre-Approved✓ Rate LockedEqual Housing LenderNMLS #1169300

Alert Banners提示横幅

Every month you wait costs you
每多等一个月,您就多花
$1,036
🔔 Rates are up 0.25% this week — lock in now
🔔 本周利率上涨0.25%——立即锁定
Lock in your rate today before further increases. Your personalized quote is ready.
在利率进一步上涨前锁定您的利率。您的个性化报价已准备好。

Navigation Bar导航栏

Form Inputs表单输入

Excellent — qualifies for best rates
优秀——可获最优利率
Please enter a valid email address
请输入有效的电子邮箱地址

Spacing & Grid

间距与网格

Generous whitespace signals trustworthiness. The 8px base unit creates a consistent rhythm throughout all components and sections.

充裕的空白传达可信赖感。以8px为基础单位,在所有组件和区块中创造一致的节奏感。

Spacing Scale间距比例

xs
4px
Icon gaps
图标间距
sm
8px
Min component padding
最小组件内边距
md
16px
Standard padding
标准内边距
lg
24px
Card padding
卡片内边距
xl
32px
Between components
组件间距
2xl
48px
Section padding (compact)
紧凑区块内边距
3xl
64px
Section padding (standard)
标准区块内边距
4xl
96px
Section padding (generous)
宽松区块内边距
5xl
128px
Hero vertical padding
英雄区竖向内边距

12-Column Grid12列网格

12 equal columns · 32px gutters · max 1280px12等列 · 32px列间距 · 最大1280px
8 col — Main
4 col — Side
4
4
4
Shadow Scale阴影层级
L1
L2
L3
L4

Motion Principles

动效规范

Purposeful motion reinforces brand feel. Always prefer GPU-friendly transform/opacity properties.

有目的性的动效强化品牌感知。始终优先使用 GPU 友好属性。

Duration Tokens

TokenValueUse Case
--duration-fast150msHover states, small UI feedback
--duration-standard250msModals, dropdowns, transitions
--duration-slow400msPage transitions, hero animations

Easing: entrance=ease-out  |  exit=ease-in  |  interaction=ease-in-out

:root {
  --duration-fast:     150ms;
  --duration-standard: 250ms;
  --duration-slow:     400ms;
  /* Animate only transform + opacity for GPU compositing */
}

Voice & Messaging

品牌调性与信息

Honest, expert, warm, and action-oriented. Tiger Loans speaks like a trusted advisor who happens to be the most knowledgeable person in the room.

诚实、专业、温暖、以行动为导向。奇虎贷款的语言如同最值得信赖且最博学的顾问。

Key Brand Phrases核心品牌语

"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]."
「每多等一个月,您就多花$[X]。」
"This is your money — let's not leave it on the table."
「这是您的钱——我们不应该让它白白流失。」
"Honest about the math. Always."
「数据永远诚实透明。」

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不择手段的推销者
Intelligence专业智慧Knows the market deeply深入了解市场Oversimplifies or talks down过度简化或居高临下
Community社区认同Part of the Chinese-American community华裔美国社区的一部分Generic mass-market通用大众市场

Tone Guidelines语气指南

Logo Downloads

标志下载

All official Tiger Loans brand assets. Always use the most current versions from this package.

所有奇虎贷款官方品牌资产。请始终使用此套件中的最新版本。

🎨
tigerloans-logo-black.svg
SVG Vector
Primary logo for light backgrounds. Scalable to any size.
浅色背景主标志,可无损缩放至任意尺寸。
🌙
tigerloans-logo.svg
SVG Vector
Reversed (white) logo for dark backgrounds and overlays.
深色背景反色(白色)标志,适用于深蓝色区块和遮罩。
🐯
tigerloans-logo-transparent.png
PNG Transparent
Tiger mascot only, no text. For app icons and avatars.
纯虎吉祥物,无文字。用于应用图标和社交头像。
🔲
Favicon_16x16.png
PNG 16×16px
Browser tab favicon — minimum size for tab display.
浏览器标签图标——标签显示最小尺寸。
🔲
Favicon_32x32.png
PNG 32×32px
Standard favicon for desktop browsers and bookmarks.
桌面浏览器标准网站图标和书签。
📱
favicon-120 (transp).png
PNG 120×120px
iOS home screen icon (Apple Touch Icon). Transparent BG.
iOS主屏幕图标(苹果触摸图标)。透明背景。
DESIGN.md
Markdown · Brand SpecMarkdown · 品牌设计规范
Complete brand design specification: colors, typography, spacing, components and usage rules.
完整品牌设计规范文档:颜色、字体、间距、组件及使用规则。

Infographic & Data Visualization信息图表与数据可视化

Standards for charts, reports, and financial data visuals used across Tiger Loans materials.Tiger Loans 各类材料中图表、报告及金融数据可视化的规范标准。

Chart Types & Usage图表类型与适用场景

$9K $6K $3K $9,530 $8,494 Current 7.0% New 6.125%
Bar Charts条形图
  • Payment comparisons月供对比
  • Rate scenarios利率方案对比
  • Cumulative savings over time累计节省金额趋势
  • Closing cost breakdowns交易费用明细
85% Interest Year 1 Payment Structure Interest 85% of payment Principal 15% of payment
Pie / Donut Charts饼图 / 环形图
  • P&I vs interest split本金与利息比例
  • Portfolio composition贷款组合构成
  • Use sparingly — max 4 slices谨慎使用,最多4块
8.0% 7.5% 7.0% 6.5% 7.5% 6.125% 2021 2022 2023 2024 2025
Line Charts折线图
  • Rate trends over time利率历史走势
  • Amortization schedules还款计划曲线
  • Market comparisons市场对比趋势

Chart Color Palette图表配色规范

Primary
#1A2744
Current state现状数据
Highlight
#E7501C
New / savings新方案 / 节省
Accent
#F7B331
Emphasis / CTA强调 / 行动
Positive
#4CAF50
Savings / break-even节省 / 盈亏点
Neutral
#A8B2D8
Secondary data次要数据

Never use more than 3 colors in a single chart. Always pair color with shape/pattern for accessibility.单张图表最多使用3种颜色。颜色必须搭配形状/图案确保可访问性。

KPI Stat Cards关键指标卡片

$1,036
Monthly Savings每月节省
6.125%
New Rate新利率
$0
Closing Costs交易费用
18 mo
Break-even回本时间

Use cream (#F5EDE0) for stat cards. Orange for key metrics, green for positive outcomes. Always include a label.指标卡片使用米色背景。关键数值用橙色,正向结果用绿色。数字下方必须配标签。

PDF Report LayoutPDF报告版式规范

Do应该
  • Header: logo + title + navy border-bottom页眉:Logo + 标题 + 深蓝下边框
  • Navy diagnosis banner with client name深蓝诊断横幅含客户姓名
  • 4-column KPI row with cream cards4列KPI行,米色卡片
  • SVG charts only (no external CDN)仅用SVG图表,不使用外部CDN
  • Cost-of-waiting orange banner橙色「等待成本」横幅
  • 6pt disclaimer + NMLS at bottom底部6pt免责声明含NMLS号
Don't不应该
  • No external CDN links in HTMLHTML中禁用外部CDN链接
  • No browser default header/footer on PDFPDF禁止浏览器默认页眉页脚
  • No more than 3 chart colors per page每页最多3种图表颜色
  • Never expose raw LoanSifter pricing禁止向客户展示原始LoanSifter数据
  • No bash heredoc for HTML with dollar signs含美元符号的HTML禁用bash heredoc

For AI Agents

AI 代理使用指南

A quick-reference prompt guide for AI systems building Tiger Loans UI components.

供 AI 系统构建 Tiger Loans UI 组件的快速参考提示词指南。

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 SectionHero 主视觉区

"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."