tokens

The moco token contract: warm-paper light theme + warm-dark theme, lime accent, four font slots. Import once; every moco component styles itself from these variables.

themetokenssetup

Preview

No visual demo. This item is setup, not UI. The whole site is styled by it.

Installation

Ask Claude (MCP)

With the MCP server configured, just ask:

Claude

add the moco tokens component

shadcn CLI

Terminal

npx shadcn@latest add https://mocoui.site/r/tokens.json

Manual

Copy each file from the Source section into its target path:

registry/tokens/tokens.css  →  components/moco/tokens.css

Source

components/moco/tokens.css

/* moco/ui — design tokens.
   One-time setup: import this once (e.g. in your root layout / global css).
   Every moco component styles itself exclusively from these variables —
   override any of them to retheme the whole library.

   Light: warm paper, near-black ink, lime accent (fill-only on paper — the
   dark lime --moco-accent-dk does text/stroke duty at 4.9:1).
   Dark: warm near-black, paper ink, lime works as both fill and text. */

:root {
  --moco-bg: #fcfbf9;
  --moco-panel: #f4f2ee;
  --moco-ink: rgba(0, 0, 0, 0.88);
  --moco-body: rgba(0, 0, 0, 0.76);
  --moco-muted: rgba(0, 0, 0, 0.6);
  --moco-faint: rgba(0, 0, 0, 0.48);
  --moco-line: rgba(0, 0, 0, 0.12);
  --moco-accent: #c6f24e;
  --moco-accent-dk: #5b770c;
  --moco-on-accent: #14180a;
  --moco-warn: #b8437a;
  --moco-accent-wash: rgba(198, 242, 78, 0.34);
  --moco-warn-wash: rgba(184, 67, 122, 0.1);
  --moco-hover-wash: rgba(0, 0, 0, 0.04);
  --moco-ease: cubic-bezier(0.23, 1, 0.32, 1);

  --moco-serif: ui-serif, Georgia, "Times New Roman", serif;
  --moco-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --moco-sans: ui-sans-serif, system-ui, sans-serif;
  --moco-display: ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --moco-bg: #121110;
    --moco-panel: #1d1c19;
    --moco-ink: rgba(255, 255, 255, 0.92);
    --moco-body: rgba(255, 255, 255, 0.78);
    --moco-muted: rgba(255, 255, 255, 0.6);
    --moco-faint: rgba(255, 255, 255, 0.45);
    --moco-line: rgba(255, 255, 255, 0.14);
    --moco-accent: #c6f24e;
    --moco-accent-dk: #c6f24e;
    --moco-on-accent: #14180a;
    --moco-warn: #e06ba0;
    --moco-accent-wash: rgba(198, 242, 78, 0.16);
    --moco-warn-wash: rgba(224, 107, 160, 0.14);
    --moco-hover-wash: rgba(255, 255, 255, 0.06);
  }
}

[data-theme="dark"] {
  --moco-bg: #121110;
  --moco-panel: #1d1c19;
  --moco-ink: rgba(255, 255, 255, 0.92);
  --moco-body: rgba(255, 255, 255, 0.78);
  --moco-muted: rgba(255, 255, 255, 0.6);
  --moco-faint: rgba(255, 255, 255, 0.45);
  --moco-line: rgba(255, 255, 255, 0.14);
  --moco-accent: #c6f24e;
  --moco-accent-dk: #c6f24e;
  --moco-on-accent: #14180a;
  --moco-warn: #e06ba0;
  --moco-accent-wash: rgba(198, 242, 78, 0.16);
  --moco-warn-wash: rgba(224, 107, 160, 0.14);
  --moco-hover-wash: rgba(255, 255, 255, 0.06);
}