# Nethesis Design System

The Nethesis Design System is made of three parts, to use together:

- **This site**: the rules shared by all products, whatever technology they are built with.
- **[vue-components Storybook](https://nethesis.github.io/vue-components/)**: the Vue components
  and patterns of `@nethesis/vue-components`, with their props and live examples.
- **[NDS Figma file](https://www.figma.com/design/ZRZzzlqb9GfB9Xdz6iGufh/NDS)**: the designs, open
  to the members of the Nethesis Figma team.

It applies to the user interfaces of NethSecurity, NethVoice and My Nethesis, and in part to
[NethServer 8](#nethserver-8).

## What you find here

- [Writing guidelines](https://nethesis.github.io/design-system/?page=writing-guidelines): how to write interface text, from voice and
  tone to the text of buttons, forms, empty states, modals and notifications.
- [Glossary](https://nethesis.github.io/design-system/?page=glossary): the approved terms, with their Italian translations and the terms to
  avoid. Weblate uses it when translating Nethesis products.
- Foundations: [colors](https://nethesis.github.io/design-system/?page=colors), [typography](https://nethesis.github.io/design-system/?page=typography),
  [iconography](https://nethesis.github.io/design-system/?page=iconography), [spacing and border](https://nethesis.github.io/design-system/?page=spacing-and-border),
  [elevation and shadow](https://nethesis.github.io/design-system/?page=elevation-and-shadow).

## NethServer 8

NethServer 8 uses the Carbon Design System, not the Nethesis one: only the
[writing guidelines](https://nethesis.github.io/design-system/?page=writing-guidelines) and the [glossary](https://nethesis.github.io/design-system/?page=glossary) apply to it. The
foundations and the vue-components library do not. For its components and visual style, see:

- [Carbon Design System v10](https://v10.carbondesignsystem.com/): the design system.
- [ns8-ui-lib Storybook](https://nethserver.github.io/ns8-ui-lib/): the NethServer 8 components.
- [Carbon Components Vue Storybook](https://vue.carbondesignsystem.com/vue2/): the Carbon
  components for Vue 2.