# OVERVIEW — Slide Deck design system (machine-readable spec)

> Published at `/OVERVIEW.md` (Vercel reserves `/README.md` as project metadata, so the entry document uses this name instead).

Purpose: reproduce this design system in any new Next.js project. Audience: LLM coding agents. Style: telegraphic, high signal density, zero rhetoric.

## Origin

Extracted from a Next.js 16 editorial deck. All client-specific branding, password protection, custom cursor, and content-specific slides removed. Flat101 + Indra co-branding retained per request.

## Stack (fixed, do not substitute)

- Next.js 16 (App Router, RSC).
- React 19.
- TypeScript strict.
- Tailwind CSS v4 via `@tailwindcss/postcss`.
- `motion` (motion/react, the post-framer-motion package).
- `lenis` for smooth scroll.
- `gsap` + `@gsap/react` for scroll-scenes (optional).
- Fonts: `DM_Serif_Text` (display, italic) + `Nunito_Sans` (UI) via `next/font/google`.

## File map

| Path | Role |
|---|---|
| `STACK.md` | exact dependency versions + scripts |
| `INSTALL.md` | bootstrap commands, copy order |
| `RULES.md` | design laws (color, type, layout, register) for editorial slide decks |
| `MOTION.md` | easing/duration catalog, animation patterns |
| `ANTIPATTERNS.md` | what never to do |
| `PRODUCT-UI.md` | **added v1.0.2** — product UI variant: app shell, PageHeading, EntityListView, sub-tabs with "Próx." badge, live preview pane, soft-delete trash, defensive migrations, Spanish-first copy rules. Apply for dashboards / admin tools / SaaS UI, not for slide decks. |
| `files/globals.css` | full token system; paste into `app/globals.css` |
| `files/layout.tsx` | root layout; no cursor, no auth |
| `files/page.example.tsx` | minimal deck page |
| `files/tsconfig.json` | strict + `@/*` alias |
| `files/postcss.config.mjs` | Tailwind v4 plugin |
| `files/next.config.ts` | empty (placeholder) |
| `files/package.deps.json` | dependency excerpt |
| `components/*.tsx` | atomic primitives (paste into `components/`) |
| `templates/*.tsx` | slide patterns (paste into `components/slides/`) |
| `logos/flat101.svg` | currentColor-aware monogram |
| `logos/indra.png` | raster partner logo |
| `logos/README.md` | usage notes + attribution |

## Version

Current: **v1.0.2** (2026-05). Source of truth is `SKILL.md` frontmatter `version:` key. Bumps:

- **1.0.0** — initial extraction from editorial deck.
- **1.0.1** — minor doc tweaks (no code).
- **1.0.2** — adds `PRODUCT-UI.md` (variant for dashboards / admin tools). Patterns distilled from `suaas.flat101.business`: app shell + sidebar, PageHeading variants, EntityListView, sub-tabs with "Próx." badge, live preview pane, soft-delete trash, anti-SSRF baseline, Spanish-first copy rules (never em-dash, full diacritics, typographic quotes).

## Read order for an implementing agent

1. `STACK.md` → `INSTALL.md` (set up project).
2. `RULES.md` → `MOTION.md` → `ANTIPATTERNS.md` (load design laws).
3. `files/globals.css` (copy verbatim).
4. `components/utils.ts` + `components/format.ts` (paste first; everything depends on `cn`).
5. `components/` rest (paste all).
6. `templates/` (paste all).
7. `files/layout.tsx` + `files/page.example.tsx` (wire entry).
8. `logos/` → `public/logos/`.

## Hard constraints (override base instincts)

- Never use `Inter` font. Use DM Serif Text (display) + Nunito Sans (UI).
- Never use `#000` or `#fff` directly. Use `--ink-900` / `--paper` (tinted).
- Never use `ease-in` for UI animations. Use `ease-out` for entries, `ease-in-out` for movement.
- Never use `transition: all`. Specify properties.
- Single accent color: `#facc0d` (`--accent-500`). No second saturated color.
- Display headlines: DM Serif Text **italic**, color `--accent-500` on dark slides, `--ink-900` on light.
- Slides are `min-h-screen`, padding `clamp(24px,6vw,128px)`, max-width `1664px`.
- Custom cursor is NOT included. Do not add one.
- Password / login / middleware NOT included. Do not add unless asked.

## Identity tokens you may rebrand

- Replace logo strip (`components/logo-strip.tsx`) per project. Default ships Flat101 + Indra.
- Accent hue (`--accent-500`) is the brand variable. Change consistently across all `--accent-*` steps.
- Heading font may swap to another serif (e.g. Fraunces, EB Garamond) but keep italic for display.

## What this system optimizes for

Slide-based long-scroll narrative decks. Editorial typography. Single saturated accent on neutral ground. Cinematic entries (450–900ms reveals). Keyboard-driven navigation. Snap-scroll feel via Lenis. Not a SaaS dashboard. Not a marketing landing in the typical sense.