Inline assets

The two currentColor drop-ins — paste the markup inline (never <img>) and they follow the surrounding text color and font-size, like a Lucide icon. Everything on this page is the live file, inherited straight from the page's own ink. Their gradient twins keep the sizing and take two colours instead of one, from --brand-grad-from and --brand-grad-to.

The mark static/images/logo-variants/kosmos-k-mark.svg

Flush to the ink, 1.35em × 1em. Buttons, nav brands, list bullets.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="13.00 15.00 94.79 70.01" width="1.3540em" height="1em" fill="currentColor" aria-hidden="true"><path d="M87.50 27.60Q90.74 44.65 107.79 47.90Q90.74 51.15 87.50 68.20Q84.25 51.15 67.20 47.90Q84.25 44.65 87.50 27.60Z"/><path transform="translate(0 0.00)" d="M29.66 15.00Q28.32 20.25 28.32 48.55Q35.14 41.39 41.18 35.35Q51.14 25.40 53.04 23.16Q56.95 18.57 57.18 15.00H78.98Q75.74 17.57 68.36 25.28Q61.31 32.44 57.73 36.19Q54.16 39.93 53.82 40.27Q52.37 41.72 50.30 43.74Q48.23 45.75 45.66 48.32Q52.81 54.25 57.40 58.39Q73.73 73.71 80.89 85.00H60.87Q59.30 80.42 55.72 75.83Q54.16 73.93 51.25 70.97Q48.34 68.01 44.09 63.76Q34.36 54.14 28.32 50.11V70.47Q28.43 75.72 28.71 79.30Q28.99 82.88 29.55 85.00H13.00Q14.23 80.76 14.34 70.69Q14.34 49.89 14.34 38.37Q14.34 26.85 14.23 24.28Q14.12 21.71 13.84 19.41Q13.56 17.12 13.00 15.00Z"/></svg>

The wordmark static/images/logo-variants/kosmos-wordmark-inline.svg

Flush to the ink, 5.30em × 1em. Headers, splash lines, anywhere large.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18.4 12.0 540.9 102.1" fill="none" width="5.2984em" height="1em" class="brand-svg brand-wordmark-inline">
  <path fill="currentColor" d="M42.3 12.0Q40.4 19.5 40.4 59.7Q50.2 49.4 58.9 40.7Q66.6 33.0 70.8 28.7Q75.1 24.4 75.9 23.6Q81.5 17.1 81.8 12.0H113.1Q108.0 15.9 97.9 26.4Q92.7 31.9 87.4 37.2Q82.1 42.5 77.0 47.8Q74.9 49.9 72.0 52.8Q69.0 55.7 65.3 59.4Q75.6 67.9 82.1 73.8Q105.6 95.8 115.9 112.0H87.1Q84.9 105.4 79.7 98.8Q77.5 96.1 73.3 91.9Q69.1 87.6 63.0 81.5Q49.1 67.7 40.4 61.9V91.1Q40.6 98.7 41.0 103.8Q41.4 109.0 42.2 112.0H18.4Q20.2 105.9 20.3 91.5Q20.3 61.8 20.3 45.4Q20.3 29.0 20.2 25.3Q20.0 21.6 19.6 18.3Q19.2 15.0 18.4 12.0Z"/>
  <path fill="currentColor" d="M180.8 81.0Q180.8 95.6 171.4 104.5Q162.0 113.4 148.5 113.4Q133.7 113.4 124.4 103.8Q115.4 94.7 115.7 80.7Q115.9 67.1 124.9 58.1Q134.0 48.9 148.5 48.9Q163.1 48.9 171.9 57.7Q180.8 66.6 180.8 81.0ZM165.0 80.2Q165.0 72.5 160.4 67.5Q155.7 62.6 148.3 62.6Q140.6 62.6 135.7 67.5Q130.8 72.5 130.8 80.2Q130.7 87.3 135.8 92.7Q140.9 97.9 148.3 97.9Q155.6 97.9 160.2 93.1Q164.9 88.4 165.0 80.2Z"/>
  <path fill="currentColor" d="M228.0 111.5Q220.8 114.7 212.1 113.9Q197.0 112.5 190.1 110.6L190.0 94.7L202.5 98.5Q209.7 100.6 215.3 100.6Q222.1 100.6 222.5 96.6Q223.3 90.5 212.9 85.8Q210.0 84.7 205.9 82.9Q201.8 81.2 196.4 78.6Q190.0 74.1 190.0 66.3Q190.0 57.4 196.1 53.3Q200.9 50.0 207.0 49.2Q208.1 49.1 210.8 49.0Q213.6 48.9 217.9 48.9Q220.3 48.9 225.8 50.0Q232.2 51.5 232.3 51.5V65.9Q230.7 65.3 229.2 64.8Q227.7 64.3 226.1 63.8Q220.0 61.8 214.8 61.8Q206.8 61.4 206.8 65.8Q207.1 68.7 210.7 70.3Q212.9 71.1 215.2 71.9Q217.4 72.7 219.7 73.5Q239.2 81.2 239.2 95.1Q239.2 106.5 228.0 111.5Z"/>
  <path fill="currentColor" d="M350.0 112.0 334.3 112.2Q334.5 108.0 334.6 102.3Q334.6 96.6 334.5 88.9Q334.3 82.5 334.1 78.2Q333.8 74.0 333.4 71.7Q331.3 62.4 324.2 62.4Q317.6 62.4 312.6 65.9Q311.4 67.1 310.2 68.2Q309.1 69.3 307.8 70.4Q308.0 72.4 308.0 75.2Q308.0 78.0 308.0 81.7L308.2 112.0H293.2Q293.2 109.0 293.2 104.9Q293.2 100.8 293.4 95.5Q293.5 87.6 293.4 81.5Q293.1 71.1 291.8 67.7Q289.2 61.8 281.2 61.8Q274.8 61.8 270.4 66.1Q269.6 67.2 268.7 68.3Q267.7 69.5 266.9 70.7V112.0H251.5Q251.8 103.7 252.0 90.0Q252.1 76.4 252.1 57.4Q252.0 56.5 252.0 54.5Q252.0 52.6 251.8 49.7H266.6L266.4 56.8Q274.4 48.3 286.3 48.3Q299.3 48.3 304.0 57.9Q306.4 55.0 311.8 52.3Q319.7 48.3 328.2 48.3Q339.5 48.3 344.3 55.2Q349.7 62.7 349.7 81.7V100.3Q349.9 105.9 350.0 109.2Q350.0 112.5 350.0 112.0Z"/>
  <path fill="currentColor" d="M425.4 81.0Q425.4 95.6 416.1 104.5Q406.6 113.4 393.1 113.4Q378.4 113.4 369.0 103.8Q360.1 94.7 360.4 80.7Q360.5 67.1 369.5 58.1Q378.7 48.9 393.1 48.9Q407.7 48.9 416.6 57.7Q425.4 66.6 425.4 81.0ZM409.7 80.2Q409.7 72.5 405.0 67.5Q400.3 62.6 393.0 62.6Q385.3 62.6 380.4 67.5Q375.5 72.5 375.5 80.2Q375.3 87.3 380.4 92.7Q385.6 97.9 393.0 97.9Q400.2 97.9 404.8 93.1Q409.5 88.4 409.7 80.2Z"/>
  <path fill="currentColor" d="M472.6 111.5Q465.4 114.7 456.7 113.9Q441.7 112.5 434.7 110.6L434.6 94.7L447.1 98.5Q454.3 100.6 459.9 100.6Q466.7 100.6 467.2 96.6Q468.0 90.5 457.5 85.8Q454.7 84.7 450.6 82.9Q446.5 81.2 441.0 78.6Q434.6 74.1 434.6 66.3Q434.6 57.4 440.7 53.3Q445.5 50.0 451.6 49.2Q452.7 49.1 455.5 49.0Q458.2 48.9 462.5 48.9Q464.9 48.9 470.4 50.0Q476.8 51.5 477.0 51.5V65.9Q475.4 65.3 473.8 64.8Q472.3 64.3 470.7 63.8Q464.6 61.8 459.5 61.8Q451.4 61.4 451.4 65.8Q451.8 68.7 455.3 70.3Q457.5 71.1 459.8 71.9Q462.0 72.7 464.3 73.5Q483.9 81.2 483.9 95.1Q483.9 106.5 472.6 111.5Z"/>
  <path fill="currentColor" d="M524.59 24.27Q530.15 53.44 559.32 59.00Q530.15 64.56 524.59 93.73Q519.04 64.56 489.87 59.00Q519.04 53.44 524.59 24.27Z"/>
</svg>

The wordmark, small cut static/images/logo-variants/kosmos-wordmark-inline-small.svg

Flush to the ink, 5.45em × 1em; a fuller sparkle for nav sizes.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18.4 12.0 547.8 102.1" fill="none" width="5.3664em" height="1em" class="brand-svg brand-wordmark-inline">
  <path fill="currentColor" d="M42.3 12.0Q40.4 19.5 40.4 59.7Q50.2 49.4 58.9 40.7Q66.6 33.0 70.8 28.7Q75.1 24.4 75.9 23.6Q81.5 17.1 81.8 12.0H113.1Q108.0 15.9 97.9 26.4Q92.7 31.9 87.4 37.2Q82.1 42.5 77.0 47.8Q74.9 49.9 72.0 52.8Q69.0 55.7 65.3 59.4Q75.6 67.9 82.1 73.8Q105.6 95.8 115.9 112.0H87.1Q84.9 105.4 79.7 98.8Q77.5 96.1 73.3 91.9Q69.1 87.6 63.0 81.5Q49.1 67.7 40.4 61.9V91.1Q40.6 98.7 41.0 103.8Q41.4 109.0 42.2 112.0H18.4Q20.2 105.9 20.3 91.5Q20.3 61.8 20.3 45.4Q20.3 29.0 20.2 25.3Q20.0 21.6 19.6 18.3Q19.2 15.0 18.4 12.0Z"/>
  <path fill="currentColor" d="M180.8 81.0Q180.8 95.6 171.4 104.5Q162.0 113.4 148.5 113.4Q133.7 113.4 124.4 103.8Q115.4 94.7 115.7 80.7Q115.9 67.1 124.9 58.1Q134.0 48.9 148.5 48.9Q163.1 48.9 171.9 57.7Q180.8 66.6 180.8 81.0ZM165.0 80.2Q165.0 72.5 160.4 67.5Q155.7 62.6 148.3 62.6Q140.6 62.6 135.7 67.5Q130.8 72.5 130.8 80.2Q130.7 87.3 135.8 92.7Q140.9 97.9 148.3 97.9Q155.6 97.9 160.2 93.1Q164.9 88.4 165.0 80.2Z"/>
  <path fill="currentColor" d="M228.0 111.5Q220.8 114.7 212.1 113.9Q197.0 112.5 190.1 110.6L190.0 94.7L202.5 98.5Q209.7 100.6 215.3 100.6Q222.1 100.6 222.5 96.6Q223.3 90.5 212.9 85.8Q210.0 84.7 205.9 82.9Q201.8 81.2 196.4 78.6Q190.0 74.1 190.0 66.3Q190.0 57.4 196.1 53.3Q200.9 50.0 207.0 49.2Q208.1 49.1 210.8 49.0Q213.6 48.9 217.9 48.9Q220.3 48.9 225.8 50.0Q232.2 51.5 232.3 51.5V65.9Q230.7 65.3 229.2 64.8Q227.7 64.3 226.1 63.8Q220.0 61.8 214.8 61.8Q206.8 61.4 206.8 65.8Q207.1 68.7 210.7 70.3Q212.9 71.1 215.2 71.9Q217.4 72.7 219.7 73.5Q239.2 81.2 239.2 95.1Q239.2 106.5 228.0 111.5Z"/>
  <path fill="currentColor" d="M350.0 112.0 334.3 112.2Q334.5 108.0 334.6 102.3Q334.6 96.6 334.5 88.9Q334.3 82.5 334.1 78.2Q333.8 74.0 333.4 71.7Q331.3 62.4 324.2 62.4Q317.6 62.4 312.6 65.9Q311.4 67.1 310.2 68.2Q309.1 69.3 307.8 70.4Q308.0 72.4 308.0 75.2Q308.0 78.0 308.0 81.7L308.2 112.0H293.2Q293.2 109.0 293.2 104.9Q293.2 100.8 293.4 95.5Q293.5 87.6 293.4 81.5Q293.1 71.1 291.8 67.7Q289.2 61.8 281.2 61.8Q274.8 61.8 270.4 66.1Q269.6 67.2 268.7 68.3Q267.7 69.5 266.9 70.7V112.0H251.5Q251.8 103.7 252.0 90.0Q252.1 76.4 252.1 57.4Q252.0 56.5 252.0 54.5Q252.0 52.6 251.8 49.7H266.6L266.4 56.8Q274.4 48.3 286.3 48.3Q299.3 48.3 304.0 57.9Q306.4 55.0 311.8 52.3Q319.7 48.3 328.2 48.3Q339.5 48.3 344.3 55.2Q349.7 62.7 349.7 81.7V100.3Q349.9 105.9 350.0 109.2Q350.0 112.5 350.0 112.0Z"/>
  <path fill="currentColor" d="M425.4 81.0Q425.4 95.6 416.1 104.5Q406.6 113.4 393.1 113.4Q378.4 113.4 369.0 103.8Q360.1 94.7 360.4 80.7Q360.5 67.1 369.5 58.1Q378.7 48.9 393.1 48.9Q407.7 48.9 416.6 57.7Q425.4 66.6 425.4 81.0ZM409.7 80.2Q409.7 72.5 405.0 67.5Q400.3 62.6 393.0 62.6Q385.3 62.6 380.4 67.5Q375.5 72.5 375.5 80.2Q375.3 87.3 380.4 92.7Q385.6 97.9 393.0 97.9Q400.2 97.9 404.8 93.1Q409.5 88.4 409.7 80.2Z"/>
  <path fill="currentColor" d="M472.6 111.5Q465.4 114.7 456.7 113.9Q441.7 112.5 434.7 110.6L434.6 94.7L447.1 98.5Q454.3 100.6 459.9 100.6Q466.7 100.6 467.2 96.6Q468.0 90.5 457.5 85.8Q454.7 84.7 450.6 82.9Q446.5 81.2 441.0 78.6Q434.6 74.1 434.6 66.3Q434.6 57.4 440.7 53.3Q445.5 50.0 451.6 49.2Q452.7 49.1 455.5 49.0Q458.2 48.9 462.5 48.9Q464.9 48.9 470.4 50.0Q476.8 51.5 477.0 51.5V65.9Q475.4 65.3 473.8 64.8Q472.3 64.3 470.7 63.8Q464.6 61.8 459.5 61.8Q451.4 61.4 451.4 65.8Q451.8 68.7 455.3 70.3Q457.5 71.1 459.8 71.9Q462.0 72.7 464.3 73.5Q483.9 81.2 483.9 95.1Q483.9 106.5 472.6 111.5Z"/>
  <path fill="currentColor" d="M528.06 20.80Q534.18 52.89 566.26 59.00Q534.18 65.11 528.06 97.20Q521.95 65.11 489.87 59.00Q521.95 52.89 528.06 20.80Z"/>
</svg>

The mark, gradient static/images/logo-variants/kosmos-k-mark-gradient.svg

The same cut in the brand gradient: one run across the kappa, a second on the diagonal across the sparkle.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="13.00 15.00 94.79 70.01" width="1.3540em" height="1em" aria-hidden="true"><style>.brand-grad-from{stop-color:var(--brand-grad-from,#4d6d94)}.brand-grad-to{stop-color:var(--brand-grad-to,#ad2492)}@supports(color:light-dark(red,red)){.brand-grad-from{stop-color:var(--brand-grad-from,light-dark(#4d6d94,#88c0d0))}.brand-grad-to{stop-color:var(--brand-grad-to,light-dark(#ad2492,#ebcb8b))}}@media(prefers-color-scheme:dark){.brand-grad-from{stop-color:var(--brand-grad-from,#88c0d0)}.brand-grad-to{stop-color:var(--brand-grad-to,#ebcb8b)}}</style><defs><linearGradient id="kosmos-grad-mark" gradientUnits="userSpaceOnUse" x1="8.0" y1="43.1" x2="85.8" y2="56.9"><stop class="brand-grad-from" offset="0.1"/><stop class="brand-grad-to" offset="0.9"/></linearGradient><linearGradient id="kosmos-grad-mark-sparkle" gradientUnits="userSpaceOnUse" x1="67.20" y1="27.60" x2="107.79" y2="68.20"><stop class="brand-grad-from" offset="0.15"/><stop class="brand-grad-to" offset="0.62"/></linearGradient></defs><path d="M87.50 27.60Q90.74 44.65 107.79 47.90Q90.74 51.15 87.50 68.20Q84.25 51.15 67.20 47.90Q84.25 44.65 87.50 27.60Z" fill="url(#kosmos-grad-mark-sparkle)"/><path transform="translate(0 0.00)" d="M29.66 15.00Q28.32 20.25 28.32 48.55Q35.14 41.39 41.18 35.35Q51.14 25.40 53.04 23.16Q56.95 18.57 57.18 15.00H78.98Q75.74 17.57 68.36 25.28Q61.31 32.44 57.73 36.19Q54.16 39.93 53.82 40.27Q52.37 41.72 50.30 43.74Q48.23 45.75 45.66 48.32Q52.81 54.25 57.40 58.39Q73.73 73.71 80.89 85.00H60.87Q59.30 80.42 55.72 75.83Q54.16 73.93 51.25 70.97Q48.34 68.01 44.09 63.76Q34.36 54.14 28.32 50.11V70.47Q28.43 75.72 28.71 79.30Q28.99 82.88 29.55 85.00H13.00Q14.23 80.76 14.34 70.69Q14.34 49.89 14.34 38.37Q14.34 26.85 14.23 24.28Q14.12 21.71 13.84 19.41Q13.56 17.12 13.00 15.00Z" fill="url(#kosmos-grad-mark)"/></svg>

The wordmark, gradient static/images/logo-variants/kosmos-wordmark-gradient.svg

One run across the whole word, a second across the sparkle. Headers, splash lines.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18.4 12.0 540.9 102.1" fill="none" width="5.2984em" height="1em" class="brand-svg brand-wordmark-inline">
  <style>.brand-grad-from{stop-color:var(--brand-grad-from,#4d6d94)}.brand-grad-to{stop-color:var(--brand-grad-to,#ad2492)}@supports(color:light-dark(red,red)){.brand-grad-from{stop-color:var(--brand-grad-from,light-dark(#4d6d94,#88c0d0))}.brand-grad-to{stop-color:var(--brand-grad-to,light-dark(#ad2492,#ebcb8b))}}@media(prefers-color-scheme:dark){.brand-grad-from{stop-color:var(--brand-grad-from,#88c0d0)}.brand-grad-to{stop-color:var(--brand-grad-to,#ebcb8b)}}</style>
  <defs>
  <linearGradient id="kosmos-grad-word" gradientUnits="userSpaceOnUse" x1="16.7" y1="21.7" x2="485.6" y2="104.4"><stop class="brand-grad-from" offset="0.1"/><stop class="brand-grad-to" offset="0.9"/></linearGradient>
  <linearGradient id="kosmos-grad-word-sparkle" gradientUnits="userSpaceOnUse" x1="476" y1="17" x2="568" y2="109"><stop class="brand-grad-from" offset="0.15"/><stop class="brand-grad-to" offset="0.62"/></linearGradient>
  </defs>
  <path fill="url(#kosmos-grad-word)" d="M42.3 12.0Q40.4 19.5 40.4 59.7Q50.2 49.4 58.9 40.7Q66.6 33.0 70.8 28.7Q75.1 24.4 75.9 23.6Q81.5 17.1 81.8 12.0H113.1Q108.0 15.9 97.9 26.4Q92.7 31.9 87.4 37.2Q82.1 42.5 77.0 47.8Q74.9 49.9 72.0 52.8Q69.0 55.7 65.3 59.4Q75.6 67.9 82.1 73.8Q105.6 95.8 115.9 112.0H87.1Q84.9 105.4 79.7 98.8Q77.5 96.1 73.3 91.9Q69.1 87.6 63.0 81.5Q49.1 67.7 40.4 61.9V91.1Q40.6 98.7 41.0 103.8Q41.4 109.0 42.2 112.0H18.4Q20.2 105.9 20.3 91.5Q20.3 61.8 20.3 45.4Q20.3 29.0 20.2 25.3Q20.0 21.6 19.6 18.3Q19.2 15.0 18.4 12.0Z"/>
  <path fill="url(#kosmos-grad-word)" d="M180.8 81.0Q180.8 95.6 171.4 104.5Q162.0 113.4 148.5 113.4Q133.7 113.4 124.4 103.8Q115.4 94.7 115.7 80.7Q115.9 67.1 124.9 58.1Q134.0 48.9 148.5 48.9Q163.1 48.9 171.9 57.7Q180.8 66.6 180.8 81.0ZM165.0 80.2Q165.0 72.5 160.4 67.5Q155.7 62.6 148.3 62.6Q140.6 62.6 135.7 67.5Q130.8 72.5 130.8 80.2Q130.7 87.3 135.8 92.7Q140.9 97.9 148.3 97.9Q155.6 97.9 160.2 93.1Q164.9 88.4 165.0 80.2Z"/>
  <path fill="url(#kosmos-grad-word)" d="M228.0 111.5Q220.8 114.7 212.1 113.9Q197.0 112.5 190.1 110.6L190.0 94.7L202.5 98.5Q209.7 100.6 215.3 100.6Q222.1 100.6 222.5 96.6Q223.3 90.5 212.9 85.8Q210.0 84.7 205.9 82.9Q201.8 81.2 196.4 78.6Q190.0 74.1 190.0 66.3Q190.0 57.4 196.1 53.3Q200.9 50.0 207.0 49.2Q208.1 49.1 210.8 49.0Q213.6 48.9 217.9 48.9Q220.3 48.9 225.8 50.0Q232.2 51.5 232.3 51.5V65.9Q230.7 65.3 229.2 64.8Q227.7 64.3 226.1 63.8Q220.0 61.8 214.8 61.8Q206.8 61.4 206.8 65.8Q207.1 68.7 210.7 70.3Q212.9 71.1 215.2 71.9Q217.4 72.7 219.7 73.5Q239.2 81.2 239.2 95.1Q239.2 106.5 228.0 111.5Z"/>
  <path fill="url(#kosmos-grad-word)" d="M350.0 112.0 334.3 112.2Q334.5 108.0 334.6 102.3Q334.6 96.6 334.5 88.9Q334.3 82.5 334.1 78.2Q333.8 74.0 333.4 71.7Q331.3 62.4 324.2 62.4Q317.6 62.4 312.6 65.9Q311.4 67.1 310.2 68.2Q309.1 69.3 307.8 70.4Q308.0 72.4 308.0 75.2Q308.0 78.0 308.0 81.7L308.2 112.0H293.2Q293.2 109.0 293.2 104.9Q293.2 100.8 293.4 95.5Q293.5 87.6 293.4 81.5Q293.1 71.1 291.8 67.7Q289.2 61.8 281.2 61.8Q274.8 61.8 270.4 66.1Q269.6 67.2 268.7 68.3Q267.7 69.5 266.9 70.7V112.0H251.5Q251.8 103.7 252.0 90.0Q252.1 76.4 252.1 57.4Q252.0 56.5 252.0 54.5Q252.0 52.6 251.8 49.7H266.6L266.4 56.8Q274.4 48.3 286.3 48.3Q299.3 48.3 304.0 57.9Q306.4 55.0 311.8 52.3Q319.7 48.3 328.2 48.3Q339.5 48.3 344.3 55.2Q349.7 62.7 349.7 81.7V100.3Q349.9 105.9 350.0 109.2Q350.0 112.5 350.0 112.0Z"/>
  <path fill="url(#kosmos-grad-word)" d="M425.4 81.0Q425.4 95.6 416.1 104.5Q406.6 113.4 393.1 113.4Q378.4 113.4 369.0 103.8Q360.1 94.7 360.4 80.7Q360.5 67.1 369.5 58.1Q378.7 48.9 393.1 48.9Q407.7 48.9 416.6 57.7Q425.4 66.6 425.4 81.0ZM409.7 80.2Q409.7 72.5 405.0 67.5Q400.3 62.6 393.0 62.6Q385.3 62.6 380.4 67.5Q375.5 72.5 375.5 80.2Q375.3 87.3 380.4 92.7Q385.6 97.9 393.0 97.9Q400.2 97.9 404.8 93.1Q409.5 88.4 409.7 80.2Z"/>
  <path fill="url(#kosmos-grad-word)" d="M472.6 111.5Q465.4 114.7 456.7 113.9Q441.7 112.5 434.7 110.6L434.6 94.7L447.1 98.5Q454.3 100.6 459.9 100.6Q466.7 100.6 467.2 96.6Q468.0 90.5 457.5 85.8Q454.7 84.7 450.6 82.9Q446.5 81.2 441.0 78.6Q434.6 74.1 434.6 66.3Q434.6 57.4 440.7 53.3Q445.5 50.0 451.6 49.2Q452.7 49.1 455.5 49.0Q458.2 48.9 462.5 48.9Q464.9 48.9 470.4 50.0Q476.8 51.5 477.0 51.5V65.9Q475.4 65.3 473.8 64.8Q472.3 64.3 470.7 63.8Q464.6 61.8 459.5 61.8Q451.4 61.4 451.4 65.8Q451.8 68.7 455.3 70.3Q457.5 71.1 459.8 71.9Q462.0 72.7 464.3 73.5Q483.9 81.2 483.9 95.1Q483.9 106.5 472.6 111.5Z"/>
  <path fill="url(#kosmos-grad-word-sparkle)" d="M524.59 24.27Q530.15 53.44 559.32 59.00Q530.15 64.56 524.59 93.73Q519.04 64.56 489.87 59.00Q519.04 53.44 524.59 24.27Z"/>
</svg>

The wordmark, gradient, small cut static/images/logo-variants/kosmos-wordmark-gradient-small.svg

The fuller sparkle for nav sizes; the cut in the app's sidebar.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18.4 12.0 547.8 102.1" fill="none" width="5.3664em" height="1em" class="brand-svg brand-wordmark-inline">
  <style>.brand-grad-from{stop-color:var(--brand-grad-from,#4d6d94)}.brand-grad-to{stop-color:var(--brand-grad-to,#ad2492)}@supports(color:light-dark(red,red)){.brand-grad-from{stop-color:var(--brand-grad-from,light-dark(#4d6d94,#88c0d0))}.brand-grad-to{stop-color:var(--brand-grad-to,light-dark(#ad2492,#ebcb8b))}}@media(prefers-color-scheme:dark){.brand-grad-from{stop-color:var(--brand-grad-from,#88c0d0)}.brand-grad-to{stop-color:var(--brand-grad-to,#ebcb8b)}}</style>
  <defs>
  <linearGradient id="kosmos-grad-word" gradientUnits="userSpaceOnUse" x1="16.7" y1="21.7" x2="485.6" y2="104.4"><stop class="brand-grad-from" offset="0.1"/><stop class="brand-grad-to" offset="0.9"/></linearGradient>
  <linearGradient id="kosmos-grad-word-sparkle-small" gradientUnits="userSpaceOnUse" x1="479" y1="17" x2="571" y2="109"><stop class="brand-grad-from" offset="0.15"/><stop class="brand-grad-to" offset="0.62"/></linearGradient>
  </defs>
  <path fill="url(#kosmos-grad-word)" d="M42.3 12.0Q40.4 19.5 40.4 59.7Q50.2 49.4 58.9 40.7Q66.6 33.0 70.8 28.7Q75.1 24.4 75.9 23.6Q81.5 17.1 81.8 12.0H113.1Q108.0 15.9 97.9 26.4Q92.7 31.9 87.4 37.2Q82.1 42.5 77.0 47.8Q74.9 49.9 72.0 52.8Q69.0 55.7 65.3 59.4Q75.6 67.9 82.1 73.8Q105.6 95.8 115.9 112.0H87.1Q84.9 105.4 79.7 98.8Q77.5 96.1 73.3 91.9Q69.1 87.6 63.0 81.5Q49.1 67.7 40.4 61.9V91.1Q40.6 98.7 41.0 103.8Q41.4 109.0 42.2 112.0H18.4Q20.2 105.9 20.3 91.5Q20.3 61.8 20.3 45.4Q20.3 29.0 20.2 25.3Q20.0 21.6 19.6 18.3Q19.2 15.0 18.4 12.0Z"/>
  <path fill="url(#kosmos-grad-word)" d="M180.8 81.0Q180.8 95.6 171.4 104.5Q162.0 113.4 148.5 113.4Q133.7 113.4 124.4 103.8Q115.4 94.7 115.7 80.7Q115.9 67.1 124.9 58.1Q134.0 48.9 148.5 48.9Q163.1 48.9 171.9 57.7Q180.8 66.6 180.8 81.0ZM165.0 80.2Q165.0 72.5 160.4 67.5Q155.7 62.6 148.3 62.6Q140.6 62.6 135.7 67.5Q130.8 72.5 130.8 80.2Q130.7 87.3 135.8 92.7Q140.9 97.9 148.3 97.9Q155.6 97.9 160.2 93.1Q164.9 88.4 165.0 80.2Z"/>
  <path fill="url(#kosmos-grad-word)" d="M228.0 111.5Q220.8 114.7 212.1 113.9Q197.0 112.5 190.1 110.6L190.0 94.7L202.5 98.5Q209.7 100.6 215.3 100.6Q222.1 100.6 222.5 96.6Q223.3 90.5 212.9 85.8Q210.0 84.7 205.9 82.9Q201.8 81.2 196.4 78.6Q190.0 74.1 190.0 66.3Q190.0 57.4 196.1 53.3Q200.9 50.0 207.0 49.2Q208.1 49.1 210.8 49.0Q213.6 48.9 217.9 48.9Q220.3 48.9 225.8 50.0Q232.2 51.5 232.3 51.5V65.9Q230.7 65.3 229.2 64.8Q227.7 64.3 226.1 63.8Q220.0 61.8 214.8 61.8Q206.8 61.4 206.8 65.8Q207.1 68.7 210.7 70.3Q212.9 71.1 215.2 71.9Q217.4 72.7 219.7 73.5Q239.2 81.2 239.2 95.1Q239.2 106.5 228.0 111.5Z"/>
  <path fill="url(#kosmos-grad-word)" d="M350.0 112.0 334.3 112.2Q334.5 108.0 334.6 102.3Q334.6 96.6 334.5 88.9Q334.3 82.5 334.1 78.2Q333.8 74.0 333.4 71.7Q331.3 62.4 324.2 62.4Q317.6 62.4 312.6 65.9Q311.4 67.1 310.2 68.2Q309.1 69.3 307.8 70.4Q308.0 72.4 308.0 75.2Q308.0 78.0 308.0 81.7L308.2 112.0H293.2Q293.2 109.0 293.2 104.9Q293.2 100.8 293.4 95.5Q293.5 87.6 293.4 81.5Q293.1 71.1 291.8 67.7Q289.2 61.8 281.2 61.8Q274.8 61.8 270.4 66.1Q269.6 67.2 268.7 68.3Q267.7 69.5 266.9 70.7V112.0H251.5Q251.8 103.7 252.0 90.0Q252.1 76.4 252.1 57.4Q252.0 56.5 252.0 54.5Q252.0 52.6 251.8 49.7H266.6L266.4 56.8Q274.4 48.3 286.3 48.3Q299.3 48.3 304.0 57.9Q306.4 55.0 311.8 52.3Q319.7 48.3 328.2 48.3Q339.5 48.3 344.3 55.2Q349.7 62.7 349.7 81.7V100.3Q349.9 105.9 350.0 109.2Q350.0 112.5 350.0 112.0Z"/>
  <path fill="url(#kosmos-grad-word)" d="M425.4 81.0Q425.4 95.6 416.1 104.5Q406.6 113.4 393.1 113.4Q378.4 113.4 369.0 103.8Q360.1 94.7 360.4 80.7Q360.5 67.1 369.5 58.1Q378.7 48.9 393.1 48.9Q407.7 48.9 416.6 57.7Q425.4 66.6 425.4 81.0ZM409.7 80.2Q409.7 72.5 405.0 67.5Q400.3 62.6 393.0 62.6Q385.3 62.6 380.4 67.5Q375.5 72.5 375.5 80.2Q375.3 87.3 380.4 92.7Q385.6 97.9 393.0 97.9Q400.2 97.9 404.8 93.1Q409.5 88.4 409.7 80.2Z"/>
  <path fill="url(#kosmos-grad-word)" d="M472.6 111.5Q465.4 114.7 456.7 113.9Q441.7 112.5 434.7 110.6L434.6 94.7L447.1 98.5Q454.3 100.6 459.9 100.6Q466.7 100.6 467.2 96.6Q468.0 90.5 457.5 85.8Q454.7 84.7 450.6 82.9Q446.5 81.2 441.0 78.6Q434.6 74.1 434.6 66.3Q434.6 57.4 440.7 53.3Q445.5 50.0 451.6 49.2Q452.7 49.1 455.5 49.0Q458.2 48.9 462.5 48.9Q464.9 48.9 470.4 50.0Q476.8 51.5 477.0 51.5V65.9Q475.4 65.3 473.8 64.8Q472.3 64.3 470.7 63.8Q464.6 61.8 459.5 61.8Q451.4 61.4 451.4 65.8Q451.8 68.7 455.3 70.3Q457.5 71.1 459.8 71.9Q462.0 72.7 464.3 73.5Q483.9 81.2 483.9 95.1Q483.9 106.5 472.6 111.5Z"/>
  <path fill="url(#kosmos-grad-word-sparkle-small)" d="M528.06 20.80Q534.18 52.89 566.26 59.00Q534.18 65.11 528.06 97.20Q521.95 65.11 489.87 59.00Q521.95 52.89 528.06 20.80Z"/>
</svg>

currentColor does not cascade through <img> — the file renders black. Inline the markup (template include / component) wherever it should follow the theme. The gradient cuts do render through <img>, but only in their built-in Nord pair; the page's gradient tokens reach them inline. See Instructions before inlining one more than once on a page.