Brand - Component
Code
Source (Nunjucks)
<div class="brand {{ data.tokens }}">
<svg role="img" aria-label="web.dev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"></path><g transform="translate(.639 .717)"><defs><filter id="a_2si" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b_2si"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a_2si)"></path></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b_2si)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"></path></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"></path><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" fill="#5f6368"></path></svg>
{% if data.byline %}
<p class="brand__byline">{{ data.byline }}</p>
{% endif %}
</div>Output
<div class="brand">
<svg
role="img"
aria-label="web.dev"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 125 28.5"
enable-background="new 0 0 125 28.5"
>
<path
d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#00c9db"
></path>
<g transform="translate(.639 .717)">
<defs>
<filter
id="a_2si"
filterUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
>
<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
></feColorMatrix>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
id="b_2si"
>
<path
d="M0 .1h16.1v22.3H0V.1z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#fff"
filter="url(#a_2si)"
></path>
</mask>
<path
d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
mask="url(#b_2si)"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#0d55ff"
></path>
</g>
<path
d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#7000f2"
></path>
<path
d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#5f6368"
></path>
</svg>
</div>Information
The brand block is designed to add control to the web.dev brand and provide an opportunity to have a supporting byline. Gutter is set on the block for if you apply a layout composition.
In the samples, the cluster is used to display the byline inline, where space allows.
Key links
Variants
Byline
Code
Source (Nunjucks)
<div class="brand {{ data.tokens }}">
<svg role="img" aria-label="web.dev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"></path><g transform="translate(.639 .717)"><defs><filter id="a_2si" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b_2si"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a_2si)"></path></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b_2si)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"></path></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"></path><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" fill="#5f6368"></path></svg>
{% if data.byline %}
<p class="brand__byline">{{ data.byline }}</p>
{% endif %}
</div>Output
<div class="brand">
<svg
role="img"
aria-label="web.dev"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 125 28.5"
enable-background="new 0 0 125 28.5"
>
<path
d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#00c9db"
></path>
<g transform="translate(.639 .717)">
<defs>
<filter
id="a_2si"
filterUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
>
<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
></feColorMatrix>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
id="b_2si"
>
<path
d="M0 .1h16.1v22.3H0V.1z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#fff"
filter="url(#a_2si)"
></path>
</mask>
<path
d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
mask="url(#b_2si)"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#0d55ff"
></path>
</g>
<path
d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#7000f2"
></path>
<path
d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#5f6368"
></path>
</svg>
<p class="brand__byline">Design System</p>
</div>Cluster byline
Code
Source (Nunjucks)
<div class="brand {{ data.tokens }}">
<svg role="img" aria-label="web.dev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"></path><g transform="translate(.639 .717)"><defs><filter id="a_2si" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b_2si"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a_2si)"></path></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b_2si)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"></path></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"></path><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" fill="#5f6368"></path></svg>
{% if data.byline %}
<p class="brand__byline">{{ data.byline }}</p>
{% endif %}
</div>Output
<div class="brand cluster">
<svg
role="img"
aria-label="web.dev"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 125 28.5"
enable-background="new 0 0 125 28.5"
>
<path
d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#00c9db"
></path>
<g transform="translate(.639 .717)">
<defs>
<filter
id="a_2si"
filterUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
>
<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
></feColorMatrix>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0"
y=".1"
width="16.1"
height="22.3"
id="b_2si"
>
<path
d="M0 .1h16.1v22.3H0V.1z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#fff"
filter="url(#a_2si)"
></path>
</mask>
<path
d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
mask="url(#b_2si)"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#0d55ff"
></path>
</g>
<path
d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#7000f2"
></path>
<path
d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#5f6368"
></path>
</svg>
<p class="brand__byline">Design System</p>
</div>