IDS Design System

Angular component library, design tokens and themes for IDS Group products.

📖 Live docs & component showcase: https://ids-ds.proto.ids-group.co.uk/

• 45+ standalone components (buttons, forms, overlays, navigation, data display)
• Three-tier token architecture: palette → semantic theme → geometry/typography/motion tokens
• Bundled fonts (Mulish, JetBrains Mono) — no external font CDN required
• Built for Angular 21, zoneless-compatible, sideEffects: false

Installation

npm install @ids-group-ltd/ids-design-system

Requires Angular ^21.2.0 (@angular/core, common, forms, router, platform-browser) and @angular/cdk as peer dependencies.

Setup

1. Global styles

Add the package to your Sass include paths in angular.json:

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": ["node_modules/@ids-group-ltd/ids-design-system"]
      }
    }
  }
}

Then import the design system once at the top of your root styles.scss:

@use 'styles/ds';

This brings in the default palette, semantic theme, design tokens, fonts, reset and base typography.

Advanced consumers can swap the palette/theme and keep the token layer — global side-effects (fonts, link styles, etc.) become opt-in:

@use 'themes/light/palette';
@use 'themes/light/theme';
@use 'styles/tokens';
@use 'styles/fonts';

2. Components

All components are standalone — import them directly:

import { Component } from '@angular/core';
import { ButtonComponent } from '@ids-group-ltd/ids-design-system';

@Component({
  selector: 'app-example',
  imports: [ButtonComponent],
  template: `<ds-button variant="outline" icon="download">Export</ds-button>`,
})
export class ExampleComponent {}

License

MIT © IDS Group Ltd