Brand

TamilServices brand kit

Connecting our community together.

Warm, trustworthy, and community-first. We celebrate Tamil businesses and professionals with clarity and respect—never cluttered or corporate-cold.

Logo & mark

The lotus represents growth and community on a gold gradient tile with ink strokes—paired with the Inter wordmark in logo.svg.

Full logo

Header (live)

Same asset as full logo—height constrained like the site header.

On dark backgrounds

Use logo-on-dark.svg or <BrandLogo variant="dark" />—white wordmark only; gold lotus tile stays the same.

Clear space

Keep at least the height of the lotus tile as clear space on all sides. Do not stretch, rotate, or recolor the lotus.

Avoid

Do not place the gold mark on busy photo backgrounds without a solid plate.
Do not change lotus fill to gold—use ink on gold tiles only.
Do not set the wordmark in all caps or replace it with generic sans-serif.

Color palette

One gold for UI, one ink for type and dark surfaces. Tokens live in globals.css.

Tamil Gold is the flat UI accent (buttons, links). Gradient start and gradient end are the two tile stops for logo and favicon plates only. Ink is one slate for type and navy buttons.

Tamil Gold

HEX: #FBBF24
HSL: 43 96% 56%
CSS: --primary
Tailwind: amber-400 / bg-primary

Primary CTAs, links, rings, and flat gold fills.

Gold gradient start

HEX: #FACC15
Tailwind: yellow-400

Top-left of logo and favicon tiles (lighter gold).

Gold gradient end

HEX: #F59E0B
Tailwind: amber-500

Bottom-right of logo and favicon tiles (richer gold).

Gold tile preview

HEX: #FACC15

Combined plate: gradient start → end at 135°. Use on lotus tile only—not for buttons.

Ink

HEX: #0F172A
HSL: 222 47% 11%
CSS: --foreground
Tailwind: slate-900

Headings, body, wordmark, navy buttons, and lotus glyph on gold.

Hero cream

HEX: #FFFBEB
HSL: 43 100% 96%
CSS: --hero-cream

Soft hero and marketing section backgrounds.

Warm stone

HEX: #FAF9F7
HSL: 40 23% 97%
CSS: --tertiary

Page sections and subtle fills.

Marketing banners use the .banner-gradient utility (amber gold sweep).

Typography

UI & body

Plus Jakarta Sans

Weights: 400–800

Default site typography (layout root).

Wordmark (nav)

Inter

Weights: 600–700

“TamilServices” text beside the lotus in the header.

Find trusted Tamil services

Body copy uses Plus Jakarta Sans at comfortable line length for listings, profiles, and help content.

TamilServices wordmark sample

UI patterns

Pill CTAs: `rounded-full` (`homePrimary`, `homeHub`, `homeSecondary`). App & forms: `rounded-md` (`--radius`, 0.625rem).

Home & marketing (pill)

homePrimary, homeHub, homeSecondary — featured sections and hub cards.

App & forms (rounded-md)

Sign-in, dashboards, dialogs — default button sizes.

Hero cream surface

Use --hero-cream for soft promotional bands alongside slate-50 page backgrounds.

Downloads

SVG sources from the site's public folder. Right-click to save, or open in a new tab.

Questions about co-branding or press use? Visit the Help Centre.