<svg id="diagram-stats-tokens" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632.375 450" style="min-width: 800px; background-color: white" role="graphics-document document" aria-roledescription="pie"><style>#diagram-stats-tokens{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-stats-tokens .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-stats-tokens .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-stats-tokens .error-icon{fill:#552222;}#diagram-stats-tokens .error-text{fill:#552222;stroke:#552222;}#diagram-stats-tokens .edge-thickness-normal{stroke-width:1px;}#diagram-stats-tokens .edge-thickness-thick{stroke-width:3.5px;}#diagram-stats-tokens .edge-pattern-solid{stroke-dasharray:0;}#diagram-stats-tokens .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-stats-tokens .edge-pattern-dashed{stroke-dasharray:3;}#diagram-stats-tokens .edge-pattern-dotted{stroke-dasharray:2;}#diagram-stats-tokens .marker{fill:#333333;stroke:#333333;}#diagram-stats-tokens .marker.cross{stroke:#333333;}#diagram-stats-tokens svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-stats-tokens p{margin:0;}#diagram-stats-tokens .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#diagram-stats-tokens .pieOuterCircle{stroke:black;stroke-width:2px;fill:none;}#diagram-stats-tokens .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#diagram-stats-tokens .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#diagram-stats-tokens .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#diagram-stats-tokens :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><g transform="translate(225,225)"><circle cx="0" cy="0" r="186" class="pieOuterCircle"></circle><path d="M0,-185A185,185,0,1,1,-155.457,-100.29L0,0Z" fill="#ECECFF" class="pieCircle"></path><path d="M-155.457,-100.29A185,185,0,0,1,-61.683,-174.414L0,0Z" fill="#ffffde" class="pieCircle"></path><path d="M-61.683,-174.414A185,185,0,0,1,-24.273,-183.401L0,0Z" fill="hsl(80, 100%, 56.2745098039%)" class="pieCircle"></path><path d="M-24.273,-183.401A185,185,0,0,1,0,-185L0,0Z" fill="hsl(240, 100%, 86.2745098039%)" class="pieCircle"></path><text transform="translate(66.38955088881019,121.8359143798826)" class="slice" style="text-anchor: middle;">82%</text><text transform="translate(-86.04109771085147,-108.85077861325435)" class="slice" style="text-anchor: middle;">10%</text><text transform="translate(-32.40903660694633,-134.91188548904657)" class="slice" style="text-anchor: middle;">3%</text><text transform="translate(-9.12212722178683,-138.44980785450565)" class="slice" style="text-anchor: middle;">2%</text><text x="0" y="-200" class="pieTitleText"></text><g class="legend" transform="translate(216,-88)"><rect width="18" height="18" style="fill: rgb(236, 236, 255); stroke: rgb(236, 236, 255);"></rect><text x="22" y="14">color [482]</text></g><g class="legend" transform="translate(216,-66)"><rect width="18" height="18" style="fill: rgb(255, 255, 222); stroke: rgb(255, 255, 222);"></rect><text x="22" y="14">typography [60]</text></g><g class="legend" transform="translate(216,-44)"><rect width="18" height="18" style="fill: rgb(181, 255, 32); stroke: rgb(181, 255, 32);"></rect><text x="22" y="14">spacing [19]</text></g><g class="legend" transform="translate(216,-22)"><rect width="18" height="18" style="fill: rgb(185, 185, 255); stroke: rgb(185, 185, 255);"></rect><text x="22" y="14">screen [12]</text></g><g class="legend" transform="translate(216,0)"><rect width="18" height="18" style="fill: rgb(255, 255, 69); stroke: rgb(255, 255, 69);"></rect><text x="22" y="14">grid [4]</text></g><g class="legend" transform="translate(216,22)"><rect width="18" height="18" style="fill: rgb(215, 255, 134); stroke: rgb(215, 255, 134);"></rect><text x="22" y="14">border [3]</text></g><g class="legend" transform="translate(216,44)"><rect width="18" height="18" style="fill: rgb(255, 134, 255); stroke: rgb(255, 134, 255);"></rect><text x="22" y="14">radius [3]</text></g><g class="legend" transform="translate(216,66)"><rect width="18" height="18" style="fill: rgb(32, 255, 255); stroke: rgb(32, 255, 255);"></rect><text x="22" y="14">shadow [3]</text></g></g></svg>