Gut zu wissen
Grundlagen
Komponenten
Templates
Farben
Verwendete Farben
Hauptfarben
ready
      <style>
.set {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
  margin-top: 0;
  padding: 0;
  list-style: none;
}
li {
  flex: 1 0 20%;
  margin: 1rem;
}
.color {
  width: 100%;
  min-width: 160px;
  height: 80px;
  color: white;
  border: 1px solid whitesmoke;
  margin-bottom: 1rem;
}
p {
  margin: 0;
}
</style>
<ul class="set">
{% for item in page.colors %} 
  <li>
    <div class="color" style="background:{{ item.css }}"></div> 
    <p><strong>{{ item.name }}</strong></p>
    <p><span class="label">SCSS:</span> {{ item.mashinename }}</p>
    {% if item.css %}<p><span class="label">CSS:</span> {{ item.css }}</p>{% endif %}
    {% if item.hex %}<p><span class="label">HEX:</span> {{ item.hex }}</p>{% endif %}
    {% if item.rgb %}<p><span class="label">RGB:</span> {{ item.rgb }}</p>{% endif %}
    {% if item.hsl %}<p><span class="label">HSL:</span> {{ item.hsl }}</p>{% endif %}
    {% if item.cmyk %}<p><span class="label">CYMK:</span> {{ item.cmyk }}</p>{% endif %}
  </li>
{% endfor %}
</ul>

      
      //----------------------------------------------------------
// COLORS
//----------------------------------------------------------

// Basic colors
$white: #ffffff;
$black: #000000;
$gray: #cecece;
$gray-dark: #d7d5cd;
$gray-medium: #f0efec;
$gray-light: #f1f0ee;
$gray-beige-light: #f2f2f0;

// Primary colors
$blue: #0e2249;
$green: #95c11f;

// Accent colors
$teal: #008f8c;
$aloevera: #79c08b;
$cyan: #58c7da;

// Signal colors
$yellow: #ffc107;
$red: #dc3545;

// Colors as CSS custom properties
:root {
  --hsl-black: 0, 0%, 0%;
  --hsl-white: 0, 0%, 100%;

  --hsl-blue: 220, 68%, 17%;
  --hsl-green: 76, 72%, 44%;

  --hsl-teal: 179, 100%, 28%;
  --hsl-aloevera: 135, 36%, 61%;
  --hsl-cyan: 189, 64%, 60%;

  --hsl-yellow: 45, 100%, 51%;
  --hsl-red: 354, 70%, 54%;

  --color-black: hsla(var(--hsl-black), 1);
  --color-white: hsla(var(--hsl-white), 1);

  --color-blue: hsla(var(--hsl-blue), 1);
  --color-green: hsla(var(--hsl-green), 1);

  --color-teal: hsla(var(--hsl-teal), 1);
  --color-aloevera: hsla(var(--hsl-aloevera), 1);
  --color-cyan: hsla(var(--hsl-cyan), 1);

  --color-yellow: hsla(var(--hsl-yellow), 1);
  --color-red: hsla(var(--hsl-red), 1);
}

//Darkened Colors (lower lightness value in hsl)
$green-dark: hsl(76, 72%, 30%);
$teal-dark: hsl(179, 100%, 16%);
$cyan-dark: hsl(189, 64%, 30%);
$yellow-dark: hsl(45, 100%, 20%);

$primary: $blue;
$secondary: $white;
$light: $white;
$dark: $blue;
$success: $green;
$info: $teal;
$warning: $yellow;
$danger: $red;

$primary-supportive: $white;
$success-supportive: $green-dark;
$info-supportive: $teal-dark;
$warning-supportive: $yellow-dark;
$danger-supportive: $white;

$body-color: #8a8882;

$color-contrast-dark: $dark;
$color-contrast-light: $light;
$min-contrast-ratio: 1.25;

$colors: (
  'blue': $blue,
  'green': $green,
  'teal': $teal,
  'cyan': $cyan,
  'aloevera': $aloevera,
  'white': $white,
  'black': $black,
  'gray': $gray,
  'gray-dark': $gray-dark,
  'gray-medium': $gray-medium,
  'gray-light': $gray-light,
  'gray-beige-light': $gray-beige-light
);

$theme-colors: map-merge(
  $colors,
  (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'info': $info,
    'warning': $warning,
    'danger': $danger,
    'light': $light,
    'dark': $dark
  )
);

@each $name, $color in ($theme-colors) {
  .bg-#{$name} {
    color: white;

    *:not(.btn,[class*="bg-"]) {
      color: inherit !important;
    }
  }
}

@each $name, $color in ($theme-colors) {
  .text-#{$name} {
    *:not(.btn) {
      color: inherit !important;
    }
  }
}

$alert-bg-scale: 0;
$alert-color-scale: 0;

//----------------------------------------------------------
// FONT FAMILIES & SIZES
//----------------------------------------------------------

$font-family-sans-serif: 'Circular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
  'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji',
  sans-serif;
$font-family-base: $font-family-sans-serif;

$line-height-base: 1.5;

$font-size-root: 16px;
$font-size-base: 0.875rem;
$font-size-xxs: 0.625rem;
$font-size-xs: 0.75rem;
$font-size-sm: 0.8125rem;
$font-size-lg: 1rem;
$font-size-xl: 1.125rem;

$h1-font-size: 3rem;
$h2-font-size: 2.25rem;
$h3-font-size: 1.625rem;
$h4-font-size: 1.125rem;
$h5-font-size: 1rem;
$h6-font-size: 0.75rem;

$letter-spacing: 0.125em;

$enable-rfs: false;
$headings-font-weight: 700;
$headings-line-height: 1.25;
$headings-margin-bottom: 1em;
$headings-color: $primary;

$font-sizes: (
  bs: $font-size-base,
  xs: $font-size-xs,
  xxs: $font-size-xxs,
  sm: $font-size-sm,
  lg: $font-size-lg,
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

//----------------------------------------------------------
// GRIDS & SPACES
//----------------------------------------------------------

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1160px,
  xxl: 1160px
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1220px,
  xxl: 1400px
);

$grid-columns: 12;
$grid-gutter-width: 20px;

$input-btn-padding-y: 0.9375rem;
$input-btn-padding-x: 1.25rem;

$btn-padding-y: 1rem;
$btn-padding-x: 2.875rem;

//----------------------------------------------------------
// BORDER SETTINGS
//----------------------------------------------------------

$border-width: 1px;
$border-radius: 10px;
$border-radius-xs: 4px;
$border-radius-sm: 8px;
$border-radius-lg: 12px;
$border-radius-full: 1em;

//----------------------------------------------------------
// TOOLTIP SETTINGS
//----------------------------------------------------------

$spacer: 1rem;
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: 0.9;
$tooltip-padding-y: $spacer * 0.25;
$tooltip-padding-x: $spacer * 0.5;
$tooltip-margin: 0;

$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;
$tooltip-arrow-color: $tooltip-bg;

$nav-link-padding-y: 0.3125rem;
$nav-link-padding-x: 0.28rem;
$nav-pills-border-radius: 4px;
$nav-pills-link-active-bg: $teal;

//----------------------------------------------------------
// TABLES
//----------------------------------------------------------

$table-cell-padding-y: 20px;
$table-cell-padding-x: 1rem;
Akzentfarben
ready
      <style>
.set {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
  margin-top: 0;
  padding: 0;
  list-style: none;
}
li {
  flex: 1 0 25%;
  margin: 1rem;
}
.color {
  width: 100%;
  min-width: 160px;
  height: 80px;
  color: white;
  border: 1px solid whitesmoke;
  margin-bottom: 1rem;
}
p {
  margin: 0;
}
</style>
<ul class="set">
{% for item in page.colors %} 
  <li>
    <div class="color" style="background:{{ item.rgb }}"></div> 
    <p><strong>{{ item.name }}</strong></p>
    <p><span class="label">SCSS:</span> {{ item.mashinename }}</p>
    {% if item.css %}<p><span class="label">CSS:</span> {{ item.css }}</p>{% endif %}
    {% if item.hex %}<p><span class="label">HEX:</span> {{ item.hex }}</p>{% endif %}
    {% if item.rgb %}<p><span class="label">RGB:</span> {{ item.rgb }}</p>{% endif %}
    {% if item.hsl %}<p><span class="label">HSL:</span> {{ item.hsl }}</p>{% endif %}
    {% if item.cmyk %}<p><span class="label">CYMK:</span> {{ item.cmyk }}</p>{% endif %}
  </li>
{% endfor %}
</ul>

      
      //----------------------------------------------------------
// COLORS
//----------------------------------------------------------

// Basic colors
$white: #ffffff;
$black: #000000;
$gray: #cecece;
$gray-dark: #d7d5cd;
$gray-medium: #f0efec;
$gray-light: #f1f0ee;
$gray-beige-light: #f2f2f0;

// Primary colors
$blue: #0e2249;
$green: #95c11f;

// Accent colors
$teal: #008f8c;
$aloevera: #79c08b;
$cyan: #58c7da;

// Signal colors
$yellow: #ffc107;
$red: #dc3545;

// Colors as CSS custom properties
:root {
  --hsl-black: 0, 0%, 0%;
  --hsl-white: 0, 0%, 100%;

  --hsl-blue: 220, 68%, 17%;
  --hsl-green: 76, 72%, 44%;

  --hsl-teal: 179, 100%, 28%;
  --hsl-aloevera: 135, 36%, 61%;
  --hsl-cyan: 189, 64%, 60%;

  --hsl-yellow: 45, 100%, 51%;
  --hsl-red: 354, 70%, 54%;

  --color-black: hsla(var(--hsl-black), 1);
  --color-white: hsla(var(--hsl-white), 1);

  --color-blue: hsla(var(--hsl-blue), 1);
  --color-green: hsla(var(--hsl-green), 1);

  --color-teal: hsla(var(--hsl-teal), 1);
  --color-aloevera: hsla(var(--hsl-aloevera), 1);
  --color-cyan: hsla(var(--hsl-cyan), 1);

  --color-yellow: hsla(var(--hsl-yellow), 1);
  --color-red: hsla(var(--hsl-red), 1);
}

//Darkened Colors (lower lightness value in hsl)
$green-dark: hsl(76, 72%, 30%);
$teal-dark: hsl(179, 100%, 16%);
$cyan-dark: hsl(189, 64%, 30%);
$yellow-dark: hsl(45, 100%, 20%);

$primary: $blue;
$secondary: $white;
$light: $white;
$dark: $blue;
$success: $green;
$info: $teal;
$warning: $yellow;
$danger: $red;

$primary-supportive: $white;
$success-supportive: $green-dark;
$info-supportive: $teal-dark;
$warning-supportive: $yellow-dark;
$danger-supportive: $white;

$body-color: #8a8882;

$color-contrast-dark: $dark;
$color-contrast-light: $light;
$min-contrast-ratio: 1.25;

$colors: (
  'blue': $blue,
  'green': $green,
  'teal': $teal,
  'cyan': $cyan,
  'aloevera': $aloevera,
  'white': $white,
  'black': $black,
  'gray': $gray,
  'gray-dark': $gray-dark,
  'gray-medium': $gray-medium,
  'gray-light': $gray-light,
  'gray-beige-light': $gray-beige-light
);

$theme-colors: map-merge(
  $colors,
  (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'info': $info,
    'warning': $warning,
    'danger': $danger,
    'light': $light,
    'dark': $dark
  )
);

@each $name, $color in ($theme-colors) {
  .bg-#{$name} {
    color: white;

    *:not(.btn,[class*="bg-"]) {
      color: inherit !important;
    }
  }
}

@each $name, $color in ($theme-colors) {
  .text-#{$name} {
    *:not(.btn) {
      color: inherit !important;
    }
  }
}

$alert-bg-scale: 0;
$alert-color-scale: 0;

//----------------------------------------------------------
// FONT FAMILIES & SIZES
//----------------------------------------------------------

$font-family-sans-serif: 'Circular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
  'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji',
  sans-serif;
$font-family-base: $font-family-sans-serif;

$line-height-base: 1.5;

$font-size-root: 16px;
$font-size-base: 0.875rem;
$font-size-xxs: 0.625rem;
$font-size-xs: 0.75rem;
$font-size-sm: 0.8125rem;
$font-size-lg: 1rem;
$font-size-xl: 1.125rem;

$h1-font-size: 3rem;
$h2-font-size: 2.25rem;
$h3-font-size: 1.625rem;
$h4-font-size: 1.125rem;
$h5-font-size: 1rem;
$h6-font-size: 0.75rem;

$letter-spacing: 0.125em;

$enable-rfs: false;
$headings-font-weight: 700;
$headings-line-height: 1.25;
$headings-margin-bottom: 1em;
$headings-color: $primary;

$font-sizes: (
  bs: $font-size-base,
  xs: $font-size-xs,
  xxs: $font-size-xxs,
  sm: $font-size-sm,
  lg: $font-size-lg,
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

//----------------------------------------------------------
// GRIDS & SPACES
//----------------------------------------------------------

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1160px,
  xxl: 1160px
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1220px,
  xxl: 1400px
);

$grid-columns: 12;
$grid-gutter-width: 20px;

$input-btn-padding-y: 0.9375rem;
$input-btn-padding-x: 1.25rem;

$btn-padding-y: 1rem;
$btn-padding-x: 2.875rem;

//----------------------------------------------------------
// BORDER SETTINGS
//----------------------------------------------------------

$border-width: 1px;
$border-radius: 10px;
$border-radius-xs: 4px;
$border-radius-sm: 8px;
$border-radius-lg: 12px;
$border-radius-full: 1em;

//----------------------------------------------------------
// TOOLTIP SETTINGS
//----------------------------------------------------------

$spacer: 1rem;
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: 0.9;
$tooltip-padding-y: $spacer * 0.25;
$tooltip-padding-x: $spacer * 0.5;
$tooltip-margin: 0;

$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;
$tooltip-arrow-color: $tooltip-bg;

$nav-link-padding-y: 0.3125rem;
$nav-link-padding-x: 0.28rem;
$nav-pills-border-radius: 4px;
$nav-pills-link-active-bg: $teal;

//----------------------------------------------------------
// TABLES
//----------------------------------------------------------

$table-cell-padding-y: 20px;
$table-cell-padding-x: 1rem;
Signalfarben
ready
      <style>
.set {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
  margin-top: 0;
  padding: 0;
  list-style: none;
}
li {
  flex: 1 0 25%;
  margin: 1rem;
}
.color {
  width: 100%;
  min-width: 160px;
  height: 80px;
  color: white;
  border: 1px solid whitesmoke;
  margin-bottom: 1rem;
}
p {
  margin: 0;
}
</style>
<ul class="set">
{% for item in page.colors %} 
  <li>
    <div class="color" style="background:{{ item.css }}"></div> 
    <p><strong>{{ item.name }}</strong></p>
    <p><span class="label">SCSS:</span> {{ item.mashinename }}</p>
    {% if item.css %}<p><span class="label">CSS:</span> {{ item.css }}</p>{% endif %}
    {% if item.hex %}<p><span class="label">HEX:</span> {{ item.hex }}</p>{% endif %}
    {% if item.rgb %}<p><span class="label">RGB:</span> {{ item.rgb }}</p>{% endif %}
    {% if item.hsl %}<p><span class="label">HSL:</span> {{ item.hsl }}</p>{% endif %}
    {% if item.cmyk %}<p><span class="label">CYMK:</span> {{ item.cmyk }}</p>{% endif %}
  </li>
{% endfor %}
</ul>

      
      //----------------------------------------------------------
// COLORS
//----------------------------------------------------------

// Basic colors
$white: #ffffff;
$black: #000000;
$gray: #cecece;
$gray-dark: #d7d5cd;
$gray-medium: #f0efec;
$gray-light: #f1f0ee;
$gray-beige-light: #f2f2f0;

// Primary colors
$blue: #0e2249;
$green: #95c11f;

// Accent colors
$teal: #008f8c;
$aloevera: #79c08b;
$cyan: #58c7da;

// Signal colors
$yellow: #ffc107;
$red: #dc3545;

// Colors as CSS custom properties
:root {
  --hsl-black: 0, 0%, 0%;
  --hsl-white: 0, 0%, 100%;

  --hsl-blue: 220, 68%, 17%;
  --hsl-green: 76, 72%, 44%;

  --hsl-teal: 179, 100%, 28%;
  --hsl-aloevera: 135, 36%, 61%;
  --hsl-cyan: 189, 64%, 60%;

  --hsl-yellow: 45, 100%, 51%;
  --hsl-red: 354, 70%, 54%;

  --color-black: hsla(var(--hsl-black), 1);
  --color-white: hsla(var(--hsl-white), 1);

  --color-blue: hsla(var(--hsl-blue), 1);
  --color-green: hsla(var(--hsl-green), 1);

  --color-teal: hsla(var(--hsl-teal), 1);
  --color-aloevera: hsla(var(--hsl-aloevera), 1);
  --color-cyan: hsla(var(--hsl-cyan), 1);

  --color-yellow: hsla(var(--hsl-yellow), 1);
  --color-red: hsla(var(--hsl-red), 1);
}

//Darkened Colors (lower lightness value in hsl)
$green-dark: hsl(76, 72%, 30%);
$teal-dark: hsl(179, 100%, 16%);
$cyan-dark: hsl(189, 64%, 30%);
$yellow-dark: hsl(45, 100%, 20%);

$primary: $blue;
$secondary: $white;
$light: $white;
$dark: $blue;
$success: $green;
$info: $teal;
$warning: $yellow;
$danger: $red;

$primary-supportive: $white;
$success-supportive: $green-dark;
$info-supportive: $teal-dark;
$warning-supportive: $yellow-dark;
$danger-supportive: $white;

$body-color: #8a8882;

$color-contrast-dark: $dark;
$color-contrast-light: $light;
$min-contrast-ratio: 1.25;

$colors: (
  'blue': $blue,
  'green': $green,
  'teal': $teal,
  'cyan': $cyan,
  'aloevera': $aloevera,
  'white': $white,
  'black': $black,
  'gray': $gray,
  'gray-dark': $gray-dark,
  'gray-medium': $gray-medium,
  'gray-light': $gray-light,
  'gray-beige-light': $gray-beige-light
);

$theme-colors: map-merge(
  $colors,
  (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'info': $info,
    'warning': $warning,
    'danger': $danger,
    'light': $light,
    'dark': $dark
  )
);

@each $name, $color in ($theme-colors) {
  .bg-#{$name} {
    color: white;

    *:not(.btn,[class*="bg-"]) {
      color: inherit !important;
    }
  }
}

@each $name, $color in ($theme-colors) {
  .text-#{$name} {
    *:not(.btn) {
      color: inherit !important;
    }
  }
}

$alert-bg-scale: 0;
$alert-color-scale: 0;

//----------------------------------------------------------
// FONT FAMILIES & SIZES
//----------------------------------------------------------

$font-family-sans-serif: 'Circular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
  'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji',
  sans-serif;
$font-family-base: $font-family-sans-serif;

$line-height-base: 1.5;

$font-size-root: 16px;
$font-size-base: 0.875rem;
$font-size-xxs: 0.625rem;
$font-size-xs: 0.75rem;
$font-size-sm: 0.8125rem;
$font-size-lg: 1rem;
$font-size-xl: 1.125rem;

$h1-font-size: 3rem;
$h2-font-size: 2.25rem;
$h3-font-size: 1.625rem;
$h4-font-size: 1.125rem;
$h5-font-size: 1rem;
$h6-font-size: 0.75rem;

$letter-spacing: 0.125em;

$enable-rfs: false;
$headings-font-weight: 700;
$headings-line-height: 1.25;
$headings-margin-bottom: 1em;
$headings-color: $primary;

$font-sizes: (
  bs: $font-size-base,
  xs: $font-size-xs,
  xxs: $font-size-xxs,
  sm: $font-size-sm,
  lg: $font-size-lg,
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

//----------------------------------------------------------
// GRIDS & SPACES
//----------------------------------------------------------

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1160px,
  xxl: 1160px
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1220px,
  xxl: 1400px
);

$grid-columns: 12;
$grid-gutter-width: 20px;

$input-btn-padding-y: 0.9375rem;
$input-btn-padding-x: 1.25rem;

$btn-padding-y: 1rem;
$btn-padding-x: 2.875rem;

//----------------------------------------------------------
// BORDER SETTINGS
//----------------------------------------------------------

$border-width: 1px;
$border-radius: 10px;
$border-radius-xs: 4px;
$border-radius-sm: 8px;
$border-radius-lg: 12px;
$border-radius-full: 1em;

//----------------------------------------------------------
// TOOLTIP SETTINGS
//----------------------------------------------------------

$spacer: 1rem;
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: 0.9;
$tooltip-padding-y: $spacer * 0.25;
$tooltip-padding-x: $spacer * 0.5;
$tooltip-margin: 0;

$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;
$tooltip-arrow-color: $tooltip-bg;

$nav-link-padding-y: 0.3125rem;
$nav-link-padding-x: 0.28rem;
$nav-pills-border-radius: 4px;
$nav-pills-link-active-bg: $teal;

//----------------------------------------------------------
// TABLES
//----------------------------------------------------------

$table-cell-padding-y: 20px;
$table-cell-padding-x: 1rem;