Q3 planning notes

This column is the “existing product” — plain corporate CSS, system font, light theme. Nothing here uses Farvist.

The assistant panel on the right is the entire Farvist AI-interface kit, added to this page with a single ~6 KB stylesheet (dist/farvist-ai.css) and the optional JS. It inherits this page's font, sits inside the host layout, and — because Farvist emits everything in @layer — for any property your own un-layered CSS also declares, your CSS wins.

Press ⌘K / Ctrl K for the command palette — also part of the kit.

Assistant online

You

Make the primary button green to match our brand.

Thought for 3 seconds

The brand green is #0f5132 — update the token, not the component CSS.

edit_file Done

src/theme.css

Done — one token change. To apply it site-wide, load the override after your theme:

index.htmlhtml

<link rel="stylesheet" href="/src/theme.css" />

src/theme.css +1 −1

@@ -1,3 +1,3 @@
  :root {
-   --brand: #6d4af5;
+   --brand: #0f5132;

Assistant · just now

This page loads only dist/farvist-ai.css (~6 KB gzip) + assets/farvist.js — no reset, no grid, no utilities. The kit assumes box-sizing: border-box (Tailwind and Bootstrap set this; here the host CSS does) and rem sizing against the browser-default 16px root. On a light host, wrap the UI in data-theme="light". On a Tailwind v3 host, also load dist/farvist-ai-compat.css after your Tailwind build — v3's un-layered preflight otherwise strips the kit's borders and button styling (v4 and Bootstrap don't need it). View source — the split between “host CSS” and the kit is commented. Full AI-kit docs →