'%3e%3c!--%20Outer%20quarter-ring%20--%3e%3cpath%20d='M%200,-180%20A%20180,180%200%200%201%20180,0%20H%20130%20A%20130,130%200%200%200%200,-130%20Z'%20fill='%23173a6b'/%3e%3c!--%20Middle%20quarter-ring%20(teal)%20with%20glow%20--%3e%3cg%20filter='url(%23glowCyan)'%3e%3cpath%20d='M%200,-120%20A%20120,120%200%200%201%20120,0%20H%2085%20A%2085,85%200%200%200%200,-85%20Z'%20fill='%2316b6c9'/%3e%3c/g%3e%3c!--%20Inner%20quarter-disk%20(coral)%20with%20glow%20--%3e%3cg%20filter='url(%23glowOrange)'%3e%3cpath%20d='M%200,-75%20A%2075,75%200%200%201%2075,0%20H%200%20Z'%20fill='%23ff7a66'/%3e%3c/g%3e%3c!--%20Crisp%20overlays%20--%3e%3cpath%20d='M%200,-180%20A%20180,180%200%200%201%20180,0%20H%20130%20A%20130,130%200%200%200%200,-130%20Z'%20fill='%23173a6b'/%3e%3cpath%20d='M%200,-120%20A%20120,120%200%200%201%20120,0%20H%2085%20A%2085,85%200%200%200%200,-85%20Z'%20fill='%2316b6c9'/%3e%3cpath%20d='M%200,-75%20A%2075,75%200%200%201%2075,0%20H%200%20Z'%20fill='%23ff7a66'/%3e%3c/g%3e%3c!--%20Logotype:%20'spektral',%20Bricolage%20Grotesque%20ExtraBold%2072px,%20converted%20to%20outlines%20so%20it%20renders%20identically%20everywhere%20(no%20font%20loading%20in%20%3cimg%3e%20contexts)%20--%3e%3cpath%20d='M247.5%20120.9Q243.6%20120.9%20240.4%20120.1Q237.2%20119.4%20234.8%20117.8Q232.4%20116.3%20231.1%20113.8Q229.8%20111.3%20229.8%20107.8L239.5%20106.1Q239.7%20108.2%20240.8%20109.6Q241.8%20111.1%20243.6%20111.8Q245.4%20112.6%20247.9%20112.6Q250.4%20112.6%20252.0%20111.8Q253.6%20111.0%20253.6%20109.3Q253.6%20108.3%20252.9%20107.6Q252.3%20107.0%20250.6%20106.5Q249.0%20105.9%20246.1%20105.3Q242.8%20104.4%20239.8%20103.6Q236.9%20102.7%20234.7%20101.4Q232.6%20100.1%20231.4%2098.1Q230.1%2096.1%20230.1%2093.1Q230.1%2089.3%20232.2%2086.5Q234.3%2083.8%20238.0%2082.3Q241.7%2080.8%20246.7%2080.8Q251.2%2080.8%20255.0%2082.2Q258.7%2083.5%20261.0%2086.3Q263.3%2089.2%20263.1%2093.7L253.4%2095.4Q253.4%2093.4%20252.6%2092.1Q251.7%2090.7%20250.1%2090.0Q248.5%2089.2%20246.3%2089.2Q243.8%2089.2%20242.4%2090.1Q241.0%2091.0%20241.0%2092.4Q241.0%2093.5%20241.9%2094.3Q242.8%2095.0%20244.6%2095.6Q246.4%2096.1%20249.2%2096.7Q251.7%2097.2%20254.4%2098.0Q257.1%2098.8%20259.4%20100.1Q261.7%20101.4%20263.1%20103.5Q264.5%20105.7%20264.5%20109.0Q264.5%20112.6%20262.5%20115.3Q260.6%20118.0%20256.8%20119.4Q253.0%20120.9%20247.5%20120.9Z%20M267.6%20131.0V97.1V81.8H277.6L277.7%2093.3L278.4%2093.4Q279.2%2089.2%20280.8%2086.4Q282.4%2083.6%20284.9%2082.2Q287.4%2080.8%20290.9%2080.8Q295.5%2080.8%20298.8%2083.2Q302.1%2085.5%20303.8%2089.9Q305.5%2094.4%20305.5%20100.8Q305.5%20107.4%20303.7%20111.9Q301.9%20116.4%20298.7%20118.6Q295.4%20120.9%20291.1%20120.9Q287.7%20120.9%20285.3%20119.5Q282.8%20118.2%20281.2%20115.5Q279.5%20112.7%20278.7%20108.6H277.8Q278.2%20110.7%20278.5%20112.9Q278.9%20115.0%20279.1%20117.1Q279.3%20119.2%20279.3%20121.2V131.0ZM286.7%20111.4Q289.0%20111.4%20290.6%20110.0Q292.1%20108.6%20292.9%20106.3Q293.6%20103.9%20293.6%20101.2Q293.6%2098.1%20292.8%2095.8Q292.0%2093.4%20290.4%2092.0Q288.8%2090.7%20286.6%2090.7Q285.0%2090.7%20283.6%2091.4Q282.3%2092.1%20281.3%2093.4Q280.3%2094.8%20279.7%2096.6Q279.2%2098.5%20279.2%20100.9V101.7Q279.2%20103.6%20279.6%20105.1Q280.0%20106.7%20280.7%20107.8Q281.4%20109.0%20282.4%20109.8Q283.3%20110.6%20284.4%20111.0Q285.5%20111.4%20286.7%20111.4Z%20M327.2%20120.9Q322.0%20120.9%20318.3%20119.4Q314.7%20117.9%20312.3%20115.3Q310.0%20112.7%20308.9%20109.2Q307.8%20105.7%20307.8%20101.6Q307.8%2097.4%20308.9%2093.6Q310.0%2089.9%20312.3%2087.0Q314.6%2084.1%20318.1%2082.5Q321.7%2080.8%20326.5%2080.8Q331.3%2080.8%20334.7%2082.5Q338.2%2084.1%20340.4%2087.1Q342.5%2090.1%20343.3%2094.1Q344.0%2098.1%20343.4%20102.9L315.1%20103.3V97.0L335.1%2096.7L332.8%20100.1Q333.3%2096.7%20332.6%2094.5Q332.0%2092.2%20330.4%2091.0Q328.9%2089.9%20326.5%2089.9Q323.9%2089.9%20322.2%2091.3Q320.5%2092.6%20319.7%2095.2Q319.0%2097.7%20319.0%20101.2Q319.0%20107.0%20321.1%20109.7Q323.2%20112.3%20327.2%20112.3Q329.0%20112.3%20330.2%20111.9Q331.4%20111.4%20332.2%20110.6Q332.9%20109.8%20333.3%20108.6Q333.6%20107.5%20333.6%20106.1L344.1%20107.2Q344.1%20109.6%20343.2%20112.1Q342.4%20114.5%20340.4%20116.5Q338.5%20118.4%20335.3%20119.7Q332.0%20120.9%20327.2%20120.9Z%20M347.5%20119.9V69.0H358.9V96.3Q361.2%2094.9%20363.0%2093.3Q364.8%2091.6%20366.1%2089.7Q367.4%2087.8%20368.3%2085.8Q369.2%2083.8%20369.8%2081.8H383.2Q382.3%2084.7%20380.8%2087.4Q379.3%2090.1%20377.1%2092.5Q374.8%2094.8%20371.9%2096.6Q368.9%2098.4%20365.2%2099.5V100.3Q369.9%2099.5%20372.9%20100.1Q375.9%20100.8%20377.7%20102.5Q379.4%20104.2%20380.4%20106.6Q381.3%20109.0%20381.9%20111.7L383.5%20119.9H370.9L370.1%20114.3Q369.7%20111.7%20369.1%20109.5Q368.5%20107.3%20366.9%20106.0Q365.4%20104.7%20362.2%20104.7H358.9V119.9Z%20M401.5%20120.7Q394.8%20120.7%20391.5%20117.3Q388.3%20113.8%20388.3%20106.4V90.9H383.8L383.8%2083.1H385.1Q388.9%2082.7%20390.6%2080.8Q392.3%2078.9%20392.7%2074.9L393.0%2073.2H399.7V81.8H408.6V91.2H399.7V105.5Q399.7%20108.2%20401.0%20109.3Q402.3%20110.5%20404.4%20110.5Q405.5%20110.5%20406.6%20110.2Q407.7%20109.9%20408.6%20109.4V119.7Q406.4%20120.4%20404.6%20120.6Q402.8%20120.7%20401.5%20120.7Z%20M412.3%20119.9V100.1V81.8H422.2L422.2%2096.3H423.1Q423.5%2090.6%20424.8%2087.2Q426.1%2083.9%20428.3%2082.4Q430.4%2081.0%20433.2%2081.0Q434.3%2081.0%20435.5%2081.2Q436.7%2081.5%20437.9%2082.1L437.4%2094.9Q435.9%2094.1%20434.5%2093.7Q433.0%2093.3%20431.7%2093.3Q429.3%2093.3%20427.6%2094.5Q425.9%2095.8%20424.9%2098.2Q424.0%20100.6%20423.9%20104.2V119.9Z%20M450.3%20120.9Q447.3%20120.9%20444.8%20119.8Q442.2%20118.7%20440.7%20116.4Q439.1%20114.1%20439.1%20110.4Q439.1%20106.9%20440.4%20104.8Q441.8%20102.6%20444.1%20101.3Q446.4%20100.0%20449.4%2099.2Q452.3%2098.5%20455.4%2098.0Q458.7%2097.3%20460.4%2096.9Q462.2%2096.5%20462.9%2095.9Q463.6%2095.3%20463.6%2094.2Q463.6%2092.2%20462.1%2091.1Q460.6%2089.9%20458.0%2089.9Q456.3%2089.9%20454.7%2090.5Q453.1%2091.1%20452.0%2092.6Q451.0%2094.0%20450.9%2096.5L440.5%2095.1Q440.7%2091.0%20442.3%2088.3Q443.8%2085.5%20446.4%2083.9Q449.0%2082.3%20452.1%2081.5Q455.2%2080.8%20458.4%2080.8Q464.1%2080.8%20467.8%2082.9Q471.4%2084.9%20473.2%2088.9Q474.9%2092.8%20474.9%2098.6V105.1Q474.9%20107.6%20475.0%20110.0Q475.0%20112.5%20475.1%20115.0Q475.1%20117.4%20475.2%20119.9H465.1Q465.0%20117.5%20464.9%20115.0Q464.8%20112.4%20464.8%20109.6H464.1Q463.6%20112.7%20461.7%20115.3Q459.9%20117.8%20456.9%20119.4Q454.0%20120.9%20450.3%20120.9ZM455.2%20112.5Q456.5%20112.5%20457.9%20112.0Q459.3%20111.5%20460.5%20110.5Q461.8%20109.5%20462.6%20107.8Q463.5%20106.1%20463.6%20103.7L463.6%20100.8L465.4%20100.8Q464.6%20101.7%20463.2%20102.2Q461.8%20102.8%20460.1%20103.1Q458.4%20103.4%20456.8%20103.7Q455.1%20104.1%20453.7%20104.6Q452.3%20105.1%20451.5%20106.0Q450.6%20106.9%20450.6%20108.5Q450.6%20110.4%20451.9%20111.4Q453.3%20112.5%20455.2%20112.5Z%20M479.4%20119.9V69.1H491.0V119.9Z'%20fill='%23122a4a'/%3e%3c/svg%3e)
Designing with inverted variants
An inverted variant isn't just a dark theme. It's a guarantee that a component placed on a dark band or card still meets contrast requirements.
Treating inversion as a prop rather than a global theme lets light and dark surfaces live on the same page, as they do throughout this site.
Contrast is a property of the surface, not the page.