# Cofactr Brand Identity A complete profile of **Cofactr**'s visual system — colors, typography, components, and personality — extracted from https://www.cofactr.com/. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/cofactr - Machine-readable JSON: https://characterquilt.com/branding/cofactr.json - Per-page llms.txt: https://characterquilt.com/branding/cofactr/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #38D059 | | Accent | #38D059 | | Body Font | Inter | | Heading Font | Inter | ## Color Palette - primary: #38D059 - secondary: #59A986 - accent: #38D059 - background: #FFFFFF - textPrimary: #183028 - link: #183028 ## Typography - primary: Inter — https://fonts.google.com/specimen/Inter - heading: Inter — https://fonts.google.com/specimen/Inter ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2060%2015%22%20class%3D%22w-15%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.959%2014.204C2.149%2014.204%200%2012.054%200%209.242c0-2.81%202.149-4.96%204.959-4.96%201.818%200%203.388.909%204.132%202.314l-1.818.993c-.414-.744-1.24-1.24-2.314-1.24-1.653%200-2.81%201.24-2.81%202.893%200%201.654%201.24%202.894%202.81%202.894%201.074%200%201.983-.496%202.479-1.405l1.9.91c-.743%201.57-2.396%202.563-4.38%202.563ZM36.19%204.45v9.695h-2.157V12.46c-.663%201.18-1.824%201.94-3.4%201.94-2.57%200-4.56-2.277-4.56-5.06%200-2.781%201.99-5.058%204.56-5.058%201.493%200%202.654.675%203.4%201.94V4.533h2.156V4.45Zm-2.24%204.805c0-1.686-1.244-2.95-2.902-2.95-1.659%200-2.903%201.349-2.903%202.95%200%201.687%201.327%202.951%202.903%202.951%201.658%200%202.902-1.264%202.902-2.95ZM41.923%2014.204c-2.81%200-4.958-2.15-4.958-4.962%200-2.81%202.149-4.96%204.958-4.96%201.819%200%203.389.909%204.133%202.314l-1.819.993c-.413-.744-1.24-1.24-2.314-1.24-1.652%200-2.81%201.24-2.81%202.893%200%201.654%201.24%202.894%202.81%202.894%201.075%200%201.984-.496%202.48-1.405l1.9.91c-.743%201.57-2.396%202.563-4.38%202.563ZM19.456%209.242c0%202.812-2.15%204.962-4.962%204.962-2.811%200-4.96-2.15-4.96-4.962%200-2.81%202.149-4.96%204.96-4.96%202.729%200%204.962%202.15%204.962%204.96Zm-7.773%200c0%201.654%201.24%202.894%202.811%202.894s2.812-1.24%202.812-2.894c0-1.653-1.24-2.894-2.812-2.894-1.57.083-2.81%201.323-2.81%202.894ZM23.406%203.79c0-1.07.74-1.73%201.729-1.73h.74V.247C25.628.082%2025.217%200%2024.805%200c-2.057%200-3.54%201.318-3.54%203.626v.824h-1.81v2.142h1.81v7.416h2.141V6.592h2.47v-2.06h-2.47V3.79ZM52.918%2012.38v-.165h-.74c-.988%200-1.729-.663-1.729-1.74V6.584h2.47v-2.07h-2.47V1.945h-2.14v2.568h-1.811v2.07h1.81v3.893c0%202.318%201.483%203.726%203.54%203.726.33%200%20.741-.082%201.07-.165V12.38ZM59.533%206.36V4.364c-.247-.083-.577-.083-.907-.083-.908%200-1.981.665-2.394%201.58V4.448h-2.146v9.561h2.146V8.937c0-1.663%201.156-2.577%202.229-2.577h1.072Z%22%20style%3D%22fill%3A%20rgb(214%2C%20241%2C%20219)%20!important%3B%22%2F%3E%3C%2Fsvg%3E - Favicon: https://cdn.sanity.io/images/fdrwu6gi/production/0c4ac64a8a380f81b34c85eb56e8f2340fac954f-80x80.png?w=256&h=256 - Social card (og:image): https://cdn.sanity.io/images/fdrwu6gi/production/4ecf7716c98de655cbae16fedb06c8142e446975-600x592.jpg?w=1200&fm=webp ## UI Components - buttonPrimary: background=#38D059, textColor=#183028, borderColor=#DEE7E0, borderRadius=33554400px, shadow=none - buttonSecondary: background=#FFFFFF, textColor=#183028, borderColor=#E8E8E8, borderRadius=33554400px, shadow=none ## Brand Personality Tone: professional · Energy: medium · Audience: electronics industry professionals ## Cofactr Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **How Neros Technologies Scaled their Hardware Operations by 10X** - Image: https://cdn.prod.website-files.com/66a06d79a0ed258e01f0b0c6/698d05e995b42d3b9bf80b12_Neros%20Drone.jpg - Source: https://www.cofactr.com/case-studies/how-neros-technologies-scaled-their-hardware-operations-by-10x-with-cofactr - **Cofactr Resources | Cofactr | Full-Service Procurement Automation for Electronics** - Image: https://www.cofactr.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffdrwu6gi%2Fproduction%2Ff25c789483aa6741e11ccc4d15d1a343d94b2aa6-1444x1113.jpg%3Fw%3D1444%26h%3D1113%26fm%3Dwebp%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=3840&q=80 - Source: https://www.cofactr.com/resources - **How Neros Technologies Scaled their Hardware Operations by 10X** - Image: https://cdn.prod.website-files.com/66a06d79a0ed258e01f0b0c6/698d05ddff6badb2e1fe1fcf_Neros%20Marines.jpg - Source: https://www.cofactr.com/case-studies/how-neros-technologies-scaled-their-hardware-operations-by-10x-with-cofactr - **How Neros Technologies Scaled their Hardware Operations by 10X** - Image: https://cdn.prod.website-files.com/66a06d79a0ed258e01f0b0c6/698d05c93c7b675282dd4896_Neros%20and%20VP.jpg - Source: https://www.cofactr.com/case-studies/how-neros-technologies-scaled-their-hardware-operations-by-10x-with-cofactr - **Cofactr Resources | Cofactr | Full-Service Procurement Automation for Electronics** - Image: https://www.cofactr.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffdrwu6gi%2Fproduction%2Fed80c95760d420dfe9fd4fef33036c4da2c0cd53-1600x1600.png%3Fw%3D1600%26h%3D1600%26fm%3Dwebp%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=3840&q=80 - Source: https://www.cofactr.com/resources - **PNP vs Non-PNP Parts** - Image: https://assets.usepylon.com/a50e2741-9673-4358-9f0a-7ff281417958%2F1726177141885-Screenshot%252B2024-04-22%252Bat%252B3_05_43PM.png-9b1baf39-5457-41a3-80bb-84fa89b26f0a?Expires=253370764800&Signature=f72TesuEi6JB5APSwTkg9UW2aqHyPU1jl~~qTkdzup9nkXaqc2VlX2zT7oclMc9~XONK1p9YCH84WRISxg7hw4rN5G9ef7XWf5gYM~uFdQm8aiYUQk0Pjn9j3GPhaRmXnYvYisVLeyeeyuNzy9z~Rj8BFLSbIlw8kp9APzY6Z7~iENIr3r5nL1BUM3NrE4LJG8K1RHTI-VVERLW3mAeyQ4kxC~bnP8S47cKiP78QN~4sBLvNn5pv-aw9zaEE1QS73lIbVvL307arEB5aYaGqJcgcg-~B~t~qc2-YBx4XDe96QHp-EK2IngHmUqqERTPePxuTvZXDi3nZrS~r2XaQtA__&Key-Pair-Id=K3NV4LZ47N8M46 - Source: https://support.cofactr.com/articles/2196657076-pnp-vs-non-pnp-parts ## 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": "Inter", "role": "body" }, { "family": "fontAntiqueLegacy", "role": "unknown" } ], "colors": { "primary": "#38D059", "secondary": "#59A986", "accent": "#38D059", "background": "#FFFFFF", "textPrimary": "#183028", "link": "#183028" }, "typography": { "fontFamilies": { "primary": "Inter", "heading": "Inter" }, "fontStacks": { "heading": [ "fontAntiqueLegacy" ], "body": [ "Inter" ], "paragraph": [ "Inter" ] }, "fontSizes": { "h1": "48px", "h2": "48px", "body": "16px" } }, "spacing": { "baseUnit": 8, "borderRadius": "0px" }, "components": { "buttonPrimary": { "background": "#38D059", "textColor": "#183028", "borderColor": "#DEE7E0", "borderRadius": "33554400px", "borderRadiusCorners": { "topLeft": "33554400px", "topRight": "33554400px", "bottomRight": "33554400px", "bottomLeft": "33554400px" }, "shadow": "none" }, "buttonSecondary": { "background": "#FFFFFF", "textColor": "#183028", "borderColor": "#E8E8E8", "borderRadius": "33554400px", "borderRadiusCorners": { "topLeft": "33554400px", "topRight": "33554400px", "bottomRight": "33554400px", "bottomLeft": "33554400px" }, "shadow": "none" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2060%2015%22%20class%3D%22w-15%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.959%2014.204C2.149%2014.204%200%2012.054%200%209.242c0-2.81%202.149-4.96%204.959-4.96%201.818%200%203.388.909%204.132%202.314l-1.818.993c-.414-.744-1.24-1.24-2.314-1.24-1.653%200-2.81%201.24-2.81%202.893%200%201.654%201.24%202.894%202.81%202.894%201.074%200%201.983-.496%202.479-1.405l1.9.91c-.743%201.57-2.396%202.563-4.38%202.563ZM36.19%204.45v9.695h-2.157V12.46c-.663%201.18-1.824%201.94-3.4%201.94-2.57%200-4.56-2.277-4.56-5.06%200-2.781%201.99-5.058%204.56-5.058%201.493%200%202.654.675%203.4%201.94V4.533h2.156V4.45Zm-2.24%204.805c0-1.686-1.244-2.95-2.902-2.95-1.659%200-2.903%201.349-2.903%202.95%200%201.687%201.327%202.951%202.903%202.951%201.658%200%202.902-1.264%202.902-2.95ZM41.923%2014.204c-2.81%200-4.958-2.15-4.958-4.962%200-2.81%202.149-4.96%204.958-4.96%201.819%200%203.389.909%204.133%202.314l-1.819.993c-.413-.744-1.24-1.24-2.314-1.24-1.652%200-2.81%201.24-2.81%202.893%200%201.654%201.24%202.894%202.81%202.894%201.075%200%201.984-.496%202.48-1.405l1.9.91c-.743%201.57-2.396%202.563-4.38%202.563ZM19.456%209.242c0%202.812-2.15%204.962-4.962%204.962-2.811%200-4.96-2.15-4.96-4.962%200-2.81%202.149-4.96%204.96-4.96%202.729%200%204.962%202.15%204.962%204.96Zm-7.773%200c0%201.654%201.24%202.894%202.811%202.894s2.812-1.24%202.812-2.894c0-1.653-1.24-2.894-2.812-2.894-1.57.083-2.81%201.323-2.81%202.894ZM23.406%203.79c0-1.07.74-1.73%201.729-1.73h.74V.247C25.628.082%2025.217%200%2024.805%200c-2.057%200-3.54%201.318-3.54%203.626v.824h-1.81v2.142h1.81v7.416h2.141V6.592h2.47v-2.06h-2.47V3.79ZM52.918%2012.38v-.165h-.74c-.988%200-1.729-.663-1.729-1.74V6.584h2.47v-2.07h-2.47V1.945h-2.14v2.568h-1.811v2.07h1.81v3.893c0%202.318%201.483%203.726%203.54%203.726.33%200%20.741-.082%201.07-.165V12.38ZM59.533%206.36V4.364c-.247-.083-.577-.083-.907-.083-.908%200-1.981.665-2.394%201.58V4.448h-2.146v9.561h2.146V8.937c0-1.663%201.156-2.577%202.229-2.577h1.072Z%22%20style%3D%22fill%3A%20rgb(214%2C%20241%2C%20219)%20!important%3B%22%2F%3E%3C%2Fsvg%3E", "favicon": "https://cdn.sanity.io/images/fdrwu6gi/production/0c4ac64a8a380f81b34c85eb56e8f2340fac954f-80x80.png?w=256&h=256", "ogImage": "https://cdn.sanity.io/images/fdrwu6gi/production/4ecf7716c98de655cbae16fedb06c8142e446975-600x592.jpg?w=1200&fm=webp", "logoHref": "/" }, "__llm_logo_reasoning": { "selectedIndex": 1, "reasoning": "Selected #1 because it is visible, located in the header, links to the homepage, and matches the brand inferred from the URL and page title.", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 0, "text": "Get Started", "reasoning": "Button #0 with text 'Get Started' uses the vibrant brand color #38D059, making it the primary CTA due to its action-oriented text and prominent color." }, "secondary": { "index": 3, "text": "Book a Demo", "reasoning": "Button #3 with text 'Book a Demo' has a different background color (#FFFFFF) and serves as a secondary action, complementing the primary CTA." }, "confidence": 0.95 }, "personality": { "tone": "professional", "energy": "medium", "targetAudience": "electronics industry professionals" }, "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": 1, "selectedLogoReasoning": "Selected #1 because it is visible, located in the header, links to the homepage, and matches the brand inferred from the URL and page title.", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```