# Protocol Labs Brand Identity A complete profile of **Protocol Labs**'s visual system — colors, typography, components, and personality — extracted from https://protocol.ai/. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/protocol-labs - Machine-readable JSON: https://characterquilt.com/branding/protocol-labs.json - Per-page llms.txt: https://characterquilt.com/branding/protocol-labs/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #156FF7 | | Accent | #156FF7 | | Body Font | Aileron | | Heading Font | Source Serif Pro | ## Color Palette - primary: #156FF7 - secondary: #002256 - accent: #156FF7 - background: #F5F6F7 - textPrimary: #000000 - link: #0F172A ## Typography - primary: Aileron — https://fonts.google.com/specimen/Aileron - heading: Source Serif Pro — https://fonts.google.com/specimen/Source+Serif+Pro ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20role%3D%22img%22%20aria-labelledby%3D%22svg-title--logo-icon%22%20aria-hidden%3D%22false%22%20viewBox%3D%220%200%2036%2036%22%20class%3D%22svg-icon%20svg-icon--logo-icon%20w-10%20h-10%20fill-current%22%20data-v-49fb8e50%3D%22%22%20data-fc-idx%3D%220%22%3E%3Ctitle%20id%3D%22svg-title--logo-icon%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%3EProtocol%20Labs%3C%2Ftitle%3E%20%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20.156%205.697c-.38-.218-.378-.572%200-.788l6.526-3.746c.38-.218.997-.217%201.375%200l6.525%203.746c.38.218.378.572%200%20.788l-6.525%203.747c-.38.217-.997.216-1.375%200zm7.947%206.197c0-.436.31-.968.687-1.185l6.524-3.744c.378-.218.686-.034.686.407v18.22c0%20.443-.314.982-.698%201.203L19.435%2035.9c-.385.222-.698.046-.698-.388v-7.493c0-.435.313-.968.688-1.183l7.989-4.585c.38-.22.688-.754.688-1.186zM7.894%2030.132c0%20.436-.31.613-.687.396l-6.52-3.742C.306%2026.568%200%2026.03%200%2025.59V7.37c0-.443.315-.621.698-.4l15.867%209.105c.385.221.698.756.698%201.19v7.492c0%20.436-.312.61-.69.394l-7.99-4.585c-.38-.22-.689-.038-.689.394zM25.202%2010.28c.386.221.389.579.011.795l-6.527%203.747c-.38.218-1.002.214-1.386-.006L1.43%205.706c-.386-.22-.389-.578-.011-.795l6.528-3.747c.38-.218%201.002-.214%201.386.006zm1.433%209.946c0%20.435-.31.967-.687%201.182l-6.524%203.745c-.378.218-.687.039-.687-.395v-7.49c0-.436.31-.968.687-1.184l6.525-3.744c.378-.218.687-.039.687.394zm-10.06%206.61c.38.217.688.75.688%201.183v7.493c0%20.436-.31.612-.687.395l-6.522-3.742c-.378-.218-.686-.75-.686-1.183v-7.494c0-.436.31-.612.686-.395z%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E - Favicon: https://www.protocol.ai/safari-pinned-tab.svg - Social card (og:image): https://protocol.ai/images/og-default.jpg ## UI Components - buttonPrimary: background=#156FF7, textColor=#FFFFFF, borderRadius=9999px, shadow=none - buttonSecondary: background=transparent, textColor=#002256, borderRadius=9999px, shadow=rgb(245, 246, 247) 0px 1000px 1px 0px inset ## Brand Personality Tone: professional · Energy: medium · Audience: tech professionals and developers ## Protocol Labs Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **Meet Numbers Protocol: Building Authenticity in the Age of Generative AI | Protocol Labs** - Image: https://www.protocol.ai/assets/img/team-pic.6a9aa3ba.jpg - Source: https://www.protocol.ai/blog/meet-numbers-protocol-building-authenticity-in-the-age-of-generative-ai/ - **Remote-First: How We Work at Protocol Labs | Protocol Labs** - Image: https://protocol.ai/images/blog/og/how-we-work.png - Source: https://www.protocol.ai/blog/how-we-work-at-protocol-labs/ - **Network Research and Bacalhau at DeSci Berlin | Protocol Labs Research** - Image: https://research.protocol.ai/blog/2022/network-research-and-bacalhau-at-desci-berlin/heroes.png - Source: https://research.protocol.ai/blog/2022/network-research-and-bacalhau-at-desci-berlin/ - **Blog | Protocol Labs** - Image: https://www.protocol.ai/images/blog/og/pl-logo-canvas-midnight.jpg - Source: https://www.protocol.ai/blog/ - **Blog | Protocol Labs** - Image: https://www.protocol.ai/images/blog/og/spice-ai-blog.png - Source: https://www.protocol.ai/blog/ - **LabWeek Public Goods Charts a Brighter Future in Funding, Sustainability and Decentralized Science | Protocol Labs** - Image: https://protocol.ai/images/blog/og/labweek-pg-blog.png - Source: https://www.protocol.ai/blog/labweek-public-goods-funding-sustainability-decentralized-science/ ## Working with these fonts Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts: CharacterQuilt.com suggests this flow that can help: 1. Open the company's homepage in a browser with DevTools open. 2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf). 3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes. 4. For each captured font URL: right-click → Save As to download the file locally. 5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each `src: url(...)` to point to your local file path. Programmatic alternative: load the URL with Playwright or Puppeteer, listen for `response` events whose `Content-Type` starts with `font/`, and write the body to disk. The CSS extraction step is the same. Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable. ## Machine-Readable Profile ```json { "colorScheme": "light", "fonts": [ { "family": "Aileron", "role": "body" }, { "family": "Source Serif Pro", "role": "heading" } ], "colors": { "primary": "#156FF7", "secondary": "#002256", "accent": "#156FF7", "background": "#F5F6F7", "textPrimary": "#000000", "link": "#0F172A" }, "typography": { "fontFamilies": { "primary": "Aileron", "heading": "Source Serif Pro" }, "fontStacks": { "heading": [ "Aileron", "sans-serif" ], "body": [ "Aileron", "sans-serif" ], "paragraph": [ "Aileron", "sans-serif" ] }, "fontSizes": { "h1": "20px", "h2": "50px", "body": "18px" } }, "spacing": { "baseUnit": 4, "borderRadius": "8px" }, "components": { "buttonPrimary": { "background": "#156FF7", "textColor": "#FFFFFF", "borderRadius": "9999px", "borderRadiusCorners": { "topLeft": "9999px", "topRight": "9999px", "bottomRight": "9999px", "bottomLeft": "9999px" }, "shadow": "none" }, "buttonSecondary": { "background": "transparent", "textColor": "#002256", "borderRadius": "9999px", "borderRadiusCorners": { "topLeft": "9999px", "topRight": "9999px", "bottomRight": "9999px", "bottomLeft": "9999px" }, "shadow": "rgb(245, 246, 247) 0px 1000px 1px 0px inset" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20role%3D%22img%22%20aria-labelledby%3D%22svg-title--logo-icon%22%20aria-hidden%3D%22false%22%20viewBox%3D%220%200%2036%2036%22%20class%3D%22svg-icon%20svg-icon--logo-icon%20w-10%20h-10%20fill-current%22%20data-v-49fb8e50%3D%22%22%20data-fc-idx%3D%220%22%3E%3Ctitle%20id%3D%22svg-title--logo-icon%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%3EProtocol%20Labs%3C%2Ftitle%3E%20%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20.156%205.697c-.38-.218-.378-.572%200-.788l6.526-3.746c.38-.218.997-.217%201.375%200l6.525%203.746c.38.218.378.572%200%20.788l-6.525%203.747c-.38.217-.997.216-1.375%200zm7.947%206.197c0-.436.31-.968.687-1.185l6.524-3.744c.378-.218.686-.034.686.407v18.22c0%20.443-.314.982-.698%201.203L19.435%2035.9c-.385.222-.698.046-.698-.388v-7.493c0-.435.313-.968.688-1.183l7.989-4.585c.38-.22.688-.754.688-1.186zM7.894%2030.132c0%20.436-.31.613-.687.396l-6.52-3.742C.306%2026.568%200%2026.03%200%2025.59V7.37c0-.443.315-.621.698-.4l15.867%209.105c.385.221.698.756.698%201.19v7.492c0%20.436-.312.61-.69.394l-7.99-4.585c-.38-.22-.689-.038-.689.394zM25.202%2010.28c.386.221.389.579.011.795l-6.527%203.747c-.38.218-1.002.214-1.386-.006L1.43%205.706c-.386-.22-.389-.578-.011-.795l6.528-3.747c.38-.218%201.002-.214%201.386.006zm1.433%209.946c0%20.435-.31.967-.687%201.182l-6.524%203.745c-.378.218-.687.039-.687-.395v-7.49c0-.436.31-.968.687-1.184l6.525-3.744c.378-.218.687-.039.687.394zm-10.06%206.61c.38.217.688.75.688%201.183v7.493c0%20.436-.31.612-.687.395l-6.522-3.742c-.378-.218-.686-.75-.686-1.183v-7.494c0-.436.31-.612.686-.395z%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E", "favicon": "https://www.protocol.ai/safari-pinned-tab.svg", "ogImage": "https://protocol.ai/images/og-default.jpg", "logoHref": "/", "logoAlt": "Protocol Labs" }, "__llm_logo_reasoning": { "selectedIndex": 0, "reasoning": "Selected #0 because it is visible, located in the header, matches the brand name 'Protocol Labs', and links to the homepage.", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 1, "text": "Video", "reasoning": "Button #1 has a vibrant blue background (#156FF7), which is the brand color, making it stand out as the primary call-to-action." }, "secondary": { "index": 0, "text": "Join Us", "reasoning": "Button #0 has a transparent background, providing a clear contrast to the primary button's vibrant color, making it suitable as a secondary CTA." }, "confidence": 0.95 }, "personality": { "tone": "professional", "energy": "medium", "targetAudience": "tech professionals and developers" }, "designSystem": { "framework": "tailwind", "componentLibrary": "" }, "confidence": { "buttons": 0.95, "colors": 0.9, "overall": 0.925 }, "__llm_metadata": { "logoSelection": { "llmCalled": true, "llmSucceeded": true, "finalSource": "llm", "rawLogoSelection": { "selectedLogoIndex": 0, "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, matches the brand name 'Protocol Labs', and links to the homepage.", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```