Design System + AI = ❤️

We've enhanced the Spiris Design System with structured Markdown documentation specifically designed for AI-assisted development. These files provide comprehensive, machine-readable reference materials for components, enabling developers using GitHub Copilot, Claude, ChatGPT, and other AI coding assistants to get accurate, up-to-date implementation guidance directly in their workflow. The documentation includes detailed component APIs, usage patterns, accessibility requirements, and code examples—all formatted for optimal LLM comprehension. This means faster development, fewer errors, and better adherence to design system standards when building with AI assistance.

You can find the Markdown docs in the docs directory of the npm package after you have installed the designsystem package.

Below you can find a migrated version of the index.md file which links to all documentation files (you need Github access to view the real files):

Spiris Design System - Component Documentation Index

Welcome to the Spiris Design System component documentation. This index provides quick access to all component guides.

📚 About This Documentation

This documentation provides implementation guides, code examples, and best practices for all components in the Spiris Design System. Each guide includes:

Component overview and use cases

HTML code examples

CSS class reference

Accessibility guidelines

JavaScript implementation examples

Best practices

⚠️ Important: JavaScript Not Included in Package

The Spiris Design System npm package contains only CSS and SVG assets. JavaScript code examples in this documentation are provided as reference implementations to demonstrate interactive behavior. You are responsible for implementing your own JavaScript based on these examples or using a framework of your choice.

What's included in the npm package:

✅ CSS files (compiled and source SCSS)

✅ SVG icons and assets

✅ Design tokens

What's NOT included:

❌ JavaScript files

❌ Framework-specific components (React, Vue, Angular, etc.)

If a component requires JavaScript for interactivity (modals, dropdowns, tooltips, etc.), you must implement the behavior yourself using the HTML structure and CSS classes provided.

🚀 Getting Started

Before using components, ensure you've:

1. Installed the design system

2. Included the appropriate CSS file

3. Reviewed the browser support policy

📖 Component Categories

Core Components

Essential UI elements for common interactions:

Alerts - Important messages and notifications

Badges - Status indicators and counters

Buttons - Buttons, button groups, dropdowns, pills, segments, and switches

Cards - Card lists and hero cards for content display

Form Elements

Components for user input and data entry:

Forms - Complete form guide including inputs, textareas, checkboxes, radios, and validation

Combobox - Searchable select dropdown and combogrid

Datepicker - Date selection component

Timepicker - Time selection component

Search Fields - Search input fields

Layout & Grid

Page structure and layout utilities:

Grids - Responsive 12-column grid system with auto-layout, alignment, and reordering

Helper Classes - Utility classes for spacing, display, flex, typography, and more

Typography - Text styles, headings, and typographic hierarchy

Theming & Customization

Design system foundations and customization:

CSS Properties - Complete reference of all CSS variables including colors, spacing, typography, elevation, and component tokens

Navigation

Components for site and application navigation:

Navigation - Top navigation, vertical navigation, and breadcrumbs

Tabs - Tabbed content navigation

Pagination - Page navigation for lists and search results

Wizard - Multi-step process navigation

Interactive Components

Components requiring user interaction:

Modals - Dialog boxes and modal windows

Drawers - Slide-out side panels

Popover - Contextual popup elements

Tooltips - Hover tooltips and hints

Toasts - Temporary notification messages

Progress & Feedback

Visual feedback for processes and states:

Progress Indicators - Loading bars, progress bars, circles, and spinners

Stepper - Horizontal and vertical step progress indicators

Data Display

Components for displaying structured data:

Tables - Data tables with sorting, filtering, and row states

List Groups - Styled lists and collapsible list groups

Panels - Content containers with headers and footers

Media & Icons

Visual elements and iconography:

Icons - Complete icon library including general, functional, flag, and informative icons

Images - Image handling and responsive images

Favicons - Favicon implementation guide

Specialized Components

Purpose-built components for specific scenarios:

Error Pages - Error page templates (403, 404, 500, maintenance, server down, unexpected error)

Login Pages - Login and authentication page templates

Demo Pages - Complete page layout examples and templates

🎨 Design Tokens

The design system uses design tokens for consistent styling:

Colors and themes

Typography scale and font families

Spacing and sizing units

Border radius and shadows

Breakpoints and grid specifications

📱 Responsive Design

All components are built mobile-first and support responsive breakpoints:

XS (<550px) - Mobile phones

S (≥769px) - Large phones and small tablets

M (≥992px) - Tablets

L (≥1280px) - Small laptops

XL (≥1440px) - Laptops and desktops

XXL (≥1680px) - Large desktops

♿ Accessibility

The design system follows WCAG 2.1 AA standards. Each component guide includes:

ARIA attribute requirements

Keyboard navigation support

Screen reader considerations

Color contrast guidelines

Focus management

🔧 JavaScript Requirements

Some components require JavaScript:

No JS Required: Alerts, Badges, Buttons (basic), Forms (basic), Grids, Typography, Helper Classes, Panels, Breadcrumbs, Pagination

Optional JS: Button groups, Pills, Segment controls (for toggle state)

Required JS: Dropdowns, Modals, Drawers, Tabs, Tooltips, Popovers, Toasts, Navigation (responsive), Datepicker, Timepicker, Combobox, File upload (drag & drop)