Documentation

Quick Start
Get up and running with the design system

1. Import the CSS

import "./globals.css";

2. Use Tailwind classes

<div className="bg-primary text-primary-foreground">

3. Import components

import { Button } from "@/components/ui/button";

Documentation Sections

Colors
Learn how to use the color system including primary, semantic, and palette colors.
  • Primary palette (50-950)
  • Gray palette
  • Semantic colors (danger, success, warning)
  • Dark mode support
Typography
Typography scale and font usage guidelines.
  • Font families (Inter, Poppins)
  • Heading styles (XL, LG, MD, SM)
  • Body text styles
  • Utility classes
Components
Pre-built UI components powered by shadcn/ui.
  • Buttons and badges
  • Cards and dialogs
  • Form elements
  • Data display components
Layout
Layout patterns and spacing guidelines.
  • Container widths
  • Spacing scale
  • Grid system
  • Responsive breakpoints

CSS Variables Reference

Color Variables
Available CSS custom properties for colors

Semantic

  • --background
  • --foreground
  • --primary
  • --secondary
  • --muted
  • --accent
  • --destructive

Primary Palette

  • --primary-50 to --primary-950

Gray Palette

  • --gray-50 to --gray-950

Status Colors

  • --danger-50 to --danger-950
  • --success-50 to --success-950
  • --warning-50 to --warning-950

Typography Classes

Heading Utilities
Custom typography classes from your Figma design
.heading-xl

60px, Poppins, 600 weight

Aa
.heading-lg

48px, Inter, 600 weight

Aa
.heading-md

36px, Inter, 600 weight

Aa
.heading-sm

30px, Inter, 500 weight

Aa

Download Design Tokens

Export design tokens for use in Figma or your development environment.

For Designers (Figma)
JSON tokens compatible with Tokens Studio plugin
  • All color palettes (Primary, Gray, Status)
  • Typography tokens (fonts, sizes, weights)
  • Spacing and border radius scales
  • Multi-brand themes (Scicom, EMGS, Telekom)
Download JSON Tokens

Import into Figma using Tokens Studio plugin

For Developers
CSS variables file ready for any project
  • Pure CSS custom properties
  • No build tools required
  • Theme classes for brand switching
  • Dark mode support included
Download CSS Variables

Import with: @import 'variables.css';

Resources

shadcn/ui

Component library

Tailwind CSS

Utility framework

Next.js

React framework