Typography

Examples

Main title

Lorem ipsum

<h1 class="ys-main-title">Lorem ipsum</h1>

Main title (light)

Lorem ipsum

<h1 class="ys-main-title ys-main-title--light">Lorem ipsum</h1>

Primary title

Lorem ipsum

<h2 class="ys-primary-title">Lorem ipsum</h2>

Primary title (light)

Lorem ipsum

<h2 class="ys-primary-title ys-primary-title--light">Lorem ipsum</h2>

Secondary title

Lorem ipsum

<h3 class="ys-secondary-title">Lorem ipsum</h3>

Secondary title (light)

Lorem ipsum

<h3 class="ys-secondary-title ys-secondary-title--light">Lorem ipsum</h3>

Subtitle

Lorem ipsum

<h4 class="ys-subtitle">Lorem ipsum</h4>

Subtitle (light)

Lorem ipsum

<h4 class="ys-subtitle ys-subtitle--light">Lorem ipsum</h4>

Body text

Lorem ipsum (16px)

<p class="ys-body-text">Lorem ipsum (16px)</p>

Body text (light)

Lorem ipsum (16px)

<p class="ys-body-text ys-body-text--light">Lorem ipsum (16px)</p>

Body text large

Lorem ipsum (20px)

<p class="ys-body-text ys-body-text--large">Lorem ipsum (20px)</p>

Body text large (light)

Lorem ipsum (20px)

<p class="ys-body-text ys-body-text--large ys-body-text--light">Lorem ipsum (20px)</p>

Body text large bold

Lorem ipsum (20px)

<p class="ys-body-text ys-body-text--large ys-body-text--bold">Lorem ipsum (20px)</p>

Body text large bold (light)

Lorem ipsum (20px)

<p class="ys-body-text ys-body-text--large ys-body-text--bold">Lorem ipsum (20px)</p>

Small text

Lorem ipsum (12px)

<p class="ys-small-text">Lorem ipsum (12px)</p>

Small text (light)

Lorem ipsum (12px)

<p class="ys-small-text ys-small-text--light">Lorem ipsum (12px)</p>

Unordered list

  • Some item right here
  • Some item right here
  • Some item right here
    • Some item right here
    • Some item right here
    • Some item right here
  • Some item right here
  • Some item right here
  • Some item right here
  • Some item right here
<ul class="ys-list">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here
        <ul class="ys-list">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
</ul>
</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
</ul>

Unordered list (light)

  • Some item right here
  • Some item right here
  • Some item right here
    • Some item right here
    • Some item right here
    • Some item right here
  • Some item right here
  • Some item right here
  • Some item right here
  • Some item right here
<ul class="ys-list ys-list--light">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here
        <ul class="ys-list ys-list--light">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
</ul>
</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
</ul>

Ordered list

  1. Some item right here
  2. Some item right here
  3. Some item right here
    1. Some item right here
    2. Some item right here
    3. Some item right here
  4. Some item right here
  5. Some item right here
  6. Some item right here
  7. Some item right here
<ol class="ys-list ys-list--ordered">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here
        <ol class="ys-list ys-list--ordered">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
</ol>
</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
</ol>

Ordered list (light)

  1. Some item right here
  2. Some item right here
  3. Some item right here
    1. Some item right here
    2. Some item right here
    3. Some item right here
  4. Some item right here
  5. Some item right here
  6. Some item right here
  7. Some item right here
<ol class="ys-list ys-list--ordered ys-list--light">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here
        <ol class="ys-list ys-list--ordered ys-list--light">
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
    <li class="ys-list__item">Some item right here</li>
</ol>
</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
<li class="ys-list__item">Some item right here</li>
</ol>

HTML Guidelines

Always mark up text semantically, ie. only use one <h1> per page, even if the design shows two “Main Title” elements. The visual representation is handled by CSS and not the HTML.

Please be aware that the color of the text is not set in the CSS classes and should be set on the parent element.

UX and Design Guidelines

For accessibility reasons we should aim for a line-height adhering to the 8 point grid, which means rounding up numbers to meet the grid specs.

Color

All fonts on the website should use the specified grey called “grey-10” (#191919). Exceptions are:

  • When used on dark background. In this case use white (#fff) instead
  • Special cases

Color explanation

  • Component
  • Design guidelines
  • Code guidelines
  • Page