# ACiD Studio — Agent Skill Manifest
> This file teaches Claude Code (and any AI agent) how to work correctly inside the ACiD Studio design system.
---
## Identity
**Brand:** ACiD Studio — Swiss one-person web agency by Anthony Chavez (Lausanne).
**Stack:** Astro 5 + Tailwind v4 + React 19 islands + Remotion videos.
**Design system root:** This project (`colors_and_type.css`, `assets/`, `ui_kits/`).
---
## Core rules
1. **Source of truth for tokens:** `colors_and_type.css` — never hardcode colors, radii, shadows or spacing. Always use `var(--token)`.
2. **No hardcoded `#fff` / `#111` / `#fafafa`** in preview cards or components — use `var(--bg-1)`, `var(--fg-1)`, `var(--bg-2)`.
3. **Dark mode:** `[data-theme="dark"]` is set on `` by `theme-toggle.js`. Every preview card must include `` and override critical backgrounds under `[data-theme="dark"]`.
4. **Glassmorphism recipe:** `background: var(--glass)` + `backdrop-filter: blur(28px) saturate(200%)` + `border: 1px solid var(--glass-border)`. Never add `overflow:hidden` on glass containers.
5. **Typography:** Headings = Outfit (`var(--font-heading)`), body = Inter (`var(--font-body)`), code/dates = JetBrains Mono (`var(--font-mono)`), script captions only = Zeyada.
6. **No emoji in marketing copy.** Admin UI only.
7. **No filler content.** Every element earns its place.
8. **Brand name:** ACiD Studio — lowercase `i`, always.
9. **Language:** French (Suisse) primary. Tone: manifesto, confident, short sentences.
10. **Buttons:** Pills (`border-radius: 9999px`) for all CTAs. `rounded-md` only for shadcn primitives.
---
## File map
| Path | Role |
|---|---|
| `colors_and_type.css` | All CSS tokens — colors, type, spacing, radii, shadows, easings |
| `theme-toggle.js` | Drop-in dark/light toggle — wire with `[data-theme-toggle]` button |
| `assets/logos/Logo In line.svg` | Primary wordmark |
| `assets/icons/*.svg` | 19 stroke icons (24×24, currentColor) |
| `preview/*.html` | Design System tab cards — small isolated HTML previews |
| `ui_kits/portfolio/` | Full portfolio UI kit (React + Babel JSX) |
---
## Preview card conventions
Every `preview/*.html` must:
- Link `../colors_and_type.css`
- Use `var(--bg-1)` / `var(--fg-1)` as base (not hardcoded)
- Include `` if it has interactive states
- Add `[data-theme="dark"] body { background: #0c0c0a; color: #f4f4f0; }` override when needed
- Keep under ~50 lines — one concept per card
---
## Icon usage
Use CSS `mask` for theme-adaptive icons (avoids `filter:invert` side-effects):
```css
.ic {
width: 18px; height: 18px;
background-color: currentColor;
-webkit-mask-image: url(../assets/icons/house.svg);
mask-image: url(../assets/icons/house.svg);
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
```
---
## Navbar pattern (live reference: acidstudio.ch)
- Floating glass pill, centered, `position: fixed; top: 20px`
- Logo mark (circle) + text links with icons (Accueil / Services / Blog / Connexion) + CTA "Réserver un Appel"
- Icons: stroke SVGs from `assets/icons/`, rendered via CSS mask
- CTA: `background: var(--fg-1); color: var(--bg-1); border-radius: 9999px`
- Glass recipe: `blur(28px) saturate(200%)` + inner highlight shadow
---
## Glassmorphism shadow stack
```css
/* Light */
box-shadow:
0 1px 0 rgba(255,255,255,0.55) inset,
0 -1px 0 rgba(0,0,0,0.04) inset,
0 10px 40px rgba(0,0,0,0.08),
0 2px 8px rgba(0,0,0,0.04);
/* Dark */
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 -1px 0 rgba(0,0,0,0.4) inset,
0 10px 40px rgba(0,0,0,0.45),
0 2px 8px rgba(0,0,0,0.3);
```
---
## Key tokens (quick ref)
| Token | Value |
|---|---|
| `--acid` | `#b8975a` |
| `--ink` | `#111111` |
| `--acid-text` | `#1a1000` |
| `--font-heading` | Outfit |
| `--font-body` | Inter |
| `--font-mono` | JetBrains Mono |
| `--r-pill` | `9999px` |
| `--r-card` | `12px` |
| `--sh-card` | `0 8px 24px rgba(0,0,0,0.10)` |
| `--duration-base` | `240ms` |
| `--ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` |