---
paths:
  - "apps/web/**"
  - "apps/mobile/**/*.tsx"
  - "**/*.css"
  - "packages/shared/src/constants/colors.ts"
---

# Branding

- **Primary:** Hot Orange `#FA7000` / RGB(250, 112, 0)
- **Secondary:** Pure White `#FFFFFF`
- **Warm Surface:** `#FFF8F2` (light orange tint for alternating sections)
- **Dark Section:** `#1A1A1A` (features section)
- **Tone:** Balance between fun/relatable and serious
- Colors apply everywhere: app, website, merch, social media
- **Never hardcode colors/spacing** — always use `@carrot/shared/constants` (mobile) or CSS vars (landing page)

## Landing Page Typography

- **Display:** Bricolage Grotesque (Google Fonts, variable, weight 400-800)
- **Body:** DM Sans (Google Fonts, weight 400-600)
- Loaded in `apps/web/src/layouts/Layout.astro`
- Mobile app uses system fonts for now (customizable later via `@carrot/shared`)