@amsterdam/design-system-tokens/dist/compact.css

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --ams-border-width-s: 0.0625rem;
  --ams-border-width-m: 0.0625rem;
  --ams-border-width-l: 0.125rem;
  --ams-border-width-xl: 0.1875rem;
  --ams-space-xs: 0.25rem;
  --ams-space-s: 0.5rem;
  --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
  --ams-space-l: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
  --ams-space-xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
  --ams-space-2xl: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
  --ams-typography-body-text-font-size: 1rem;
  --ams-typography-body-text-line-height: 1.5;
  --ams-typography-body-text-small-font-size: 0.875rem;
  --ams-typography-body-text-small-line-height: 1.4;
  --ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem);
  --ams-typography-body-text-large-line-height: 1.4;
  --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
  --ams-typography-body-text-x-large-line-height: 1.3;
  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); /** Use Heading size 1 instead. */
  --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
  --ams-typography-heading-1-line-height: 1.2;
  --ams-typography-heading-2-line-height: 1.3;
  --ams-typography-heading-3-line-height: 1.3;
  --ams-typography-heading-4-line-height: 1.4;
  --ams-typography-heading-5-line-height: 1.4;
  --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
  --ams-grid-padding-inline: var(--ams-space-xl);
  --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
}