OTTODesign System

Foundations

Naming

Overview

There are two different ways of naming:

  • Semantic: A semantic naming describes the meaning and not the appearance.
  • Descriptive: A descriptive naming describes the appearance and not the meaning.

Components

Components are named semantically, according to their functionality and the common standard. Use a singular noun for components only, e.g. 'button', not 'buttons'. All components follow the same naming scheme:

  • Prefix: oc, short for OTTO Components.
  • Namespace: represents the name of the component.
  • Version: represents the version of the component.

It is represented as follows in the code:

<oc-namespace-v1> </oc-namespace-v1>

Properties

Most properties follow the semantic naming scheme, e.g. size or variant. But there also properties which are described mostly descriptive for example icons.

Sizes

The sizes are divided into a scale. 100 is the default; a higher number indicates a bigger size, while a lower number indicates a smaller size. With a numerical scale, it is easier to add intermediate sizes as needed.

Link125 Link100 Link75 Link50
Liveexamples of sizes
HTML
<oc-link-v2 href="#" size="125">Link125</oc-link-v2>
<oc-link-v2 href="#" size="100">Link100</oc-link-v2>
<oc-link-v2 href="#" size="75">Link75</oc-link-v2>
<oc-link-v2 href="#" size="50">Link50</oc-link-v2>
Variant

The variant is described semantically by its visual appearance or meaning, such as 'primary' or 'success'. The designation 'primary' describes the most concise visual variant. Visually subordinate variants are referred to as secondary and tertiary. There are also functional variants, such as success, warning, hint, and sale.

primary secondary tertiary
Success Error Warning Hint Sale
Liveexamples of variants
HTML
<div class="on-frame" style="background:var(--oc-semantic-color-background-frame, #f0f0f0);display:grid;gap:8px">
  <oc-button-v1 variant="primary" fit-content>primary</oc-button-v1>
  <oc-button-v1 variant="secondary" fit-content>secondary</oc-button-v1>
  <oc-button-v1 variant="tertiary" fit-content>tertiary</oc-button-v1>
  <oc-tag-v1 variant="success">Success</oc-tag-v1>
  <oc-tag-v1 variant="error">Error</oc-tag-v1>
  <oc-tag-v1 variant="warning">Warning</oc-tag-v1>
  <oc-tag-v1 variant="hint">Hint</oc-tag-v1>
  <oc-tag-v1 variant="sale">Sale</oc-tag-v1>

Best practices

primary button success button
DoName variants semantically such as primary or secondary.
red button big green button
Don'tName variants descriptive such as shiny, big or red.

Status

Implementation

Note: For full technical documentation of naming, visit Storybook/AboutComponents.

Updated 10 June 2026