Design-Tokens

WIP

HTML
View
Context
Info
Notes


        
        <h2>Colors</h2>

<h3>Gray</h3>

<div class="color-swatchs">
    <div class="color-swatch" style="background-color: var(--color-gray-050)">
        <div class="color-swatch__step">050</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-100)">
        <div class="color-swatch__step">100</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-200)">
        <div class="color-swatch__step">200</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-300)">
        <div class="color-swatch__step">300</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-400)">
        <div class="color-swatch__step">400</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-500)">
        <div class="color-swatch__step">500</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-600)">
        <div class="color-swatch__step">600</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-700)">
        <div class="color-swatch__step">700</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-800)">
        <div class="color-swatch__step">800</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-900)">
        <div class="color-swatch__step">900</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-gray-950)">
        <div class="color-swatch__step">950</div>
    </div>
</div>
<h3>Orange</h3>

<div class="color-swatchs">
    <div class="color-swatch" style="background-color: var(--color-orange-050)">
        <div class="color-swatch__step">050</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-100)">
        <div class="color-swatch__step">100</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-200)">
        <div class="color-swatch__step">200</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-300)">
        <div class="color-swatch__step">300</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-400)">
        <div class="color-swatch__step">400</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-500)">
        <div class="color-swatch__step">500</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-600)">
        <div class="color-swatch__step">600</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-700)">
        <div class="color-swatch__step">700</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-800)">
        <div class="color-swatch__step">800</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-900)">
        <div class="color-swatch__step">900</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-orange-950)">
        <div class="color-swatch__step">950</div>
    </div>
</div>
<h3>Steel</h3>

<div class="color-swatchs">
    <div class="color-swatch" style="background-color: var(--color-steel-050)">
        <div class="color-swatch__step">050</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-100)">
        <div class="color-swatch__step">100</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-200)">
        <div class="color-swatch__step">200</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-300)">
        <div class="color-swatch__step">300</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-400)">
        <div class="color-swatch__step">400</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-500)">
        <div class="color-swatch__step">500</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-600)">
        <div class="color-swatch__step">600</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-700)">
        <div class="color-swatch__step">700</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-800)">
        <div class="color-swatch__step">800</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-900)">
        <div class="color-swatch__step">900</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-steel-950)">
        <div class="color-swatch__step">950</div>
    </div>
</div>
<h3>Yellow</h3>

<div class="color-swatchs">
    <div class="color-swatch" style="background-color: var(--color-yellow-050)">
        <div class="color-swatch__step">050</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-100)">
        <div class="color-swatch__step">100</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-200)">
        <div class="color-swatch__step">200</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-300)">
        <div class="color-swatch__step">300</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-400)">
        <div class="color-swatch__step">400</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-500)">
        <div class="color-swatch__step">500</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-600)">
        <div class="color-swatch__step">600</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-700)">
        <div class="color-swatch__step">700</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-800)">
        <div class="color-swatch__step">800</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-900)">
        <div class="color-swatch__step">900</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-yellow-950)">
        <div class="color-swatch__step">950</div>
    </div>
</div>
<h3>Green</h3>

<div class="color-swatchs">
    <div class="color-swatch" style="background-color: var(--color-green-050)">
        <div class="color-swatch__step">050</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-100)">
        <div class="color-swatch__step">100</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-200)">
        <div class="color-swatch__step">200</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-300)">
        <div class="color-swatch__step">300</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-400)">
        <div class="color-swatch__step">400</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-500)">
        <div class="color-swatch__step">500</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-600)">
        <div class="color-swatch__step">600</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-700)">
        <div class="color-swatch__step">700</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-800)">
        <div class="color-swatch__step">800</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-900)">
        <div class="color-swatch__step">900</div>
    </div>
    <div class="color-swatch" style="background-color: var(--color-green-950)">
        <div class="color-swatch__step">950</div>
    </div>
</div>

<h2>Headlines</h2>

<div class="headlines">
    <div class="headline">
        <div class="headline__size">Headline 1</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-1)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
    <div class="headline">
        <div class="headline__size">Headline 2</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-2)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
    <div class="headline">
        <div class="headline__size">Headline 3</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-3)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
    <div class="headline">
        <div class="headline__size">Headline 4</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-4)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
    <div class="headline">
        <div class="headline__size">Headline 5</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-5)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
    <div class="headline">
        <div class="headline__size">Headline 6</div>
        <div class="headline__text" style="font-size: var(--font-size-headline-6)">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
</div>

<style>
    .color-swatchs {
        display: grid;
        gap: 1rem;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .color-swatch {
        border: 1px solid #000;
        aspect-ratio: 1;
    }

    .color-swatch__step {
        padding-block: 0.2em;
        padding-inline: 0.5em;
        font-size: 1.4rem;
        font-weight: bold;
        background-color: #fff;
        width: fit-content;
    }

    .gradients {
        display: grid;
        gap: 1rem;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .gradient {
        border: 1px solid #000;
        aspect-ratio: 3/4;
    }

    .gradient__name {
        padding-block: 0.2em;
        padding-inline: 0.5em;
        font-size: 1.4rem;
        font-weight: bold;
        background-color: #fff;
        width: fit-content;
    }

    .headline__text {
        font-family: var(--font-family-exo);
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1.5;
    }
</style>


        {% set colors = {
  'gray': 'Gray',
  'orange': 'Orange',
  'steel': 'Steel',
  'yellow': 'Yellow',
  'green': 'Green',
} %}

<h2>Colors</h2>

{% for slug, name in colors %}
  <h3>{{ name }}</h3>

  <div class="color-swatchs">
    {% for step in ['050', 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] %}
      <div class="color-swatch" style="background-color: var(--color-{{ slug }}-{{ step }})">
        <div class="color-swatch__step">{{ step }}</div>
      </div>
    {% endfor %}
  </div>
{% endfor %}

<h2>Headlines</h2>

<div class="headlines">
  {% for size in 1..6 %}
    <div class="headline">
      <div class="headline__size">Headline {{ size }}</div>
      <div class="headline__text" style="font-size: var(--font-size-headline-{{ size }})">Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark.</div>
    </div>
  {% endfor %}
</div>

<style>
  .color-swatchs {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .color-swatch {
    border: 1px solid #000;
    aspect-ratio: 1;
  }

  .color-swatch__step {
    padding-block: 0.2em;
    padding-inline: 0.5em;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: #fff;
    width: fit-content;
  }

  .gradients {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .gradient {
    border: 1px solid #000;
    aspect-ratio: 3/4;
  }

  .gradient__name {
    padding-block: 0.2em;
    padding-inline: 0.5em;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: #fff;
    width: fit-content;
  }

  .headline__text {
    font-family: var(--font-family-exo);
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5;
  }
</style>


        
            
            /* No context defined. */

Handle: @design-tokens
Preview:
- With layout
- Component only
Filesystem Path: src/components/0-design-tokens/design-tokens.twig

No notes defined.