Built with accessibility and simplicity in mind, the Helvetia Design System provides UI components and a clearly defined visual style for building web applications.

Core Principles

• Accessibility — WCAG 2.2 AA compliant, keyboard navigation, screen reader support
• Simplicity — HTML → CSS → JavaScript approach, minimal complexity
• Responsiveness — Works seamlessly from 320px to 2560px viewports
• Standards Compliance — W3C best practices, modern web standards
• Compatibility — Browser support verified via webstatus.dev and caniuse.com
• Inclusion — Designed for diverse abilities and technologies

Installation

Install the core design system package via npm:

npm install @baloise/ds-core

Then import the CSS and component loader in your application:

<link rel="stylesheet" href="node_modules/@baloise/ds-css/dist/css/design-system.css" />
<script type="module" src="node_modules/@baloise/ds-core/dist/design-system/design-system.esm.js"></script>

For framework-specific integrations, see the Quick Start guide.

Quick Start

Use any design system component in your HTML:

<ds-button>Click me</ds-button>
<ds-card>
  <ds-heading level="2">Welcome</ds-heading>
  <p>Start building with the Helvetia Design System</p>
</ds-card>

Explore all available components, design tokens, and examples in the component library.

Contributing

We welcome contributions! Please read our CONTRIBUTING.md guide to learn about:

• Reporting bugs and requesting features
• Development setup and workflow
• Creating new components
• Testing and code quality standards
• Semantic versioning and changesets

Follow our Code of Conduct for all interactions.

Learn More

• Documentation — Component library, design tokens, and interactive examples in Storybook
• Quick Start — Get started with the design system in your project
• CHANGELOG.md — Release notes, version history, and changes for each version
• ARCHITECTURE.md — System design, workspace structure, component lifecycle, web components patterns, CSS variables, testing strategy
• DEVELOPMENT.md — Local setup, dev servers, building, testing, troubleshooting
• CONTRIBUTING.md — Contribution workflow, PR process, component checklist, accessibility requirements
• STYLE_GUIDE.md — Code standards, naming conventions, best practices
• SECURITY.md — Security policy, vulnerability reporting, and compliance guidelines
• CODE_OF_CONDUCT.md — Community standards and expectations

License

This project is licensed under the Apache License 2.0. See LICENSE for details.