How do I install the RamosLabs design tokens in Vue, React, or plain HTML?

Install the package

@ramoslabs/tokens is public on npm under the MIT license; 0.1.0 is its only version^[1]. The DS documents these four commands^[3].

Why the import path works

The package defines subpath exports: the root for typed values, ./css for the CSS variables, and ./json for the flat map^[2]. Node resolves only the subpaths a package defines in exports^[4].

Test result, showing a bundler resolving them too: a Vite 8.3.5 project that imported @ramoslabs/tokens/css and colorIndigo600 from the published 0.1.0 built successfully, and the output CSS contained --color-primary:#4f46e5^[12]. In development, Vite injects imported .css files into the page through a style tag^[5]. To repeat the test, run the three commands printed in the measurement README^[12]: bun install, bunx vite build, then grep -o 'color-primary:[^;]*' dist/assets/*.css.

Vue 3 (Vite)

A Vue application is created with createApp and attached with .mount()^[6]. Add the CSS import to that entry file once, not per component^[3].

import { createApp } from 'vue'
import App from './App.vue'
import '@ramoslabs/tokens/css'

createApp(App).mount('#app')

<template>
  <button class="cta" type="button">Save changes</button>
</template>

<style scoped>
.cta {
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.cta:hover {
  background: var(--color-primary-dark);
}

.cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
</style>

React

A React app renders into a root created with createRoot, usually once at startup^[7]. Put the same CSS import in that entry file^[3].

import { createRoot } from 'react-dom/client'
import '@ramoslabs/tokens/css'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)

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

.card-title {
  color: var(--color-text-heading);
}

.card-body {
  color: var(--color-text-body);
}

Plain HTML, no install

A stylesheet is attached with a link element whose rel is stylesheet^[8]. The DS serves its token stylesheet and the flat map at the site root; on 2026-10-27 both answered 200 with the right content types^[13].

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Token demo</title>
  <link rel="stylesheet" href="https://design.ramoslabs.com/tokens.css">
  <style>
    body {
      margin: 0;
      background: var(--color-surface-secondary);
      color: var(--color-text-body);
    }
    .card {
      margin: var(--space-6);
      padding: var(--space-6);
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }
  </style>
</head>
<body>
  <main class="card">
    <h1>Workspace</h1>
  </main>
</body>
</html>

Typed values in TypeScript

The package root exports typed values such as colorIndigo600; the Vite test above imported it and built^[12]. For styling, keep using the CSS variables.

import { colorIndigo600 } from '@ramoslabs/tokens'

export const brandAccent = colorIndigo600

Tailwind CSS

Tailwind documents square-bracket arbitrary properties as a way to write completely arbitrary CSS^[10]. Once the CSS import above is in place, the RamosLabs variables are regular CSS custom properties that any CSS can read^[3]. This page did not measure a Tailwind build that emits them from arbitrary properties.

@import '@ramoslabs/tokens/css';

Components

The SJ components are not shipped yet; until they land, build from the tokens and the documented patterns^[11].

Install and use RamosLabs design tokens

1. Install the package. Run bun add @ramoslabs/tokens, or the npm, pnpm or yarn equivalent^[3].
2. Import the CSS once. In the app entry, import @ramoslabs/tokens/css one time^[3].
3. Use a token. Reference variables such as var(--color-primary) and var(--space-6) instead of raw values^[9].
4. Optional: typed values. For TypeScript logic, import typed values from the package root, for example colorIndigo600^[12].

Frequently asked questions

Do I need to import the token CSS in every component?

No. Import it once at the app entry or root layout^[3].

Can I use the tokens with Tailwind?

The tokens are regular CSS variables once the CSS is imported^[2], and Tailwind documents arbitrary properties that take completely arbitrary CSS^[10]. This page did not measure a Tailwind build that reads them.

Can I use the tokens without npm?

Yes. Link https://design.ramoslabs.com/tokens.css^[8]; it answered 200 as text/css on 2026-10-27^[13].

Does it work in a Vite project?

A Vite 8.3.5 build importing @ramoslabs/tokens/css from the published package succeeded and emitted the variables^[12].

Are the SJ components available to install?

Not yet. They are planned for @ramoslabs/vue^[11].

Can I hardcode a color or spacing value while I set up?

No. The DS hard rule is to never hardcode a color, spacing, typography, radius, shadow, or motion value^[11].