/* GitHub brand tokens, from unfairly.ai/brand-guidelines/github (checked 2026-10-31). Sizes, spacing and components were measured on https://brand.github.com/ (Published guide retained; homepage anatomy added from all ten saved homepage slices, computed bands and Chrome probes observed 2026-10-31. Screenshot resting state takes precedence for animation; headless Chromium missing-video state is not a design state.). Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name GitHub's own faces, which you may only use if you have a licence. */ :root { --color-paper: #FFFFFF; --color-surface: #F2F5F3; --color-ink: #000000; --color-ink-muted: #58635B; --color-accent: #08872B; --color-on-accent: #FFFFFF; --color-accent-secondary: #8534F3; --color-night: #101411; --color-on-night: #FFFFFF; --color-github-green: #0FBF3E; --color-gray-1: #F2F5F3; --color-gray-2: #E4EBE6; --color-gray-3: #B6BFB8; --color-gray-4: #909692; --color-gray-5: #232925; --color-gray-6: #101411; --color-green-1: #BFFFD1; --color-green-2: #8CF2A6; --color-green-3: #5FED83; --color-green-4: #0FBF3E; --color-green-5: #08872B; --color-green-6: #0A241B; --color-copilot-purple: #8534F3; --color-purple-1: #C898FD; --color-purple-2: #B870FF; --color-purple-3: #8534F3; --color-purple-4: #43179E; --color-purple-5: #26115F; --color-purple-6: #160048; --color-orange-1: #F4A876; --color-orange-2: #F08A3A; --color-orange-3: #FE4C25; --color-orange-4: #C53211; --color-orange-5: #801E0F; --color-orange-6: #500A00; --color-security-blue: #3094FF; --color-blue-1: #9EECFF; --color-blue-2: #3094FF; --color-blue-3: #1A61FE; --color-blue-4: #0527FC; --color-blue-5: #212183; --color-blue-6: #001C4D; --color-lime-1: #DCFF96; --color-lime-2: #D3FA37; --color-lime-3: #D8BD0E; --color-lime-4: #DB9D00; --color-lime-5: #D67200; --color-lime-6: #703100; --color-primer-gray-0: #F2F5F3; --color-primer-gray-1: #E4EBE6; --color-primer-gray-2: #D2D9D4; --color-primer-gray-3: #C4CCC6; --color-primer-gray-4: #B6BFB8; --color-primer-gray-5: #96A199; --color-primer-gray-6: #77827A; --color-primer-gray-7: #58635B; --color-primer-gray-8: #353D37; --color-primer-gray-9: #191F1B; --color-primer-blue-0: #DDF4FF; --color-primer-blue-1: #BCECFF; --color-primer-blue-2: #8DD6FF; --color-primer-blue-3: #5FB9FF; --color-primer-blue-4: #3094FF; --color-primer-blue-5: #0377FF; --color-primer-blue-6: #0055D5; --color-primer-blue-7: #0040A7; --color-primer-blue-8: #002F7A; --color-primer-blue-9: #001C4D; --color-primer-green-0: #EBF9F4; --color-primer-green-1: #BFFFD1; --color-primer-green-2: #8CF2A6; --color-primer-green-3: #5FED83; --color-primer-green-4: #23EA57; --color-primer-green-5: #0FBF3E; --color-primer-green-6: #08872B; --color-primer-green-7: #0D6731; --color-primer-green-8: #0E4A2E; --color-primer-green-9: #0D3024; --color-primer-yellow-0: #FFF8C5; --color-primer-yellow-1: #FFE777; --color-primer-yellow-2: #FFD743; --color-primer-yellow-3: #FABF21; --color-primer-yellow-4: #DB9D00; --color-primer-yellow-5: #BE7D00; --color-primer-yellow-6: #A06100; --color-primer-yellow-7: #824800; --color-primer-yellow-8: #653200; --color-primer-yellow-9: #471F00; --color-primer-orange-0: #FFF1E5; --color-primer-orange-1: #FCCEAB; --color-primer-orange-2: #F4A876; --color-primer-orange-3: #F08A3A; --color-primer-orange-4: #DA7210; --color-primer-orange-5: #B85B06; --color-primer-orange-6: #954502; --color-primer-orange-7: #703100; --color-primer-orange-8: #5C2300; --color-primer-orange-9: #471700; --color-primer-red-0: #FFEBE9; --color-primer-red-1: #FFCECB; --color-primer-red-2: #FFABA8; --color-primer-red-3: #FF8182; --color-primer-red-4: #FA4549; --color-primer-red-5: #CF2230; --color-primer-red-6: #AE0B29; --color-primer-red-7: #860620; --color-primer-red-8: #730019; --color-primer-red-9: #420011; --color-primer-purple-0: #F0E5FF; --color-primer-purple-1: #DBBFFD; --color-primer-purple-2: #C898FD; --color-primer-purple-3: #B870FF; --color-primer-purple-4: #9F51FA; --color-primer-purple-5: #8534F3; --color-primer-purple-6: #6619E1; --color-primer-purple-7: #43179E; --color-primer-purple-8: #26115F; --color-primer-purple-9: #160048; --color-primer-pink-0: #FFF0FC; --color-primer-pink-1: #FFC9F2; --color-primer-pink-2: #F67ED2; --color-primer-pink-3: #FF80D2; --color-primer-pink-4: #FF4AC0; --color-primer-pink-5: #EF2AA4; --color-primer-pink-6: #CA2186; --color-primer-pink-7: #952866; --color-primer-pink-8: #651643; --color-primer-pink-9: #3D0A28; --color-primer-coral-0: #FFF0EB; --color-primer-coral-1: #FFCAB8; --color-primer-coral-2: #FFA387; --color-primer-coral-3: #FF7B56; --color-primer-coral-4: #FE4C25; --color-primer-coral-5: #E13F1B; --color-primer-coral-6: #C53211; --color-primer-coral-7: #A22710; --color-primer-coral-8: #801E0F; --color-primer-coral-9: #500A00; --color-primer-lemon-0: #FDF5B3; --color-primer-lemon-1: #F5E36B; --color-primer-lemon-2: #F2DA3B; --color-primer-lemon-3: #E1C50F; --color-primer-lemon-4: #C7A60B; --color-primer-lemon-5: #A98906; --color-primer-lemon-6: #806803; --color-primer-lemon-7: #614D01; --color-primer-lemon-8: #413200; --color-primer-lemon-9: #322400; --color-primer-lime-0: #F3FEC8; --color-primer-lime-1: #E8FC97; --color-primer-lime-2: #DCFA67; --color-primer-lime-3: #D1F441; --color-primer-lime-4: #B2DE28; --color-primer-lime-5: #92C219; --color-primer-lime-6: #698E17; --color-primer-lime-7: #425E13; --color-primer-lime-8: #2C440B; --color-primer-lime-9: #182C01; --color-primer-teal-0: #DAF9F5; --color-primer-teal-1: #A4EFE8; --color-primer-teal-2: #6EE5DC; --color-primer-teal-3: #39DAD2; --color-primer-teal-4: #23B1AE; --color-primer-teal-5: #197B7B; --color-primer-teal-6: #136061; --color-primer-teal-7: #024B4D; --color-primer-teal-8: #083D3D; --color-primer-teal-9: #052B2C; --color-primer-indigo-0: #EFF2FF; --color-primer-indigo-1: #D4DBFF; --color-primer-indigo-2: #B3C1FD; --color-primer-indigo-3: #8E9DF7; --color-primer-indigo-4: #6B7BEF; --color-primer-indigo-5: #4956E5; --color-primer-indigo-6: #2D3DD7; --color-primer-indigo-7: #262DAE; --color-primer-indigo-8: #212183; --color-primer-indigo-9: #12144F; --color-primer-black-0: #000000; --color-primer-white-0: #FFFFFF; --color-white: #FFFFFF; --color-black: #000000; --color-white-theme-subtle-text: #77827A; --color-black-theme-subtle-text: #96A199; --color-white-theme-text-accent: #0FAC39; --color-gray-theme-text-accent: #0CA334; --color-homepage-observed-000: #000; --color-homepage-observed-000000: #000000; --color-homepage-observed-00000003: #00000003; --color-homepage-observed-00000004: #00000004; --color-homepage-observed-00000005: #00000005; --color-homepage-observed-00000006: #00000006; --color-homepage-observed-00000007: #00000007; --color-homepage-observed-00000008: #00000008; --color-homepage-observed-00000009: #00000009; --color-homepage-observed-0000000a: #0000000A; --color-homepage-observed-0000000b: #0000000B; --color-homepage-observed-0000000f: #0000000F; --color-homepage-observed-00000012: #00000012; --color-homepage-observed-00000014: #00000014; --color-homepage-observed-0000001e: #0000001E; --color-homepage-observed-00000036: #00000036; --color-homepage-observed-0000003d: #0000003D; --color-homepage-observed-0000004d: #0000004D; --color-homepage-observed-00000073: #00000073; --color-homepage-observed-000000bf: #000000BF; --color-homepage-observed-000000e6: #000000E6; --color-homepage-observed-000aff: #000AFF; --color-homepage-observed-001c4d: #001C4D; --color-homepage-observed-002f7a: #002F7A; --color-homepage-observed-0040a7: #0040A7; --color-homepage-observed-0055d5: #0055D5; --color-homepage-observed-008a24: #008A24; --color-homepage-observed-024b4d: #024B4D; --color-homepage-observed-0377ff: #0377FF; --color-homepage-observed-052b2c: #052B2C; --color-homepage-observed-083d3d: #083D3D; --color-homepage-observed-08872b: #08872B; --color-homepage-observed-08872b33: #08872B33; --color-homepage-observed-0969da: #0969DA; --color-homepage-observed-096bde: #096BDE; --color-homepage-observed-0d3024: #0D3024; --color-homepage-observed-0d6731: #0D6731; --color-homepage-observed-0e4a2e: #0E4A2E; --color-homepage-observed-0fbf3e: #0FBF3E; --color-homepage-observed-12144f: #12144F; --color-homepage-observed-136061: #136061; --color-homepage-observed-160048: #160048; --color-homepage-observed-182c01: #182C01; --color-homepage-observed-191f1b: #191F1B; --color-homepage-observed-197b7b: #197B7B; --color-homepage-observed-212183: #212183; --color-homepage-observed-23b1ae: #23B1AE; --color-homepage-observed-23ea57: #23EA57; --color-homepage-observed-26115f: #26115F; --color-homepage-observed-262dae: #262DAE; --color-homepage-observed-2c440b: #2C440B; --color-homepage-observed-2d3dd7: #2D3DD7; --color-homepage-observed-3094ff: #3094FF; --color-homepage-observed-322400: #322400; --color-homepage-observed-353d37: #353D37; --color-homepage-observed-39dad2: #39DAD2; --color-homepage-observed-3d0a28: #3D0A28; --color-homepage-observed-3d444d: #3D444D; --color-homepage-observed-413200: #413200; --color-homepage-observed-420011: #420011; --color-homepage-observed-425e13: #425E13; --color-homepage-observed-43179e: #43179E; --color-homepage-observed-471700: #471700; --color-homepage-observed-471f00: #471F00; --color-homepage-observed-4956e5: #4956E5; --color-homepage-observed-500a00: #500A00; --color-homepage-observed-58635b: #58635B; --color-homepage-observed-5c2300: #5C2300; --color-homepage-observed-5fb9ff: #5FB9FF; --color-homepage-observed-5fed83: #5FED83; --color-homepage-observed-614d01: #614D01; --color-homepage-observed-651643: #651643; --color-homepage-observed-653200: #653200; --color-homepage-observed-6619e1: #6619E1; --color-homepage-observed-698e17: #698E17; --color-homepage-observed-6b7bef: #6B7BEF; --color-homepage-observed-6ee5dc: #6EE5DC; --color-homepage-observed-703100: #703100; --color-homepage-observed-730019: #730019; --color-homepage-observed-77827a: #77827A; --color-homepage-observed-801e0f: #801E0F; --color-homepage-observed-806803: #806803; --color-homepage-observed-824800: #824800; --color-homepage-observed-8250df: #8250DF; --color-homepage-observed-8534f3: #8534F3; --color-homepage-observed-8534f333: #8534F333; --color-homepage-observed-860620: #860620; --color-homepage-observed-8cf2a6: #8CF2A6; --color-homepage-observed-8cf2a699: #8CF2A699; --color-homepage-observed-8dd6ff: #8DD6FF; --color-homepage-observed-8e9df7: #8E9DF7; --color-homepage-observed-92c219: #92C219; --color-homepage-observed-952866: #952866; --color-homepage-observed-954502: #954502; --color-homepage-observed-96a199: #96A199; --color-homepage-observed-9999991f: #9999991F; --color-homepage-observed-9f51fa: #9F51FA; --color-homepage-observed-a06100: #A06100; --color-homepage-observed-a22710: #A22710; --color-homepage-observed-a4efe8: #A4EFE8; --color-homepage-observed-a98906: #A98906; --color-homepage-observed-ae0b29: #AE0B29; --color-homepage-observed-b2de28: #B2DE28; --color-homepage-observed-b3c1fd: #B3C1FD; --color-homepage-observed-b6bfb8: #B6BFB8; --color-homepage-observed-b7c2ba: #B7C2BA; --color-homepage-observed-b85b06: #B85B06; --color-homepage-observed-b870ff: #B870FF; --color-homepage-observed-bcecff: #BCECFF; --color-homepage-observed-be7d00: #BE7D00; --color-homepage-observed-bfffd1: #BFFFD1; --color-homepage-observed-c4ccc6: #C4CCC6; --color-homepage-observed-c4ccc6fe: #C4CCC6FE; --color-homepage-observed-c53211: #C53211; --color-homepage-observed-c7a60b: #C7A60B; --color-homepage-observed-c898fd: #C898FD; --color-homepage-observed-ca2186: #CA2186; --color-homepage-observed-cf222e: #CF222E; --color-homepage-observed-cf2230: #CF2230; --color-homepage-observed-d1f441: #D1F441; --color-homepage-observed-d2d9d4: #D2D9D4; --color-homepage-observed-d4dbff: #D4DBFF; --color-homepage-observed-d8dee45e: #D8DEE45E; --color-homepage-observed-d8dee480: #D8DEE480; --color-homepage-observed-da7210: #DA7210; --color-homepage-observed-daf9f5: #DAF9F5; --color-homepage-observed-db9d00: #DB9D00; --color-homepage-observed-dbbffd: #DBBFFD; --color-homepage-observed-dcfa67: #DCFA67; --color-homepage-observed-ddf4ff: #DDF4FF; --color-homepage-observed-e13f1b: #E13F1B; --color-homepage-observed-e1c50f: #E1C50F; --color-homepage-observed-e4ebe6: #E4EBE6; --color-homepage-observed-e4ebe6fe: #E4EBE6FE; --color-homepage-observed-e8fc97: #E8FC97; --color-homepage-observed-ebf9f4: #EBF9F4; --color-homepage-observed-ef2aa4: #EF2AA4; --color-homepage-observed-eff2ff: #EFF2FF; --color-homepage-observed-f08a3a: #F08A3A; --color-homepage-observed-f0e5ff: #F0E5FF; --color-homepage-observed-f2da3b: #F2DA3B; --color-homepage-observed-f2f5f3: #F2F5F3; --color-homepage-observed-f2f5f300: #F2F5F300; --color-homepage-observed-f2f5f333: #F2F5F333; --color-homepage-observed-f2f5f380: #F2F5F380; --color-homepage-observed-f3fec8: #F3FEC8; --color-homepage-observed-f4a876: #F4A876; --color-homepage-observed-f5e36b: #F5E36B; --color-homepage-observed-f67ed2: #F67ED2; --color-homepage-observed-f9fbf9: #F9FBF9; --color-homepage-observed-fa4549: #FA4549; --color-homepage-observed-fabf21: #FABF21; --color-homepage-observed-fafafa: #FAFAFA; --color-homepage-observed-fb51544d: #FB51544D; --color-homepage-observed-fcceab: #FCCEAB; --color-homepage-observed-fdf5b3: #FDF5B3; --color-homepage-observed-fe4c25: #FE4C25; --color-homepage-observed-ff4ac0: #FF4AC0; --color-homepage-observed-ff7b56: #FF7B56; --color-homepage-observed-ff80d2: #FF80D2; --color-homepage-observed-ff8182: #FF8182; --color-homepage-observed-ffa387: #FFA387; --color-homepage-observed-ffaba8: #FFABA8; --color-homepage-observed-ffaba899: #FFABA899; --color-homepage-observed-ffc9f2: #FFC9F2; --color-homepage-observed-ffcab8: #FFCAB8; --color-homepage-observed-ffcecb: #FFCECB; --color-homepage-observed-ffd743: #FFD743; --color-homepage-observed-ffe777: #FFE777; --color-homepage-observed-ffebe9: #FFEBE9; --color-homepage-observed-fff: #FFF; --color-homepage-observed-fff0eb: #FFF0EB; --color-homepage-observed-fff0fc: #FFF0FC; --color-homepage-observed-fff1e5: #FFF1E5; --color-homepage-observed-fff8c5: #FFF8C5; --color-homepage-observed-ffffff: #FFFFFF; --color-homepage-observed-ffffff1f: #FFFFFF1F; --color-homepage-observed-ffffffb3: #FFFFFFB3; --color-homepage-observed-0009: #0009; --color-homepage-observed-fff0: #FFF0; --color-homepage-observed-fff9: #FFF9; --color-secondary-button-ground: #F0F0F0; --color-button-primary-fill: #08872B; --color-button-primary-text: #FFFFFF; --color-button-secondary-fill: #F0F0F0; --color-button-secondary-text: #000000; --color-button-secondary-ring: #D2D9D4; --color-button-nav-signup-fill: #000000; --color-button-nav-signup-text: #FFFFFF; --color-announcement-pill-fill: #F9FBF9; --color-search-field-fill: #FFFFFF; --color-activity-ticker-card-fill: #F2F5F3; --color-stat-cell-fill: #FFFFFF; --color-quote-mark-tile-fill: #EBF9F4; --color-quote-mark-tile-text: #08872B; --color-carousel-controls-fill: #F2F5F3 capsule, no border; --color-story-card-fill: #FFFFFF; --color-footer-link-text: #000000; --color-hero-tabs-fill: #F2F5F3 (inactive) / #F9FBF9 (active); --color-hero-tabs-text: #58635B inactive, #000000 active; --font-display: "Mona Sans", "Mona Sans", sans-serif; --font-body: "Mona Sans", "Mona Sans", sans-serif; --font-mono: "Geist Mono", "Geist Mono", ui-monospace, monospace; --font-mono-original: "Mona Sans Mono", "Geist Mono", "Geist Mono", ui-monospace, monospace; --page-margin: 128px; --section-padding: 88px; --container-max: 1184px; --hero-text-max: 526px; --card-gap: 0px; --nav-height: 68px; --grid-gutter: 0px; --grid-columns: 2; --text-display-hero-size: 56px; --text-display-hero-line: 1.1 desktop (61.6px), 1.2 phone (43.2px); --text-display-hero-weight: 440; --text-section-size: 40px; --text-section-line: 1.2; --text-section-weight: 400; --text-title-xl-size: 34px; --text-title-xl-line: 1.3; --text-title-xl-weight: 400; --text-quote-size: 32px; --text-quote-line: 1.35; --text-quote-weight: 480; --text-title-l-size: 28px; --text-title-l-line: 1.35; --text-title-l-weight: 400; --text-title-m-size: 22px; --text-title-m-line: 1.4; --text-title-m-weight: 400; --text-title-s-size: 20px; --text-title-s-line: 1.3; --text-title-s-weight: 400; --text-body-l-size: 18px; --text-body-l-line: 1.5; --text-body-l-weight: 400; --text-body-l-tracking: 0.18px; --text-body-size: 16px; --text-body-line: 1.5; --text-body-weight: 400; --text-body-tracking: 0.24px; --text-button-l-size: 16px; --text-button-l-line: 1.5; --text-button-l-weight: 500; --text-button-l-tracking: 0.16px; --text-button-s-size: 14px; --text-button-s-line: 1.5; --text-button-s-weight: 500; --text-button-s-tracking: 0.21px; --text-nav-size: 14px; --text-nav-line: 1.5; --text-nav-weight: 400; --text-nav-tracking: 0.24px; --text-tab-size: 16px; --text-tab-line: 1.5; --text-tab-weight: 400; --text-stat-l-size: 34px; --text-stat-l-line: 1.3; --text-stat-l-weight: 400; --text-stat-m-size: 28px; --text-stat-m-line: 1.35; --text-stat-m-weight: 400; --text-mono-caption-size: 14px; --text-mono-caption-line: 1.5; --text-mono-caption-weight: 400; --text-mono-caption-tracking: 0.21px; --text-mono-legal-size: 12px; --text-mono-legal-line: 1.5; --text-mono-legal-weight: 500; --radius-button-primary: 6px; --radius-button-secondary: 6px; --radius-button-nav-signup: 6px; --radius-signup-form: 8px; --radius-announcement-pill: 999px; --radius-search-field: 6px; --radius-product-frame: 6px; --radius-activity-ticker-card: 0px; --radius-stat-cell: 0px; --radius-quote-mark-tile: 8px; --radius-carousel-controls: 999px; --radius-story-card: 0px; --radius-hero-tabs: 999px; --duration-primer-stagger: 100ms; } /* Phone values measured at 390px. GitHub's breakpoint wasn't measured: 600px is our default. */ @media (max-width: 600px) { :root { --page-margin: 24px; --section-padding: 22px; --text-display-hero-size: 36px; --text-section-size: 28px; --text-title-xl-size: 24px; --text-quote-size: 24px; --text-title-l-size: 22px; --text-title-m-size: 20px; --text-title-s-size: 18px; --text-stat-l-size: 24px; --text-stat-m-size: 22px; } } .button-primary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; height: 43px; padding: 0 20px; border-radius: 6px; background: #08872B; color: #FFFFFF; font: 500 16px/1 var(--font-body); } .button-primary:hover { background-color: color-mix(in srgb, #08872B, #000 16%); } /* observed */ .button-primary:active { background: linear-gradient(#0000003D,#0000003D), #08872B; border-color: #0D6731; } /* observed */ .button-primary:disabled { background-color: #B6BFB8; color: #D2D9D4; } /* observed */ .button-secondary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; height: 53px; padding: 0 20px; border-radius: 6px; background: #F0F0F0; color: #000000; box-shadow: inset 0 0 0 1px #D2D9D4; font: 500 16px/1 var(--font-body); } .button-secondary:hover { background-color: rgba(0,0,0,0.12); } /* observed */ .button-secondary:active { background-color: rgba(0,0,0,0.21); } /* observed */ .button-nav-signup { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; height: 32px; padding: 0 12px; border-radius: 6px; background: #000000; color: #FFFFFF; font: 500 14px/1 var(--font-body); }