@primer/brand-primitives/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

Color, spacing, and typography primitives for the Primer Brand Design System

/**
 * Do not edit directly
 * Generated on Fri, 01 Aug 2025 13:48:37 GMT
 */

:root {
  --brand-text-style-italic-10: "ital" 10;
  --brand-text-style-italic-9: "ital" 9;
  --brand-text-style-italic-8: "ital" 8;
  --brand-text-style-italic-7: "ital" 7;
  --brand-text-style-italic-6: "ital" 6;
  --brand-text-style-italic-5: "ital" 5;
  --brand-text-style-italic-4: "ital" 4;
  --brand-text-style-italic-3: "ital" 3;
  --brand-text-style-italic-2: "ital" 2;
  --brand-text-style-italic-1: "ital" 1;
  --brand-text-letterSpacing-1000: -0.03em;
  --brand-text-letterSpacing-900: -0.02em;
  --brand-text-letterSpacing-800: -0.02em;
  --brand-text-letterSpacing-700: -0.02em;
  --brand-text-letterSpacing-600: -0.02em;
  --brand-text-letterSpacing-500: -0.01em;
  --brand-text-letterSpacing-400: 0em;
  --brand-text-letterSpacing-350: 0em;
  --brand-text-letterSpacing-300: 0em;
  --brand-text-letterSpacing-200: 0em;
  --brand-text-letterSpacing-100: 0.02em;
  --brand-text-lineHeight-1000: 1.1;
  --brand-text-lineHeight-900: 1.1;
  --brand-text-lineHeight-800: 1.2;
  --brand-text-lineHeight-700: 1.2;
  --brand-text-lineHeight-600: 1.2;
  --brand-text-lineHeight-500: 1.3;
  --brand-text-lineHeight-400: 1.3;
  --brand-text-lineHeight-350: 1.3;
  --brand-text-lineHeight-300: 1.5;
  --brand-text-lineHeight-200: 1.5;
  --brand-text-lineHeight-100: 1.5;
  --brand-text-size-1000: 2.5rem;
  --brand-text-size-900: 2.25rem;
  --brand-text-size-800: 2rem;
  --brand-text-size-700: 1.75rem;
  --brand-text-size-600: 1.5rem;
  --brand-text-size-500: 1.375rem;
  --brand-text-size-400: 1.25rem;
  --brand-text-size-350: 1.125rem;
  --brand-text-size-300: 1.125rem;
  --brand-text-size-200: 1rem;
  --brand-text-size-100: 0.875rem;
  --brand-text-weight-1000: var(--base-text-weight-bold);
  --brand-text-weight-900: var(--base-text-weight-semibold);
  --brand-text-weight-800: var(--base-text-weight-semibold);
  --brand-text-weight-700: var(--base-text-weight-semibold);
  --brand-text-weight-600: var(--base-text-weight-semibold);
  --brand-text-weight-500: var(--base-text-weight-semibold);
  --brand-text-weight-400: var(--base-text-weight-semibold);
  --brand-text-weight-350: var(--base-text-weight-semibold);
  --brand-text-weight-300: var(--base-text-weight-normal);
  --brand-text-weight-200: var(--base-text-weight-normal);
  --brand-text-weight-100: var(--base-text-weight-normal);
  --brand-text-subhead-lineHeight-large: 1.3;
  --brand-text-subhead-lineHeight-medium: 1.3;
  --brand-text-subhead-weight-large: var(--base-text-weight-semibold);
  --brand-text-subhead-weight-medium: var(--base-text-weight-semibold);
  --brand-text-subhead-size-large: 1.125rem;
  --brand-text-subhead-size-medium: 1rem;
  --brand-heading-lineHeight-1000: 1.1;
  --brand-heading-lineHeight-900: 1.1;
  --brand-heading-lineHeight-800: 1.2;
  --brand-heading-lineHeight-700: 1.2;
  --brand-heading-lineHeight-600: 1.3;
  --brand-heading-lineHeight-500: 1.3;
  --brand-heading-lineHeight-400: 1.3;
  --brand-heading-letterSpacing-1000: -0.03em;
  --brand-heading-letterSpacing-900: -0.02em;
  --brand-heading-letterSpacing-800: -0.02em;
  --brand-heading-letterSpacing-700: -0.02em;
  --brand-heading-letterSpacing-600: -0.02em;
  --brand-heading-letterSpacing-500: -0.01em;
  --brand-heading-letterSpacing-400: -0.01em;
  --brand-heading-weight-1000: var(--base-text-weight-bold);
  --brand-heading-weight-900: var(--base-text-weight-semibold);
  --brand-heading-weight-800: var(--base-text-weight-semibold);
  --brand-heading-weight-700: var(--base-text-weight-semibold);
  --brand-heading-weight-600: var(--base-text-weight-semibold);
  --brand-heading-weight-500: var(--base-text-weight-semibold);
  --brand-heading-weight-400: var(--base-text-weight-semibold);
  --brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --brand-fontStack-sansSerifAlt: "Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --brand-fontStack-sansSerif: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --brand-fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --brand-heading-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
  --brand-heading-fontFamily: var(--brand-fontStack-sansSerif);
  --brand-body-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
  --brand-body-fontFamily: var(--brand-fontStack-sansSerif);
}

@media (min-width: 768px) {
  :root {
    --brand-text-letterSpacing-900: -0.03em;
    --brand-text-lineHeight-1000: 1.05;
    --brand-text-lineHeight-900: 1.05;
    --brand-text-size-1000: 4rem;
    --brand-text-size-900: 3rem;
    --brand-text-size-800: 2.25rem;
    --brand-text-size-700: 2.25rem;
    --brand-text-size-600: 2rem;
    --brand-heading-lineHeight-1000: 1.05;
    --brand-heading-lineHeight-900: 1.05;
    --brand-heading-letterSpacing-900: -0.03em;
  }
}

@media (min-width: 1012px) {
  :root {
    --brand-text-letterSpacing-800: -0.03em;
    --brand-text-letterSpacing-700: -0.03em;
    --brand-text-lineHeight-1000: 1;
    --brand-text-lineHeight-900: 1;
    --brand-text-lineHeight-500: 1.2;
    --brand-text-size-1000: 6rem;
    --brand-text-size-900: 4.5rem;
    --brand-text-size-800: 4rem;
    --brand-text-size-700: 3rem;
    --brand-text-size-600: 2.5rem;
    --brand-text-size-500: 2rem;
    --brand-text-size-400: 1.5rem;
    --brand-text-size-350: 1.25rem;
    --brand-text-subhead-size-large: 1.25rem;
    --brand-heading-lineHeight-1000: 1;
    --brand-heading-lineHeight-900: 1;
    --brand-heading-lineHeight-600: 1.2;
    --brand-heading-letterSpacing-800: -0.03em;
    --brand-heading-letterSpacing-700: -0.03em;
  }
}