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. Agents use the GitHub-installed felan-design skill and its portable design.md guidance.

Repository layout

├── catalog.html          ← single-page catalog: readme + every preview, print-ready
├── project/              ← the design system itself
│   ├── README.md         ← full design spec (start here)
│   ├── tokens.css        ← canonical tokens + semantic type classes
│   ├── colors_and_type.css  ← preview entry with hosted Geist fonts
│   ├── styles.css        ← font-free production entry
│   ├── assets/           ← logos, icons, customer & integration marks
│   ├── templates/         ← reusable customer-facing artifacts, including commercial quotes
│   └── preview/          ← design-system cards (brand, colors, type, components…)
├── skills/felan-design/  ← GitHub-installed agent skill + design.md
└── scripts/repo-browser/ ← local HTTP server for the catalog

Agent skill

Install the two-file felan-design skill directly from GitHub:

npx skills add felan-ai/design-system --skill felan-design

The skill bundles only SKILL.md and design.md. Tokens, assets, templates, and lint rules remain in the npm package.

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):

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 renders the project readme first, then every preview 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, and shared @shadcn/lint policy. The agent skill is installed separately from GitHub and is not part of the npm package.

pnpm add @felan-ai/design-system

@import "@felan-ai/design-system/styles.css";

The package's HSL-triplet tokens are consumed with hsl(var(--token)). styles.css and tokens.css are font-free so production applications can self-host Geist. Static previews use colors_and_type.css, which also loads Geist from Google Fonts. Public exports are documented in the package README and include ./styles.css, ./tokens.css, ./colors_and_type.css, ./spec, ./assets/*, ./templates/quote.html, and ./eslint/shadcn.

See 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.
• The repo browser derives catalog metadata from each preview's @dsCard comment, so previews stay in sync without generated files.
• Static previews load Geist Sans/Mono from the Google Fonts CDN; production consumers provide their own font files.
• npm pack --dry-run and the package verifier are the source of truth for the published file surface; catalog previews are repository-only.