Tanta Finance Brand Guide

This guide ensures consistency across all Tanta Finance interfaces and communications.

Logo

primary-500 Logo

Tanta Finance Logo

Icon Only

Tanta Finance Icon

Color Palette

primary-500 Colors

primary-500 50#f5f3ff
primary-500 100#ede9fe
primary-500 200#ddd6fe
primary-500 300#c4b5fd
primary-500 400#a78bfa
primary-500 500#8b5cf6
primary-500 600#7c3aed
primary-500 700#6d28d9
primary-500 800#5b21b6
primary-500 900#4c1d95
primary-500 950#2e1065

Secondary Colors

Secondary 50#eff6ff
Secondary 100#dbeafe
Secondary 200#bfdbfe
Secondary 300#93c5fd
Secondary 400#60a5fa
Secondary 500#3b82f6
Secondary 600#2563eb
Secondary 700#1d4ed8
Secondary 800#1e40af
Secondary 900#1e3a8a
Secondary 950#172554

Accent Colors

Accent 50#f0fdf4
Accent 100#dcfce7
Accent 200#bbf7d0
Accent 300#86efac
Accent 400#4ade80
Accent 500#22c55e
Accent 600#16a34a
Accent 700#15803d
Accent 800#166534
Accent 900#14532d
Accent 950#052e16

Neutral Colors

Neutral 50#f9fafb
Neutral 100#f3f4f6
Neutral 200#e5e7eb
Neutral 300#d1d5db
Neutral 400#9ca3af
Neutral 500#6b7280
Neutral 600#4b5563
Neutral 700#374151
Neutral 800#1f2937
Neutral 900#111827
Neutral 950#030712

Semantic Colors

Error#ef4444
Warning#f59e0b
Success#22c55e
Info#3b82f6

Typography

Font Sizes

xs (0.75rem)The quick brown fox jumps over the lazy dog.
sm (0.875rem)The quick brown fox jumps over the lazy dog.
base (1rem)The quick brown fox jumps over the lazy dog.
lg (1.125rem)The quick brown fox jumps over the lazy dog.
xl (1.25rem)The quick brown fox jumps over the lazy dog.
2xl (1.5rem)The quick brown fox jumps over the lazy dog.
3xl (1.875rem)The quick brown fox jumps over the lazy dog.
4xl (2.25rem)The quick brown fox jumps over the lazy dog.

Font Weights

Light (300)The quick brown fox jumps over the lazy dog.
Normal (400)The quick brown fox jumps over the lazy dog.
Medium (500)The quick brown fox jumps over the lazy dog.
Semibold (600)The quick brown fox jumps over the lazy dog.
Bold (700)The quick brown fox jumps over the lazy dog.

Spacing

0 (0rem)
1 (0.25rem)
2 (0.5rem)
3 (0.75rem)
4 (1rem)
5 (1.25rem)
6 (1.5rem)
8 (2rem)
10 (2.5rem)
12 (3rem)
16 (4rem)
20 (5rem)
24 (6rem)

Border Radius

None0
Small0.125rem
Default0.25rem
Medium0.375rem
Large0.5rem
XL0.75rem
2XL1rem
Full9999px

Shadows

Smallshadow-sm
Defaultshadow
Mediumshadow-md
Largeshadow-lg
XLshadow-xl
2XLshadow-2xl

Component Examples

Buttons

Cards

Default Card

This is a standard card component with a header and body.

Elevated Card

This card has a medium shadow for emphasis.

Highlighted Card

This card uses primary-500 colors to highlight important content.

Form Elements

Remember me
Option 1
Option 2