> For the complete documentation index, see [llms.txt](https://bhplugin.gitbook.io/tapotik-ai-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bhplugin.gitbook.io/tapotik-ai-angular/customization.md).

# Customization

**Tapotik AI** is fully token-driven, so rebranding is fast and centralized. Here's how to make it yours.

***

## 🖌️ Changing the Brand

Follow these four steps to rebrand the whole template:

{% stepper %}
{% step %}

### Colors

Edit the CSS variables in `src/styles.css` (both `:root` and `.dark`).
{% endstep %}

{% step %}

### Site metadata

Update `siteConfig` in `src/app/core/config/site.ts` (name, URL, socials).
{% endstep %}

{% step %}

### Logo & icons

Replace the mark in `src/app/shared/site/logo.ts` and `public/icon.svg`, then regenerate the matching icon set from it:

* `public/favicon.ico`
* `public/apple-icon.png`
* `public/icon-192.png`
* `public/icon-512.png`

These are used by `public/manifest.webmanifest`.
{% endstep %}

{% step %}

### Fonts

Swap fonts in `src/index.html` (any Google font via its `<link>`) and the `--font-*` names in `src/styles.css`.
{% endstep %}
{% endstepper %}

***

## 🎨 Design Tokens

Design tokens are CSS variables in `src/styles.css`, mapped into Tailwind v4 via `@theme inline`.

| Token          | Dark      | Light     |
| -------------- | --------- | --------- |
| `--primary`    | `#5B5BF7` | `#5B5BF7` |
| `--secondary`  | `#8B5CF6` | `#8B5CF6` |
| `--accent`     | `#00F5D4` | `#00C7AC` |
| `--pink`       | `#FF4ECD` | `#FF4ECD` |
| `--background` | `#050816` | `#F7F8FC` |
| `--card`       | `#0E1325` | `#FFFFFF` |

{% hint style="info" %}
The brand color is single-sourced. Use the `styles.css` tokens for CSS/Tailwind classes; for SVG fills and charts, use `brandHex` from `src/app/core/utils/brand-colors.ts`.
{% endhint %}

***

## ✨ Custom Utilities

The template adds a set of utility classes on top of Tailwind:

* **Surfaces:** `glass`, `glass-strong`, `border-gradient`
* **Text:** `text-gradient`, `text-gradient-pink`, `shimmer-text`
* **Backgrounds:** `bg-grid`, `bg-dots`
* **Layout:** `container-wide`
* **Animations:** `animate-aurora`, `animate-float`, `animate-marquee`, and more.

***

## 🌗 Dark / Light Mode

Theming uses the **`.dark` class strategy** (via `ZardDarkMode`, `src/app/shared/services/dark-mode.ts`), not a media query. The `@custom-variant dark` in `styles.css` drives all dark-mode styling. Both themes are fully designed — the template is dark-first.

***

## 📝 Editing Content

All copy and mock content is centralized in **`src/app/core/data/data.ts`** — blog posts, job openings, docs navigation, pricing tiers, testimonials, and more. Dynamic routes (`blog/:slug`, `careers/:slug`) key off this file via `getPrerenderParams` (`src/app/app.routes.server.ts`), so adding an entry there automatically generates its page.

Navigation structure (navbar + footer) lives in `src/app/core/config/site.ts`.

***

## 🧱 Adding Components

`src/app/shared/components/*` are **ZardUI** primitives (shadcn/ui-style components for Angular, on the **Angular CDK**). Add new primitives with:

```bash
npx zard-cli@latest add [component]
```

`components.json` drives the registry configuration.

When adding pages, follow the existing pattern: a standalone `XxxPage` component in `src/app/features/<area>/<page>/xxx-page.ts`, lazy-loaded from that area's routes file with its `title` and `data.description`.

***

## 🔌 Wiring a Real Backend

When you're ready to go beyond UI-only, these are the swap-in points:

* **Forms** — route submits through `simulatedSubmit()` (`src/app/core/utils/simulated-submit.ts`); replace its `setTimeout` with a real request. Pair with `SubmitButton` (`shared/ui/submit-button.ts`) for the pending state.
* **Social links** — the URLs in `siteConfig.links` are placeholders; replace them.
* **Copy actions** — go through `injectCopyWithToast()` (`src/app/core/utils/clipboard.ts`).