# Atsareka Design System

> Single source of truth for Atsareka's web UI. Use these tokens and component recipes verbatim when building Atsareka frontends so the output matches atsareka.id.

- URL: https://ds.atsareka.id
- Structured tokens: https://ds.atsareka.id/design-tokens.json
- Source: `design-system/` in github.com/atsareka/atsareka-services
- Applies to: fe-app (atsareka.id), fe-internal (internal.atsareka.id), auth-service (auth.atsareka.id)

## Stack
- React 19 + Vite + TypeScript. Build: `vite build`.
- Tailwind CSS 3.4. NO custom CSS — utility classes only.
- Icons: lucide-react (size via `size={n}` prop, e.g. `<MapPin size={11} />`).
- Page container: `max-w-5xl mx-auto px-4`.
- All user-facing copy in Bahasa Indonesia.

## Color tokens (Tailwind `theme.extend.colors.primary`)
```
primary: {
  50:'#f0fdfa', 100:'#ccfbf1', 200:'#99f6e4', 300:'#5eead4',
  400:'#2dd4bf', 500:'#14b8a6', 600:'#0d9488', 700:'#0f766e',
  800:'#115e59', 900:'#134e4a'
}
```
Neutrals (set on `body` in index.css):
- Background `#fafaf9` | Body text `#1e293b`
- Border `gray-200` (`#e5e7eb`) | Muted text `gray-400`/`gray-500`

Status palette:
- active (Aktif): `border-primary-500 bg-primary-50 text-primary-700`
- executing (Sedang Berjalan): `border-amber-400 bg-amber-50 text-amber-700`
- completed (Selesai): `border-gray-300 bg-gray-100 text-gray-600`

## Typography
Font: `system-ui, -apple-system, sans-serif`
- H1 `text-3xl font-bold text-gray-900`
- H2 `text-xl font-bold text-gray-900`
- H3 `font-semibold text-gray-900` (hover `group-hover:text-primary-700`)
- Body `text-gray-500` / `text-gray-600`
- Caption `text-xs text-gray-400`

## Radius convention
- Cards / hero / panels: `rounded-2xl`
- Buttons / inputs / chips: `rounded-xl`
- Icon circles / progress / pills: `rounded-full`

## Logo
- Combined mark: colorful "A" icon + wordmark "atsareka" (dark). File: `/logo.png` (441KB png).
- Use on light/tint backgrounds only — wordmark is dark and vanishes on dark bg.
- Min height 24px (h-6 nav, h-5 footer); ≥40px for large display. Clear space = half the mark height.
- Never recolor, stretch, rotate, or add drop-shadow.

## Iconography
- Library: lucide-react (stroke-based). Size via `size={n}` prop, color via `text-*` classes.
- Sizes used in product: 11 (caption), 13 (badge), 15 (input lead), 16 (button), 18–20 (chip/list), 24 (category icon).
- In-product set: LayoutGrid (Proyek), Heart (Donasi), FileText (Laporan), User (profil), Search, MapPin (lokasi), Target (donasi target), Calculator (zakat), HandCoins (persepuluhan), GraduationCap (dana cita), BookHeart (keagamaan), Users (sosial), Mail (kontak), Send (submit), ArrowRight (lanjut), Sparkles (segera), Check / CheckCircle2 (sukses), AlertCircle (error).

## Component recipes (copy-paste Tailwind classes)

### Primary button
`bg-primary-500 hover:bg-primary-600 text-white text-sm font-semibold py-2 px-4 rounded-xl transition`
With icon: append `inline-flex items-center gap-2`.

### Link/text button
`text-sm font-medium text-primary-600 hover:text-primary-700 transition`

### Pill / reset
`text-xs px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 font-medium`

### Text input (with leading search icon)
```
<div class="relative flex-1">
  <Search size="15" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
  <input class="w-full pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-primary-400" />
</div>
```

### Status filter chip
- active: `text-xs px-3 py-2 rounded-xl border font-medium border-primary-500 bg-primary-50 text-primary-700`
- inactive: `text-xs px-3 py-2 rounded-xl border font-medium border-gray-200 text-gray-600 hover:border-primary-300`

### Card (project)
- Container: `bg-white rounded-2xl border border-gray-200 hover:shadow-md transition overflow-hidden group`
- Cover placeholder: `w-full h-full bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center`
- Title: `font-semibold text-gray-900 mb-1 line-clamp-2 group-hover:text-primary-700`
- Location row: `flex items-center gap-1 text-xs text-gray-400` + `<MapPin size="11" />`
- CTA: `mt-3 w-full bg-primary-500 group-hover:bg-primary-600 text-white text-sm font-semibold py-2 rounded-xl text-center transition`

### Progress bar
- Track `h-1.5 bg-gray-100 rounded-full overflow-hidden`
- Fill `h-full bg-primary-500 rounded-full` (width = pct%)
- Label `mt-1 text-xs text-primary-600 font-medium` → `"{pct}% tercapai"`

### Category icon chip
- Container: `flex flex-col items-center gap-3 p-4 bg-white border rounded-2xl shadow-sm` (+ active `border-primary-500 bg-primary-50`, else `border-gray-200 hover:border-primary-300 hover:bg-primary-50`)
- Icon circle: `w-12 h-12 rounded-full flex items-center justify-center transition` (+ active `bg-primary-500 text-white`, else `bg-primary-100 text-primary-600`)

### Hero banner
`relative rounded-2xl overflow-hidden h-52 md:h-64` · img `w-full h-full object-cover object-center` · overlay `absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent flex items-center px-8`.

### Navbar (sticky)
`bg-white border-b border-gray-200 sticky top-0 z-30` · inner `max-w-5xl mx-auto px-4 h-14 flex items-center justify-between` · logo `h-6 w-auto`.

### Footer
`bg-white border-t border-gray-100` · inner `max-w-5xl mx-auto px-4 py-8` · copyright `text-sm text-gray-500` · logo `h-5 w-auto opacity-60`.

## Money / locale
All amounts Indonesian Rupiah, thousands grouped with dots: `Rp 68.000.000`. Provide a `formatIDR(n)` helper.

## Rules (from ARCH.md)
- Tailwind only — NO custom CSS.
- KISS / DRY — no Repository/Service pattern bloat.
- Financial data append-only; everything else soft-delete.