Design
ATIN brand reference + raw code for every primitive. Click View Code on any block to copy.
Colors
Palette
Defined as Tailwind 4 @theme tokens in src/lib/atin-brand/tokens.css. Click a swatch to copy its hex.
Typography
Type scale
Playfair Display for headlines (h1–h4), Plus Jakarta Sans for body.
Playfair Display H1
Playfair Display H2
Playfair Display H3
Plus Jakarta Sans body — the quick brown fox jumps over the lazy dog.
Plus Jakarta Sans small / muted
Plus Jakarta Sans Label
Components
AtinButton
Brand-themed button with 4 variants (primary, secondary, outline, ghost) and 3 sizes (sm, md, lg).
AtinBadge
Inline status pill. 5 variants for semantic states.
TarsierLoader
Loading state — Philippine tarsier illustration with bounce animation.
Loading...
Layout primitives
PageHeader
Page-level title + optional subtitle and action slot. Used at the top of every page.
Overview
Last run · 2m 14s · 80 leads pushed · 0 errors
KpiStrip + Kpi
Dashboard KPI strip — 2-column on mobile, 4-column on desktop. Optional progress bar inside Kpi.
Status
Healthy
Last run 2h ago
Apollo MTD
158/2,500
Brand assets
Logo and crest
Source PNGs are pure black on transparent. Use the CSS filter pattern below to render white on dark backgrounds. Original PNGs are kept untouched in public/atin-brand/ — download links serve the originals.
