# Colors & Fonts

## Colors & Fonts

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

Components use named color tokens, so changing a token in one file changes it across the site.

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

```css
@theme {
  /* Brand colors */
  --color-primary: #CCF664;
  --color-accent: #0f3d3a;

  /* Surface colors */
  --color-body: #FFFFFF;
  --color-theme-dark: #193133;
  --color-theme-light: #F5F6F7;
  --color-theme-cream: #FAF8F2;

  /* Content colors */
  --color-dark: #1e1e1e;
  --color-text-default: #5f5f5f;
}
```

| Token                    | Used for                                                    | Tailwind classes                  |
| ------------------------ | ----------------------------------------------------------- | --------------------------------- |
| `--color-primary`        | Primary buttons, highlights, accents                        | `bg-primary`, `text-primary`      |
| `--color-accent`         | Deep accent color                                           | `bg-accent`, `text-accent`        |
| `--color-body`           | Page background                                             | `bg-body`                         |
| `--color-body-secondary` | Alternate page background                                   | `bg-body-secondary`               |
| `--color-theme-dark`     | Dark sections and dark buttons                              | `bg-theme-dark`                   |
| `--color-theme-light`    | Light gray panels and cards                                 | `bg-theme-light`                  |
| `--color-theme-cream`    | Warm background of the corporate homepage                   | `bg-theme-cream`                  |
| `--color-section-warm`   | Warm surface of some section cards and panels               | `bg-section-warm`                 |
| `--color-dark`           | Headings and strong text                                    | `text-dark`                       |
| `--color-light`          | Text on dark backgrounds                                    | `text-light`                      |
| `--color-text-default`   | Body text                                                   | `text-text-default`               |
| `--color-border-light`, `--color-border-dark`, `--color-border-primary`, `--color-border-input` | Borders, dividers, and form fields | `border-border-light`, … |

<Aside type="caution" title="A few colors are not tokens">
  Some colors are written directly: the dark gradients of a few sections and
  the footer shades in `src/styles/footer.css`, and the chart colors in
  `src/content/homepage/english/tax-accounting.md` and
  `src/content/industries/english/-index.md`. After a rebrand, search the
  project for `#193133` and check the footer.
</Aside>

Aim for a contrast of at least 4.5:1 between text and its background. The shipped primary is a light lime, so text on primary buttons is dark.

Consultiz has one color scheme. It has no dark mode switch.

### Fonts
Fonts are set in `src/config/fonts.json`. Each entry is one family:

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

The shipped fonts and where they are used:

| `cssVariable`             | Shipped font   | Used for                                                  |
| ------------------------- | -------------- | --------------------------------------------------------- |
| `--font-primary`          | Inter          | Body text                                                 |
| `--font-secondary`        | Space Grotesk  | Headings                                                  |
| `--font-ternary`          | Funnel Display | Headings on pages that use the alternate heading font (pricing, legal, and several inner pages) |
| `--font-reference-body`   | Poppins        | Body text on the main homepage                            |
| `--font-reference-heading` | Inter Tight   | Headings on the main homepage                             |

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. The font files are downloaded at build time and served 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` | Which role the font fills. Don't rename these                                |
| `provider`    | `google` (default), `fontsource`, `bunny`, or `fontshare`                    |
| `preload`     | `true` loads the font earlier. Use it for one font at most                   |
| `subsets`     | Character sets, for example `["latin", "latin-ext"]` for more accented letters |
| `fallback`    | Font used while yours loads                                                  |

<Aside type="tip">
  To use one font family everywhere, give all five entries the same `name`.
  The main homepage then uses the same fonts as the inner pages.
</Aside>

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

```css
--text-base: 1rem;         /* body text size (16px) */
--text-base-scale: 1.23;   /* each heading level is 1.23× 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.

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

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

### Corner Radius
`--radius-custom` (10px) and `--radius-section` (20px) in `theme.css` set the rounded corners of cards and section panels.