@affinda/tokens

Design tokens for Affinda UI, including colors, typography, spacing, and more.

Installation

npm install @affinda/tokens
# or
pnpm add @affinda/tokens

For complete setup including fonts and base styles, use @affinda/css instead:

npm install @affinda/css

Then import once in your app:

import '@affinda/css'; // Includes tokens + fonts + base styles

Accessing Affinda Colors

Method 1: CSS Custom Properties (Recommended for Styling)

Import the CSS file to use colors via CSS custom properties:

/* In your CSS file */
@import '@affinda/tokens/tokens.css';

.my-component {
  background-color: var(--colour-brand-mist-green);
  color: var(--colour-brand-inkwell);
  border: 1px solid var(--colour-brand-soft-clay);
}

Available CSS variables:

/* Brand Colors */
--colour-brand-mist-green: #C6D5D1;
--colour-brand-inkwell: #14343B;
--colour-brand-soft-clay: #B09670;
--colour-brand-white: #FFFFFF;
--colour-brand-ivory-paper: #FFF9E1;
--colour-brand-azure: #7FE2D4;
--colour-brand-ice: #A6FFF8;

/* Tints (20-800 for each color) */
--colour-tints-mist-green-20: #F6FAF9;
--colour-tints-mist-green-30: #F2F9F5;
/* ... etc */

--colour-tints-inkwell-20: #F8FAFA;
/* ... etc */

/* Typography Colors */
--colour-typography-heading-primary: #14343B;
--colour-typography-heading-secondary: #B09670;
--colour-typography-body-dark: #14343B;
--colour-typography-body-default: #14343B;
--colour-typography-body-subtle: #708380;

/* Background Colors */
--colour-background-mist-green: #C6D5D1;
--colour-background-inkwell: #14343B;
/* ... etc */

/* UI Colors */
--colour-ui-mist-green: #C6D5D1;
--colour-ui-inkwell: #14343B;
/* ... etc */

Method 2: JavaScript/TypeScript (For Dynamic Usage)

Access colors programmatically using the tokens object:

import { tokens, getToken } from '@affinda/tokens';

// Access colors via nested object
const mistGreen = tokens.color.brand.mistGreen.value; // "#C6D5D1"
const inkwell = tokens.color.brand.inkwell.value; // "#14343B"
const softClay = tokens.color.brand.softClay.value; // "#B09670"

// Access tints
const mistGreen20 = tokens.color.tints.mistGreen['20'].value; // "#F6FAF9"
const inkwell800 = tokens.color.tints.inkwell['800'].value; // "#0D1A20"

// Use helper function with path notation
const ice = getToken('color.brand.ice.value'); // "#A6FFF8"
const azure = getToken('color.brand.azure.value'); // "#7FE2D4"

Method 3: Direct JSON Import

Import the raw JSON for build tools or custom processing:

import tokensJson from '@affinda/tokens/tokens.json';

// Access raw token data
console.log(tokensJson.color.brand.mistGreen); // { value: "#C6D5D1" }

Complete Color Palette

Brand Colors

• Mist Green: #C6D5D1 - Primary brand color
• Inkwell: #14343B - Dark brand color, primary text
• Soft Clay: #B09670 - Accent color
• White: #FFFFFF - Pure white
• Ivory Paper: #FFF9E1 - Warm white background
• Azure: #7FE2D4 - Accent blue-green
• Ice: #A6FFF8 - Bright accent

Tints

Each primary color has tints ranging from 20 (lightest) to 800 (darkest):

• Mist Green: 20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800
• Inkwell: 20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800
• Soft Clay: 20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800
• Ice: 20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700

Other Design Tokens

In addition to colors, this package includes:

Spacing

tokens.space['1'].value // "4px"
tokens.space['2'].value // "8px"
tokens.space['3'].value // "12px"
tokens.space['4'].value // "16px"
tokens.space['5'].value // "20px"
tokens.space['6'].value // "24px"
tokens.space['8'].value // "32px"

Border Radius

tokens.radius.sm.value   // "6px"
tokens.radius.md.value   // "12px"
tokens.radius.pill.value // "999px"

Typography

Note: Affinda components use the NeuSans font family. See @affinda/css for font loading instructions.

// Font families
tokens.font.family.heading.value // "'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif"
tokens.font.family.body.value    // "'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif"

// Font sizes
tokens.font.size.heading['1'].desktop.value // "56px"
tokens.font.size.heading['1'].mobile.value  // "38px"
tokens.font.size.body.xlarge.value          // "22px"
tokens.font.size.body.large.value           // "18px"
tokens.font.size.body.medium.value          // "16px"
tokens.font.size.body.small.value           // "14px"

// Font weights
tokens.font.weight.regular.value   // "400" (NeuSans Regular)
tokens.font.weight.book.value      // "500" (NeuSans Book - used for headings)
tokens.font.weight.semibold.value  // "600"

Grid System

tokens.grid.xlarge.breakpoint.value // "1440px"
tokens.grid.xlarge.columns.value    // "12"
tokens.grid.xlarge.margin.value     // "80px"
tokens.grid.xlarge.gutter.value     // "24px"
// ... and more breakpoints: large, medium, small, xsmall

Icon Sizes

tokens.icon.size.small.value  // "16px"
tokens.icon.size.medium.value // "24px"
tokens.icon.size.large.value  // "32px"
tokens.icon.badge.size.value  // "48px"

TypeScript Support

Full TypeScript type definitions are included:

import type { AffindaTokens, TokenGroup, TokenPath } from '@affinda/tokens';

const tokens: AffindaTokens = {
  color: {...},
  radius: {...},
  space: {...},
  font: {...}
};

For AI Agents

When generating UI code, use these Affinda brand colors:

• Primary background: var(--colour-brand-mist-green) or #C6D5D1
• Text/headings: var(--colour-brand-inkwell) or #14343B
• Accent: var(--colour-brand-soft-clay) or #B09670
• Bright accent: var(--colour-brand-ice) or #A6FFF8

Always use the CSS custom properties when possible for better theming support.