@felloinnovations/brand-kit 0.0.0-stage → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/AGENTS.md +112 -0
  2. package/CHANGELOG.md +131 -0
  3. package/README.md +181 -2
  4. package/assets/fello-ai-wordmark.svg +10 -0
  5. package/assets/fello-mark-white.png +0 -0
  6. package/assets/fello-mark-white.svg +11 -0
  7. package/assets/fello-mark.png +0 -0
  8. package/assets/fello-mark.svg +11 -0
  9. package/assets/fello-wordmark-white.png +0 -0
  10. package/assets/fello-wordmark-white.svg +10 -0
  11. package/assets/fello-wordmark.png +0 -0
  12. package/assets/fello-wordmark.svg +10 -0
  13. package/assets/powered-by-fello-dark.png +0 -0
  14. package/assets/powered-by-fello-light.png +0 -0
  15. package/design-system/01-how-claude-decides.md +155 -0
  16. package/design-system/02-principles.md +44 -0
  17. package/design-system/03-colour.md +82 -0
  18. package/design-system/04-type.md +41 -0
  19. package/design-system/05-space-and-layout.md +73 -0
  20. package/design-system/06-sizing-profiles.md +27 -0
  21. package/design-system/07-scrolling.md +37 -0
  22. package/design-system/08-choosing-components.md +101 -0
  23. package/design-system/09-charts.md +66 -0
  24. package/design-system/10-patterns.md +89 -0
  25. package/design-system/11-page-recipes.md +130 -0
  26. package/design-system/12-content.md +70 -0
  27. package/design-system/13-motion.md +58 -0
  28. package/design-system/14-accessibility.md +41 -0
  29. package/design-system/15-ai-experiences.md +51 -0
  30. package/design-system/16-creativity.md +53 -0
  31. package/design-system/17-decisions.md +140 -0
  32. package/design-system/18-checklist.md +62 -0
  33. package/design-system/19-public-pages.md +90 -0
  34. package/design-system/README.md +56 -0
  35. package/design-system/components/ActionList/README.md +41 -0
  36. package/design-system/components/ActionList/preview.html +48 -0
  37. package/design-system/components/ActivityGrid/README.md +71 -0
  38. package/design-system/components/ActivityGrid/preview.html +159 -0
  39. package/design-system/components/AppShell/README.md +110 -0
  40. package/design-system/components/AppShell/preview.html +97 -0
  41. package/design-system/components/Avatar/README.md +92 -0
  42. package/design-system/components/Avatar/preview.html +45 -0
  43. package/design-system/components/Badge/README.md +92 -0
  44. package/design-system/components/Badge/preview.html +62 -0
  45. package/design-system/components/Banner/README.md +78 -0
  46. package/design-system/components/Banner/preview.html +57 -0
  47. package/design-system/components/Breadcrumb/README.md +81 -0
  48. package/design-system/components/Breadcrumb/preview.html +50 -0
  49. package/design-system/components/Button/README.md +106 -0
  50. package/design-system/components/Button/preview.html +63 -0
  51. package/design-system/components/Card/README.md +94 -0
  52. package/design-system/components/Card/preview.html +82 -0
  53. package/design-system/components/CardBoard/README.md +75 -0
  54. package/design-system/components/CardBoard/preview.html +65 -0
  55. package/design-system/components/ChatCard/README.md +111 -0
  56. package/design-system/components/ChatCard/preview.html +79 -0
  57. package/design-system/components/ChatTurn/README.md +90 -0
  58. package/design-system/components/ChatTurn/preview.html +41 -0
  59. package/design-system/components/Checkbox/README.md +91 -0
  60. package/design-system/components/Checkbox/preview.html +83 -0
  61. package/design-system/components/Chip/README.md +110 -0
  62. package/design-system/components/Chip/preview.html +46 -0
  63. package/design-system/components/Combobox/README.md +101 -0
  64. package/design-system/components/Combobox/preview.html +67 -0
  65. package/design-system/components/Composer/README.md +90 -0
  66. package/design-system/components/Composer/preview.html +87 -0
  67. package/design-system/components/ConfirmDialog/README.md +89 -0
  68. package/design-system/components/ConfirmDialog/preview.html +50 -0
  69. package/design-system/components/Cover/preview.html +35 -0
  70. package/design-system/components/DateInput/README.md +92 -0
  71. package/design-system/components/DateInput/preview.html +86 -0
  72. package/design-system/components/Dialog/README.md +96 -0
  73. package/design-system/components/Dialog/preview.html +67 -0
  74. package/design-system/components/EmptyState/README.md +76 -0
  75. package/design-system/components/EmptyState/preview.html +73 -0
  76. package/design-system/components/EntryShell/README.md +82 -0
  77. package/design-system/components/EntryShell/preview.html +44 -0
  78. package/design-system/components/FeatureGrid/README.md +84 -0
  79. package/design-system/components/FeatureGrid/preview.html +55 -0
  80. package/design-system/components/FileUpload/README.md +87 -0
  81. package/design-system/components/FileUpload/preview.html +91 -0
  82. package/design-system/components/Fold/README.md +81 -0
  83. package/design-system/components/Fold/preview.html +59 -0
  84. package/design-system/components/Footer/README.md +83 -0
  85. package/design-system/components/Footer/preview.html +49 -0
  86. package/design-system/components/FunnelBars/README.md +89 -0
  87. package/design-system/components/FunnelBars/preview.html +95 -0
  88. package/design-system/components/GoalBars/README.md +72 -0
  89. package/design-system/components/GoalBars/preview.html +164 -0
  90. package/design-system/components/GoalTicks/README.md +88 -0
  91. package/design-system/components/GoalTicks/preview.html +221 -0
  92. package/design-system/components/GoalTubes/README.md +68 -0
  93. package/design-system/components/GoalTubes/preview.html +157 -0
  94. package/design-system/components/Hero/README.md +93 -0
  95. package/design-system/components/Hero/preview.html +32 -0
  96. package/design-system/components/IconButton/README.md +88 -0
  97. package/design-system/components/IconButton/preview.html +84 -0
  98. package/design-system/components/Input/README.md +86 -0
  99. package/design-system/components/Input/preview.html +64 -0
  100. package/design-system/components/KanbanBoard/README.md +92 -0
  101. package/design-system/components/KanbanBoard/preview.html +66 -0
  102. package/design-system/components/Kbd/README.md +76 -0
  103. package/design-system/components/Kbd/preview.html +37 -0
  104. package/design-system/components/KitButton/README.md +108 -0
  105. package/design-system/components/KitButton/preview.html +71 -0
  106. package/design-system/components/KitCard/README.md +100 -0
  107. package/design-system/components/KitCard/preview.html +71 -0
  108. package/design-system/components/KitInput/README.md +91 -0
  109. package/design-system/components/KitInput/preview.html +65 -0
  110. package/design-system/components/Leaderboard/README.md +94 -0
  111. package/design-system/components/Leaderboard/preview.html +83 -0
  112. package/design-system/components/MarketingNav/README.md +88 -0
  113. package/design-system/components/MarketingNav/preview.html +40 -0
  114. package/design-system/components/Menu/README.md +80 -0
  115. package/design-system/components/Menu/preview.html +43 -0
  116. package/design-system/components/Meter/README.md +67 -0
  117. package/design-system/components/Meter/preview.html +60 -0
  118. package/design-system/components/NumberInput/README.md +82 -0
  119. package/design-system/components/NumberInput/preview.html +63 -0
  120. package/design-system/components/Page/README.md +70 -0
  121. package/design-system/components/Page/preview.html +60 -0
  122. package/design-system/components/PageBar/README.md +66 -0
  123. package/design-system/components/PageBar/preview.html +57 -0
  124. package/design-system/components/PageHero/README.md +86 -0
  125. package/design-system/components/PageHero/preview.html +60 -0
  126. package/design-system/components/Pagination/README.md +85 -0
  127. package/design-system/components/Pagination/preview.html +98 -0
  128. package/design-system/components/Panel/README.md +90 -0
  129. package/design-system/components/Panel/preview.html +41 -0
  130. package/design-system/components/PasswordInput/README.md +84 -0
  131. package/design-system/components/PasswordInput/preview.html +81 -0
  132. package/design-system/components/Plate/README.md +71 -0
  133. package/design-system/components/Plate/preview.html +47 -0
  134. package/design-system/components/Popover/README.md +85 -0
  135. package/design-system/components/Popover/preview.html +44 -0
  136. package/design-system/components/PricingTable/README.md +92 -0
  137. package/design-system/components/PricingTable/preview.html +54 -0
  138. package/design-system/components/ProgressPetals/README.md +65 -0
  139. package/design-system/components/ProgressPetals/preview.html +99 -0
  140. package/design-system/components/Radio/README.md +98 -0
  141. package/design-system/components/Radio/preview.html +54 -0
  142. package/design-system/components/RankBar/README.md +70 -0
  143. package/design-system/components/RankBar/preview.html +115 -0
  144. package/design-system/components/Ring/README.md +68 -0
  145. package/design-system/components/Ring/preview.html +64 -0
  146. package/design-system/components/Section/README.md +69 -0
  147. package/design-system/components/Section/preview.html +41 -0
  148. package/design-system/components/Segmented/README.md +94 -0
  149. package/design-system/components/Segmented/preview.html +58 -0
  150. package/design-system/components/Select/README.md +86 -0
  151. package/design-system/components/Select/preview.html +60 -0
  152. package/design-system/components/Skeleton/README.md +66 -0
  153. package/design-system/components/Skeleton/preview.html +43 -0
  154. package/design-system/components/Starter/README.md +60 -0
  155. package/design-system/components/Starter/preview.html +86 -0
  156. package/design-system/components/Stat/README.md +97 -0
  157. package/design-system/components/Stat/preview.html +58 -0
  158. package/design-system/components/StatTiles/README.md +69 -0
  159. package/design-system/components/StatTiles/preview.html +89 -0
  160. package/design-system/components/StatusScreen/README.md +77 -0
  161. package/design-system/components/StatusScreen/preview.html +37 -0
  162. package/design-system/components/Stepper/README.md +67 -0
  163. package/design-system/components/Stepper/preview.html +109 -0
  164. package/design-system/components/StreakCalendar/README.md +68 -0
  165. package/design-system/components/StreakCalendar/preview.html +113 -0
  166. package/design-system/components/Switch/README.md +99 -0
  167. package/design-system/components/Switch/preview.html +81 -0
  168. package/design-system/components/Table/README.md +106 -0
  169. package/design-system/components/Table/preview.html +148 -0
  170. package/design-system/components/Tabs/README.md +88 -0
  171. package/design-system/components/Tabs/preview.html +44 -0
  172. package/design-system/components/Testimonial/README.md +83 -0
  173. package/design-system/components/Testimonial/preview.html +39 -0
  174. package/design-system/components/TextArea/README.md +83 -0
  175. package/design-system/components/TextArea/preview.html +46 -0
  176. package/design-system/components/TickRow/README.md +67 -0
  177. package/design-system/components/TickRow/preview.html +93 -0
  178. package/design-system/components/Tile/README.md +77 -0
  179. package/design-system/components/Tile/preview.html +56 -0
  180. package/design-system/components/Timeline/README.md +89 -0
  181. package/design-system/components/Timeline/preview.html +67 -0
  182. package/design-system/components/Toast/README.md +72 -0
  183. package/design-system/components/Toast/preview.html +39 -0
  184. package/design-system/components/Tooltip/README.md +69 -0
  185. package/design-system/components/Tooltip/preview.html +34 -0
  186. package/design-system/components/TopBar/README.md +93 -0
  187. package/design-system/components/TopBar/preview.html +65 -0
  188. package/design-system/components/TrendBars/README.md +94 -0
  189. package/design-system/components/TrendBars/preview.html +84 -0
  190. package/design-system/components/Well/README.md +92 -0
  191. package/design-system/components/Well/preview.html +67 -0
  192. package/design-system/components/bundle.css +1133 -0
  193. package/design-system/tokens.json +1427 -0
  194. package/dist/fello-core.css +3 -0
  195. package/dist/fello.css +1370 -0
  196. package/dist/index.d.ts +189 -0
  197. package/dist/index.js +562 -0
  198. package/dist/toast.d.ts +17 -0
  199. package/dist/toast.js +54 -0
  200. package/dist/tokens.d.ts +232 -0
  201. package/dist/tokens.js +235 -0
  202. package/package.json +96 -4
  203. package/tokens/_product.css +201 -0
  204. package/tokens/_source.hubl.css +359 -0
  205. package/tokens/design-tokens.json +630 -0
  206. package/tokens/shadcn-compat.css +36 -0
  207. package/tokens/tokens.css +235 -0
  208. package/tokens/tokens.md +298 -0
  209. package/tokens/tokens.root.css +232 -0
  210. package/tokens/tokens.ts +237 -0
package/AGENTS.md ADDED
@@ -0,0 +1,112 @@
1
+ # brand-kit for coding agents (0.4.0)
2
+
3
+ Read this before writing UI in any Fello project that uses `@felloinnovations/brand-kit`. It ships inside the
4
+ package at `node_modules/@felloinnovations/brand-kit/AGENTS.md`. The HubSpot website (felix-theme) is out of scope:
5
+ it follows its own repo's rules.
6
+
7
+ ---
8
+
9
+ ## Where things are
10
+
11
+ All paths are under `node_modules/@felloinnovations/brand-kit/`.
12
+
13
+ | Path | What it is |
14
+ | --- | --- |
15
+ | `design-system/README.md` | The guide's front page. Read it first. |
16
+ | `design-system/01-how-claude-decides.md` | The decision workflow: situation, recipe, components, foundations, states, verify. Follow it in order. |
17
+ | `design-system/<NN>-*.md` | The other numbered chapters, one per topic: colour, type, space, sizing, scrolling, choosing components, charts, patterns, page recipes, content, motion, accessibility, AI experiences, creativity, public pages, decisions, and `18-checklist.md`. |
18
+ | `design-system/components/<Name>/` | The catalog: `README.md` (use, states, rules) and `preview.html` (markup to copy). |
19
+ | `tokens/tokens.md` | Every token and its value. Grep it before writing any value. |
20
+ | `dist/fello.css` | The whole kit in one file. |
21
+ | `tokens/tokens.css` | Tokens only, as a Tailwind v4 `@theme`. |
22
+
23
+ The same guide is hosted, always current, at `https://brand-kit-site-production.up.railway.app/latest/llms.txt`
24
+ (pinned copies under `/v/0.4.0/`).
25
+
26
+ ---
27
+
28
+ ## fello.css or tokens.css
29
+
30
+ - **`fello.css`** (`@felloinnovations/brand-kit/fello.css`): Instrument Sans, every token as `:root` custom
31
+ properties (kit and product layer), and the `ws-*` component classes the catalog markup uses. Works in any stack,
32
+ Tailwind or not. One import gives a page the whole kit.
33
+ - **`tokens.css`** (`@felloinnovations/brand-kit/tokens.css`): the tokens only, as a Tailwind v4 `@theme`, so utilities
34
+ such as `bg-brand-salmon` exist. Not on Tailwind v4: use `tokens.root.css` (plain `:root`) or `fello.css`.
35
+
36
+ A Tailwind v4 app usually takes both:
37
+
38
+ ```css
39
+ @import "tailwindcss";
40
+ @import "@felloinnovations/brand-kit/tokens.css";
41
+ @import "@felloinnovations/brand-kit/fello.css";
42
+ @source "../node_modules/@felloinnovations/brand-kit/dist";
43
+ ```
44
+
45
+ The `@source` line is what makes Tailwind generate the classes the kit's React components use.
46
+
47
+ ---
48
+
49
+ ## Face and layer
50
+
51
+ Name the face before choosing anything (guide chapter 01, step 0: product workspace, dashboard or report, entry,
52
+ public web page, email, deck, mockup). The face sets one of two layers, never mixed on one surface:
53
+
54
+ - **Product layer**: a cream page and cream cards with a 0.5 px edge, 8 px corners, flat; one solid navy button per
55
+ card and per page; 14 px body; compact controls. Built from the catalog markup and `ws-*` classes, wrapped in the
56
+ app's own thin components.
57
+ - **Marketing layer** (public pages, chapter 19): white cards at 4 px, the salmon gradient button, the kit's big type
58
+ steps, 16 px body. The package's React `Button`, `Card`, `Input`, `Badge`, `Checkbox`, `Radio` and `Stat` are this
59
+ layer (`KitButton`, `KitCard` and friends in the catalog).
60
+
61
+ `Tabs`, `Skeleton`, `Label` and `Toaster` (from `@felloinnovations/brand-kit/toast`) serve both.
62
+
63
+ ---
64
+
65
+ ## The rules
66
+
67
+ - **Never invent a value.** No raw hex, px font-size, one-off shadow or ad-hoc radius. Every value is a token in
68
+ `tokens/tokens.md`. If none fits, say so and leave it; do not make one up.
69
+ - **Tailwind v4:** write `text-[color:var(--x)]` and `text-[length:var(--x)]`, never bare `text-[var(--x)]`. Tailwind
70
+ cannot tell a colour from a size behind a bare `var()`, guesses font-size, and drops the colour silently. This has
71
+ already shipped a bug.
72
+ - **Semantic tokens over primitives**: `var(--color-text-heading)`, not `var(--color-brand-navy)`, for the same job.
73
+ The semantic layer is what lets a colour be retuned in one place.
74
+ - **Check the catalog before building a component.** Never redraw one. If the kit has nothing for it, build it in
75
+ the consuming app from tokens and say what was missing. Do not add it to brand-kit and do not open a PR against it
76
+ from a consuming app; the kit's owners take it from there.
77
+ - **Close but not exact**: pass `className` to a React export (merged through `tailwind-merge`, so your utility wins).
78
+ Do not fork it.
79
+ - **Accessibility**: native elements first; visible focus (`--shadow-focus-ring`) on every control; an error is a
80
+ message wired with `aria-describedby`; targets 40 px boxed on touch and 24 px for words that act; words pass AA.
81
+ - **Every page scrolls**: no content trapped by a nested `overflow: hidden` or a fixed-height parent. A field on the
82
+ cream page has a white ground (`ws-field`).
83
+ - **Words**: sentence case, no em dashes, nothing developer-facing on a screen, never a faked card or number.
84
+
85
+ Before calling UI done, run `design-system/18-checklist.md`.
86
+
87
+ ---
88
+
89
+ ## Provisional values
90
+
91
+ Not signed off and **will change**. Do not build anything load-bearing on them, and flag it when you use one:
92
+
93
+ - `--color-feedback-*`, `--color-alert`, `--color-stat-positive`: inherited from the HubSpot boilerplate.
94
+ - The kit `Button`'s `tertiary` and `clean` themes, and all kit `Badge` tones.
95
+
96
+ ---
97
+
98
+ ## Paste this into your project
99
+
100
+ Add to the consuming repo's `CLAUDE.md` or `AGENTS.md`:
101
+
102
+ ```markdown
103
+ ## Design system
104
+
105
+ This project uses `@felloinnovations/brand-kit` (the Fello brand kit). Before writing any UI, read
106
+ `node_modules/@felloinnovations/brand-kit/AGENTS.md`, then the guide's front page
107
+ `node_modules/@felloinnovations/brand-kit/design-system/README.md` and its workflow `01-how-claude-decides.md`.
108
+
109
+ Every value is a token in `node_modules/@felloinnovations/brand-kit/tokens/tokens.md`: never invent a colour,
110
+ size, radius or shadow. Check the catalog (`design-system/components/`) before building a component. Write
111
+ `text-[color:var(--x)]`, never `text-[var(--x)]`. Run `design-system/18-checklist.md` before calling UI done.
112
+ ```
package/CHANGELOG.md ADDED
@@ -0,0 +1,131 @@
1
+ # Changelog
2
+
3
+ ## 0.4.0 on npm (30 Oct 2026)
4
+
5
+ The kit moves from GitHub Packages to the public npm registry, so anyone, any app and any deploy installs it with
6
+ `npm install @felloinnovations/brand-kit`: no token, no `.npmrc`. Same 0.4.0 tokens, CSS and components; the install
7
+ steps in the README, the skills and llms.txt drop every token line. Releases publish from GitHub through npm's
8
+ trusted publishing, with no stored token.
9
+
10
+ ## 0.4.0
11
+
12
+ The kit gains its guide. Lokesh's design system (his Claude Design System
13
+ export of 26 Oct 2026, built from the first product on the kit) is now part
14
+ of the kit, in `design-system/`: a front page and chapters on how to decide a
15
+ screen, the foundations, patterns, page recipes, content, motion and
16
+ accessibility, plus a catalog of 74 components, each with a README and a
17
+ static preview. It ships in the package and is published as Claude's design
18
+ system, so Claude's Design and Slides use it.
19
+
20
+ - **Any Fello build, not only workspace screens.** "How Claude decides" covers
21
+ seven faces (product workspace, dashboard or console, entry, public web page,
22
+ email or one-pager, deck, mockup or artifact) and two layers (product,
23
+ marketing), with a quick path at the top for artifacts and mockups. New
24
+ chapter: Public pages. Built from our products and the website.
25
+ - **The kit's CSS styles every component.** All catalog styles live in
26
+ `bundle.css` under `ws-<component>` names; previews are markup only. New:
27
+ `ActionList` (a card's list of next acts), `Page` (`.ws-page`, `.ws-board`),
28
+ `PageBar`, `Kbd`, and `Starter` (a paste-ready page).
29
+ - **`fello-core.css`** (tokens and house styles, minified, ~29 kB) plus each
30
+ component's own styles: an artifact inlines only what it uses instead of the
31
+ whole 140 kB `fello.css`. Each component's card in the skill lists its styles.
32
+
33
+ - **One token source, now with the product layer.** The `--ws-*` tokens
34
+ (surfaces, edges, AA words, chart tones, gaps, corners, control heights,
35
+ layout widths, motion) live in `tokens/_product.css`, written the way the
36
+ first product writes them (as kit steps, so they move with the kit), and
37
+ `yarn tokens` emits them with the kit's 106 into every output: 225 tokens
38
+ in `tokens.css`, `tokens.root.css`, `tokens.ts` and `tokens.md`. Includes
39
+ the hero washes (`--ws-team-glow`, `--ws-cool-glow`) and
40
+ `--ws-ease-spring` (no overshoot, so it is the soft curve).
41
+ - **`design-system/tokens.json` is generated** by the same run, in the
42
+ Claude Design System list format: values resolved to literals (a formula
43
+ kept at the end of its usage note), colour aliases kept, Lokesh's notes,
44
+ order and type groups preserved, and the format's rules checked so a bad
45
+ value fails the run instead of vanishing from the page.
46
+ - Kit names keep the kit's values: `--color-text-muted` is #6E6E6E (4.95:1 on
47
+ the cream) and the 0.3.0 text tokens (`--color-text-placeholder`,
48
+ `--color-text-brand-strong`, `-error-strong`, `-success-strong`) are in the
49
+ design system too. `--ws-word-needs` is now `--color-text-brand-strong`
50
+ (same hex). Field placeholders in `bundle.css` use
51
+ `--color-text-placeholder` instead of Gray 5 (2.3:1).
52
+ - **`fello.css`**: one stylesheet with the whole kit, Instrument Sans plus
53
+ every token as `:root` plus the house component styles (`ws-*` classes).
54
+ `import '@felloinnovations/brand-kit/fello.css'`, built into `dist/` by
55
+ every tsup run.
56
+ - **Hosted on the gallery**, with open CORS: `/latest/` and `/v/0.4.0/` each
57
+ serve `fello.css`, `tokens.css`, `tokens.json`, `llms.txt`,
58
+ `llms-full.txt`, `guide/<chapter>.md` and
59
+ `components/<Name>/README.md` + `preview.html`; `/llms.txt` at the root.
60
+ `/v/` is cached as immutable, `/latest/` is not cached.
61
+ - **`llms.txt`**: a short index of the kit for any model (what it is, how to
62
+ use it in Claude, in an artifact, a plain page and a React app, and a link
63
+ with one line for every chapter and component). `llms-full.txt` is the
64
+ whole guide in one file.
65
+ - The package now ships `design-system/` (export `./design-system/*`), so a
66
+ coding agent reads the guide from `node_modules`.
67
+ - New component: **Kbd**, a key as printed on the keyboard (`.ws-kbd`).
68
+ - The gallery has a **Guide** page (the design system, chapter by chapter)
69
+ and a **Components** page (every preview, live, on `fello.css`).
70
+
71
+ ## 0.3.0
72
+
73
+ Accessibility. Six colour pairs were failing WCAG AA and are fixed:
74
+
75
+ - `--color-text-muted` un-aliased from Gray 6. #7F7F7F was 4.00:1 on white
76
+ and 3.89:1 on the cream page, so every muted label in the estate failed. Now
77
+ #6E6E6E, 5.10:1 and 4.95:1. The grey ramp is unchanged for fills and rules.
78
+ - New `--color-text-brand-strong`, `--color-text-error-strong` and
79
+ `--color-text-success-strong`: the brand and feedback hues darkened until
80
+ they clear 4.5:1 on their own tint. Badge labels now use these, which is why
81
+ a salmon badge's text is not salmon.
82
+ - `--color-text-placeholder`. Input placeholders were Gray 5 at 2.35:1.
83
+ - `Stat` used a raw 28px; now on the scale.
84
+
85
+ **Still failing, and not changed:** white on the primary button, 2.44 to
86
+ 2.65:1. That is the live brand CTA, so it is a brand decision rather than a
87
+ kit one.
88
+
89
+ Logos and brand assets ship with the kit, and the gallery serves them
90
+ individually and as a zip.
91
+
92
+ ## 0.2.1
93
+
94
+ - `AGENTS.md` and generated `tokens/tokens.md` ship inside the package, so a
95
+ coding agent in a consuming repo can read the rules and every token value.
96
+ - CI regenerates `tokens/` and `dist/` and fails on any diff, since both are
97
+ generated but committed.
98
+ - Releases publish from GitHub Actions on a tag, using the runner's own
99
+ token. Nobody needs a personal token with `write:packages`.
100
+
101
+ ## 0.2.0
102
+
103
+ - **Checkbox** and **Radio** / **RadioGroup**, native inputs under a custom
104
+ skin so form participation, autofill and keyboard behaviour stay the
105
+ browser's.
106
+ - **Tabs**, on Radix, with `underline` and `pill` variants.
107
+ - **Card**: radius drops to 4px, surface is white by default, shadow only when
108
+ `interactive`. New `surface` prop (`white` / `tinted` / `transparent`).
109
+ - **Toast** gets a gallery page, and its action button is brand salmon rather
110
+ than sonner's default black.
111
+ - Gallery is one page per section with hash routing, rather than one long
112
+ scroll.
113
+ - `AGENTS.md` and generated `tokens/tokens.md` for coding agents.
114
+ - New runtime dependency: `@radix-ui/react-tabs`.
115
+
116
+ ## 0.1.1
117
+
118
+ - **Fixed:** every `text-[var(--color-*)]` was parsed by Tailwind v4 as a
119
+ font-size, so primary and navy buttons rendered their labels in inherited
120
+ body ink instead of white.
121
+ - **Fixed:** `buttonVariants()` used directly on an `<a>` lost its border.
122
+ Each variant now owns its border rather than relying on `tailwind-merge` to
123
+ resolve a base/variant conflict.
124
+ - `Toaster` moved to the `/toast` subpath so `sonner` is genuinely optional.
125
+
126
+ ## 0.1.0
127
+
128
+ - 102 tokens generated from the Figma capture of
129
+ `Marketing - Design System 3.0`: `tokens.css` (Tailwind v4),
130
+ `tokens.root.css` (plain CSS), `tokens.ts` (typed), `shadcn-compat.css`.
131
+ - Button, Badge, Card, Input, Label, Skeleton, Stat, Toaster.
package/README.md CHANGED
@@ -1,3 +1,182 @@
1
- # Temporary Holding Version
1
+ # @felloinnovations/brand-kit
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Fello's brand kit and design system: tokens, one stylesheet (`fello.css`), a catalog of components, React
4
+ components, and a guide that tells Claude how to choose and check a design. One source of truth for everything
5
+ Fello builds. The HubSpot website (felix-theme) keeps its own copy for now.
6
+
7
+ Gallery and hosted files: https://brand-kit-site-production.up.railway.app
8
+
9
+ ---
10
+
11
+ ## Use it
12
+
13
+ ### In Claude (claude.ai, Cowork)
14
+
15
+ Say **"use the Fello brand kit"**. Claude reads the guide, picks the right setup for what you are building (an
16
+ artifact, a deck, a mockup, a page, an app) and checks the result.
17
+
18
+ That works once an organisation Owner has done this, once:
19
+
20
+ 1. **Organization settings > Plugins & skills > Policy**: turn on **Cloud code execution and file creation** and
21
+ **Skills**.
22
+ 2. **Plugins & skills > Add > Sync from GitHub**: choose `FelloInnovations/brand-kit`, leave **Sync automatically** on,
23
+ set the default access to **Installed by default** (or **Required**), then **Create**. Install the Claude GitHub App
24
+ on the repo if it is not listed.
25
+ 3. Share the **Fello Brand Kit** design system with everyone in the organisation, then **Organization settings >
26
+ Artifacts > Design systems**, its menu, **Set as default**. Design and Slides then use it without being asked.
27
+
28
+ After that nobody installs or downloads anything again: every merge to `main` re-syncs the skill to claude.ai, Cowork
29
+ and Claude Code for the whole organisation, and the plugin carries no version, so the newest commit is always the one
30
+ people get. The skill zip on the gallery is only for someone outside the organisation.
31
+
32
+ ### In Claude Code
33
+
34
+ Once per machine:
35
+
36
+ ```
37
+ /plugin marketplace add FelloInnovations/brand-kit
38
+ /plugin install brand-kit@fello
39
+ ```
40
+
41
+ Or commit this to a repo's `.claude/settings.json` so everyone who opens it gets the plugin (each person accepts the
42
+ folder trust prompt once, and needs GitHub access to FelloInnovations, since the repo is private):
43
+
44
+ ```json
45
+ {
46
+ "extraKnownMarketplaces": {
47
+ "fello": {
48
+ "source": { "source": "github", "repo": "FelloInnovations/brand-kit" }
49
+ }
50
+ },
51
+ "enabledPlugins": {
52
+ "brand-kit@fello": true
53
+ }
54
+ }
55
+ ```
56
+
57
+ The plugin carries the same `fello-brand-kit` skill as claude.ai, plus three commands:
58
+
59
+ | Command | What it does |
60
+ | --- | --- |
61
+ | `/brand-kit:brand-audit` | Read-only report: raw values, drift from tokens, pages that cannot scroll, fields with no white ground, small targets, contrast, console errors. |
62
+ | `/brand-kit:brand-adopt` | Migrates an existing app onto the kit, in stages, building between each. |
63
+ | `/brand-kit:brand-new` | Scaffolds a new app already on the kit. |
64
+
65
+ Audit before adopt, so someone who does not read code sees what is wrong before anything is rewritten.
66
+
67
+ ### In code
68
+
69
+ Public on npm: no token and no `.npmrc`, on a laptop, in CI or on a deploy. (Older apps may still map
70
+ `@felloinnovations` to `npm.pkg.github.com` in `.npmrc`; delete that line.)
71
+
72
+ ```sh
73
+ bun add @felloinnovations/brand-kit
74
+ ```
75
+
76
+ ```css
77
+ @import "tailwindcss";
78
+ @import "@felloinnovations/brand-kit/tokens.css"; /* tokens as a Tailwind v4 @theme */
79
+ @import "@felloinnovations/brand-kit/fello.css"; /* the whole kit: font, tokens, ws-* component classes */
80
+ @source "../node_modules/@felloinnovations/brand-kit/dist";
81
+ ```
82
+
83
+ Then point the repo's agents at the guide: paste the block at the end of [AGENTS.md](AGENTS.md) into its `CLAUDE.md`.
84
+
85
+ > A `github:FelloInnovations/brand-kit` git dependency does **not** work: the repo is private and bun resolves that
86
+ > shorthand through the unauthenticated tarball API, which 404s. Use the registry.
87
+
88
+ ### On a plain page
89
+
90
+ One line, pinned to a version:
91
+
92
+ ```html
93
+ <link rel="stylesheet" href="https://brand-kit-site-production.up.railway.app/v/0.4.0/fello.css">
94
+ ```
95
+
96
+ Then use the `ws-*` classes and `var(--token)`; the markup for each component is in the gallery. `/latest/` exists
97
+ too, but a live page should pin. A claude.ai artifact cannot link it (artifacts load stylesheets only from Google
98
+ Fonts), which is why the skill carries `fello.css` and inlines it.
99
+
100
+ ---
101
+
102
+ ## What is in it
103
+
104
+ - **`design-system/`**: the guide (front page `README.md` and numbered chapters; `01` is the decision workflow) and
105
+ the component catalog (`components/<Name>/README.md` and `preview.html`). Started from Lokesh's design system,
106
+ built from the first product on the kit.
107
+ - **`tokens/`**: generated token files. Every token and its value is in `tokens/tokens.md`.
108
+ - **`dist/fello.css`**: the one stylesheet. **`tokens/tokens.css`**: tokens only, Tailwind v4.
109
+ - **React components**: `Button` · `Badge` · `Card` · `Input` · `Label` · `Checkbox` · `Radio` / `RadioGroup` ·
110
+ `Tabs` · `Skeleton` · `Stat`, and `Toaster` from `@felloinnovations/brand-kit/toast` (needs `sonner`). Most are the
111
+ marketing layer; product screens are built from the catalog. See [AGENTS.md](AGENTS.md) for which is which.
112
+ - **`skill/SKILL.md`** and **`plugin/`**: the Claude skill and the Claude Code plugin. `yarn skill` packages one into
113
+ the other and into the gallery's zip.
114
+
115
+ ---
116
+
117
+ ## Why this exists
118
+
119
+ Before this package, six apps each carried their own idea of the Fello brand:
120
+
121
+ | Repo | Vocabulary | Navy | Font |
122
+ | --- | --- | --- | --- |
123
+ | `felix-theme` | `--color-brand-*` (Figma DS 3.0) | `#093555` | Instrument Sans |
124
+ | `affiliate-portal` | `--color-navy` | `#093555` | Instrument Sans |
125
+ | `partnerships-os` | shadcn + `--fello-*` | `#093555` | Instrument Sans |
126
+ | `csm-web` | shadcn, a different Figma file | `#0b1f3a` | Instrument Sans |
127
+ | `mad` | product SDK names, hand-copied | n/a | Inter |
128
+ | `Case Study Showcase` | its own "Copilot DS" | n/a | Inter |
129
+
130
+ Two navies and two fonts, all shipping as "Fello". This package is the one copy.
131
+
132
+ ---
133
+
134
+ ## Known gaps
135
+
136
+ - **No dark mode.** None was designed. Do not invent one.
137
+ - **Feedback colours are provisional.** `--color-feedback-*`, `--color-alert` and `--color-stat-positive` came from
138
+ the HubSpot boilerplate and will change.
139
+ - **The kit `Button`'s `tertiary` and `clean` themes are placeholders**: the Figma capture never specified their
140
+ per-state colours.
141
+ - **Medium (36px) and Small (28px) kit buttons miss the 44px tap target.** Use Large for a mobile CTA or form submit.
142
+ - **`felix-theme` does not consume this package**, so the two can drift.
143
+
144
+ ---
145
+
146
+ ## Changing a token
147
+
148
+ Values are generated, never hand-edited.
149
+
150
+ 1. Edit `tokens/_source.hubl.css` (values) or `tokens/design-tokens.json` (metadata).
151
+ 2. `yarn tokens`
152
+ 3. Commit the regenerated files under `tokens/`.
153
+
154
+ This repo is the source of truth, not Figma: the values were captured from `Marketing - Design System 3.0`, which
155
+ is no longer maintained. Only the kit's owners (Amit and Arpan) change tokens.
156
+
157
+ ---
158
+
159
+ ## Releasing
160
+
161
+ CI publishes. Bump `version` in `package.json` (and `plugin/.claude-plugin/plugin.json`, and the pinned `/v/` links
162
+ in `skill/SKILL.md`), run `yarn build` and `yarn skill`, commit, then push a tag that matches:
163
+
164
+ ```sh
165
+ git tag v0.4.0 && git push origin v0.4.0
166
+ ```
167
+
168
+ `.github/workflows/publish.yml` checks the tag matches `package.json`, builds, and publishes to npm through npm's
169
+ trusted publishing (GitHub's OIDC): no token is stored anywhere. Published versions are immutable.
170
+
171
+ ---
172
+
173
+ ## Development
174
+
175
+ ```sh
176
+ bun install
177
+ yarn site # the gallery, localhost:5173
178
+ yarn build # tokens + dist
179
+ yarn skill # the skill zip and plugin/skills/brand-kit/
180
+ yarn build:site # static gallery into site-dist/
181
+ yarn typecheck
182
+ ```
@@ -0,0 +1,10 @@
1
+ <svg width="601" height="258" viewBox="0 0 601 258" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M324.821 4.21429C327.287 6.40421 328.534 9.66611 328.564 14L328.568 197.799C328.568 211.688 331.357 220.245 334.598 224.627C336.998 227.873 340.269 229.85 346.819 229.001L346.815 228.978C355.977 227.236 360.644 230.57 362.654 239.387C363.926 246.583 360.612 255.971 350.887 257.348L350.882 257.314C334.906 259.503 320.946 254.126 311.749 241.687C303.288 230.246 300.101 214.512 300.101 197.799L300.101 14.1988H300.078C300.078 9.7523 301.329 6.42413 303.833 4.21429C306.102 1.99102 309.475 0.879395 313.952 0.879395C318.695 0.879395 322.317 1.99103 324.821 4.21429Z" fill="#FF725C"/>
3
+ <path d="M401.372 14C401.343 9.66611 400.095 6.40421 397.629 4.21429C395.125 1.99103 391.503 0.879395 386.761 0.879395C382.283 0.879395 378.91 1.99102 376.641 4.21429C374.138 6.42413 372.886 9.7523 372.886 14.1988H372.909L372.91 197.799C372.91 214.512 376.096 230.246 384.557 241.687C393.755 254.126 407.714 259.503 423.69 257.314L423.695 257.348C433.42 255.971 436.734 246.583 435.463 239.387C433.453 230.57 428.786 227.236 419.624 228.978L419.627 229.001C413.077 229.85 409.806 227.873 407.406 224.627C404.166 220.245 401.376 211.688 401.376 197.799L401.372 14Z" fill="#FF725C"/>
4
+ <path d="M503.435 89.1116C521.171 86.3351 539.327 89.3161 555.261 97.6211C555.461 97.7273 555.628 97.8851 555.747 98.0781C555.866 98.2715 555.931 98.4933 555.935 98.7207C555.94 98.9481 555.884 99.1725 555.773 99.3706C555.663 99.5688 555.501 99.7336 555.306 99.8479C553.47 100.913 551.78 102.215 550.28 103.72C546.321 107.691 543.826 112.897 543.204 118.483C543.187 118.688 543.12 118.897 543.01 119.071C542.9 119.245 542.75 119.389 542.572 119.492C542.395 119.595 542.195 119.653 541.99 119.661C541.785 119.669 541.582 119.627 541.396 119.539C530.52 114.421 518.34 112.779 506.506 114.836C494.672 116.893 483.75 122.549 475.217 131.041C466.683 139.533 460.948 150.452 458.786 162.323C456.624 174.195 458.139 186.447 463.126 197.425C463.212 197.607 463.255 197.812 463.249 198.013C463.243 198.213 463.189 198.41 463.092 198.585C462.995 198.761 462.857 198.911 462.691 199.023C462.525 199.134 462.335 199.204 462.136 199.227C456.915 199.989 452.066 202.423 448.33 206.165C446.583 207.951 445.118 210 443.993 212.234C443.888 212.449 443.724 212.634 443.522 212.76C443.321 212.886 443.089 212.953 442.851 212.953C442.614 212.953 442.382 212.886 442.18 212.76C441.979 212.634 441.817 212.453 441.713 212.239C433.377 196.264 430.326 178.023 433.011 160.188C435.697 142.353 443.974 125.843 456.639 113.061C469.305 100.278 485.698 91.8882 503.435 89.1116Z" fill="#FF725C"/>
5
+ <path d="M567.18 106.488C558.489 106.488 551.444 113.567 551.444 122.3C551.444 131.033 558.489 138.112 567.18 138.112C575.871 138.112 582.916 131.033 582.916 122.3C582.916 113.567 575.871 106.488 567.18 106.488Z" fill="#FF725C"/>
6
+ <path d="M589.752 133.652C589.948 133.537 590.17 133.476 590.397 133.476C590.624 133.476 590.847 133.537 591.043 133.652C591.237 133.767 591.398 133.93 591.509 134.127C599.774 150.138 602.741 168.382 599.978 186.204C597.215 204.03 588.865 220.504 576.142 233.232C563.419 245.959 546.987 254.277 529.236 256.973C511.484 259.67 493.34 256.606 477.441 248.226C477.228 248.121 477.038 247.953 476.913 247.751C476.787 247.549 476.72 247.315 476.72 247.077C476.72 246.838 476.787 246.605 476.913 246.402C477.038 246.2 477.218 246.037 477.431 245.932C479.659 244.787 481.703 243.296 483.476 241.522C487.198 237.771 489.616 232.912 490.369 227.67C490.392 227.47 490.464 227.268 490.575 227.1C490.686 226.933 490.835 226.795 491.01 226.696C491.185 226.598 491.38 226.543 491.58 226.535C491.781 226.528 491.98 226.568 492.161 226.652C503.092 231.674 515.296 233.202 527.119 231.03C538.942 228.857 549.816 223.088 558.27 214.504C566.725 205.92 572.352 194.934 574.392 183.032C576.432 171.13 574.784 158.884 569.674 147.953C569.586 147.767 569.544 147.562 569.552 147.356C569.561 147.15 569.618 146.95 569.72 146.771C569.823 146.593 569.966 146.442 570.139 146.331C570.312 146.221 570.51 146.154 570.714 146.137C576.271 145.513 581.463 143.005 585.414 139.029C586.902 137.571 588.2 135.93 589.276 134.144L589.283 134.132C589.394 133.933 589.556 133.768 589.752 133.652Z" fill="#FF725C"/>
7
+ <path d="M466.019 208.133C457.328 208.133 450.283 215.213 450.283 223.945C450.283 232.678 457.328 239.758 466.019 239.758C474.71 239.758 481.755 232.678 481.755 223.945C481.755 215.213 474.71 208.133 466.019 208.133Z" fill="#FF725C"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M164.163 247.771C177.029 254.451 192.362 257.791 210.16 257.791C221.74 257.791 233.212 255.959 244.578 252.296C252.217 249.88 258.852 246.165 264.699 241.875C270.926 237.75 270.475 229.777 267.575 223.949C264.324 217.416 255.09 214.876 248.031 219.665C246.754 220.49 245.637 221.229 244.628 221.896C240.405 224.688 238.082 226.224 233.908 227.572C224.901 230.373 218.986 232.182 209.765 232.182C197.542 232.182 188.18 230.964 179.603 226.439C171.025 221.914 164.485 215.234 159.982 206.399C156.367 199.307 154.203 190.688 153.49 180.542H265.486C271.348 180.542 276.1 175.766 276.1 169.876C276.1 152.853 273.205 138.308 267.415 126.241C261.84 113.959 253.584 104.585 242.648 98.121C231.926 91.4412 218.952 88.1012 203.727 88.1012C187.859 88.1012 173.92 91.7644 161.911 99.0907C149.903 106.201 141.651 116.113 135.003 128.827C128.356 141.54 125.032 156.408 125.032 173.431C125.032 191.1 128.463 206.292 135.325 219.005C142.401 231.503 151.297 241.091 164.163 247.771ZM153.684 160.179C154.494 151.943 156.379 144.617 159.338 138.2C163.627 129.365 169.524 122.686 177.029 118.161C184.749 113.42 193.863 111.05 204.37 111.05C218.952 111.05 230.21 115.683 238.145 124.948C245.245 133.24 249.168 144.984 249.914 160.179H153.684Z" fill="#FF725C"/>
9
+ <path d="M15.9032 257.79C7.4508 257.79 0.983643 252.672 0.983643 242.154V17.8122C0.983643 12.4925 2.41746 8.38842 5.28506 5.50019C8.15267 2.61196 12.2402 1.16792 17.5476 1.16792H134.943C139.368 1.16792 142.68 2.27948 144.879 4.50275C147.091 6.5178 148.357 11.0116 148.357 14.9879C148.357 19.1994 147.091 23.7361 144.879 25.9593C142.666 28.1826 139.354 29.2909 134.943 29.2842H31.7853V118.722H95.8352C100.026 118.722 103.228 119.834 105.441 122.057C106.573 123.249 107.45 124.662 108.019 126.207C108.588 127.752 108.837 131.941 108.749 133.586C108.749 137.798 107.647 141.015 105.441 143.239C103.235 145.462 100.033 146.57 95.8352 146.563H31.7853V242.154C31.7853 253.257 25.619 257.79 15.9032 257.79Z" fill="#FF725C"/>
10
+ </svg>
Binary file
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="60.70 7.30 39.00 39.00" role="img" aria-label="Fello">
2
+ <!--
3
+ The Fello mark: the final o of the wordmark and its two dots, lifted
4
+ straight out of the logo rather than redrawn, so it cannot drift from it.
5
+ The full wordmark is unreadable at 16px; this holds.
6
+ -->
7
+ <path d="M78.1884 13.7302C80.9484 13.2981 83.7737 13.762 86.2533 15.0544C86.2844 15.0709 86.3105 15.0954 86.3289 15.1255C86.3474 15.1556 86.3575 15.1901 86.3582 15.2255C86.3589 15.2609 86.3502 15.2958 86.333 15.3266C86.3158 15.3574 86.2906 15.3831 86.2602 15.4009C85.9745 15.5667 85.7116 15.7693 85.4781 16.0035C84.8621 16.6213 84.4738 17.4315 84.3771 18.3007C84.3744 18.3326 84.364 18.3652 84.3469 18.3923C84.3298 18.4193 84.3064 18.4418 84.2787 18.4578C84.2511 18.4738 84.22 18.4828 84.1881 18.4841C84.1563 18.4853 84.1246 18.4788 84.0958 18.4651C82.4032 17.6686 80.5079 17.4131 78.6663 17.7332C76.8247 18.0533 75.1252 18.9335 73.7973 20.255C72.4693 21.5765 71.5768 23.2756 71.2404 25.1229C70.9039 26.9703 71.1397 28.8769 71.9158 30.5853C71.9291 30.6135 71.9359 30.6454 71.9349 30.6767C71.9339 30.7079 71.9255 30.7385 71.9104 30.7658C71.8953 30.7931 71.874 30.8165 71.8481 30.8339C71.8222 30.8512 71.7926 30.8621 71.7617 30.8657C70.9493 30.9843 70.1948 31.363 69.6133 31.9453C69.3414 32.2232 69.1135 32.5421 68.9384 32.8898C68.9221 32.9231 68.8965 32.9519 68.8652 32.9716C68.8339 32.9912 68.7977 33.0017 68.7608 33.0017C68.7238 33.0017 68.6877 32.9912 68.6563 32.9716C68.625 32.9519 68.5998 32.9239 68.5836 32.8905C67.2865 30.4045 66.8116 27.566 67.2295 24.7906C67.6474 22.0152 68.9354 19.4461 70.9063 17.457C72.8773 15.4678 75.4283 14.1622 78.1884 13.7302Z" fill="#FFFFFF"/>
8
+ <path d="M88.1081 16.4341C86.7557 16.4341 85.6594 17.5358 85.6594 18.8947C85.6594 20.2536 86.7557 21.3553 88.1081 21.3553C89.4604 21.3553 90.5568 20.2536 90.5568 18.8947C90.5568 17.5358 89.4604 16.4341 88.1081 16.4341Z" fill="#FFFFFF"/>
9
+ <path d="M91.6205 20.6613C91.651 20.6434 91.6857 20.6339 91.721 20.6339C91.7563 20.6339 91.791 20.6434 91.8214 20.6613C91.8517 20.6791 91.8767 20.7045 91.8939 20.7351C93.1801 23.2267 93.6419 26.0657 93.2119 28.8392C92.782 31.613 91.4826 34.1767 89.5027 36.1573C87.5228 38.1379 84.9657 39.4321 82.2034 39.8518C79.441 40.2714 76.6175 39.7946 74.1434 38.4906C74.1103 38.4743 74.0807 38.4481 74.0612 38.4167C74.0416 38.3852 74.0313 38.3488 74.0313 38.3117C74.0313 38.2746 74.0416 38.2383 74.0612 38.2068C74.0807 38.1753 74.1087 38.15 74.1418 38.1337C74.4885 37.9554 74.8066 37.7234 75.0825 37.4473C75.6618 36.8636 76.038 36.1076 76.1551 35.2917C76.1588 35.2606 76.1699 35.2292 76.1872 35.2032C76.2045 35.1771 76.2277 35.1556 76.2549 35.1403C76.2821 35.125 76.3125 35.1164 76.3437 35.1152C76.3748 35.114 76.4058 35.1202 76.4341 35.1334C78.1351 35.9148 80.0341 36.1527 81.874 35.8146C83.7138 35.4765 85.4059 34.5788 86.7215 33.243C88.0372 31.9072 88.9129 30.1976 89.2303 28.3455C89.5477 26.4933 89.2913 24.5877 88.4961 22.8867C88.4824 22.8577 88.476 22.8259 88.4772 22.7938C88.4785 22.7618 88.4875 22.7306 88.5034 22.7028C88.5193 22.675 88.5416 22.6515 88.5686 22.6344C88.5955 22.6172 88.6262 22.6068 88.658 22.6041C89.5228 22.507 90.3307 22.1168 90.9455 21.4979C91.177 21.2711 91.379 21.0157 91.5465 20.7378L91.5476 20.7359C91.5649 20.705 91.59 20.6793 91.6205 20.6613Z" fill="#FFFFFF"/>
10
+ <path d="M72.366 32.2516C71.0136 32.2516 69.9173 33.3533 69.9173 34.7122C69.9173 36.0711 71.0136 37.1728 72.366 37.1728C73.7184 37.1728 74.8147 36.0711 74.8147 34.7122C74.8147 33.3533 73.7184 32.2516 72.366 32.2516Z" fill="#FFFFFF"/>
11
+ </svg>
Binary file
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="60.70 7.30 39.00 39.00" role="img" aria-label="Fello">
2
+ <!--
3
+ The Fello mark: the final o of the wordmark and its two dots, lifted
4
+ straight out of the logo rather than redrawn, so it cannot drift from it.
5
+ The full wordmark is unreadable at 16px; this holds.
6
+ -->
7
+ <path d="M78.1884 13.7302C80.9484 13.2981 83.7737 13.762 86.2533 15.0544C86.2844 15.0709 86.3105 15.0954 86.3289 15.1255C86.3474 15.1556 86.3575 15.1901 86.3582 15.2255C86.3589 15.2609 86.3502 15.2958 86.333 15.3266C86.3158 15.3574 86.2906 15.3831 86.2602 15.4009C85.9745 15.5667 85.7116 15.7693 85.4781 16.0035C84.8621 16.6213 84.4738 17.4315 84.3771 18.3007C84.3744 18.3326 84.364 18.3652 84.3469 18.3923C84.3298 18.4193 84.3064 18.4418 84.2787 18.4578C84.2511 18.4738 84.22 18.4828 84.1881 18.4841C84.1563 18.4853 84.1246 18.4788 84.0958 18.4651C82.4032 17.6686 80.5079 17.4131 78.6663 17.7332C76.8247 18.0533 75.1252 18.9335 73.7973 20.255C72.4693 21.5765 71.5768 23.2756 71.2404 25.1229C70.9039 26.9703 71.1397 28.8769 71.9158 30.5853C71.9291 30.6135 71.9359 30.6454 71.9349 30.6767C71.9339 30.7079 71.9255 30.7385 71.9104 30.7658C71.8953 30.7931 71.874 30.8165 71.8481 30.8339C71.8222 30.8512 71.7926 30.8621 71.7617 30.8657C70.9493 30.9843 70.1948 31.363 69.6133 31.9453C69.3414 32.2232 69.1135 32.5421 68.9384 32.8898C68.9221 32.9231 68.8965 32.9519 68.8652 32.9716C68.8339 32.9912 68.7977 33.0017 68.7608 33.0017C68.7238 33.0017 68.6877 32.9912 68.6563 32.9716C68.625 32.9519 68.5998 32.9239 68.5836 32.8905C67.2865 30.4045 66.8116 27.566 67.2295 24.7906C67.6474 22.0152 68.9354 19.4461 70.9063 17.457C72.8773 15.4678 75.4283 14.1622 78.1884 13.7302Z" fill="#FF725C"/>
8
+ <path d="M88.1081 16.4341C86.7557 16.4341 85.6594 17.5358 85.6594 18.8947C85.6594 20.2536 86.7557 21.3553 88.1081 21.3553C89.4604 21.3553 90.5568 20.2536 90.5568 18.8947C90.5568 17.5358 89.4604 16.4341 88.1081 16.4341Z" fill="#FF725C"/>
9
+ <path d="M91.6205 20.6613C91.651 20.6434 91.6857 20.6339 91.721 20.6339C91.7563 20.6339 91.791 20.6434 91.8214 20.6613C91.8517 20.6791 91.8767 20.7045 91.8939 20.7351C93.1801 23.2267 93.6419 26.0657 93.2119 28.8392C92.782 31.613 91.4826 34.1767 89.5027 36.1573C87.5228 38.1379 84.9657 39.4321 82.2034 39.8518C79.441 40.2714 76.6175 39.7946 74.1434 38.4906C74.1103 38.4743 74.0807 38.4481 74.0612 38.4167C74.0416 38.3852 74.0313 38.3488 74.0313 38.3117C74.0313 38.2746 74.0416 38.2383 74.0612 38.2068C74.0807 38.1753 74.1087 38.15 74.1418 38.1337C74.4885 37.9554 74.8066 37.7234 75.0825 37.4473C75.6618 36.8636 76.038 36.1076 76.1551 35.2917C76.1588 35.2606 76.1699 35.2292 76.1872 35.2032C76.2045 35.1771 76.2277 35.1556 76.2549 35.1403C76.2821 35.125 76.3125 35.1164 76.3437 35.1152C76.3748 35.114 76.4058 35.1202 76.4341 35.1334C78.1351 35.9148 80.0341 36.1527 81.874 35.8146C83.7138 35.4765 85.4059 34.5788 86.7215 33.243C88.0372 31.9072 88.9129 30.1976 89.2303 28.3455C89.5477 26.4933 89.2913 24.5877 88.4961 22.8867C88.4824 22.8577 88.476 22.8259 88.4772 22.7938C88.4785 22.7618 88.4875 22.7306 88.5034 22.7028C88.5193 22.675 88.5416 22.6515 88.5686 22.6344C88.5955 22.6172 88.6262 22.6068 88.658 22.6041C89.5228 22.507 90.3307 22.1168 90.9455 21.4979C91.177 21.2711 91.379 21.0157 91.5465 20.7378L91.5476 20.7359C91.5649 20.705 91.59 20.6793 91.6205 20.6613Z" fill="#FF725C"/>
10
+ <path d="M72.366 32.2516C71.0136 32.2516 69.9173 33.3533 69.9173 34.7122C69.9173 36.0711 71.0136 37.1728 72.366 37.1728C73.7184 37.1728 74.8147 36.0711 74.8147 34.7122C74.8147 33.3533 73.7184 32.2516 72.366 32.2516Z" fill="#FF725C"/>
11
+ </svg>
Binary file
@@ -0,0 +1,10 @@
1
+ <svg width="1715" height="735" viewBox="0 0 1715 735" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M925.523 9.53109C932.57 15.7899 936.136 25.1123 936.221 37.4986L936.232 562.795C936.232 602.487 944.204 626.944 953.465 639.467C960.326 648.745 969.673 654.394 988.392 651.969L988.383 651.902C1014.57 646.924 1027.91 656.454 1033.65 681.652C1037.28 702.218 1027.81 729.048 1000.02 732.984L1000.01 732.887C954.345 739.143 914.45 723.775 888.163 688.226C863.983 655.527 854.875 610.561 854.875 562.795L854.875 38.0668H854.808C854.808 25.3587 858.385 15.8468 865.539 9.53109C872.024 3.17702 881.665 0 894.461 0C908.014 0 918.368 3.17703 925.523 9.53109Z" fill="#FFFFFF"/>
3
+ <path d="M1144.31 37.4986C1144.22 25.1123 1140.66 15.7899 1133.61 9.53109C1126.45 3.17703 1116.1 0 1102.55 0C1089.75 0 1080.11 3.17702 1073.62 9.53109C1066.47 15.8468 1062.89 25.3587 1062.89 38.0668H1062.96L1062.96 562.795C1062.96 610.561 1072.07 655.527 1096.25 688.226C1122.54 723.775 1162.43 739.143 1208.09 732.887L1208.11 732.984C1235.9 729.048 1245.37 702.218 1241.74 681.652C1235.99 656.454 1222.65 646.924 1196.47 651.902L1196.48 651.969C1177.76 654.394 1168.41 648.745 1161.55 639.467C1152.29 626.944 1144.32 602.487 1144.32 562.795L1144.31 37.4986Z" fill="#FFFFFF"/>
4
+ <path d="M1436 252.167C1486.69 244.231 1538.58 252.751 1584.12 276.487C1584.69 276.79 1585.17 277.241 1585.51 277.793C1585.85 278.346 1586.03 278.98 1586.05 279.629C1586.06 280.279 1585.9 280.921 1585.58 281.487C1585.27 282.053 1584.8 282.524 1584.25 282.851C1579 285.896 1574.17 289.617 1569.88 293.918C1558.57 305.266 1551.44 320.146 1549.66 336.109C1549.61 336.695 1549.42 337.294 1549.11 337.791C1548.79 338.287 1548.36 338.7 1547.85 338.994C1547.35 339.288 1546.78 339.453 1546.19 339.476C1545.61 339.5 1545.02 339.38 1544.49 339.128C1513.41 324.501 1478.6 319.807 1444.78 325.686C1410.95 331.565 1379.74 347.731 1355.35 372.002C1330.96 396.272 1314.57 427.477 1308.39 461.405C1302.21 495.333 1306.54 530.349 1320.8 561.726C1321.04 562.245 1321.17 562.831 1321.15 563.405C1321.13 563.978 1320.98 564.539 1320.7 565.041C1320.42 565.544 1320.03 565.972 1319.55 566.291C1319.08 566.61 1318.54 566.811 1317.97 566.876C1303.05 569.054 1289.19 576.01 1278.51 586.704C1273.52 591.808 1269.33 597.665 1266.11 604.05C1265.82 604.662 1265.35 605.192 1264.77 605.553C1264.2 605.914 1263.53 606.105 1262.85 606.105C1262.17 606.105 1261.51 605.913 1260.93 605.553C1260.36 605.192 1259.9 604.676 1259.6 604.064C1235.78 558.406 1227.05 506.274 1234.73 455.301C1242.4 404.329 1266.06 357.146 1302.26 320.613C1338.46 284.08 1385.31 260.102 1436 252.167Z" fill="#FFFFFF"/>
5
+ <path d="M1618.18 301.827C1593.35 301.827 1573.21 322.06 1573.21 347.018C1573.21 371.976 1593.35 392.209 1618.18 392.209C1643.02 392.209 1663.16 371.976 1663.16 347.018C1663.16 322.06 1643.02 301.827 1618.18 301.827Z" fill="#FFFFFF"/>
6
+ <path d="M1682.69 379.464C1683.25 379.134 1683.89 378.961 1684.54 378.961C1685.19 378.961 1685.82 379.134 1686.38 379.464C1686.94 379.79 1687.4 380.258 1687.71 380.819C1711.34 426.58 1719.82 478.72 1711.92 529.657C1704.02 580.601 1680.16 627.685 1643.8 664.061C1607.43 700.436 1560.47 724.206 1509.74 731.913C1459.01 739.621 1407.15 730.862 1361.71 706.914C1361.1 706.614 1360.56 706.134 1360.2 705.556C1359.84 704.978 1359.65 704.31 1359.65 703.629C1359.65 702.948 1359.84 702.28 1360.2 701.702C1360.56 701.124 1361.07 700.658 1361.68 700.359C1368.05 697.085 1373.89 692.823 1378.96 687.753C1389.6 677.033 1396.51 663.148 1398.66 648.164C1398.72 647.593 1398.93 647.016 1399.25 646.537C1399.56 646.059 1399.99 645.663 1400.49 645.383C1400.99 645.102 1401.55 644.944 1402.12 644.922C1402.69 644.9 1403.26 645.015 1403.78 645.256C1435.02 659.608 1469.9 663.976 1503.69 657.767C1537.48 651.557 1568.56 635.07 1592.72 610.537C1616.88 586.004 1632.97 554.607 1638.79 520.59C1644.62 486.574 1639.92 451.576 1625.31 420.334C1625.06 419.802 1624.94 419.217 1624.96 418.629C1624.99 418.041 1625.15 417.467 1625.44 416.957C1625.74 416.447 1626.15 416.016 1626.64 415.7C1627.14 415.385 1627.7 415.194 1628.28 415.145C1644.17 413.361 1659 406.194 1670.3 394.829C1674.55 390.663 1678.26 385.972 1681.33 380.868L1681.35 380.834C1681.67 380.266 1682.13 379.793 1682.69 379.464Z" fill="#FFFFFF"/>
7
+ <path d="M1329.07 592.33C1304.23 592.33 1284.09 612.562 1284.09 637.52C1284.09 662.479 1304.23 682.711 1329.07 682.711C1353.9 682.711 1374.04 662.479 1374.04 637.52C1374.04 612.562 1353.9 592.33 1329.07 592.33Z" fill="#FFFFFF"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M466.365 705.614C503.137 724.705 546.957 734.25 597.824 734.25C630.919 734.25 663.707 729.016 696.189 718.547C718.022 711.64 736.984 701.023 753.696 688.763C771.492 676.974 770.204 654.188 761.915 637.529C752.624 618.858 726.232 611.601 706.058 625.287C702.409 627.645 699.215 629.757 696.332 631.663C684.264 639.642 677.623 644.033 665.694 647.886C639.954 655.892 623.047 661.062 596.694 661.062C561.76 661.062 535.006 657.579 510.491 644.646C485.977 631.714 467.284 612.623 454.414 587.373C444.083 567.105 437.898 542.472 435.86 513.473H755.943C772.698 513.473 786.28 499.825 786.28 482.989C786.28 434.338 778.007 392.769 761.459 358.282C745.525 323.179 721.929 296.391 690.673 277.915C660.03 258.825 622.952 249.279 579.438 249.279C534.086 249.279 494.25 259.748 459.93 280.687C425.609 301.009 402.026 329.338 383.027 365.672C364.028 402.007 354.529 444.499 354.529 493.15C354.529 543.649 364.334 587.066 383.946 623.4C404.171 659.119 429.593 686.523 466.365 705.614ZM436.417 455.276C438.732 431.739 444.118 410.8 452.576 392.461C464.833 367.212 481.687 348.121 503.137 335.188C525.2 321.64 551.247 314.866 581.277 314.866C622.952 314.866 655.127 328.106 677.803 354.587C698.097 378.286 709.309 411.849 711.442 455.276H436.417Z" fill="#FFFFFF"/>
9
+ <path d="M42.64 734.249C18.4831 734.249 0 719.621 0 689.559V48.3938C0 33.1901 4.09782 21.4607 12.2934 13.2062C20.489 4.95165 32.1711 0.824596 47.3396 0.824596H382.853C395.5 0.824596 404.966 4.00144 411.251 10.3555C417.575 16.1145 421.191 28.9577 421.191 40.322C421.191 52.3583 417.575 65.3241 411.251 71.6782C404.928 78.0323 395.462 81.1998 382.853 81.1806H88.0309V336.793H271.085C283.063 336.793 292.214 339.97 298.537 346.324C301.772 349.732 304.28 353.768 305.906 358.185C307.532 362.602 308.242 374.573 307.994 379.275C307.994 391.312 304.841 400.507 298.537 406.861C292.233 413.215 283.082 416.382 271.085 416.363H88.0309V689.559C88.0309 721.291 70.4076 734.249 42.64 734.249Z" fill="#FFFFFF"/>
10
+ </svg>
Binary file
@@ -0,0 +1,10 @@
1
+ <svg width="1715" height="735" viewBox="0 0 1715 735" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M925.523 9.53109C932.57 15.7899 936.136 25.1123 936.221 37.4986L936.232 562.795C936.232 602.487 944.204 626.944 953.465 639.467C960.326 648.745 969.673 654.394 988.392 651.969L988.383 651.902C1014.57 646.924 1027.91 656.454 1033.65 681.652C1037.28 702.218 1027.81 729.048 1000.02 732.984L1000.01 732.887C954.345 739.143 914.45 723.775 888.163 688.226C863.983 655.527 854.875 610.561 854.875 562.795L854.875 38.0668H854.808C854.808 25.3587 858.385 15.8468 865.539 9.53109C872.024 3.17702 881.665 0 894.461 0C908.014 0 918.368 3.17703 925.523 9.53109Z" fill="#FF725C"/>
3
+ <path d="M1144.31 37.4986C1144.22 25.1123 1140.66 15.7899 1133.61 9.53109C1126.45 3.17703 1116.1 0 1102.55 0C1089.75 0 1080.11 3.17702 1073.62 9.53109C1066.47 15.8468 1062.89 25.3587 1062.89 38.0668H1062.96L1062.96 562.795C1062.96 610.561 1072.07 655.527 1096.25 688.226C1122.54 723.775 1162.43 739.143 1208.09 732.887L1208.11 732.984C1235.9 729.048 1245.37 702.218 1241.74 681.652C1235.99 656.454 1222.65 646.924 1196.47 651.902L1196.48 651.969C1177.76 654.394 1168.41 648.745 1161.55 639.467C1152.29 626.944 1144.32 602.487 1144.32 562.795L1144.31 37.4986Z" fill="#FF725C"/>
4
+ <path d="M1436 252.167C1486.69 244.231 1538.58 252.751 1584.12 276.487C1584.69 276.79 1585.17 277.241 1585.51 277.793C1585.85 278.346 1586.03 278.98 1586.05 279.629C1586.06 280.279 1585.9 280.921 1585.58 281.487C1585.27 282.053 1584.8 282.524 1584.25 282.851C1579 285.896 1574.17 289.617 1569.88 293.918C1558.57 305.266 1551.44 320.146 1549.66 336.109C1549.61 336.695 1549.42 337.294 1549.11 337.791C1548.79 338.287 1548.36 338.7 1547.85 338.994C1547.35 339.288 1546.78 339.453 1546.19 339.476C1545.61 339.5 1545.02 339.38 1544.49 339.128C1513.41 324.501 1478.6 319.807 1444.78 325.686C1410.95 331.565 1379.74 347.731 1355.35 372.002C1330.96 396.272 1314.57 427.477 1308.39 461.405C1302.21 495.333 1306.54 530.349 1320.8 561.726C1321.04 562.245 1321.17 562.831 1321.15 563.405C1321.13 563.978 1320.98 564.539 1320.7 565.041C1320.42 565.544 1320.03 565.972 1319.55 566.291C1319.08 566.61 1318.54 566.811 1317.97 566.876C1303.05 569.054 1289.19 576.01 1278.51 586.704C1273.52 591.808 1269.33 597.665 1266.11 604.05C1265.82 604.662 1265.35 605.192 1264.77 605.553C1264.2 605.914 1263.53 606.105 1262.85 606.105C1262.17 606.105 1261.51 605.913 1260.93 605.553C1260.36 605.192 1259.9 604.676 1259.6 604.064C1235.78 558.406 1227.05 506.274 1234.73 455.301C1242.4 404.329 1266.06 357.146 1302.26 320.613C1338.46 284.08 1385.31 260.102 1436 252.167Z" fill="#FF725C"/>
5
+ <path d="M1618.18 301.827C1593.35 301.827 1573.21 322.06 1573.21 347.018C1573.21 371.976 1593.35 392.209 1618.18 392.209C1643.02 392.209 1663.16 371.976 1663.16 347.018C1663.16 322.06 1643.02 301.827 1618.18 301.827Z" fill="#FF725C"/>
6
+ <path d="M1682.69 379.464C1683.25 379.134 1683.89 378.961 1684.54 378.961C1685.19 378.961 1685.82 379.134 1686.38 379.464C1686.94 379.79 1687.4 380.258 1687.71 380.819C1711.34 426.58 1719.82 478.72 1711.92 529.657C1704.02 580.601 1680.16 627.685 1643.8 664.061C1607.43 700.436 1560.47 724.206 1509.74 731.913C1459.01 739.621 1407.15 730.862 1361.71 706.914C1361.1 706.614 1360.56 706.134 1360.2 705.556C1359.84 704.978 1359.65 704.31 1359.65 703.629C1359.65 702.948 1359.84 702.28 1360.2 701.702C1360.56 701.124 1361.07 700.658 1361.68 700.359C1368.05 697.085 1373.89 692.823 1378.96 687.753C1389.6 677.033 1396.51 663.148 1398.66 648.164C1398.72 647.593 1398.93 647.016 1399.25 646.537C1399.56 646.059 1399.99 645.663 1400.49 645.383C1400.99 645.102 1401.55 644.944 1402.12 644.922C1402.69 644.9 1403.26 645.015 1403.78 645.256C1435.02 659.608 1469.9 663.976 1503.69 657.767C1537.48 651.557 1568.56 635.07 1592.72 610.537C1616.88 586.004 1632.97 554.607 1638.79 520.59C1644.62 486.574 1639.92 451.576 1625.31 420.334C1625.06 419.802 1624.94 419.217 1624.96 418.629C1624.99 418.041 1625.15 417.467 1625.44 416.957C1625.74 416.447 1626.15 416.016 1626.64 415.7C1627.14 415.385 1627.7 415.194 1628.28 415.145C1644.17 413.361 1659 406.194 1670.3 394.829C1674.55 390.663 1678.26 385.972 1681.33 380.868L1681.35 380.834C1681.67 380.266 1682.13 379.793 1682.69 379.464Z" fill="#FF725C"/>
7
+ <path d="M1329.07 592.33C1304.23 592.33 1284.09 612.562 1284.09 637.52C1284.09 662.479 1304.23 682.711 1329.07 682.711C1353.9 682.711 1374.04 662.479 1374.04 637.52C1374.04 612.562 1353.9 592.33 1329.07 592.33Z" fill="#FF725C"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M466.365 705.614C503.137 724.705 546.957 734.25 597.824 734.25C630.919 734.25 663.707 729.016 696.189 718.547C718.022 711.64 736.984 701.023 753.696 688.763C771.492 676.974 770.204 654.188 761.915 637.529C752.624 618.858 726.232 611.601 706.058 625.287C702.409 627.645 699.215 629.757 696.332 631.663C684.264 639.642 677.623 644.033 665.694 647.886C639.954 655.892 623.047 661.062 596.694 661.062C561.76 661.062 535.006 657.579 510.491 644.646C485.977 631.714 467.284 612.623 454.414 587.373C444.083 567.105 437.898 542.472 435.86 513.473H755.943C772.698 513.473 786.28 499.825 786.28 482.989C786.28 434.338 778.007 392.769 761.459 358.282C745.525 323.179 721.929 296.391 690.673 277.915C660.03 258.825 622.952 249.279 579.438 249.279C534.086 249.279 494.25 259.748 459.93 280.687C425.609 301.009 402.026 329.338 383.027 365.672C364.028 402.007 354.529 444.499 354.529 493.15C354.529 543.649 364.334 587.066 383.946 623.4C404.171 659.119 429.593 686.523 466.365 705.614ZM436.417 455.276C438.732 431.739 444.118 410.8 452.576 392.461C464.833 367.212 481.687 348.121 503.137 335.188C525.2 321.64 551.247 314.866 581.277 314.866C622.952 314.866 655.127 328.106 677.803 354.587C698.097 378.286 709.309 411.849 711.442 455.276H436.417Z" fill="#FF725C"/>
9
+ <path d="M42.64 734.249C18.4831 734.249 0 719.621 0 689.559V48.3938C0 33.1901 4.09782 21.4607 12.2934 13.2062C20.489 4.95165 32.1711 0.824596 47.3396 0.824596H382.853C395.5 0.824596 404.966 4.00144 411.251 10.3555C417.575 16.1145 421.191 28.9577 421.191 40.322C421.191 52.3583 417.575 65.3241 411.251 71.6782C404.928 78.0323 395.462 81.1998 382.853 81.1806H88.0309V336.793H271.085C283.063 336.793 292.214 339.97 298.537 346.324C301.772 349.732 304.28 353.768 305.906 358.185C307.532 362.602 308.242 374.573 307.994 379.275C307.994 391.312 304.841 400.507 298.537 406.861C292.233 413.215 283.082 416.382 271.085 416.363H88.0309V689.559C88.0309 721.291 70.4076 734.249 42.64 734.249Z" fill="#FF725C"/>
10
+ </svg>
Binary file