# ACiD Studio — Design System

> *"Le raccourci digital premium."* — A Swiss portfolio & web-agency brand by Anthony Chavez.
> This design system is a curated, self-contained port of the production ACiD Studio codebase
> (Astro 5 + Tailwind v4 + React 19 islands) into design-friendly tokens, cards and UI kits.

---

## 1. What is ACiD Studio?

ACiD Studio is a Swiss one-person web agency (Lausanne / online) offering three packaged
website tiers — **Express · Pro · Prestige** — plus on-demand custom builds. The brand is
built around one loud idea: **AUDACE** (boldness). Every page shouts through a
near-neon **acid-green** (`#c8f135`) punched against deep ink (`#111`) and glassmorphic
white navigation. The voice is French-first, self-assured, manifesto-like — selling speed,
craft and a "shortcut" through the usual agency bloat.

**Products represented in this system:**
1. **Marketing site** (`frontend/*.astro`) — public portfolio, pricing, blog,
   tunnel checkout. Built with Astro 5 + Tailwind v4 + React 19 islands.
2. **Dashboard Admin** (`frontend/src/pages/admin/*`) — CRUD clients/orders/invoices/quotes/subscriptions.
3. **Portal Client** (`frontend/src/pages/portal/*`) — order timeline, invoices, quote signature,
   Stripe checkout, profile.
4. **Remotion videos** (`remotion/*`) — 15s brand ads using the same type + acid palette.

---

## 2. Sources

All content in this system was extracted from:

- **GitHub repo:** `chavezapro-glitch/Acid-Studio` (private, branch `main`)
  - `figma-plugin/tokens.json` — W3C design tokens v2.1 (**source of truth**)
  - `frontend/src/styles/global.css` — Tailwind v4 `@theme {}` + generated token block
  - `frontend/src/styles/main.css` — legacy variables + full public-site styles
  - `frontend/src/components/ui/*.tsx` — shadcn-based primitives (Button, Badge, Card, GlassButton, PricingCard, PricingTab, TunnelPlanSelector)
  - `frontend/src/components/PromoBanner.tsx` — acid banner
  - `frontend/src/components/blocks/pricing-section.tsx` — tiered pricing
  - `frontend/public/images/*` — SVG icons + logos (imported into `assets/`)
  - `CLAUDE.md` — internal design-system + sprint history (47 KB, extremely detailed)
  - `docs/ACID_STUDIO_MASTER_PRD.md` — 199 KB PRD (not imported — on-demand)

---

## 3. Index — What lives here

| File / folder | Purpose |
|---|---|
| `README.md` | You are here — overview, content, visual, iconography |
| `SKILL.md` | Agent-skill manifest (works in Claude Code) |
| `colors_and_type.css` | CSS variables — colors, type, spacing, radii, shadows, easings |
| `assets/logos/` | `Logo In line.svg` — primary wordmark |
| `assets/logos_brand/` | Stack badges — ACiD, Adobe Lightroom, Photoshop, Infomaniak, VSCode |
| `assets/icons/` | 19 brand SVG icons (nav + services + social) |
| `preview/` | Small HTML cards shown in the Design System tab |
| `ui_kits/marketing/` | Marketing-site UI kit (navbar, hero, pricing, cards, footer) |
| `ui_kits/dashboard/` | Admin & portal UI kit (sidebar, table, modal, timeline) |

---

## 4. Content Fundamentals

### Language & tone
- **Primary: French (Suisse).** Secondary: English, Spanish. The three locales ship from the same files;
  FR is the canonical voice.
- **Tone:** manifesto, confident, slightly cocky. Shorts sentences. One-word lines. Uppercase hero words.
- **Voice:** first-person "je" for the founder, second-person "vous" for the prospect. Never "nous" fake-plural.
- **Capitalisation:** sentence-case in body, **UPPERCASE** reserved for hero words (`AUDACE`, `BOLDNESS`, `AUDACIA`)
  and eyebrow labels (`TARIFS`, `RÉALISATIONS`).
- **Brand verbatim:** "**Digital Shortcut**", "**Vibe Codeur**", "**Le raccourci digital premium**",
  "Sans frais cachés", "TVA non incluse", "hébergement inclus".
- **No emoji in marketing copy.** Emoji appears *only* in admin UI (💳 Payer, ✅ etc.) and internal status strings.
- **No filler.** Every word earns its place.

### Typical copy examples (verbatim from repo)

> **Hero (blog):** CODE &amp;<br>**AUDACE**
>
> **Opening line (bienvenue blog):** *Le web ne manque pas de sites. Il manque d'**audace**.*
>
> **Manifesto quote:** *"La simplicité est la sophistication suprême." — Léonard de Vinci*
>
> **Promo banner:** {promo.text} → {promo.cta} →
>
> **Price footnote:** Tarifs en CHF · TVA non incluse · Sans frais cachés

### Naming & capitalisation conventions
- Brand name is **ACiD Studio** — lowercase `i`, always. (Notice the logo wordmark keeps this casing.)
- Plan names: **Express · Pro · Prestige** (title-case, visible names).
  **DB values differ** and must never appear in UI: Express=`basic`, Pro=`standard`, Prestige=`superior`.
- Eyebrow labels before H2: `TARIFS`, `RÉALISATIONS`, `SERVICES`, `BLOG`.
- Button CTAs: imperative, short — "Créer mon site", "Voir les tarifs", "Signer le devis".

---

## 5. Visual Foundations

### Color vibe
Ultra-contrast. Three-color system: **acid #c8f135 + ink #111 + white #fff**, with `#fafafa` as
page-breath surface and `#f5f5f0` as an editorial blog surface. Blue `#0c5bd3` is a *secondary* link
hue on dashboard/admin only — never on marketing. Grays are neutral and cool (`#f5f5f5`, `#e5e5e5`,
`#767676`, `#6b7280`). Semantic success uses a separate `green-*` scale — do **not** confuse acid with success green.

### Typography
Two fonts do 95 % of the work:
- **Outfit** — headings, hero, display. Weights 600–900. Negative letter-spacing (`-0.02em` to `-3px` on hero).
- **Inter** — body, UI. Weights 400–800.
- **JetBrains Mono** — dates, code blocks only.
- **Zeyada** — hand-script, used *exclusively* on about-section image captions (never anywhere else).

### Spacing
4-based scale: **4, 8, 12, 16, 24, 32, 48, 64, 96 px**. Sections on the public site use `padding: 80px 0` (60px mobile). Container max-width `1240px`, horizontal padding `40px` desktop / `24px` tablet / `20px` mobile.

### Backgrounds
- Default: white or `#fafafa`.
- Blog listing: editorial `#f5f5f0`.
- Dark sections (scroll-cinematic, Express pricing card): `#111`.
- **No gradients for decoration** except a single radial "orb" behind Express card:
  `radial-gradient(circle, rgba(200,241,53,0.1) 0%, transparent 65%)`.
- Service cards use a subtle linear `145deg #ffffff → #f5f5f5`.
- Edge fades on the project marquee: `linear-gradient(to right, #f9fafb 20%, transparent)`.
- No hand-drawn illustrations. No repeating patterns. No textures.

### Corner radii
`tag:4 · btn:8 · panel:10 · card:12 · table:16 · modal:20 · pill:9999`.
Marketing cards often use 20–25px (`--border-radius-lg: 20px`, `--border-radius-xl: 25px`), pricing cards `rounded-3xl` (24px), service cards `24px`. **Pills for all CTAs** except shadcn buttons (`rounded-md`).

### Shadows
Three tiers — `subtle / card / elevated`:
- `--sh-subtle:   0 2px 8px rgba(0,0,0,0.06)`
- `--sh-card:     0 8px 24px rgba(0,0,0,0.10)`
- `--sh-elevated: 0 20px 60px rgba(0,0,0,0.15)`

Plus a signature **glass** multi-layer shadow and an **inner** highlight on cards:
`inset 0px 3px 0px 0px rgba(255,255,255,1)` (project + testimonial cards).

Image cards in the about section use a **dramatic, directional** multi-shadow stack (6 stops, offset left-down).

### Glassmorphism (signature)
Navbar, primary CTA and all "floating" buttons use the same recipe:
```
background: rgba(255,255,255,0.78);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(0,0,0,0.11);
box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 2px 10px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
```
Never add `overflow:hidden` or a white `::before` gradient on glass — documented footgun.

### Hover / press states
- Buttons: `translateY(-1px)` + slight bg-opacity bump (0.78 → 0.92) + shadow grows.
- Press: `translateY(0)` + shadow shrinks (no scale-down). Transition `0.2s ease`.
- Cards: `translateY(-8px) scale(1.02)` + shadow grows. Easing `cubic-bezier(0.175, 0.885, 0.32, 1.275)`.
- Nav icons: `scale(1.28)` + tooltip fade-in underneath.
- Acid-green logo hover (footer): the two A's transition to `#c8f135` — entry 0.25s snap, exit 1s ease.
- Spotlight carousel cards at rest: `opacity:.28 scale(.97)`; hover: `opacity:1 scale(1.03) translateY(-6px)`.

### Borders
- Cards: `1.5px solid #f2f2f2` (light) or `1.5px solid #e5e7eb` (explicit inline — *never* use Tailwind `border` which is 1px).
- Glass buttons: inner `::after` 1px `rgba(0,0,0,0.11)`.
- Prose blockquote: `4px solid var(--acid)` on the left edge.
- Navbar container: `1px solid rgba(0,0,0,0.08)`.

### Animation & easings
- Default transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` on `button, a, input`.
- Hero reveal: `hero-fade-up 0.6s cubic-bezier(0.16,1,0.3,1)` — fade + `translateY(30px)` + blur clear.
- Spring/snap-back (pricing badge): `cubic-bezier(0.34, 1.56, 0.64, 1)`.
- Bouncy cards: `cubic-bezier(0.175, 0.885, 0.32, 1.275)`.
- Scroll-cinematic services: 500vh sticky, palette swap via overlay fade 600ms.
- Status dot: infinite pulse 1.5s on green dot.
- **prefers-reduced-motion** respected globally — all durations drop to 0.01ms.

### Transparency & blur
Used sparingly:
- Navbar: `rgba(255,255,255,0.28)` + `backdrop-filter: blur(16px)`.
- Glass buttons: `rgba(255,255,255,0.78)` + `blur(14px) saturate(160%)`.
- Marquee fades: opaque → transparent gradients on section edges.

### Layout rules
- Fixed navbar always centered, `top: 0` (or `top: banner-height` when PromoBanner shown).
- PromoBanner fixed at z-60 above navbar.
- Floating CTA: bottom-right `64px 20px`.
- Section rhythm: `padding: 80px 0` → `60px 0` mobile.
- Section headers `text-align: center`, eyebrow chip above H2, `margin-bottom: spacing-xl (44px)`.

### Imagery color vibe
Warm, human, unfiltered. Hero profile pic gets `filter: contrast(1.08) saturate(1.1)` for sharpness. No B&W, no duotone, no grain. Project thumbnails have `box-shadow: 0 10px 16px -3px rgba(0,0,0,0.25)` inside the card.

---

## 6. Iconography

### Systems in use
1. **Custom SVG set** (`assets/icons/`) — 19 brand-native icons shipped in `frontend/public/images/`.
   Style: **stroke-only, 1.5–2px weight, round linecaps**, 24×24 viewBox, `currentColor` for stroke.
   Covers nav (`house`, `house-line`, `coffee`, `article`, `email`, `close`), services (`brand-icon1/2`, `design-icon1/2`, `product-icon1/2`, `web-icon1/2`), and social (`dribbble`, `instagram`, `twitter`).
2. **Lucide React** — primary icon library for React islands (PromoBanner uses `<X>`, admin/portal
   dashboard uses the full Lucide set). Available via `lucide-react` package — use CDN ESM
   `https://unpkg.com/lucide-static@latest/icons/<name>.svg` for static HTML.
3. **Brand/stack logos** (`assets/logos_brand/`) — Photoshop, Lightroom CC, Infomaniak, VSCode — used as decorative competency badges on "About / Services".
4. **Material Symbols** — a single file is imported (`account-circle.svg`, Streamline Rounded). Used in dashboard avatars only.

### Emoji usage
- **Public marketing: 0 emoji.** Never.
- **Admin UI only:** `💳 Payer`, `✅`, `⚠️`, status strings. Kept inline in JS template literals, not in CMS copy.
- **No unicode pseudo-icons** (no `→` in place of an arrow SVG, except inside CTA text strings where it reads as punctuation).

### When to draw new icons
Match the existing stroke set (stroke 1.5–2px, round caps, 24×24). If you can't match, fall back to Lucide. Do **not** generate filled/duotone icons — they clash with the current vocabulary.

---

## 7. Quick tokens summary

| Token | Value |
|---|---|
| `--acid` | `#c8f135` |
| `--ink` | `#111111` |
| `--acid-text` | `#1a2000` |
| `--blue` | `#0c5bd3` |
| `--font-heading` | Outfit |
| `--font-body` | Inter |
| `--fs-display / h1 / h2 / h3 / body` | 52 / 44 / 30 / 20 / 16 |
| `--r-pill / card / btn` | 9999 / 12 / 8 |
| `--sh-card` | `0 8px 24px rgba(0,0,0,0.10)` |

**Font availability note:** Outfit, Inter, JetBrains Mono and Zeyada are all free on Google Fonts —
the system loads them from Google Fonts with `display=optional` in the source project.
If a stricter offline build is needed, request original TTFs — the repo does **not** ship them.