GTS Central Library

A design system and component library for the Locker Room product at adidas. This library provides a centralized collection of design tokens, React components, and utilities to ensure visual consistency and accelerate development.

Purpose

GTS Central Library serves as the single source of truth for:

• Design Tokens — Colors, typography, spacing, motion, and shadows as CSS custom properties
• React Components — Production-ready, accessible components built with TypeScript
• Icons — A curated icon set optimized for the Locker Room ecosystem

This package is designed to be consumed by AI-powered design and development tools such as Figma Make and Lovable, enabling rapid prototyping and consistent implementation across platforms.

Installation

npm install gts-central-library

bun add gts-central-library

This package expects your app to provide React and React DOM (^18 || ^19).

Lovable + Vite Compatibility

For Lovable projects (or any Vite app), if you encounter duplicate React/runtime issues, dedupe React in your app's Vite config:

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    dedupe: ["react", "react-dom"],
  },
});

Quick Start

Import the global styles to access all design tokens:

import 'gts-central-library/styles';

Use components in your application:

import { Button, Icon } from 'gts-central-library';

function App() {
  return (
    <Button variant="primary" size="medium">
      Get Started
      <Icon name="arrow-right" />
    </Button>
  );
}

Design Tokens

All tokens use the --gts- prefix and are organized by category:

| Category | Prefix | Example | | ---------- | -------------------------- | ------------------------------ | | Colors | --gts-color-* | --gts-color-bg-canvas | | Typography | --gts-body-font-set-* | --gts-body-font-set-size-7 | | Spacing | --gts-spacing-* | --gts-spacing-0100 | | Motion | --gts-motion-* | --gts-motion-duration-base | | Shadows | --gts-web-shadow-* | --gts-web-shadow-elevation-1 |

Token Source of Truth

• src/tokens/ is the canonical token source (DTCG-style JSON).
• bun run tokens:spec:check validates token schema consistency across all token files.
• bun run tokens:build validates the schema, then generates CSS in src/styles/0_tokens/.
• Typography CSS variables are generated from src/tokens/typography/styles.json.

Documentation

Run Storybook locally to explore components and tokens:

bun install
bun run storybook

Tech Stack

• React 18/19 with TypeScript
• Vite for build tooling
• Tailwind CSS v4 + CSS Custom Properties
• Class Variance Authority for component variants
• Storybook for documentation

License

Proprietary — adidas internal use only.