# Brand instructions for bots

Paste this file into any bot's instructions (Grok bots, n8n AI steps, Lovable, Claude, ChatGPT), or point the bot at its URL. It tells the bot how to build anything on-brand for Focus Insite or HumanLayer.

---

## Where the files are

- On the web: **https://fi-agents.com/brand/** (for example `https://fi-agents.com/brand/humanlayer/tokens.css`). Use these full URLs in pages you build.
- On Jim's Mac: `~/Claude Assets/brand-kits/`
- Source of truth: GitHub `focusinsite/brand-kits`

## You are building for one of two brands. Pick first.

| If the work is for… | Use folder | Default theme |
| --- | --- | --- |
| Focus Insite — market research recruitment, bids, proposals, client emails, focusinsite.com, recruiting ads | `focus-insite/` | light (only theme) |
| HumanLayer — verified human data for AI, humnlayer.ai, the respondent app, the client app, investors | `humanlayer/` | dark for respondents, light for clients and documents |

If you cannot tell which brand, **stop and ask**. Never mix the two brands in one piece unless told to (for example "HumanLayer, powered by Focus Insite").

## Before you build, read these files in order

1. `brands.json` — where every file is.
2. `<brand>/README.md` — the brand book: voice, colors, type, logo rules, components.
3. `<brand>/starter.html` — a complete working page. **Copy it and replace the content.** Do not start from a blank page.
4. For HumanLayer only: `humanlayer/components/<Name>.md` and `.html` for the piece you need.

## Hard rules — never break these

1. **Never type a hex color into a page.** Link `<brand>/tokens.css` and use the variables (`var(--brand-action)`, `var(--text-primary)`). If you need a color that is not a token, you are doing something off-brand — stop.
2. **Always link both stylesheets**, in this order: `tokens.css` then `components.css`. Use the `fi-` (Focus Insite) or `hl-` (HumanLayer) classes.
3. **Never draw, retype or recolor a logo.** Use the SVG files in `<brand>/logos/` with `<img>`. Pick the file by background color — the README has the table.
4. **Fonts:** Focus Insite = Inter. HumanLayer = Geist. They load from `tokens.css`. Do not swap in another font.
5. **Spelling:** "Focus Insite" (never "Focus Insight"). "HumanLayer" one word (domain humnlayer.ai, no "a").
6. **One bright brand move per screen.** Focus Insite: one red thing. HumanLayer: one orange thing.
7. **Text on color:**
   - Focus Insite: buttons use `--brand-action` #D31921 with white text. Bright red `--brand` #EC1F26 is for big headlines and graphics only, never small text.
   - HumanLayer: text on orange, green or gold is near-black (`--on-brand`), **never white**.
8. **No emoji, no gradients, no glow, no stock-robot imagery, no corporate filler** ("leverage", "seamless", "robust", "best-in-class", "circle back").
9. **Do not edit anything inside this folder.** You read it; you never change it. If something is missing or wrong, report it to Jim and Jenylene.

## When you are done, check your output

- [ ] The right brand folder, and for HumanLayer the right theme (respondent = dark, client/document = light).
- [ ] Both stylesheets linked; zero hex codes in your own HTML/CSS.
- [ ] Logo is an `<img>` of the correct file for its background.
- [ ] Company name spelled right everywhere.
- [ ] Only one bright brand-color element per screen.
- [ ] Copy follows the voice section of the brand book (short, direct, numbers concrete, sentence case).

If any box fails, fix it before sending. If you cannot fix it, send it to a human (below) instead of shipping it.

## Who to ask

- **Brand questions, missing assets, anything a rule doesn't cover:** Jenylene (design).
- **Every change to this kit:** approved by Jim Jacobs.
- **Final sign-off on anything customer-facing:** Jim Jacobs.