Getting started

Install once. Reference everywhere.

One package, published to public npm. Import the CSS variables a single time at your app entry, then every color, space, radius, shadow, and type value reads from the token contract.

npmbun add @ramoslabs/tokens

Three steps

From install to first token

Install the tokens

The package lives on the public @ramoslabs npm scope. Any package manager works.

bun

bun add @ramoslabs/tokens

npm

npm install @ramoslabs/tokens

pnpm

pnpm add @ramoslabs/tokens

yarn

yarn add @ramoslabs/tokens

Import the CSS once

At your app entry, import the generated variables a single time. Every --color-*, --space-*, --radius-*, --shadow-*, and type variable is then global.

app entry

/* main.css, or your root stylesheet */
@import '@ramoslabs/tokens/css';

Build against the contract

Reference the token, never a raw value. A raw hex or px in your CSS is a defect. Typed values are at the package root for TypeScript; the flat name-to-value map is @ramoslabs/tokens/json.

css

.sj-card {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

Without installing

You don't have to add the dependency. Read the served flat token map at/tokens.json, or @import the served stylesheet from this site. Handy for a quick prototype or a build that can't take the package.

Building with an agent?

Don't scrape the values. Connect the MCP server and use get_token andcheck_contrast as typed tools — exact values, never invented.

Open the MCP server

Components (SJ / W) are not shipped yet. Until they land, build from these tokens and the documented patterns — see Foundations and Patterns.