@caoscompany/brand-tokens

C.A.O.S. design tokens — Tailwind v4 @theme preset, design tokens JSON, glassmorphism utilities. Single source of truth for all CAOS apps and the platform.

Install

npm install @caoscompany/brand-tokens

Usage

1. Tailwind v4 (recommended)

Tailwind v4 reads @theme blocks natively. Just import the tokens CSS after Tailwind:

/* app.css */
@import "tailwindcss";
@import "@caoscompany/brand-tokens/tokens.css";

All tokens become Tailwind utilities automatically:

<div class="bg-caos-bg text-caos-text">
  <button class="bg-caos-warm-500 hover:bg-caos-warm-600 shadow-glow-warm">
    CTA
  </button>
  <div class="font-mono text-caos-muted">Code snippet</div>
</div>

2. Tailwind v3 (legacy preset)

// tailwind.config.js
import caosPreset from '@caoscompany/brand-tokens/preset';

export default {
  presets: [caosPreset],
  content: ['./src/**/*.{ts,tsx,html}']
};

3. Programmatic (no framework)

import { tokens, colors, gradients, fontFamily, shadows, appAccents } from '@caoscompany/brand-tokens';

console.log(colors['caos-warm-500']);            // "#FF3D2E"
console.log(gradients['warm-cool']);             // "linear-gradient(135deg, #FF3D2E 0%, #1E5BFF 100%)"
console.log(appAccents.backlogger.color);        // "#1E5BFF"
console.log(appAccents.vamo.gradient);           // gradient string

4. Raw JSON

import tokens from '@caoscompany/brand-tokens/tokens.json' with { type: 'json' };

Token reference

Surface

| Token | Hex | |---|---| | caos-bg | #050608 | | caos-surface | #0B0F17 | | caos-surface-2 | #0E1420 | | caos-surface-3 | #131A26 |

Text

| Token | Hex | |---|---| | caos-text | #E7EAF0 | | caos-muted | #9AA3B2 | | caos-subtle | #5A6577 |

Brand — warm (primary)

| Token | Hex | Notes | |---|---|---| | caos-warm-300 | #FF7A5A | | | caos-warm-400 | #FF5A3D | | | caos-warm-500 | #FF3D2E | MARCA | | caos-warm-600 | #E12B22 | | | caos-warm-700 | #B91F18 | |

Brand — cool (secondary)

| Token | Hex | |---|---| | caos-cool-300 | #6BB8FF | | caos-cool-400 | #4DA3FF | | caos-cool-500 | #2E8CFF | | caos-cool-600 | #1E5BFF | | caos-cool-700 | #1647CC | | caos-cool-900 | #071A3A |

Status

| Token | Hex | |---|---| | caos-success | #22C55E | | caos-warning | #F59E0B | | caos-error | #EF4444 | | caos-info | #1E5BFF (= cool-600) |

Per-app accents

Each CAOS app uses unified brand chrome + one accent color reflecting its function:

| App | Accent | Hex | |---|---|---| | Backlogger | cool-600 | #1E5BFF | | PSIU | warm-500 | #FF3D2E | | Dib | warm-400 | #FF5A3D | | PTV | cool-300 | #6BB8FF | | VAMO | warm→cool gradient | linear-gradient(135deg, #FF3D2E, #1E5BFF) |

Gradients

warm, cool, warm-cool, metal-warm, metal-cool, glass, metallic-text — exposed as CSS custom properties (--gradient-*).

Typography

• Sans: Inter (SIL OFL 1.1) — load via Google Fonts
• Mono: JetBrains Mono (Apache 2.0) — load via Google Fonts

Recommended HTML import:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Versioning

Follows SemVer. Token additions are minor releases; renames/removals are major releases.

Contributing

Tokens are extracted from caos-company-platform/tailwind.config.js (canonical source of truth). Drift between this package and the platform should be reconciled before publishing a new version.

License

MIT — © 2026 C.A.O.S. Company