@felan-ai/design-system 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Felan contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,12 @@
+@felan-ai/design-system
+
+Copyright (c) 2026 Felan contributors
+
+The package includes original Felan design tokens, brand guidance, and Felan
+logo/icon artwork. The integration SVGs are included as reference marks for
+their respective services; they remain the trademarks of their owners.
+Personal avatars, generated catalog artifacts, and local tooling are not
+included in the published package.
+
+Geist fonts are referenced from Google Fonts by the distributed CSS. Production
+consumers may use the Geist packages under their own application font policy.

package/README.md

@@ -0,0 +1,81 @@
+# Felan AI — Design System
+
+> Copilots make engineers faster. Felan makes the engineering team faster.
+
+The design system for **Felan** — an agentic engineering platform. It captures the visual language, tone, and component vocabulary for Felan's marketing site (`felan.ai`) and product dashboard (`app.felan.ai`): canonical tokens and HTML/CSS component previews, plus a printable single-page catalog.
+
+The full design spec — palette, typography, spacing, component anatomy, voice and copy rules — lives in [`project/README.md`](project/README.md). The machine-readable contract for coding agents is [`project/SKILL.md`](project/SKILL.md).
+
+## Repository layout
+
+```
+├── catalog.html          ← single-page catalog: readme + every preview, print-ready
+├── project/              ← the design system itself
+│   ├── README.md         ← full design spec (start here)
+│   ├── SKILL.md          ← skill contract for Claude Code / agents
+│   ├── colors_and_type.css  ← canonical tokens + semantic type classes
+│   ├── styles.css        ← entry stylesheet (imports the tokens)
+│   ├── assets/           ← logos, icons, customer & integration marks
+│   ├── templates/         ← reusable customer-facing artifacts, including commercial quotes
+│   └── preview/          ← design-system cards (brand, colors, type, components…)
+└── scripts/repo-browser/ ← local HTTP server for the catalog
+```
+
+## Browse the catalog
+
+The catalog fetches the readme, manifest, and previews at load time, so it must be served over HTTP (opening `catalog.html` from `file://` won't work):
+
+```bash
+scripts/repo-browser/start.sh    # background; prints the chosen localhost URL
+scripts/repo-browser/status.sh
+scripts/repo-browser/stop.sh
+```
+
+Or run it in the foreground with `scripts/repo-browser/serve.sh`. By default the OS assigns a free local port, so parallel repo browsers do not overlap. Pass a preferred starting port if needed: `scripts/repo-browser/start.sh <port>`. Requires Node ≥ 18, no dependencies.
+
+The catalog mirrors the Claude Design view of this system: the project readme first, then every design-system card grouped by section (Brand, Colors, Components, Spacing, Type).
+
+## npm package
+
+This repository publishes `@felan-ai/design-system`, which contains the
+canonical CSS, tokens, Felan-owned assets, reusable quote template, design
+specification, agent skill, and shared `@shadcn/lint` policy.
+
+```sh
+pnpm add @felan-ai/design-system
+```
+
+```css
+@import "@felan-ai/design-system/styles.css";
+```
+
+The package's HSL-triplet tokens are consumed with `hsl(var(--token))`. The
+distributed CSS loads Geist from Google Fonts; production applications may
+provide the same Geist families locally. Public exports are documented in the
+package README and include `./styles.css`, `./colors_and_type.css`, `./spec`,
+`./skill`, `./assets/*`, `./templates/quote.html`, and
+`./eslint/shadcn`.
+
+See [`docs/consuming.md`](docs/consuming.md) for the complete export table,
+package exclusions, lint limitations, asset policy, and consumer rollout.
+
+The shadcn adapter is intended for Tailwind v4 projects using ESLint 9 flat
+config. It enforces the shared component and token policy but cannot inspect
+plain CSS or decide whether a newly-added theme token belongs in the system.
+`felan-site` is the first compatible pilot; `felan-platform` follows its
+Tailwind 4 migration. `go-to-market` consumes the assets and templates only.
+
+## Print to PDF
+
+1. Open the catalog and wait for the status pill (top right) to read **“All … previews loaded — ready to print”**.
+2. Print → **Save as PDF**.
+3. In Chrome's dialog, enable **More settings → Background graphics** so the dark surfaces and brand colors are kept. Paper size A4 portrait; default margins are fine (the page declares its own).
+
+## Notes
+
+- The design medium is HTML/CSS/JS **prototypes** — reference implementations to match visually, not production code to copy structurally.
+- The reusable commercial quote template lives in `project/templates/quote/`; see its README for
+  placeholders and print instructions.
+- `project/_ds_manifest.json` and `project/_ds_bundle.js` are generated by the design tooling; the catalog renders from the manifest, so regenerating it keeps the catalog in sync.
+- Geist Sans/Mono load from the Google Fonts CDN (see the font note at the end of `project/README.md`).
+- `npm pack --dry-run` and the package verifier are the source of truth for the published file surface; catalog previews and generated metadata are repository-only.

package/lint/eslint-shadcn.mjs

@@ -0,0 +1,35 @@
+import { plugin as shadcn } from "@shadcn/lint";
+import policy from "./shadcn-policy.json" with { type: "json" };
+
+const defaults = {
+  ui: "@/components/ui",
+  note: "Use Felan tokens and component variants. Read @felan-ai/design-system/spec before adding an exception.",
+};
+
+/**
+ * Returns composable flat-config entries. Consumers keep their framework
+ * parser and presets; this adapter only registers the design-system plugin.
+ */
+export default function felanShadcn(options = {}) {
+  const { files = ["**/*.{jsx,tsx}"], settings = {}, rules = {} } = options;
+
+  return [
+    {
+      files,
+      plugins: { shadcn },
+      settings: {
+        shadcn: {
+          ...defaults,
+          ...settings,
+        },
+      },
+      rules: {
+        ...policy.rules,
+        ...rules,
+      },
+    },
+    ...policy.overrides,
+  ];
+}
+
+export { policy };

package/lint/shadcn-policy.json

@@ -0,0 +1,46 @@
+{
+  "rules": {
+    "shadcn/no-restyle": [
+      "warn",
+      {
+        "allow": ["layout"],
+        "contracts": [
+          {
+            "pattern": "^Button$",
+            "allow": ["layout"],
+            "deny": ["w-*", "h-*"],
+            "message": {
+              "layout": "Set Button width on the parent container.",
+              "spacing": "Use a Button size: {{sizes|none defined}}.",
+              "default": "Use an existing Felan Button variant: {{variants|none defined}}."
+            }
+          },
+          {
+            "pattern": "^Card(Content|Header|Footer)$",
+            "allow": ["layout", "spacing"]
+          },
+          {
+            "pattern": "^CardTitle$",
+            "allow": ["layout", "typography"],
+            "deny": ["font-*"]
+          }
+        ]
+      }
+    ],
+    "shadcn/no-raw-colors": "error",
+    "shadcn/no-arbitrary-values": "warn",
+    "shadcn/no-inline-styles": "error",
+    "shadcn/no-unknown-classes": "warn",
+    "shadcn/require-static-classes": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/components/ui/**"],
+      "rules": {
+        "shadcn/no-restyle": "off",
+        "shadcn/no-arbitrary-values": "off",
+        "shadcn/require-static-classes": "off"
+      }
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@felan-ai/design-system",
+  "version": "0.0.0",
+  "description": "Felan design tokens, brand guidance, reusable assets, templates, and lint policy",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felan-ai/design-system.git"
+  },
+  "homepage": "https://github.com/felan-ai/design-system#readme",
+  "bugs": {
+    "url": "https://github.com/felan-ai/design-system/issues"
+  },
+  "style": "./project/styles.css",
+  "sideEffects": [
+    "./project/*.css"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "files": [
+    "project/styles.css",
+    "project/colors_and_type.css",
+    "project/README.md",
+    "project/SKILL.md",
+    "lint",
+    "project/assets/felan-logo.svg",
+    "project/assets/felan-logo.png",
+    "project/assets/felan-icon.svg",
+    "project/assets/felan-icon-192.png",
+    "project/assets/felan-icon-512.png",
+    "project/assets/integrations",
+    "project/templates/quote/README.md",
+    "project/templates/quote/template.html",
+    "LICENSE",
+    "NOTICE",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./project/styles.css",
+    "./styles.css": "./project/styles.css",
+    "./colors_and_type.css": "./project/colors_and_type.css",
+    "./spec": "./project/README.md",
+    "./skill": "./project/SKILL.md",
+    "./lint-policy": "./lint/shadcn-policy.json",
+    "./eslint/shadcn": "./lint/eslint-shadcn.mjs",
+    "./assets/felan-logo.svg": "./project/assets/felan-logo.svg",
+    "./assets/felan-logo.png": "./project/assets/felan-logo.png",
+    "./assets/felan-icon.svg": "./project/assets/felan-icon.svg",
+    "./assets/felan-icon-192.png": "./project/assets/felan-icon-192.png",
+    "./assets/felan-icon-512.png": "./project/assets/felan-icon-512.png",
+    "./assets/integrations/*": "./project/assets/integrations/*",
+    "./templates/quote.html": "./project/templates/quote/template.html",
+    "./templates/quote/README.md": "./project/templates/quote/README.md",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@shadcn/lint": "0.1.5",
+    "@typescript-eslint/parser": "8.40.0",
+    "eslint": "9.30.0",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "@shadcn/lint": ">=0.1.5",
+    "@typescript-eslint/parser": ">=8.40.0",
+    "eslint": ">=9.30.0"
+  },
+  "peerDependenciesMeta": {
+    "@shadcn/lint": {
+      "optional": true
+    },
+    "@typescript-eslint/parser": {
+      "optional": true
+    },
+    "eslint": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "test": "node --test",
+    "pack": "rm -rf .artifacts && pnpm pack --pack-destination .artifacts",
+    "verify:pack": "node scripts/verify-package.mjs .artifacts/felan-ai-design-system-0.1.0.tgz",
+    "check:proposed-version": "node scripts/check-proposed-version.mjs",
+    "verify": "pnpm test && pnpm pack && pnpm verify:pack"
+  }
+}

package/project/README.md

@@ -0,0 +1,260 @@
+# Felan AI — Design System
+
+> **Copilots make engineers faster. Felan makes the engineering team faster.**
+> Felan is an agentic engineering platform — the team layer for AI-native software development: cloud background agents that work inside the tools your team already uses, share team knowledge, follow team guardrails, and improve from feedback.
+
+This design system captures the visual language, tone, and component vocabulary for Felan's marketing site and product dashboard. Use it to design new surfaces, slides, mocks, and interfaces that feel unmistakably *Felan*.
+
+---
+
+## Sources
+
+This system began as a reverse-engineering of the **Bugzy** (QA agent) codebase and brand, then had its palette migrated to Felan's pine-green and its copy/IA rewritten for the platform positioning. It is now the canonical **Felan platform** design system.
+
+- **Visual origin:** the Bugzy web app (Next.js + Tailwind + shadcn/ui) — token structure, warm-neutral ramp, Geist type, orb/glow treatment, component anatomy all carried over and are approved as-is. Those legacy `web/` code paths are historical provenance only; do not treat them as Felan product spec.
+- **Brand:** `assets/felan-logo.svg` / `.png` — the forest-green geometric aperture mark.
+- **Canonical tokens:** `colors_and_type.css`. All extracted assets live in `assets/`.
+
+---
+
+## Products & surfaces
+
+Felan ships two primary surfaces, both represented in this system:
+
+1. **Marketing site** (`felan.ai`) — dark, dense, gradient-glow hero, green brand pop, Geist typography. Section order follows the messaging hierarchy: **Hero** (individual AI gains → team-level delivery) → **Problem** (context, standards, follow-through, guardrails didn't scale with AI) → **Product** (the four differentiators) → **Integrations** → **Proof** (start with a repo; customer logos live here) → **Pricing** → **CTA / Footer**.
+2. **Product dashboard** (`app.felan.ai`) — light/dark responsive, sidebar shell grouped **Work** (Sessions, Activity, Approvals) / **Automate** (Automations, Skills) / **Team** (Agents, Memory) / **Configuration** (Integrations, Models & keys, Settings). Views: sessions, activity, approvals, automations, agents, integrations.
+
+---
+
+## Content fundamentals
+
+**What Felan is:** an agentic engineering platform — the team layer for AI-native software development. Engineers got faster with AI (Claude Code, Cursor, Copilot, Codex, Devin); the team layer around that work — shared context, standards, coordination, autonomy boundaries — did not keep up. Felan gives engineering orgs cloud background agents that work in existing tools, share team knowledge, follow guardrails, and improve from feedback.
+
+**The anchor line:** *Copilots make engineers faster. Felan makes the engineering team faster.*
+
+**The core distinction to teach on every surface** — copilot vs. background agent: one engineer → the team · a person prompts it → events/schedules/delegation trigger it · local chat context → shared team memory · personal autonomy → scoped permissions, approvals, audit logs · advice for a person → work advanced in Slack, tickets, Git, CI, docs.
+
+**Voice:** confident, technical, pragmatic. Calm authority, zero hype. Felan speaks like a senior engineer — it doesn't sell "AI," it says what changes for the team. No exclamation marks.
+
+**Audience:** engineering leaders (CTO / VP Eng / Head of Engineering / Head of Platform) as buyers, AI-forward senior/staff/platform engineers as champions. **Qualify by AI adoption, not headcount** — teams whose engineers adopted AI faster than the team's SDLC adapted. There is no company-size threshold and no QA framing.
+
+**POV:** second-person *you* for benefits; third-person *Felan* as a named teammate (Felan is both the platform and the lead agent). Avoids first-person "we" except in legal/about copy.
+
+**Casing:** Title Case for headlines, sentence case for subheads and UI labels. Short declarative section headers.
+
+**Sentence rhythm:** short, then explanatory.
+- Headline: `Copilots make engineers faster. Felan makes the team faster.`
+- Subhead: `Felan gives your engineering team cloud background agents that carry delegated work forward — with shared team knowledge and guardrails, inside the tools you already use.`
+- Feature title: `Runs in the background`
+- Feature subtitle: `Agents keep delegated work moving when nobody is prompting them.`
+
+**Em-dashes** are a signature punctuation mark — they break up explanatory clauses naturally. Expect 1–2 per paragraph of body copy.
+
+**Emoji:** none in UI chrome, ever. No emoji in headlines, buttons, or empty states.
+
+**Numbers are concrete — but only claims that are structurally true from the brief.** Use: `Start with one repo`, `Works in Slack, GitHub, Linear, Jira`, `Every agent action logged`. Do **not** carry over Bugzy-era proof claims (`5-minute setup`, `No config required`, `SOC2 ready`, `EUR 250/month`, `dev/QA ratio >8:1`, `auto-healed`). Where an illustrative number is needed, mark it as sample copy (see the marketing kit's pricing note). Never invent customer quotes, metrics, or case-study outcomes.
+
+**Categories / eyebrows:** `Agentic engineering platform`, `The gap`, `The product`, `Proof`, `Integrations`, `Pricing`. Short, sentence/title-cased pill above section H2s.
+
+**Naming — hard rules:**
+- **Felan** is the platform *and* the lead agent — one name for both. Wordmark lockup stays **"Felan AI"** (from the domain `felan.ai`); in body copy the name is **Felan** alone. No new wordmark variants.
+- **Bugzy** is the QA agent — the first agent shipped, on its own site `bugzy.ai`. It is *one agent under the Felan canopy*, never the platform. QA may appear as **one example of delegated work among several** (a single row in a mock, an example low on the page) — never as the category, never in a headline.
+- Name agents by **SDLC role**: Developer agent, QA agent, SRE agent, General Purpose agent. No character names or mascots.
+- **Legal footer:** `© 2026 Felan`. No "GmbH," no Berlin/Munich location line — that was fabricated during extraction.
+
+**FAQ answer example:** *"Does Felan replace engineers? No — humans own direction, judgment, and approvals. Felan carries the delegated work between those decisions."*
+
+**Words Felan uses** (and you should too): *background agent, session, delegate / delegation, automation, trigger, guardrails, permissions, approvals, audit log, shared team knowledge, team memory, team layer, SDLC, repo, PR, rollout, context, follow-through.*
+
+**Retire the QA-era vocabulary** (only allowed inside an explicitly-QA example): *coverage gap, regression, triage, auto-heal, flaky, test maintenance, parallel runs, pass rate, "QA that keeps up".*
+
+**Keep avoiding, and now also avoid:** *revolutionary, seamless, cutting-edge, supercharge, unlock, game-changer, magical, solution, ecosystem, synergy, empowers, transforms, "10x"*, and any *"AI-powered / AI-driven / AI-first"* framing — assume the audience knows it's AI; say what changes for the team. Don't position Felan as an orchestrator of other vendors' agents (every agent is company-built), don't imply it replaces engineers (humans own direction, judgment, approvals), and don't lead with security/governance as the hero (guardrails prove adoptability; the hero is team-level productivity).
+
+---
+
+## Visual foundations
+
+### Palette
+
+- **Brand green — `hsl(152 44% 26%)`** is the single accent color. Used for: primary CTAs (`variant="brand"`), hero glow orbs, focus rings, chart-1, active states, sidebar accent. On dark backgrounds it brightens to `hsl(152 46% 34%)`.
+- **Warm neutrals.** The entire neutral ramp is tinted with hue 20–30 (warm) — backgrounds are `hsl(30 10% 95%)` (light) / `hsl(20 10% 7%)` (dark), never pure gray. This warmth is non-negotiable; it's what makes the site feel human rather than enterprise-sterile.
+- **Surface elevation:** three tinted layers (`--surface-1` → `--surface-3`) step up in luminance on light, down on dark. Cards sit on `surface-1`; featured cards sit on `surface-2`.
+- **Status colors:** green (`success`, done/approved), red (`destructive`, reject/high-risk), yellow (`warning`, awaiting approval), blue (`info`, running). In mockups: `/10` background and `/20` border for pills.
+- **Categorical chart palette:** green → teal → blue → amber → violet (5 colors, rotates on integration category cards and pricing tier top-bars).
+
+### Backgrounds — the signature glow
+
+The marketing homepage is dark (`20 10% 7%`) with **two radial gradient orbs**: green-hot from the top, blue from the bottom. Orbs are *always* soft (`hsla(...,0.20)` to `hsla(...,0.14)`), *always* large (600–900px), *always* `pointer-events-none`. No busy patterns, no textures, no hand-drawn illustrations. The hero and final-CTA sections use this treatment; interior sections sit on flat background.
+
+`SectionDivider` between marketing sections is a thin horizontal gradient line (`from-transparent via-white/[0.08] to-transparent`) — subtle, rhythmic, never a solid rule.
+
+### Typography
+
+- **Geist Sans** for everything (display + body). Loaded via `geist` npm in prod; Google Fonts CDN in this system.
+- **Geist Mono** for code, file names, test IDs, timestamps in mockups.
+- Hero H1: `text-[4.5rem]` / 72px, `font-extrabold` (800), `tracking-tight` (-0.02em), `leading-[1.08]`, with the white-to-white/70 gradient text fade applied.
+- Section H2: 36–48px, `font-bold` (700), `tracking-tight`.
+- Body: 16–20px, regular 400, `leading-relaxed` (1.65), color `muted-foreground` for supporting copy.
+- `tracking-tight` is applied aggressively to all display text.
+
+### Spacing & layout
+
+- Container max-width `1400px` at 2xl; consistent `px-4 md:px-6` gutters inside.
+- Section vertical padding: `py-24` (96px) for marketing sections, `py-16 md:py-24` for denser ones.
+- Card grids: 3-column at `lg`, 2-column at `md`, 1-column mobile. Gap `gap-4` or `gap-6`.
+- Feature blocks alternate image/copy with a `lg:order-*` reverse pattern.
+
+### Corner radii
+
+- `--radius: 0.5rem` (8px) — the base. Everything rounds to a multiple of this.
+- Buttons: 6px (`rounded-md`). Cards and surfaces: 12px (`rounded-xl`). Pills / chips / integration tiles: full (`rounded-full` or `rounded-xl` for square tiles). Avatars: `rounded-lg` (not full circles — distinctive choice, e.g. the logo tile in the Slack mockup is `rounded-lg`).
+
+### Borders
+
+- On dark: `border-white/[0.06]` to `border-white/[0.10]` — hair-thin, barely-there.
+- On light: `border-border` (`hsl(30 10% 90%)`) — warm gray, 1px.
+- Hover raises border opacity (`hover:border-white/[0.10]`) rather than changing color.
+
+### Shadows & elevation
+
+- Mostly flat. Shadow is reserved for:
+  - Primary brand buttons: `shadow-sm`
+  - Hover-lift on cards: `hover:shadow-md`
+  - Featured pricing card: `shadow-xl` + `ring-2 ring-brand/20`
+- Dark mode relies almost entirely on *surface luminance steps* instead of shadows.
+
+### Card anatomy
+
+```
+┌────────────────────────────────────┐
+│ ▬▬▬▬ gradient accent top bar (3px)  │  ← feature & pricing cards only
+│                                    │
+│  Title (text-base/xl, semibold)    │
+│  Description (muted-foreground)    │
+│                                    │
+│  • Bullet with Check icon (brand)  │
+│                                    │
+│  [ CTA button ]                    │
+└────────────────────────────────────┘
+```
+- `rounded-xl`, `border-white/[0.06]`, `bg-surface-1`, `p-6`.
+- Step number watermark: `text-5xl font-extralight text-white/[0.08]`, top-right, absolute. Decorative.
+- Gradient accent bar at top: `h-[3px]`, two-stop gradient (`from-blue-500/40 to-cyan-500/40`, `from-green-500/40 to-amber-500/40`, etc. — rotates by index).
+
+### Buttons
+
+- **Primary (`variant="brand"`)**: green bg, white text, `shadow-sm`, `hover:bg-brand/90`. The only green button on a page — reserved for the single most important action (Start Free Trial, Contact Sales).
+- **Default**: neutral ink / white-on-ink.
+- **Outline**: transparent bg, `border-input`, hover-fills with `bg-accent`.
+- **Ghost**: no chrome until hover (`hover:bg-accent`). Used in headers and icon buttons.
+- **Link**: `text-primary underline-offset-4 hover:underline`.
+- Sizes: `sm` 36px, `default` 40px, `lg` 44px, `icon` 40×40.
+- All buttons: `rounded-md`, `text-sm font-medium`, `transition-all duration-150`.
+
+### Hover & press
+
+- Text links: `hover:underline` — almost never a color change.
+- Cards: `hover:bg-surface-2 hover:border-white/[0.10]` — subtle luminance step.
+- Customer logos: de-saturated and dimmed at rest (`opacity-50 brightness-0 invert-1`), full color on hover.
+- Integration icons in the grid: `hover:scale-110` + background swap. No color shifts.
+- Press state: opacity drop only; no shrink transform. `active:opacity-80`.
+- Transitions: `duration-150` (buttons), `duration-200` (icons/scale), `duration-300` (customer logos). Easing: default ease.
+
+### Motion
+
+- Scroll reveal on almost every section — `ScrollReveal` wraps content, fade + 8–12px rise, with a small `delay` (30ms × index) for staggered grid reveals.
+- `animate-pulse` on coverage progress bars to show liveness.
+- `animate-scroll` / `animate-accordion-*` for FAQ and integration strips.
+- Reduced-motion: fully respected — `prefers-reduced-motion: reduce` kills transforms + transitions on `.scroll-reveal`.
+- Bouncy easing is absent. Everything is linear/ease-out.
+
+### Transparency & blur
+
+- Sticky header uses `bg-background/60 backdrop-blur-2xl backdrop-saturate-150` — the defining chrome treatment.
+- Dropdowns mirror it: `bg-background/95 backdrop-blur-xl`.
+- Inside mockups: `bg-white/[0.04]` to `bg-white/[0.10]` is the typical translucent surface.
+
+### Iconography treatment
+
+- **Lucide React** (`lucide-react`) is the icon library. `size-4` (16px) by default, stroke-width 2. See `ICONOGRAPHY` below.
+- In gradient step cards: icons sit in a `w-10 h-10 rounded-lg bg-gradient-to-br` tile with white stroke icon.
+- In mockups: tiny colored dots (`w-2 h-2 rounded-full bg-red-500`) as status bullets — a recurring motif.
+
+### Imagery mood
+
+- Customer logos: SVG, displayed monochrome-to-color on hover.
+- Screenshots: minimal, mostly product UI — sessions, approvals, delegated work. No stock photography. No illustrated people. No 3D renders.
+- **Asset flags — replace before launch:** `flaky-hero.png`, `og-image.png`, and `github-app-feature-card.png` are **Bugzy-era QA product shots**. They must be replaced with Felan sessions/delegation product shots (a sessions view, an approval queue, agents working in Slack). Don't fake a screenshot — flagged here as a real replacement need.
+
+### Layout rules
+
+- Content always centers in a max-`1400px` container.
+- Fixed header (`sticky top-0 z-50`). Sidebar in product is `collapsible="offcanvas"` on mobile, persistent on desktop.
+- Grids align to 12 columns mentally but Tailwind's `md:grid-cols-2 lg:grid-cols-3` does the actual work.
+- Feature blocks alternate reversed/unreversed — visual rhythm comes from order, not decoration.
+
+---
+
+## Iconography
+
+**Primary icon system: `lucide-react`** (pinned `^0.454.0` in the codebase). Used everywhere — sidebar, feature cards, how-it-works steps, metric cards, empty states.
+
+Recurring icons and their meanings:
+- `Zap` / `Sparkles` — agents / automation / speed
+- `GitPullRequest` — PR trigger / delegated code work
+- `MessageSquare` — Slack / where work happens / reporting
+- `Link` — integrations / connect
+- `Check`, `CheckCircle`, `CheckCircle2` — done sessions, feature bullets, approvals granted
+- `Play` / `Activity` — running sessions, activity feed
+- `ShieldCheck`, `Lock` — guardrails, permissions, approvals, audit
+- `Bot` / `Users` — agents, team
+- `Clock`, `Calendar` — schedules, scheduled triggers
+- `LayoutDashboard` — overview
+- `FileText` — docs / context / audit log
+- `Puzzle` — integrations
+- `KeyRound` — models & API keys
+- `Settings`, `CreditCard`, `Plus`, `ChevronDown`, `Menu`, `LogOut`, `Loader2` — standard chrome
+
+**Defaults:** 16px (`size-4`) inline with text, 20px in section H3 card headers, 40px in 10×10 gradient tiles. Stroke width 2. Always inherits `currentColor` from its parent.
+
+**Product / integration logos** — when Felan shows a third-party brand (GitHub, Slack, Linear, Notion, Vercel, Figma, Jira…), the canonical pattern is:
+1. devicons CDN (`cdn.jsdelivr.net/gh/devicons/devicon/.../*-original.svg`) for recognizable brand marks
+2. `svgl.app` for Linear / Framer-era logos
+3. Self-hosted SVG in `/public/integrations/*.svg` or `/public/customers/*.svg` for the rest
+
+These are all copied into `assets/integrations/` and `assets/customers/` here.
+
+**Emoji:** not part of the system. The only emoji in the codebase (`👀 🎯 📁 📄`) appear inside mocked-up Slack messages or file-tree UI, never in real product chrome.
+
+**Unicode characters:** `→` (→) appears in "View all →" and "let us know →" links. `—` (—) is used liberally in copy. `×` not used.
+
+**Felan's own mark** (`assets/felan-logo.png`): a circular aperture/orbit mark — a bold ring with a solid center dot and a small orbiting “i” dot, reading as a lowercase **io**, rendered in forest green (`#255F44`). Available as crisp vector (`felan-logo.svg`) and transparent PNG. Used at 24–32px in headers, 32px in the footer. On dark backgrounds it sits on a small *cream* rounded tile (`#f7f3ec`, `border-radius:7px`) — this is the canonical protection treatment (it mirrors the artwork's own cream field and keeps the dark-green mark legible).
+
+---
+
+## Index
+
+```
+├── README.md                    ← you are here
+├── SKILL.md                     ← skill contract for Claude Code / agents
+├── colors_and_type.css          ← canonical tokens + semantic type classes
+├── assets/                      ← logos, icons, customer & integration marks, avatars
+│   ├── felan-logo.png           ← primary mark (forest-green “io” aperture on cream)
+│   ├── felan-logo.svg           ← primary mark, vector (forest green, transparent)
+│   ├── felan-icon-192.png       ← app icon
+│   ├── felan-icon-512.png       ← app icon (hi-res)
+│   ├── felan-icon.svg           ← vector mark
+│   ├── customers/               ← Invenda, NEG, Toki, GoodShape, SportAitchQ (logos only)
+│   ├── integrations/            ← Asana, ClickUp, Discord, Linear, etc.
+│   └── avatars/                 ← headshots (legacy)
+├── preview/                     ← design-system cards (rendered in Design System tab)
+├── templates/                   ← reusable customer-facing artifacts
+│   └── quote/                   ← A4 commercial quote HTML template + placeholder contract
+└── fonts/                       ← (empty) — system uses Geist via Google Fonts
+```
+
+## Font substitution — flagged
+
+The codebase uses **Geist Sans** and **Geist Mono**, loaded via the `geist` npm package. I've wired this design system to pull Geist from Google Fonts CDN in every HTML preview and card. This renders identically to the production site without bundling .ttf/.woff2 files. If you want self-hosted Geist woff2 files dropped into `fonts/`, let me know and I'll add them.
+
+No other font substitutions were needed — the Geist family is available on Google Fonts at the exact weights the codebase uses (400/500/600/700/800).

package/project/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: felan-design
+description: Use this skill to generate well-branded interfaces and assets for Felan, the agentic engineering platform (the team layer for AI-native software development) — for production or throwaway prototypes/mocks/decks. Contains design guidelines, colors, type, fonts, and assets.
+user-invocable: true
+---
+
+Read the README.md file within this skill, and explore the other available files.
+
+If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
+
+If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
+
+## What Felan is
+
+An agentic engineering platform — the team layer for AI-native software development. Copilots made individual engineers faster; Felan gives the engineering team cloud background agents that carry delegated work forward, share team knowledge, follow guardrails (permissions, approvals, audit logs), and improve from feedback — inside Slack, GitHub/GitLab, Linear, Jira, CI, and docs. Anchor line: **Copilots make engineers faster. Felan makes the engineering team faster.** Qualify audience by AI adoption, not headcount. Bugzy (the QA agent) is *one agent under the Felan canopy*, never the platform.
+
+## What's in here
+
+- `README.md` — voice, tone, visual foundations, iconography, content fundamentals
+- `colors_and_type.css` — canonical HSL tokens (light + dark) and semantic typography classes
+- `assets/` — logo (`felan-logo.svg`/`.png`, forest-green geometric mark), app icons, customer marks, integration SVGs
+- `preview/` — design-system cards: colors, type, spacing, components, brand
+
+## Quick rules
+
+- Green `hsl(152 44% 26%)` is the **only** accent. One green CTA per screen.
+- Warm neutrals only — hue 20–30 on every gray. Never pure gray.
+- Marketing = forced dark mode with soft radial green+blue orbs. Product app = light default, dark supported.
+- Type = Geist Sans + Geist Mono. Display is `font-weight: 800`, `letter-spacing: -0.025em`, with a white→white/70 gradient text fade on big H1s.
+- Icons = **Lucide** outline, 2px stroke, 16px inline / 20px header / 40px tile.
+- Radii: 6px button, 12px card, full pill. Mostly flat; hover-lift on cards; brand glow on featured CTAs only.
+- Logo is a **geometric aperture mark** (ring + center dot + orbiting dot), forest green. On dark, sit it on a cream tile. Not a monogram.
+- Voice: calm authority, zero hype. Em-dashes, sentence-case subheads, no emoji in chrome. Say what changes for the *team*, not that it's "AI".
+- Words to use: background agent, session, delegate, automation, trigger, guardrails, approvals, audit log, team memory, SDLC, repo, rollout. Retire QA-era words (coverage gap, regression, triage, flaky, pass rate) except inside an explicit QA example.
+- Name agents by SDLC role: Developer, QA, SRE, General Purpose agent.
+- Only make claims structurally true from the brief: "Start with one repo", "Works in Slack, GitHub, Linear, Jira", "Every agent action logged". No Bugzy-era proof claims (no "5-minute setup", "SOC2 ready", "EUR 250/month", "dev/QA ratio >8:1"). Mark illustrative numbers as sample copy. Never "10x", never invented customer metrics. Legal line: "© 2026 Felan".

package/project/assets/felan-icon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="250.000000pt" height="258.000000pt" viewBox="0 0 250.000000 258.000000" preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,258.000000) scale(0.100000,-0.100000)" fill="#255F44" stroke="none">
+<path d="M1116 2399 c-77 -11 -191 -43 -268 -74 -60 -24 -214 -110 -222 -124&#xA;-3 -4 13 -29 35 -56 56 -70 84 -166 75 -256 l-6 -69 62 51 c131 106 282 160&#xA;453 162 119 1 196 -17 310 -72 378 -183 516 -645 303 -1013 -75 -130 -209&#xA;-247 -347 -303 -411 -167 -883 92 -967 531 -26 137 -12 298 36 410 11 25 20&#xA;47 20 49 0 1 -28 -9 -62 -23 -78 -33 -197 -36 -268 -8 -25 9 -51 18 -59 19&#xA;-36 5 -68 -252 -52 -410 84 -820 1016 -1271 1695 -819 329 219 518 623 476&#xA;1017 -48 450 -323 809 -723 944 -145 48 -340 66 -491 44z"></path>
+<path d="M285 2156 c-89 -41 -135 -115 -135 -213 1 -181 197 -290 350 -195&#xA;119 74 144 244 52 354 -35 41 -116 78 -172 78 -26 0 -66 -10 -95 -24z"></path>
+<path d="M1160 1601 c-83 -25 -156 -98 -190 -187 -72 -192 71 -396 279 -396&#xA;312 0 403 435 118 568 -54 25 -151 32 -207 15z"></path>
+</g>
+</svg>

package/project/assets/felan-logo.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="250.000000pt" height="258.000000pt" viewBox="0 0 250.000000 258.000000" preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,258.000000) scale(0.100000,-0.100000)" fill="#255F44" stroke="none">
+<path d="M1116 2399 c-77 -11 -191 -43 -268 -74 -60 -24 -214 -110 -222 -124&#xA;-3 -4 13 -29 35 -56 56 -70 84 -166 75 -256 l-6 -69 62 51 c131 106 282 160&#xA;453 162 119 1 196 -17 310 -72 378 -183 516 -645 303 -1013 -75 -130 -209&#xA;-247 -347 -303 -411 -167 -883 92 -967 531 -26 137 -12 298 36 410 11 25 20&#xA;47 20 49 0 1 -28 -9 -62 -23 -78 -33 -197 -36 -268 -8 -25 9 -51 18 -59 19&#xA;-36 5 -68 -252 -52 -410 84 -820 1016 -1271 1695 -819 329 219 518 623 476&#xA;1017 -48 450 -323 809 -723 944 -145 48 -340 66 -491 44z"></path>
+<path d="M285 2156 c-89 -41 -135 -115 -135 -213 1 -181 197 -290 350 -195&#xA;119 74 144 244 52 354 -35 41 -116 78 -172 78 -26 0 -66 -10 -95 -24z"></path>
+<path d="M1160 1601 c-83 -25 -156 -98 -190 -187 -72 -192 71 -396 279 -396&#xA;312 0 403 435 118 568 -54 25 -151 32 -207 15z"></path>
+</g>
+</svg>

package/project/assets/integrations/asana.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <circle cx="12" cy="7" r="4.5" fill="#F06A6A"></circle>
+  <circle cx="5" cy="16" r="4.5" fill="#F06A6A"></circle>
+  <circle cx="19" cy="16" r="4.5" fill="#F06A6A"></circle>
+</svg>

package/project/assets/integrations/discord.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z" fill="#5865F2"></path>
+</svg>

package/project/assets/integrations/email.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2"></rect>
+  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+</svg>

package/project/assets/integrations/linear.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.03509 12.9431C3.24245 14.9227 4.10472 16.8468 5.62188 18.364C7.13904 19.8811 9.0631 20.7434 11.0428 20.9508L3.03509 12.9431Z" fill="#000000"></path>
+<path d="M3 11.4938L12.4921 20.9858C13.2976 20.9407 14.0981 20.7879 14.8704 20.5273L3.4585 9.11548C3.19793 9.88771 3.0451 10.6883 3 11.4938Z" fill="#000000"></path>
+<path d="M3.86722 8.10999L15.8758 20.1186C16.4988 19.8201 17.0946 19.4458 17.6493 18.9956L4.99021 6.33659C4.54006 6.89125 4.16573 7.487 3.86722 8.10999Z" fill="#000000"></path>
+<path d="M5.66301 5.59517C9.18091 2.12137 14.8488 2.135 18.3498 5.63604C21.8508 9.13708 21.8645 14.8049 18.3907 18.3228L5.66301 5.59517Z" fill="#000000"></path>
+</svg>

package/project/assets/integrations/playwright.svg

@@ -0,0 +1,9 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M136.444 221.556C123.558 225.213 115.104 231.625 109.535 238.032C114.869 233.364 122.014 229.08 131.652 226.348C141.51 223.554 149.92 223.574 156.869 224.915V219.481C150.941 218.939 144.145 219.371 136.444 221.556ZM108.946 175.876L61.0895 188.484C61.0895 188.484 61.9617 189.716 63.5767 191.36L104.153 180.668C104.153 180.668 103.578 188.077 98.5847 194.705C108.03 187.559 108.946 175.876 108.946 175.876ZM149.005 288.347C81.6582 306.486 46.0272 228.438 35.2396 187.928C30.2556 169.229 28.0799 155.067 27.5 145.928C27.4377 144.979 27.4665 144.179 27.5336 143.446C24.04 143.657 22.3674 145.473 22.7077 150.721C23.2876 159.855 25.4633 174.016 30.4473 192.721C41.2301 233.225 76.8659 311.273 144.213 293.134C158.872 289.185 169.885 281.992 178.152 272.81C170.532 279.692 160.995 285.112 149.005 288.347ZM161.661 128.11V132.903H188.077C187.535 131.206 186.989 129.677 186.447 128.11H161.661Z" fill="#2D4552"></path>
+<path d="M193.981 167.584C205.861 170.958 212.144 179.287 215.465 186.658L228.711 190.42C228.711 190.42 226.904 164.623 203.57 157.995C181.741 151.793 168.308 170.124 166.674 172.496C173.024 167.972 182.297 164.268 193.981 167.584ZM299.422 186.777C277.573 180.547 264.145 198.916 262.535 201.255C268.89 196.736 278.158 193.031 289.837 196.362C301.698 199.741 307.976 208.06 311.307 215.436L324.572 219.212C324.572 219.212 322.736 193.41 299.422 186.777ZM286.262 254.795L176.072 223.99C176.072 223.99 177.265 230.038 181.842 237.869L274.617 263.805C282.255 259.386 286.262 254.795 286.262 254.795ZM209.867 321.102C122.618 297.71 133.166 186.543 147.284 133.865C153.097 112.156 159.073 96.0203 164.029 85.204C161.072 84.5953 158.623 86.1529 156.203 91.0746C150.941 101.747 144.212 119.124 137.7 143.45C123.586 196.127 113.038 307.29 200.283 330.682C241.406 341.699 273.442 324.955 297.323 298.659C274.655 319.19 245.714 330.701 209.867 321.102Z" fill="#2D4552"></path>
+<path d="M161.661 262.296V239.863L99.3324 257.537C99.3324 257.537 103.938 230.777 136.444 221.556C146.302 218.762 154.713 218.781 161.661 220.123V128.11H192.869C189.471 117.61 186.184 109.526 183.423 103.909C178.856 94.612 174.174 100.775 163.545 109.665C156.059 115.919 137.139 129.261 108.668 136.933C80.1966 144.61 57.179 142.574 47.5752 140.911C33.9601 138.562 26.8387 135.572 27.5049 145.928C28.0847 155.062 30.2605 169.224 35.2445 187.928C46.0272 228.433 81.663 306.481 149.01 288.342C166.602 283.602 179.019 274.233 187.626 262.291H161.661V262.296ZM61.0848 188.484L108.946 175.876C108.946 175.876 107.551 194.288 89.6087 199.018C71.6614 203.743 61.0848 188.484 61.0848 188.484Z" fill="#E2574C"></path>
+<path d="M341.786 129.174C329.345 131.355 299.498 134.072 262.612 124.185C225.716 114.304 201.236 97.0224 191.537 88.8994C177.788 77.3834 171.74 69.3802 165.788 81.4857C160.526 92.163 153.797 109.54 147.284 133.866C133.171 186.543 122.623 297.706 209.867 321.098C297.093 344.47 343.53 242.92 357.644 190.238C364.157 165.917 367.013 147.5 367.799 135.625C368.695 122.173 359.455 126.078 341.786 129.174ZM166.497 172.756C166.497 172.756 180.246 151.372 203.565 158C226.899 164.628 228.706 190.425 228.706 190.425L166.497 172.756ZM223.42 268.713C182.403 256.698 176.077 223.99 176.077 223.99L286.262 254.796C286.262 254.791 264.021 280.578 223.42 268.713ZM262.377 201.495C262.377 201.495 276.107 180.126 299.422 186.773C322.736 193.411 324.572 219.208 324.572 219.208L262.377 201.495Z" fill="#2EAD33"></path>
+<path d="M139.88 246.04L99.3324 257.532C99.3324 257.532 103.737 232.44 133.607 222.496L110.647 136.33L108.663 136.933C80.1918 144.611 57.1742 142.574 47.5704 140.911C33.9554 138.563 26.834 135.572 27.5001 145.929C28.08 155.063 30.2557 169.224 35.2397 187.929C46.0225 228.433 81.6583 306.481 149.005 288.342L150.989 287.719L139.88 246.04ZM61.0848 188.485L108.946 175.876C108.946 175.876 107.551 194.288 89.6087 199.018C71.6615 203.743 61.0848 188.485 61.0848 188.485Z" fill="#D65348"></path>
+<path d="M225.27 269.163L223.415 268.712C182.398 256.698 176.072 223.99 176.072 223.99L232.89 239.872L262.971 124.281L262.607 124.185C225.711 114.304 201.232 97.0224 191.532 88.8994C177.783 77.3834 171.735 69.3802 165.783 81.4857C160.526 92.163 153.797 109.54 147.284 133.866C133.171 186.543 122.623 297.706 209.867 321.097L211.655 321.5L225.27 269.163ZM166.497 172.756C166.497 172.756 180.246 151.372 203.565 158C226.899 164.628 228.706 190.425 228.706 190.425L166.497 172.756Z" fill="#1D8D22"></path>
+<path d="M141.946 245.451L131.072 248.537C133.641 263.019 138.169 276.917 145.276 289.195C146.513 288.922 147.74 288.687 149 288.342C152.302 287.451 155.364 286.348 158.312 285.145C150.371 273.361 145.118 259.789 141.946 245.451ZM137.7 143.451C132.112 164.307 127.113 194.326 128.489 224.436C130.952 223.367 133.554 222.371 136.444 221.551L138.457 221.101C136.003 188.939 141.308 156.165 147.284 133.866C148.799 128.225 150.318 122.978 151.832 118.085C149.393 119.637 146.767 121.228 143.776 122.867C141.759 129.093 139.722 135.898 137.7 143.451Z" fill="#C04B41"></path>
+</svg>

package/project/assets/integrations/recall.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <circle cx="12" cy="12" r="10" fill="#6366F1"></circle>
+  <path d="M9 8v8l7-4-7-4Z" fill="white"></path>
+</svg>

package/project/assets/integrations/signal.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#3A76F0"></path>
+  <circle cx="12" cy="12" r="4" fill="#3A76F0"></circle>
+</svg>

package/project/assets/integrations/teams.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M19.5 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" fill="#5059C9"></path>
+  <path d="M22 9h-5a1 1 0 0 0-1 1v5a3.5 3.5 0 0 0 7 0v-5a1 1 0 0 0-1-1Z" fill="#5059C9"></path>
+  <path d="M14.5 5.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="#7B83EB"></path>
+  <path d="M18 8H9a1 1 0 0 0-1 1v6.5a4.5 4.5 0 0 0 9 0V9a1 1 0 0 0-1-1h2Z" fill="#7B83EB"></path>
+  <path d="M10 8H4a1 1 0 0 0-1 1v7a5 5 0 0 0 10 0V9a1 1 0 0 0-1-1h-2Z" fill="#4B53BC"></path>
+  <path d="M10 12H4v-1h6v1Z" fill="white" opacity="0.4"></path>
+</svg>

package/project/assets/integrations/vercel.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M12 2L2 20h20L12 2Z" fill="currentColor"></path>
+</svg>

package/project/colors_and_type.css

@@ -0,0 +1,309 @@
+/* ============================================================
+   Felan AI — Foundations: Colors & Type
+   Source of truth: web/app/globals.css (HSL var system) +
+                   web/tailwind.config.ts (font families)
+
+   Fonts: Geist Sans + Geist Mono (via Google Fonts CDN)
+   The production app uses the `geist` npm package; the
+   Google Fonts equivalent is visually identical.
+
+   Modes: default is LIGHT; add class="dark" on root for DARK.
+   The marketing site actually ships in forced-dark mode — see
+   web/app/page.tsx which wraps the homepage in <div className="dark">.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* ---------- Brand palette (raw) ---------- */
+  --felan-green:      hsl(152 44% 26%); /* @kind color */ /* primary brand */
+  --felan-green-hot:  hsl(150 55% 34%); /* @kind color */ /* hero glow / gradient orb */
+  --felan-green-dark: hsl(152 48% 20%); /* @kind color */
+  --felan-ink:        hsl(20 14% 11%);  /* @kind color */ /* near-black, warm */
+  --felan-paper:      hsl(0 0% 99%);     /* @kind color */ /* warm off-white */
+
+  /* ---------- Core tokens (HSL triplets, Tailwind-compatible) ---------- */
+  /* Backgrounds */
+  --background: 0 0% 99%;  /* @kind color */
+  --foreground: 20 14% 11%; /* @kind color */
+
+  /* Cards & Popovers */
+  --card: 0 0% 100%; /* @kind color */
+  --card-foreground: 20 14% 11%; /* @kind color */
+  --popover: 0 0% 100%; /* @kind color */
+  --popover-foreground: 20 14% 11%; /* @kind color */
+
+  /* Primary — neutral ink for high contrast */
+  --primary: 20 14% 11%; /* @kind color */
+  --primary-foreground: 0 0% 99%; /* @kind color */
+
+  /* Secondary */
+  --secondary: 30 10% 95%; /* @kind color */
+  --secondary-foreground: 20 14% 20%; /* @kind color */
+
+  /* Muted */
+  --muted: 30 10% 95%; /* @kind color */
+  --muted-foreground: 20 6% 44%; /* @kind color */
+
+  /* Accent (shadcn hover) */
+  --accent: 30 10% 95%; /* @kind color */
+  --accent-foreground: 20 14% 11%; /* @kind color */
+
+  /* Brand — the green identity */
+  --brand: 152 44% 26%; /* @kind color */
+  --brand-foreground: 0 0% 100%; /* @kind color */
+
+  /* Destructive */
+  --destructive: 0 84% 60%; /* @kind color */
+  --destructive-foreground: 0 0% 98%; /* @kind color */
+
+  /* Structural */
+  --border: 30 10% 90%; /* @kind color */
+  --input: 30 10% 90%; /* @kind color */
+  --ring: 152 44% 26%; /* @kind color */
+  --radius: 0.5rem; /* @kind radius */
+
+  /* Surface elevation layers (warm neutrals) */
+  --surface-1: 30 8% 97%; /* @kind color */
+  --surface-2: 30 8% 94%; /* @kind color */
+  --surface-3: 30 8% 91%; /* @kind color */
+
+  /* Charts / categorical */
+  --chart-1: 152 44% 26%; /* @kind color */ /* brand green */
+  --chart-2: 180 55% 42%; /* @kind color */ /* teal */
+  --chart-3: 220 65% 50%; /* @kind color */ /* blue */
+  --chart-4: 45 85% 50%;  /* @kind color */ /* amber */
+  --chart-5: 280 60% 55%; /* @kind color */ /* violet */
+
+  /* Status (marketing + product) */
+  --success: 142 71% 45%; /* @kind color */
+  --warning: 38 92% 50%; /* @kind color */
+  --info:    210 90% 55%; /* @kind color */
+
+  /* Sidebar (product app) */
+  --sidebar-background: 30 8% 97%; /* @kind color */
+  --sidebar-foreground: 20 6% 40%; /* @kind color */
+  --sidebar-primary: 152 44% 26%; /* @kind color */
+  --sidebar-primary-foreground: 0 0% 100%; /* @kind color */
+  --sidebar-accent: 30 12% 91%; /* @kind color */
+  --sidebar-accent-foreground: 20 14% 9%; /* @kind color */
+  --sidebar-border: 30 10% 90%; /* @kind color */
+  --sidebar-ring: 152 44% 26%; /* @kind color */
+
+  /* ---------- Typography ---------- */
+  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Type scale — matches Tailwind defaults used across the app */
+  --text-xs:   0.75rem;  /* @kind font */ /* 12px — micro labels, tags */
+  --text-sm:   0.875rem; /* @kind font */ /* 14px — body small, nav */
+  --text-base: 1rem;     /* @kind font */ /* 16px — body */
+  --text-lg:   1.125rem; /* @kind font */ /* 18px — lead paragraph */
+  --text-xl:   1.25rem;  /* @kind font */ /* 20px — eyebrow/sub-head */
+  --text-2xl:  1.5rem;   /* @kind font */ /* 24px — h3 */
+  --text-3xl:  1.875rem; /* @kind font */ /* 30px — h2 small */
+  --text-4xl:  2.25rem;  /* @kind font */ /* 36px — h2 */
+  --text-5xl:  3rem;     /* @kind font */ /* 48px — h1 mid */
+  --text-6xl:  3.75rem;  /* @kind font */ /* 60px — hero h1 */
+  --text-hero: 4.5rem;   /* @kind font */ /* 72px — landing hero */
+
+  --leading-tight:   1.08; /* @kind font */ /* hero lines */
+  --leading-snug:    1.2;  /* @kind font */
+  --leading-normal:  1.5;  /* @kind font */
+  --leading-relaxed: 1.65; /* @kind font */
+
+  --tracking-tight:  -0.02em; /* @kind font */
+  --tracking-normal: 0;       /* @kind font */
+
+  --weight-regular:  400; /* @kind font */
+  --weight-medium:   500; /* @kind font */
+  --weight-semibold: 600; /* @kind font */
+  --weight-bold:     700; /* @kind font */
+  --weight-extrabold: 800; /* @kind font */
+
+  /* ---------- Elevation & spacing ---------- */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.06);
+  --shadow-brand: 0 10px 30px -8px hsl(152 44% 26% / 0.35);
+
+  --radius-sm: calc(var(--radius) - 4px);  /* 4px */
+  --radius-md: calc(var(--radius) - 2px);  /* 6px */
+  --radius-lg: var(--radius);              /* 8px */
+  --radius-xl: 0.75rem;                    /* 12px — cards */
+  --radius-2xl: 1rem;                      /* 16px */
+  --radius-full: 9999px;
+
+  /* Signature gradients */
+  --gradient-hero-green: radial-gradient(ellipse, hsla(150,55%,34%,0.20) 0%, transparent 70%); /* @kind other */
+  --gradient-hero-blue:   radial-gradient(ellipse, hsla(220,80%,50%,0.14) 0%, transparent 70%); /* @kind other */
+  --gradient-text-fade:   linear-gradient(to bottom, hsl(0 0% 100%) 0%, hsl(0 0% 100% / 0.7) 100%); /* @kind other */
+  --gradient-divider:     linear-gradient(to right, transparent, hsl(0 0% 100% / 0.08), transparent); /* @kind other */
+}
+
+/* ============================================================
+   DARK MODE (default for marketing homepage)
+   ============================================================ */
+.dark {
+  --background: 20 10% 7%; /* @kind color */ /* warm near-black */
+  --foreground: 30 10% 90%; /* @kind color */
+
+  --card: 20 8% 10%; /* @kind color */
+  --card-foreground: 30 10% 90%; /* @kind color */
+  --popover: 20 8% 10%; /* @kind color */
+  --popover-foreground: 30 10% 90%; /* @kind color */
+
+  --primary: 30 10% 90%; /* @kind color */
+  --primary-foreground: 20 10% 7%; /* @kind color */
+
+  --secondary: 20 8% 15%; /* @kind color */
+  --secondary-foreground: 30 10% 90%; /* @kind color */
+
+  --muted: 20 8% 15%; /* @kind color */
+  --muted-foreground: 20 5% 55%; /* @kind color */
+
+  --accent: 20 8% 15%; /* @kind color */
+  --accent-foreground: 30 10% 90%; /* @kind color */
+
+  --brand: 152 46% 34%; /* @kind color */ /* brighter on dark */
+  --brand-foreground: 0 0% 100%; /* @kind color */
+
+  --destructive: 0 63% 31%; /* @kind color */
+  --destructive-foreground: 0 0% 98%; /* @kind color */
+
+  --border: 20 6% 18%; /* @kind color */
+  --input: 20 6% 18%; /* @kind color */
+  --ring: 152 46% 34%; /* @kind color */
+
+  --surface-1: 20 8% 9%; /* @kind color */
+  --surface-2: 20 8% 12%; /* @kind color */
+  --surface-3: 20 8% 15%; /* @kind color */
+
+  --sidebar-background: 20 8% 9%; /* @kind color */
+  --sidebar-foreground: 20 5% 55%; /* @kind color */
+  --sidebar-primary: 152 46% 34%; /* @kind color */
+  --sidebar-primary-foreground: 0 0% 100%; /* @kind color */
+  --sidebar-accent: 20 8% 16%; /* @kind color */
+  --sidebar-accent-foreground: 0 0% 98%; /* @kind color */
+  --sidebar-border: 20 6% 15%; /* @kind color */
+  --sidebar-ring: 152 46% 34%; /* @kind color */
+}
+
+/* ============================================================
+   SEMANTIC UTILITIES
+   ============================================================ */
+.felan-bg         { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
+.felan-card       { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); }
+.felan-surface-1  { background-color: hsl(var(--surface-1)); }
+.felan-surface-2  { background-color: hsl(var(--surface-2)); }
+.felan-surface-3  { background-color: hsl(var(--surface-3)); }
+
+/* Hero headline treatment — gradient text fade (dark mode signature) */
+.felan-headline-fade {
+  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.7) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ============================================================
+   SEMANTIC TYPOGRAPHY
+   ============================================================ */
+body, .felan-body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.felan-h1, h1.felan {
+  font-family: var(--font-sans);
+  font-size: clamp(var(--text-4xl), 6vw, var(--text-hero));
+  font-weight: var(--weight-extrabold);
+  letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-tight);
+}
+
+.felan-h2, h2.felan {
+  font-family: var(--font-sans);
+  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.15;
+}
+
+.felan-h3, h3.felan {
+  font-family: var(--font-sans);
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.25;
+}
+
+.felan-h4, h4.felan {
+  font-family: var(--font-sans);
+  font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  line-height: 1.3;
+}
+
+.felan-lead {
+  font-family: var(--font-sans);
+  font-size: var(--text-xl);
+  font-weight: var(--weight-regular);
+  color: hsl(var(--muted-foreground));
+  line-height: var(--leading-relaxed);
+}
+
+.felan-p, p.felan {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-relaxed);
+  color: hsl(var(--foreground));
+}
+
+.felan-small {
+  font-size: var(--text-sm);
+  color: hsl(var(--muted-foreground));
+}
+
+.felan-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-lg);
+  letter-spacing: 0;
+}
+
+.felan-overline {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: hsl(var(--muted-foreground));
+}
+
+.felan-code, code.felan {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  padding: 0.125em 0.375em;
+  border-radius: var(--radius-sm);
+}
+
+.felan-link {
+  color: hsl(var(--brand));
+  text-decoration: none;
+  font-weight: var(--weight-medium);
+}
+.felan-link:hover { text-decoration: underline; }

package/project/styles.css

@@ -0,0 +1,12 @@
+/* ============================================================
+   Felan AI — Design System entry stylesheet
+   Link THIS file to get the full foundation (tokens + type).
+   Consumers: <link rel="stylesheet" href="styles.css">
+
+   The per-kit stylesheets (ui_kits/marketing/marketing.css,
+   ui_kits/product/product.css) are component-scoped reference
+   implementations — link those only inside their own kit,
+   NOT globally (each sets its own html/body background).
+   ============================================================ */
+
+@import url('./colors_and_type.css');

package/project/templates/quote/README.md

@@ -0,0 +1,65 @@
+# Commercial quote template
+
+Reusable A4 HTML template for Felan commercial quotes. It is intentionally separate from the
+catalog previews because it is a customer-facing print artifact, not a design-system card.
+
+## Use
+
+1. Read `template.html` as UTF-8.
+2. Replace every `{{PLACEHOLDER}}` with escaped content.
+3. Replace `{{LOGO_SRC}}` with a local `file://` URL or a data URL for the Felan logo.
+4. Open the resulting HTML in Chromium with background graphics enabled and save as A4 PDF with
+   zero browser margins.
+
+The template uses the design-system tokens through a relative stylesheet link for direct preview.
+PDF renderers should inline `../../colors_and_type.css` or otherwise resolve the stylesheet and logo
+before generating the final artifact.
+
+## Placeholder contract
+
+| Placeholder | Purpose |
+|-------------|---------|
+| `{{DOCUMENT_TITLE}}` | Browser/PDF title |
+| `{{QUOTE_LABEL}}` | Document type, e.g. `Commercial quote` |
+| `{{REFERENCE}}` | Quote reference |
+| `{{ISSUE_DATE}}` | Issue date |
+| `{{VALID_UNTIL}}` | Expiry date |
+| `{{CUSTOMER}}` | Customer display name |
+| `{{CONTACT}}` | Recipient name |
+| `{{SELLER}}` | Seller display name |
+| `{{LEGAL_SELLER}}` | Optional light legal attribution |
+| `{{HEADLINE}}` | Main offer headline |
+| `{{INTRO}}` | Offer summary |
+| `{{PACKAGE_META}}` | Page-two header label |
+| `{{PACKAGE_TITLE}}` | Package section title |
+| `{{SCOPE_TITLE}}` | Included-scope column title |
+| `{{SCOPE_ITEMS}}` | `<li>` elements for included scope |
+| `{{SUPPORT_TITLE}}` | Support/update column title |
+| `{{SUPPORT_ITEMS}}` | `<li>` elements for support/updates |
+| `{{PACKAGE_CALLOUT_TITLE}}` / `{{PACKAGE_CALLOUT_BODY}}` | Page-two callout |
+| `{{PRICING_TITLE}}` | Investment section heading |
+| `{{PRICING_CONTENT}}` | Escaped quote table: single package or option comparison |
+| `{{IMPLEMENTATION_TITLE}}` | Final-page heading |
+| `{{IMPLEMENTATION_SCOPE_TITLE}}` | Implementation/rollout column title |
+| `{{IMPLEMENTATION_ITEMS}}` | `<li>` elements for implementation/rollout scope |
+| `{{RESPONSIBILITY_TITLE}}` | Customer-responsibility column title |
+| `{{RESPONSIBILITY_ITEMS}}` | `<li>` elements for customer responsibilities |
+| `{{EXCLUSION_TITLE}}` | Exclusions column title |
+| `{{EXCLUSION_ITEMS}}` | `<li>` elements for exclusions |
+| `{{TERMS_ITEMS}}` | `<li>` elements for lightweight commercial terms |
+| `{{FINAL_CALLOUT_TITLE}}` / `{{FINAL_CALLOUT_BODY}}` | Final-page callout |
+| `{{NEXT_STEPS}}` | `<li>` elements for next steps |
+| `{{FOOTER_NOTE}}` | Footer note, e.g. `Prices exclude VAT, if applicable.` |
+
+List placeholders must be replaced with trusted, already-escaped HTML. Do not interpolate raw
+customer or user input into the document.
+
+## Pricing layouts
+
+- **Single package:** one line-item table with scope, billing, term amount, and an explicitly named
+  total contract value.
+- **Option comparison:** one matrix that compares mutually exclusive billing options row-for-row,
+  including recurring subtotal, one-time fees, invoice timing, and total contract value.
+
+Do not use cards to compare unlike concepts such as price and user capacity. Keep monthly rates,
+one-time charges, and term totals in separately labelled columns or rows.

package/project/templates/quote/template.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{DOCUMENT_TITLE}}</title>
+  <link rel="stylesheet" href="../../colors_and_type.css">
+  <style>
+    @page { size: A4; margin: 0; }
+    :root { --paper: hsl(0 0% 99%); --ink: hsl(20 14% 11%); --muted: hsl(20 6% 44%); --line: hsl(30 10% 88%); --soft: hsl(30 10% 96%); --brand: hsl(152 44% 26%); --brand-soft: hsl(152 30% 94%); }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; background: hsl(30 8% 90%); color: var(--ink); font-family: var(--font-sans); font-size: 10.5pt; line-height: 1.5; }
+    body { padding: 20px 0; }
+    .page { width: 210mm; height: 297mm; margin: 0 auto 16px; padding: 17mm 18mm 16mm; position: relative; overflow: hidden; background: var(--paper); page-break-after: always; }
+    .page:last-child { page-break-after: auto; }
+    .page::after { content: ''; position: absolute; left: 18mm; right: 18mm; bottom: 10mm; border-top: 1px solid var(--line); }
+    .header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9mm; border-bottom: 1px solid var(--line); }
+    .lockup { display: flex; align-items: center; gap: 9px; }
+    .lockup img { width: 28px; height: 28px; object-fit: contain; }
+    .wordmark { font-size: 17pt; font-weight: 800; letter-spacing: -0.03em; }
+    .meta { color: var(--muted); font-family: var(--font-mono); font-size: 7.5pt; line-height: 1.7; text-align: right; }
+    .eyebrow { color: var(--brand); font-family: var(--font-mono); font-size: 7.5pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
+    h1 { max-width: 155mm; margin: 26mm 0 7mm; font-size: 31pt; line-height: 1.05; letter-spacing: -.04em; }
+    h2 { margin: 0 0 5mm; font-size: 18pt; line-height: 1.15; letter-spacing: -.025em; }
+    h3 { margin: 0 0 2mm; font-size: 11pt; line-height: 1.25; }
+    p { margin: 0 0 4mm; }
+    .lede { max-width: 143mm; color: var(--muted); font-size: 14pt; line-height: 1.45; }
+    .recipient { margin-top: 20mm; padding: 5mm; border-left: 3px solid var(--brand); background: var(--brand-soft); }
+    .recipient strong { display: block; margin-bottom: 1mm; }
+    .cover-note { position: absolute; left: 18mm; right: 18mm; bottom: 23mm; color: var(--muted); font-size: 8.5pt; }
+    .section-head { margin-bottom: 9mm; }
+    .callout { margin-top: 6mm; padding: 5mm; border-radius: 8px; background: hsl(20 14% 11%); color: white; }
+    .callout strong { color: hsl(152 45% 62%); }
+    .callout p { margin: 0; color: hsl(30 10% 78%); font-size: 9pt; }
+    .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; }
+    .block { margin-bottom: 8mm; }
+    .block h3 { padding-bottom: 2mm; border-bottom: 1px solid var(--line); }
+    ul, ol { margin: 2mm 0 0; padding-left: 5mm; }
+    li { margin: 1.5mm 0; }
+    .checklist { list-style: none; padding-left: 0; }
+    .checklist li { position: relative; padding-left: 6mm; }
+    .checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
+    .quote-table { width: 100%; margin: 5mm 0 0; border-collapse: collapse; table-layout: fixed; }
+    .quote-table th { padding: 4mm 3mm; background: var(--ink); color: white; font-family: var(--font-mono); font-size: 7.5pt; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; vertical-align: top; }
+    .quote-table td { padding: 4.5mm 3mm; border-bottom: 1px solid var(--line); vertical-align: middle; }
+    .quote-table .row-label { font-weight: 650; text-align: left; }
+    .quote-table.comparison th:first-child { width: 36%; }
+    .quote-table.comparison th:not(:first-child), .quote-table.comparison td:not(:first-child) { text-align: right; }
+    .quote-table.single th:nth-child(1) { width: 30%; }
+    .quote-table.single th:nth-child(2) { width: 25%; }
+    .quote-table.single th:nth-child(3) { width: 25%; }
+    .quote-table.single th:nth-child(4), .quote-table.single td:nth-child(4) { width: 20%; text-align: right; }
+    .quote-table tr.emphasis td { border-top: 2px solid var(--brand); border-bottom: 0; background: var(--brand-soft); font-weight: 750; }
+    .quote-table tr.emphasis td:not(:first-child) { font-size: 12pt; }
+    .option-label { display: block; }
+    .option-badge { display: inline-block; margin-top: 2mm; padding: 1mm 2mm; border-radius: 9999px; background: hsl(152 35% 88%); color: var(--brand); font-size: 6.5pt; }
+    .pricing-notes { margin-top: 7mm; padding-top: 5mm; border-top: 1px solid var(--line); }
+    .pricing-notes p { margin-bottom: 2mm; color: var(--muted); font-size: 8.5pt; }
+    .small { color: var(--muted); font-size: 8.5pt; }
+    .terms { margin-top: 9mm; padding-top: 5mm; border-top: 1px solid var(--line); }
+    .terms li { color: var(--muted); font-size: 8.5pt; }
+    .page.final section { margin-top: 12mm !important; }
+    .page.final .block { margin-bottom: 5mm; }
+    .page.final .terms { margin-top: 5mm; }
+    .page.final .callout { margin-top: 5mm !important; }
+    .page.final .block[style] { margin-top: 6mm !important; }
+    .page.final .columns { gap: 8mm; }
+    .page.final li { margin: .5mm 0; font-size: 8pt; line-height: 1.35; }
+    .footer { position: absolute; right: 18mm; bottom: 5mm; color: var(--muted); font-family: var(--font-mono); font-size: 7pt; }
+    .footer span { margin-left: 5mm; }
+    @media print { html, body { background: var(--paper); } body { padding: 0; } .page { margin: 0; } }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <header class="header">
+      <div class="lockup"><img src="{{LOGO_SRC}}" alt="Felan AI"><span class="wordmark">Felan AI</span></div>
+      <div class="meta">{{QUOTE_LABEL}}<br>{{REFERENCE}}<br>{{ISSUE_DATE}}</div>
+    </header>
+    <div class="eyebrow" style="margin-top: 22mm">Agentic engineering platform</div>
+    <h1>{{HEADLINE}}</h1>
+    <p class="lede">{{INTRO}}</p>
+    <div class="recipient"><strong>Prepared for {{CUSTOMER}}</strong>{{CONTACT}}<br><span class="small">Prepared by {{SELLER}} · {{LEGAL_SELLER}}</span></div>
+    <p class="cover-note">Valid until {{VALID_UNTIL}} · {{FOOTER_NOTE}}</p>
+    <div class="footer">© 2026 Felan <span>1</span></div>
+  </main>
+
+  <main class="page">
+    <header class="header"><div class="lockup"><img src="{{LOGO_SRC}}" alt=""><span class="wordmark">Felan AI</span></div><div class="meta">{{PACKAGE_META}}<br>{{CUSTOMER}}</div></header>
+    <section style="margin-top: 18mm">
+      <div class="section-head"><h2>{{PACKAGE_TITLE}}</h2></div>
+      <div class="columns">
+        <div class="block"><h3>{{SCOPE_TITLE}}</h3><ul class="checklist">{{SCOPE_ITEMS}}</ul></div>
+        <div class="block"><h3>{{SUPPORT_TITLE}}</h3><ul class="checklist">{{SUPPORT_ITEMS}}</ul></div>
+      </div>
+      <div class="callout"><p><strong>{{PACKAGE_CALLOUT_TITLE}}</strong> {{PACKAGE_CALLOUT_BODY}}</p></div>
+    </section>
+    <div class="footer">© 2026 Felan <span>2</span></div>
+  </main>
+
+  <main class="page">
+    <header class="header"><div class="lockup"><img src="{{LOGO_SRC}}" alt=""><span class="wordmark">Felan AI</span></div><div class="meta">Investment<br>{{CUSTOMER}}</div></header>
+    <section style="margin-top: 18mm">
+      <div class="section-head"><h2>{{PRICING_TITLE}}</h2></div>
+      {{PRICING_CONTENT}}
+      <p class="small">{{FOOTER_NOTE}}</p>
+    </section>
+    <div class="footer">© 2026 Felan <span>3</span></div>
+  </main>
+
+  <main class="page final">
+    <header class="header"><div class="lockup"><img src="{{LOGO_SRC}}" alt=""><span class="wordmark">Felan AI</span></div><div class="meta">Scope and terms<br>{{REFERENCE}}</div></header>
+    <section style="margin-top: 18mm">
+      <div class="section-head"><h2>{{IMPLEMENTATION_TITLE}}</h2></div>
+      <div class="columns">
+        <div class="block"><h3>{{IMPLEMENTATION_SCOPE_TITLE}}</h3><ul>{{IMPLEMENTATION_ITEMS}}</ul><h3 style="margin-top: 8mm">{{RESPONSIBILITY_TITLE}}</h3><ul>{{RESPONSIBILITY_ITEMS}}</ul></div>
+        <div class="block"><h3>{{EXCLUSION_TITLE}}</h3><ul>{{EXCLUSION_ITEMS}}</ul><div class="terms"><h3>Terms</h3><ul>{{TERMS_ITEMS}}</ul></div></div>
+      </div>
+      <div class="callout" style="margin-top: 10mm"><p><strong>{{FINAL_CALLOUT_TITLE}}</strong> {{FINAL_CALLOUT_BODY}}</p></div>
+      <div class="block" style="margin-top: 10mm"><h3>Next steps</h3><ol>{{NEXT_STEPS}}</ol></div>
+    </section>
+    <div class="footer">© 2026 Felan <span>4</span></div>
+  </main>
+</body>
+</html>