@primer/brand-primitives
Version:
Color, spacing, and typography primitives for the Primer Brand Design System
158 lines (154 loc) • 6.31 kB
CSS
/**
* Do not edit directly
* Generated on Thu, 12 Mar 2026 15:02:28 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;
--brand-text-letterSpacing-900: 0;
--brand-text-letterSpacing-800: 0;
--brand-text-letterSpacing-700: 0;
--brand-text-letterSpacing-600: 0;
--brand-text-letterSpacing-500: 0;
--brand-text-letterSpacing-400: 0;
--brand-text-letterSpacing-350: 0.18px;
--brand-text-letterSpacing-300: 0.18px;
--brand-text-letterSpacing-200: 0.24px;
--brand-text-letterSpacing-100: 0.21px;
--brand-text-lineHeight-1000: 1.149;
--brand-text-lineHeight-900: 1.2;
--brand-text-lineHeight-800: 1.2;
--brand-text-lineHeight-700: 1.2;
--brand-text-lineHeight-600: 1.3;
--brand-text-lineHeight-500: 1.3;
--brand-text-lineHeight-400: 1.4;
--brand-text-lineHeight-350: 1.5;
--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-heavy: 550;
--brand-text-weight-extrabold: 543;
--brand-text-weight-bold: 537;
--brand-text-weight-semibold: 525;
--brand-text-weight-medium: 500;
--brand-text-weight-normal: 400;
--brand-text-weight-regular: 400;
--brand-text-weight-light: 400;
--brand-text-weight-extralight: 400;
--brand-text-weight-1000: var(--base-text-weight-normal);
--brand-text-weight-900: var(--base-text-weight-normal);
--brand-text-weight-800: var(--base-text-weight-normal);
--brand-text-weight-700: var(--base-text-weight-normal);
--brand-text-weight-600: var(--base-text-weight-normal);
--brand-text-weight-500: var(--base-text-weight-normal);
--brand-text-weight-400: var(--base-text-weight-normal);
--brand-text-weight-350: var(--base-text-weight-normal);
--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: 475;
--brand-text-subhead-weight-medium: 550;
--brand-text-subhead-letterSpacing-large: 0.1px;
--brand-text-subhead-letterSpacing-medium: 0.24px;
--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;
--brand-heading-letterSpacing-900: 0;
--brand-heading-letterSpacing-800: 0;
--brand-heading-letterSpacing-700: 0;
--brand-heading-letterSpacing-600: 0;
--brand-heading-letterSpacing-500: 0;
--brand-heading-letterSpacing-400: 0;
--brand-heading-weight-1000: 440;
--brand-heading-weight-900: 440;
--brand-heading-weight-800: 465;
--brand-heading-weight-700: 460;
--brand-heading-weight-600: 460;
--brand-heading-weight-500: 480;
--brand-heading-weight-400: 480;
--brand-fontStack-monospace: "Mona Sans 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-lineHeight-1000: 1.08;
--brand-text-lineHeight-900: 1.2;
--brand-text-lineHeight-800: 1.2;
--brand-text-size-1000: 3.5rem;
--brand-text-size-900: 3rem;
--brand-text-size-800: 2.5rem;
--brand-text-size-700: 2.125rem;
--brand-text-size-600: 1.75rem;
--brand-text-size-500: 1.5rem;
--brand-text-size-400: 1.25rem;
--brand-text-subhead-weight-large: 525;
--brand-heading-lineHeight-1000: 1.05;
--brand-heading-lineHeight-900: 1.05;
--brand-heading-weight-1000: 440;
--brand-heading-weight-900: 440;
--brand-heading-weight-800: 465;
--brand-heading-weight-700: 460;
}
}
@media (min-width: 1012px) {
:root {
--brand-text-letterSpacing-1000: -0.035em;
--brand-text-lineHeight-1000: 1.08;
--brand-text-lineHeight-900: 1.1;
--brand-text-lineHeight-800: 1.18;
--brand-text-lineHeight-500: 1.35;
--brand-text-size-1000: 4rem;
--brand-text-size-900: 3.5rem;
--brand-text-size-800: 3rem;
--brand-text-size-700: 2.5rem;
--brand-text-size-600: 2.125rem;
--brand-text-size-500: 1.75rem;
--brand-text-size-400: 1.375rem;
--brand-text-size-350: 1.25rem;
--brand-text-subhead-weight-large: 500;
--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-1000: -0.014rem;
--brand-heading-weight-1000: 425;
--brand-heading-weight-900: 440;
--brand-heading-weight-800: 440;
--brand-heading-weight-700: 460;
}
}