Sentir UI

The branded component library for every Sentir client app. It is a shadcn registry hosted as a public GitHub repository. Components are not installed as a locked package. The shadcn CLI copies the source into each app, so teams own and can extend what they pull, while the brand layer stays consistent across every project.

This repo is public so any private client app can install from it with no tokens and no registry server. Client app code stays private. Only this shared library is open.

What is in here

• Tokens. The official Sentir brand encoded as CSS variables, shipped by the theme item. Change a token here and every app picks it up on its next pull.
• Components. Branded shadcn components under registry/sentir/, plus the real brand marks.
• Brand assets. The logo and mark SVGs in public/brand/, and an SVG favicon at public/favicon.svg.
• Agent rules. AGENTS.md conventions installed into apps so Cursor and Claude Code default to this registry.
• Catalog. registry.json at the root declares what is installable.

Brand reference

Aligned to the official Pantone palette and logo artwork.

Role	Token	Colour
Primary	--primary	Purple #7665AA (7676 C)
Foreground / text	--foreground	Deep plum #291327 (Neutral Black C)
Accent	--accent	Sage #E5EED3 (663 C)
Chart / highlight	--chart-2	Blue #3B6CB3 (7683 C)
Chart / highlight	--chart-3	Lilac #C499C3 (522 C)
Chart / highlight	--chart-4	Terracotta #CF664B (7618 C)
Chart / highlight	--chart-5	Navy #292A68 (534 C)
Background (light)	--background	Off-white #F6F5F2

Typography: Cormorant Garamond for display and headings, DM Sans for body, DM Mono for labels, eyebrows, and data. Radius is a sharp 0.25rem (4px). Neutrals carry a warm lilac-plum undertone rather than reading as flat slate.

For developers: installing in a client app

These commands use the real owner, Sentir-intelligence, so they work as written.

First time in a project

The app must be on shadcn with Tailwind v4. For a fresh app run npx shadcn@latest init first. Then install the theme, once, before anything else:

npx shadcn add Sentir-intelligence/sentir-ui/theme

Day to day

npx shadcn add Sentir-intelligence/sentir-ui/button
npx shadcn add Sentir-intelligence/sentir-ui/logo
npx shadcn add Sentir-intelligence/sentir-ui/agents

Pin to a version for stability

Tag releases here as v1.0.0, and have apps install against the tag so an upstream change cannot break an app mid sprint:

npx shadcn add Sentir-intelligence/sentir-ui/button#v1.0.0

Review updates with npx shadcn add Sentir-intelligence/sentir-ui/button --diff before applying.

Using the brand marks

The logo component carries the real artwork. The colour version is multi-colour by design, so use the white version on dark or busy backgrounds.

import { Button } from "@/components/ui/button"
import { SentirLogo, SentirMark } from "@/components/brand/logo"

<Button variant="brand">Request access</Button>

<SentirLogo className="h-8" />              {/* full colour lockup */}
<SentirLogo tone="white" className="h-8" /> {/* white lockup, dark backgrounds */}
<SentirMark className="h-10" />             {/* colour gem only */}
<SentirMark tone="white" className="h-10" />{/* white gem only */}

For the browser tab icon, point your app at public/favicon.svg.

Multi-brand: one library, themed per client

Components are token-driven, so the same components carry any brand. Sentir is the default house brand. To brand an app for a client, add a theme item for that client and install it instead of the Sentir theme:

npx shadcn add Sentir-intelligence/sentir-ui/theme-acme

Add a client theme by copying the theme item in registry.json, renaming it theme-<client>, and swapping the cssVars values for that client's palette. Never install two themes into one app.

For maintainers

Add or change a component

1. Add or edit the file under registry/sentir/.
2. Register it in registry.json with name, type, title, description, and files. The description is what the CLI and coding agents read to understand the item.
3. Validate, commit, and tag:

npx shadcn registry validate
git commit -am "feat: add card component"
git tag v1.1.0 && git push --tags

No build step, no deploy. The CLI reads registry.json and pulls the referenced files straight from the repo.

Changing a token

Edit the value in the theme item in registry.json, and keep app/globals.css in sync as the human readable reference. Cut a new tag so teams can adopt it on their own schedule.

For coding agents

Install Sentir-intelligence/sentir-ui/agents into each project. It drops an AGENTS.md that tells Cursor and Claude Code to install from this registry, theme first, use semantic tokens instead of raw hex, and keep to one icon family.

Token philosophy

Spend brand boldness in the primary and the signature button. Keep everything else quiet and disciplined. The lilac-plum neutrals and the single purple primary do the identity work. Sage, blue, terracotta and navy are highlights, not workhorses. Resist adding new top level colours. Extend through existing tokens so the brand stays coherent across every app.