{"schemaVersion":"1.0","kind":"composio-brand-page","generatedAt":"2026-06-15T20:36:03.308Z","page":{"path":"/colors","url":"https://brand.composio.dev/colors","agentJsonPath":"/colors/agent.json","agentJsonUrl":"https://brand.composio.dev/colors/agent.json","title":"Colors","description":"The Composio adaptive color system — surfaces, brand, semantic, persona accents, and the expressive gradient palette.","category":"base"},"agent":{"crawlHint":"This endpoint is intentionally machine-readable. Use data for tokens/specs and assets/endpoints for downloadable resources.","notes":["The brand is adaptive: sky blue (#51a2ff) on light/for-you, deep blue (#0007cd) on dark/dev.","Semantic colors carry literal meaning — never use them as a generic accent.","Persona accents are specialty and sit outside the brand.","Gradients are for expressive, broad-brand moments — covers, hero art, social. The Core Gradient is the default."]},"data":{"colors":[{"name":"Brand","hex":"#51a2ff","darkHex":"#0007cd","usage":"Primary brand accent — adaptive (sky blue on light, deep blue on dark)"},{"name":"Brand Hover","hex":"#3590f5","darkHex":"#0009f0","usage":"Brand hover state"},{"name":"Brand Active","hex":"#1f7ee8","darkHex":"#0005a8","usage":"Brand pressed/active state"},{"name":"Background","hex":"#f6f6f6","darkHex":"#0f0f0f","usage":"Page background — off-white / warm near-black (never pure)"},{"name":"Card","hex":"#ffffff","darkHex":"#1e1e1e","usage":"Card and code surface"},{"name":"Popover","hex":"#fafafa","darkHex":"#2a2a2a","usage":"Popover / overlay surface"},{"name":"Foreground","hex":"#0f0f0f","darkHex":"#ffffff","usage":"Primary text"},{"name":"Border","hex":"#eaeaea","darkHex":"#2c2c2c","usage":"Hairline borders"}],"semanticColors":[{"name":"Destructive","hex":"oklch(0.577 0.215 27.3)","darkHex":"oklch(0.637 0.208 25.3)","usage":"Errors, destructive actions"},{"name":"Success","hex":"oklch(0.546 0.16 155.8)","darkHex":"oklch(0.648 0.17 155.8)","usage":"Success, confirmation"},{"name":"Warning","hex":"oklch(0.666 0.16 75)","darkHex":"oklch(0.758 0.163 75)","usage":"Warnings, caution"}],"personaAccents":[{"name":"Orange","hex":"#FF8C42","usage":"Persona accent"},{"name":"Green","hex":"#10B981","usage":"Persona accent"},{"name":"Silver","hex":"#A0A0A0","usage":"Persona accent"},{"name":"Purple","hex":"#C7A2FF","usage":"Persona accent"},{"name":"Brand Blue","hex":"#51a2ff","usage":"Persona accent (brand)"}],"gradients":[{"name":"Core Gradient","css":"linear-gradient(135deg, #FDFFC2, #00FFFF, #0089FF)"},{"name":"Deep Blue","css":"linear-gradient(135deg, #02056A, #0007CD)"},{"name":"Blue to Cyan","css":"linear-gradient(135deg, #0007CD, #00FFFF)"},{"name":"Mint to Cyan","css":"linear-gradient(135deg, #3FFFDD, #00FFFF)"},{"name":"Warm Spectrum","css":"linear-gradient(135deg, #FDFFC2, #FFA6AC)"},{"name":"Full Spectrum","css":"linear-gradient(135deg, #02056A, #0007CD, #95A5FD, #3FFFDD, #00FFFF, #FDFFC2, #FFA6AC)"}]},"assets":[],"endpoints":[],"index":{"rootAgentJsonPath":"/agent.json","rootAgentJsonUrl":"https://brand.composio.dev/agent.json","llmsTxtPath":"/llms.txt","llmsTxtUrl":"https://brand.composio.dev/llms.txt"}}