S&P Global Design System

A comprehensive React component library built with TypeScript, featuring S&P Global's brand colors, Akkurat LL typography, and standardized design patterns.

Features

• S&P Global Brand Colors: Complete color palette including primary, brand, and semantic colors
• Akkurat LL Typography: Professional typography system with proper scaling
• Standardized Components: Button, Header, and other essential UI components
• TypeScript Support: Full type definitions included
• Tailwind CSS Integration: Built with Tailwind CSS for consistency
• Tree Shaking: Optimized bundle size with ES modules

Installation

npm install @mikeheinrich/sp-global-design-system

Setup

1. Import the CSS styles

Add this to your main CSS file or index.css:

@import '@mikeheinrich/sp-global-design-system/styles.css';

2. Configure Tailwind CSS (Optional but Recommended)

If you're using Tailwind CSS in your project, extend your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@mikeheinrich/sp-global-design-system/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      // Your existing config
    },
  },
  plugins: [],
}

Or use our complete Tailwind config:

const spGlobalConfig = require('@mikeheinrich/sp-global-design-system/tailwind.config.js');

module.exports = {
  ...spGlobalConfig,
  content: [
    ...spGlobalConfig.content,
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
};

Usage

import { Button, Header } from '@mikeheinrich/sp-global-design-system';

function App() {
  return (
    <div>
      <Header 
        productName="My Application"
        userInitials="JD"
        onBellClick={() => console.log('Notifications')}
        onQuestionClick={() => console.log('Help')}
        onUserClick={() => console.log('User menu')}
      />
      <Button variant="primary">Click me</Button>
    </div>
  );
}

Available Components

Button

<Button variant="primary" size="md" icon={<Icon />}>
  Primary Button
</Button>

Properties:

• variant: "primary" | "secondary" | "link"
• size: "sm" | "md" | "lg"
• icon: React node for optional icon

Header

<Header 
  productName="My App"
  userInitials="JD"
  onBellClick={() => {}}
  onQuestionClick={() => {}}
  onUserClick={() => {}}
/>

Properties:

• productName: Product name display
• userInitials: User avatar initials (2 characters)
• onBellClick: Notification bell handler
• onQuestionClick: Help icon handler
• onUserClick: User avatar handler

Design Tokens

The package exports design tokens for consistent styling:

import { DESIGN_TOKENS } from '@mikeheinrich/sp-global-design-system';

// Access S&P Global colors
const primaryColor = DESIGN_TOKENS.colors.primary;
const brandColor = DESIGN_TOKENS.colors.brand;

// Typography tokens
const h1Size = DESIGN_TOKENS.typography.h1.fontSize;

Typography Classes

Use S&P Global typography classes:

.text-h1      /* 24px, Akkurat LL Regular */
.text-h2      /* 22px, Akkurat LL Regular */
.text-h3      /* 18px, Akkurat LL Regular */
.text-h4      /* 16px, Akkurat LL Regular */
.text-paragraph /* 14px, Akkurat LL Regular */
.text-small   /* 12px, Akkurat LL Regular */

.font-akkurat-regular /* Akkurat LL Regular */
.font-akkurat-bold    /* Akkurat LL Bold */

Color Classes

Use S&P Global color utilities:

/* Brand Colors */
.text-brand, .bg-brand, .border-brand

/* Primary Action Colors */
.text-primary, .bg-primary, .border-primary

/* Semantic Colors */
.text-success, .bg-success, .border-success
.text-warning, .bg-warning, .border-warning
.text-attention, .bg-attention, .border-attention
.text-info, .bg-info, .border-info

/* Gray Scale */
.text-gray-5, .bg-gray-bg, .text-gray-4, etc.

Spacing System

S&P Global spacing utilities:

/* Padding (Insets) */
.inset-xs   /* 5px padding */
.inset-sm   /* 10px padding */
.inset-md   /* 20px padding - default */
.inset-lg   /* 40px padding */

/* Vertical Spacing (Stacks) */
.stack-xs, .stack-sm, .stack-md, .stack-lg

/* Horizontal Spacing (Push) */
.push-xs, .push-sm, .push-md, .push-lg

Requirements

• React 16.8+
• TypeScript (optional but recommended)
• Tailwind CSS 3.0+ (for full styling support)

License

MIT