Build

For agents

Five endpoints generated from the same TypeScript the rest of this site renders from. The point is that Claude Code, the Varick skills and a new engineer all read the same numbers instead of each re-deriving the brand from whatever file they opened.

Source of truth: lib/tokens.ts · lib/catalog.ts

Endpoints

Every one is static, so they are cheap to fetch on every run.

Path	Type	What it is
/llms.txt	`text/plain`	The whole system as one markdown document. Fetch this first. It is the one an agent should read.
/tokens.json	`application/json`	Every token as structured data, including the palette rule and the known drift.
/tokens.css	`text/css`	Custom properties, ready to import. Both palettes, namespaced.
/tokens.theme.css	`text/css`	The component theme, light and dark, as custom properties. @varick/ui regenerates its token sheets from this file.
/tokens.varick-os.css	`text/css`	Every component token as an alias of its Varick OS counterpart, for the migration.

Replace the host with your deployment. On Vercel that is the project domain, and every preview deployment serves its own copy, which is how you diff a token change before it merges.

Put this in CLAUDE.md

The single highest-value thing on this page. Drop it into the CLAUDE.md of any repo that renders something branded.

## Design system

Varick's brand and tokens live at https://design-system-three-gold.vercel.app.
Before writing anything that has a colour, a typeface, or a document layout in it, fetch:

  https://design-system-three-gold.vercel.app/llms.txt

Do not infer brand values from whatever file you happen to have open. In particular:

- Navy is #002870. Accent blue #3B7CF6 is legal on web and in charts, and is NOT legal
  in any document, in print, or on a deck body page.
- Weights 400 and 500 only. Never bold, never italic.
- Everything is Helvetica Neue: web, documents and charts. Season Mix for display only.
- Never render varick-wordmark.svg directly. Its path is stroke-only and renders hollow.
  Use varick-wordmark.png.
- Never use icon.svg or varick-mark.svg as the brand mark. Both are v0.app's logo from
  the scaffold that generated the marketing site.

Components come from @varick/ui, installed from Varick-Agents/varick-ui-components as a
Git dependency. Never copy component source into an app. The API reference for each one is
https://design-system-three-gold.vercel.app/system/<id>.

Why the four bullets are repeated inline

An agent that fetches the file gets everything. An agent that does not, because the network failed, or because it decided the task was too small to warrant a fetch, still gets the four rules that are broken most often.

tokens.css

Import it, or vendor it. Both palettes are in there, with the document set namespaced so the two cannot be confused.

/* Varick Agents design tokens, generated from varick-design/lib/tokens.ts
 * Do not hand-edit. Regenerate with: curl -o tokens.css https://<this-site>/tokens.css
 */

:root {
  /* Core */
  --brand-navy: #002870;
  --foreground: #111111;
  --background: #FFFFFF;
  --brand: #3B7CF6;

  /* Web and product */
  --brand-wash: #E8F1FE;
  --accent-foreground: #2F6BE0;
  --muted: #F6F6F6;
  --page: #FBFBFB;
  --muted-foreground: #757575;
  --fg-low: #B1B1B1;
  --border: #EBEBEB;
  --hairline-hover: #DEDEDE;
  --destructive: #D55F5A;
  --fill-soft: #FDFDFD;

/* … */

View full file

Vendor it into a project

curl -o app/tokens.css https://design-system-three-gold.vercel.app/tokens.css

Vendoring is the right default. A build that fetches a stylesheet from another host at runtime is a build that breaks when that host does.

tokens.json

Structured, and it carries the parts a stylesheet cannot: the palette rule, the licence status, and the places code and spec disagree.

{
  "$schema": "https://design-system-three-gold.vercel.app/tokens.schema.json",
  "name": "Varick Agents",
  "version": "1.0.0",
  "color": {
    "core": {
      "brand-navy": {
        "hex": "#002870",
        "name": "Navy",
        "use": "The brand. Headings, wordmark, table header fills, the first chart series."
      },
      "foreground": {
        "hex": "#111111",
        "name": "Ink",
        "use": "Primary text and values on web. Near-black, never pure black."
      },
      "background": {
        "hex": "#FFFFFF",
        "name": "White",
        "use": "The canvas. Cards, tooltips, page ground."
      },
      "brand": {
        "hex": "#3B7CF6",
        "name": "Accent blue",
        "use": "Web and product UI only. Interactive states, second chart series."
      }
    }
  }
}

// … color.web, color.chart, color.document, type, space, radius, motion, documentLayout

View full file

Key	Holds
color.core / web / chart / document	Every swatch, keyed by token, with its hex and its use.
paletteRule	Where accent blue is legal, where it is not, and why.
knownDrift	Places the code and the spec disagree, with which one wins.
type	The four faces, three scales, and the allowed/forbidden lists.
space / radius / motion	Scales, easing curves and durations.
documentLayout	Page geometry in dxa, with the inch conversion factor.

Inside Varick OS

The components ship as the @varick/ui package, synced from this site. Varick OS still compiles against its older workspace token sheet, which names the same roles differently; this map and the alias sheet close that gap during the migration.

The package

Varick-Agents/varick-ui-components builds every component on this site into one typed React package with a strict import path per component. Its token sheets regenerate from /tokens.theme.css and its reference pages from /system, so the package follows this site rather than the other way round.

"dependencies": {
  "@varick/ui": "github:Varick-Agents/varick-ui-components#main&path:/packages/ui"
}

import "@varick/ui/styles.css";
import { Button } from "@varick/ui/components/button";

Token map

This system	Varick OS	Role
`--color-navy`	`--color-canvas`	Primary buttons, active tabs, headings, the brand surface.
`--color-ink`	`--color-foreground`	Primary text.
`--color-ink-soft`	no token yet	Body copy one step below primary. Varick OS collapses it onto foreground.
`--color-muted-fg`	`--color-muted-fg`	Secondary text, labels.
`--color-fg-low`	`--color-placeholder`	Placeholders, tertiary text.
`--color-brand`	`--color-primary`	The accent blue: links, toggles on, active filter chips.
`--color-brand-wash`	`--color-primary-tint`	Light accent surface: selected rows, the selection background.
`--color-brand-text`	`--color-primary-hover`	Accent as text, dark enough for 4.5:1.
`--color-surface`	`--color-surface`	Cards, rails, the top bar.
`--color-page`	`--color-background`	The page tint the surfaces sit on.
`--color-muted`	`--color-fill`	The one neutral fill: active nav, hovers, chip grounds.
`--color-muted-soft`	`--color-fill-soft`	Off-white fill: card headers, hover rows.
`--color-hairline`	`--color-border`	Card and content borders.
`--color-hairline-strong`	`--color-border-strong`	Hover borders.
`--color-hairline-soft`	`--color-hairline-soft`	Row dividers, the rail border, the tabs rule.
`--color-success`	`--color-success`	Live, passed, connected.
`--color-warn`	`--color-warning`	Pending, parked, needs review.
`--color-danger`	`--color-danger`	Failed, denied, destructive.
`--color-destructive`	`--color-danger`	The destructive button.
`--color-teal`	`--color-teal`	In progress, informational.
`--color-danger-wash`	`--color-danger-tint`	Danger surface behind a warning block.
`--color-band`	`--color-primary-tint`	The callout band fill.
`--color-label-bg`	`--color-fill-soft`	Ground behind a label chip.
`--color-navy-mid`	no token yet	Indicative gantt bars in documents. No product use.

The alias sheet

One stylesheet that defines every token above as an alias of its Varick OS counterpart. Import it in apps/web after the legacy product tokens, and the class names this system uses resolve to the app's values. It ships inside the package as @varick/ui/tokens.varick-os.css.

@import "tailwindcss";
@import "@varick/ui/tokens.css";
@import "./varick-design-aliases.css"; /* curl -o from /tokens.varick-os.css */

Radii and type do not need aliasing: both systems set them per utility. The two disagree in two places, the switch and the avatar, and the compatibility note in the repo says how.

Where these come from

One file. If you change a value, change it there. The endpoints and every page on this site regenerate from it.

lib/tokens.ts is the source of truth for values, and lib/catalog.ts for materials and assets. The live swatches, the specimens, the JSON, the CSS and the markdown dump are all projections of those two files, which is what stops this site from becoming another thing that drifts.

lib/tokens.ts     →  /foundations/*  ·  /tokens.json  ·  /tokens.css  ·  /llms.txt
lib/catalog.ts    →  /assets/*  ·  /marketing/*  ·  /sales/*  ·  /llms.txt
public/           →  every download link on the site

Upstream is still globals.css, the chart spec and the document generators. This repo mirrors them and states where they disagree. It does not replace them. Push a change upstream too.