# Colors & Fonts

## Colors & Fonts

**Files:** `src/styles/theme.css`, `src/config/fonts.json` · **Skill level:** Beginner

A rebrand in Ecozen is a handful of values, not a search-and-replace. Every component uses named color tokens, so changing a token changes it everywhere. Ecozen has one light palette; there is no dark mode.

### Brand And Surface Colors
Open `src/styles/theme.css`. The colors are at the top, in the `@theme inline` block:

```css
/* === PRIMARY BRAND === */
--color-primary: #DDEB3B;        /* citrus accent: buttons on photos, icons, highlights */
--color-primary-deep: #4F5A0A;   /* accent tone for text on light surfaces */
--color-secondary: #1E4A44;      /* deep teal-green */
--color-accent: #EFF3EC;         /* mint-grey surface: cards, bands */
/* === BACKGROUNDS === */
--color-body: #FFFFFF;           /* main page bg */
--color-body-dark: #0E1311;      /* ink: footer, dark panels */
/* === TEXT === */
--color-text-dark: #0E1311;
--color-text-muted: #5E6560;
--color-text-light: #FFFFFF;
/* === BORDERS === */
--color-border-light: #E3E8E0;
--color-border-dark: #0E1311;
/* === UTILITY === */
--color-dark: #0E1311;
--color-light: #FFFFFF;
```

| Token                  | Used for                                                       | Tailwind classes                 |
| ---------------------- | -------------------------------------------------------------- | -------------------------------- |
| `--color-primary`      | Accent buttons, icons, slider and progress bars, highlights   | `bg-primary`, `text-primary`     |
| `--color-primary-deep` | The accent as text on white or light surfaces                  | `text-primary-deep`              |
| `--color-secondary`    | Deep green details                                             | `bg-secondary`, `border-secondary` |
| `--color-accent`       | Soft surface behind cards, form panels, and chips             | `bg-accent`                      |
| `--color-body`         | Page background                                                | `bg-body`                        |
| `--color-body-dark`, `--color-dark` | The top bar, the footer, dark panels, and dark buttons | `bg-body-dark`, `bg-dark`    |
| `--color-text-dark`    | Headings and the default text color                            | `text-text-dark`                 |
| `--color-text-muted`   | Secondary text: descriptions, notes, and small labels          | `text-text-muted`                |
| `--color-text-light`   | Text on dark backgrounds                                       | `text-text-light`                |
| `--color-border-light` | Borders and dividers                                           | `border-border-light`            |

<Aside type="tip" title="Picking an accent">
  The accent is a bright color with **dark** text on it (the accent buttons use
  `text-text-dark`). If your brand color is dark, the button text will be hard
  to read: pick a light tint for `--color-primary`, and use your darker brand
  color for `--color-primary-deep` and `--color-secondary`. Aim for a contrast
  of at least 4.5:1 between text and its background.
</Aside>

### Button Colors
Buttons in content files take their color from `variant` and `class`:

| You write                          | Button                                  |
| ---------------------------------- | --------------------------------------- |
| `variant: "fill"`                  | Dark button with light text             |
| `variant: "fill"`, `class: "btn-accent"` | Accent (`--color-primary`) button with dark text |
| `variant: "fill"`, `class: "btn-light"`  | White button with dark text, for dark or photo backgrounds |
| `variant: "outline"`               | Outlined button that fills dark on hover |
| `variant: "text"`                  | Underlined text link                    |

See [Button Options](/ecozen/customization/common-changes/#button-options) for every option.

### Fonts
Ecozen uses **Inter Tight** for both body text and headings, and **IBM Plex Sans Arabic** for Arabic text. All are set in `src/config/fonts.json`, one entry per role:

```json
{
  "name": "Inter Tight",
  "variants": [
    { "style": "normal", "weight": "400" },
    { "style": "normal", "weight": "500" },
    { "style": "normal", "weight": "600" }
  ],
  "preload": false,
  "display": "swap",
  "cssVariable": "--font-primary",
  "provider": "google",
  "subsets": ["latin"],
  "fallback": "sans-serif"
}
```

The first entry (`--font-primary`) is the body font; the second (`--font-secondary`, weights 500 and 600) is used for headings, the logo text, and the footer wordmark. The third (`--font-arabic`) has `"languages": ["ar"]`, so it loads only on Arabic pages. To change a font, replace `"name"` with any [Google Fonts](https://fonts.google.com/) family name and keep its `cssVariable`. List only the weights you use: every weight is an extra file to download. Astro downloads the font files at build time and serves them from your own site.

| Field         | What it does                                                                               |
| ------------- | ------------------------------------------------------------------------------------------ |
| `name`        | Font family name, exactly as it is written on the provider's site                          |
| `variants`    | The styles and weights to include                                                          |
| `cssVariable` | `--font-primary` for body text, `--font-secondary` for headings. Don't rename these        |
| `provider`    | `google` (default), `fontsource`, `bunny`, `fontshare`, or `local` for your own files      |
| `preload`     | `true` loads the font earlier                                                              |
| `subsets`     | Character sets, for example `["latin", "latin-ext"]` for accented languages                |
| `fallback`    | Font used while yours loads                                                                |

### Type Scale
Heading sizes are calculated from two numbers in `theme.css`:

```css
--text-base: 1rem;         /* body text size (16px) */
--text-base-scale: 1.25;   /* each heading level is 1.25× the one below */
--text-base-sm: calc(var(--text-base) * 0.9);  /* base size on small screens */
```

Raise `--text-base-scale` for bigger headings, or lower it for a quieter look. `h1` to `h6` and the large `display` sizes all follow. `--text-wordmark` sets the size of the large name at the bottom of the `wordmark` footer.

### Breakpoints
Screen widths where the layout changes, also in `theme.css`:

| Name | Width  |
| ---- | ------ |
| `sm` | 540px  |
| `md` | 768px  |
| `lg` | 1024px |
| `xl` | 1320px |

### Do It With AI
```text
Rebrand the colors. Accent [HEX], dark brand color [HEX]. In src/styles/theme.css update
--color-primary, --color-primary-deep, and --color-secondary. Keep dark text readable on the
accent buttons and at least 4.5:1 contrast for --color-primary-deep on white. Then replace
Inter Tight with [FONT] in both entries of src/config/fonts.json, keeping the cssVariable values,
weights, and fallback.
```