Greyscale
Category: Headers
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<nav style="display: flex; position: relative; width: 1520.8px; height: 74.975px; padding: 12.8px 40px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; z-index: 3; overflow: visible;"><div style="display: flex; position: static; width: 507.288px; height: 30.7125px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; align-items: center; opacity: 1; overflow: visible;"><a href="/" aria-current="page" style="display: flex; position: static; width: 127.488px; height: 30.7125px; max-width: 100%; margin: 0px 126.874px 0px 0px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: center; opacity: 1; overflow: visible; cursor: pointer;"><img src="https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63dc103a70f1b86d876f0242_Logo-white.svg" loading="lazy" alt="Logo" style="display: block; position: static; width: 117.35px; height: 28.8px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: pointer;"></a><div style="display: flex; position: relative; width: 252.938px; height: 18.425px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; align-items: center; gap: 22.4px; opacity: 1; overflow: visible;"><a href="/for-clients" style="display: block; position: relative; width: 80.525px; height: 18.425px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><div style="display: block; position: static; width: 80.525px; height: 15.5625px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">For Clients</div><div style="display: block; position: absolute; top: 17.425px; left: -112.725px; width: 80.525px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div><div style="display: block; position: absolute; top: 17.425px; width: 80.525px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div></a><a href="/for-partners" style="display: block; position: relative; width: 93.4375px; height: 18.425px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><div style="display: block; position: static; width: 93.4375px; height: 15.5625px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">For Partners</div><div style="display: block; position: absolute; top: 17.425px; left: -130.812px; width: 93.4375px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div><div style="display: block; position: absolute; top: 17.425px; width: 93.4375px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div></a><a href="/blog" style="display: block; position: relative; width: 34.175px; height: 18.425px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><div style="display: block; position: static; width: 34.175px; height: 15.5625px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Blog</div><div style="display: block; position: absolute; top: 17.425px; left: -47.8375px; width: 34.175px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div><div style="display: block; position: absolute; top: 17.425px; width: 34.175px; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div></a><a href="/archiv/pricing" style="display: none; position: relative; width: auto; height: 18.432px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><div style="display: block; position: static; width: auto; height: auto; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Pricing</div><div style="display: block; position: absolute; left: -140%; right: 0%; bottom: 0%; width: 100%; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div><div style="display: block; position: absolute; left: 0%; right: 0%; bottom: 0%; width: 100%; height: 1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></div></a></div></div><div style="display: flex; position: static; width: 335.825px; height: 49.375px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; gap: 61.44px; opacity: 1; overflow: visible;"><div style="display: flex; position: static; width: 175.125px; height: 49.375px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: stretch; gap: 15.36px; opacity: 1; overflow: visible;"><a href="https://platform.unbench.us/requests" target="_blank" style="cursor: crosshair; display: flex; position: relative; width: 175.125px; height: 49.375px; max-width: 100%; padding: 15.36px 23.04px 15.36px 16.896px; border: 0px none rgb(28, 28, 28); border-radius: 6.4px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12.288px; opacity: 1; overflow: visible;"><div style="display: block; position: static; width: 14.075px; height: 14.075px; margin: 0px 0px 4.608px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: static; width: 14.075px; height: 19.9625px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg width="100%" height="auto" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; position: static; width: 14.075px; height: 14.075px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;">
<path d="M7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM3.549 11.396C3.85 10.766 5.684 10.15 7 10.15C8.316 10.15 10.157 10.766 10.451 11.396C9.499 12.152 8.302 12.6 7 12.6C5.698 12.6 4.501 12.152 3.549 11.396ZM11.452 10.381C10.451 9.163 8.022 8.75 7 8.75C5.978 8.75 3.549 9.163 2.548 10.381C1.834 9.443 1.4 8.274 1.4 7C1.4 3.913 3.913 1.4 7 1.4C10.087 1.4 12.6 3.913 12.6 7C12.6 8.274 12.166 9.443 11.452 10.381V10.381ZM7 2.8C5.642 2.8 4.55 3.892 4.55 5.25C4.55 6.608 5.642 7.7 7 7.7C8.358 7.7 9.45 6.608 9.45 5.25C9.45 3.892 8.358 2.8 7 2.8ZM7 6.3C6.419 6.3 5.95 5.831 5.95 5.25C5.95 4.669 6.419 4.2 7 4.2C7.581 4.2 8.05 4.669 8.05 5.25C8.05 5.831 7.581 6.3 7 6.3Z" fill="currentColor" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></path>
</svg></div></div><div style="display: block; position: static; width: 108.838px; height: 15.5625px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; align-items: start; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: static; width: 108.838px; height: 15.5625px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Go to platform</div></div></a></div><a data-lenis-stop="" href="#" style="display: flex; position: static; width: 99.2625px; height: 16.125px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 15.36px; opacity: 1; overflow: visible; cursor: pointer;"><div style="display: block; position: static; width: 35.8375px; height: 15.5625px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; align-items: start; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; opacity: 1; overflow: visible; cursor: pointer;"><div style="display: block; position: static; width: 35.8375px; height: 15.5625px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Menu</div></div><div style="display: block; position: static; width: 48.075px; height: 19.9625px; margin: -3.84px 0px 0px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><div style="display: block; position: static; width: 48.075px; height: 19.9625px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><svg width="100%" height="auto" viewBox="0 0 45 9" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; position: static; width: 48.075px; height: 9.6125px; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<line y1="0.5" x2="45" y2="0.5" stroke="currentColor" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></line>
<path d="M0 8H45" stroke="currentColor" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(247, 247, 247); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(247, 247, 247); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg></div></div></a></div></nav>
create a canvas to display a navbar component. we want the navbar component to be centered and the space around it to be flexible empty.
reproduce this navbar component
Created by: LandingHero
