@request-labs/tokens

Design tokens da Request em formato W3C DTCG, distribuídos como CSS, Tailwind config, ESM e tipos TypeScript.

• Site: https://design.request.pt
• Tokens online: https://design.request.pt/tokens
• LLM rules: https://design.request.pt/llms.txt

Instalar

pnpm add @request-labs/tokens
# ou
npm install @request-labs/tokens

Consumir

Tailwind (recomendado)

// tailwind.config.js
const tokens = require('@request-labs/tokens/tailwind');

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,blade.php}'],
  theme: {
    extend: {
      colors: tokens.colors,
      spacing: tokens.spacing,
      fontFamily: tokens.fontFamily,
      fontSize: tokens.fontSize,
      fontWeight: tokens.fontWeight,
      lineHeight: tokens.lineHeight,
      borderRadius: tokens.borderRadius,
      boxShadow: tokens.boxShadow,
      transitionDuration: tokens.transitionDuration,
      transitionTimingFunction: tokens.transitionTimingFunction,
      zIndex: tokens.zIndex,
    },
  },
};

CSS variables

@import "@request-labs/tokens/css";

.button {
  background: var(--color-rose-500);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
}

JS / TS

import tokens from '@request-labs/tokens';

tokens.color.rose['500']; // "#ff3457"
tokens.spacing['4'];      // "1rem"

O que inclui

• Cores: slate (0-950), rose (50-950), semânticas
• Spacing: escala 0-32 (0, 0.5, 1, 1.5 ... em rem)
• Tipografia: Hanken Grotesk (display), Inter (sans), sizes, weights, line-heights
• Radius / Shadow: escala de raios + sombras
• Motion: duration (instant, fast, base, slow) + easing (out, in, in-out, linear)
• z-index: escala semântica (base, dropdown, sticky, overlay, modal, popover, toast, tooltip)

Lista completa em https://design.request.pt/tokens.

Design principles

• Light mode sempre, sem dark mode
• Rose (#ff3457) é a primária para acção (botões, links, foco)
• Neutros slate para estrutura; sem cores decorativas (violet, amber, cyan, sky)
• Header/footer #1d1d1b (brand-dark) com texto branco

Regras completas em https://design.request.pt/llms.txt (DESIGN.md servido como llms.txt convention).

Versioning

Segue semver. Alterações quebráveis bumpam major. CHANGELOG em CHANGELOG.md.

Licença

UNLICENSED. Uso interno Request Labs.