# LocalSync AI — Brand Colors

Source of truth: `getlocalsync-ai/styles.css` design tokens.
Aesthetic: clean modern, warm off-white paper + a single deep-indigo accent used **sparingly**.
Type: **Geist** (display/body) · **Geist Mono** (eyebrows, stats, tags).

---

## Accent — the brand color (indigo)

| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| Accent | `#3730A3` | 55, 48, 163 | Primary indigo — core brand color, links, mark on light bg |
| Accent Light | `#4F46E5` | 79, 70, 229 | Brighter indigo — hover, gradient end, mark on dark bg |
| Accent Deep | `#1E1B6E` | 30, 27, 110 | Darkest indigo — depth, shadows |
| Accent Soft (light) | `rgba(55,48,163,0.10)` | — | 10% indigo tint fill on light |
| Accent Soft (dark) | `rgba(79,70,229,0.22)` | — | 22% indigo tint fill on dark |

---

## Neutrals — Light mode (paper)

| Name | Hex | Use |
|------|-----|-----|
| BG | `#FAFAF9` | Warm off-white page background |
| BG Alt | `#F4F4F2` | Alternate sections |
| BG Deep | `#ECECE8` | Deepest panels |
| Ink | `#0A0908` | Primary text (near-black) |
| Ink Soft | `#2D2A26` | Secondary text |
| Ink Muted | `#6B6258` | Muted text |
| Ink Faint | `#A9A39A` | Faint / disabled text |
| Border | `#E5E2DC` | Standard borders |
| Border Soft | `#EFEDE7` | Subtle dividers |

---

## Neutrals — Dark mode

| Name | Hex / value | Approx solid | Use |
|------|-------------|--------------|-----|
| BG | `#0A0908` | `#0A0908` | Near-black background (cover, app icon) |
| BG Alt | `#14110F` | `#14110F` | Alternate dark sections |
| BG Deep | `#1C1916` | `#1C1916` | Deepest dark panels |
| Ink | `#FAFAF9` | `#FAFAF9` | Primary text on dark |
| Ink Soft | `rgba(250,250,249,0.85)` | `#F0F0EF` | Secondary text on dark |
| Ink Muted | `rgba(250,250,249,0.55)` | `#C9C8C6` | Muted text on dark |
| Ink Faint | `rgba(250,250,249,0.32)` | `#A6A5A2` | Faint text on dark |
| Border | `rgba(250,250,249,0.12)` | — | Borders on dark |
| Border Soft | `rgba(250,250,249,0.06)` | — | Subtle dividers on dark |

---

## Pure white

| Name | Hex | Use |
|------|-----|-----|
| White | `#FFFFFF` | Text/icons on the indigo accent (e.g. primary buttons) |

---

## Quick recipe for video / social assets

- **Dark base:** `#0A0908`
- **Light text:** `#FAFAF9`
- **The one pop of color:** `#4F46E5` on dark · `#3730A3` on light
- Use indigo **sparingly** — one accent per frame. Let the off-white/near-black do the work.