{ "$schema": "https://design-tokens.github.io/community-group/format/", "$meta": { "name": "EVO Design System", "tagline": "EVO — Conectando o que Vem Depois", "domain": "evo.digital", "emailFormat": "nome.sobrenome@evo.digital", "subdomains": ["portal.evo.digital", "assine.evo.digital", "parceiros.evo.digital"], "version": "1.0.0-draft", "source": "EVO Brandbook (draft v2) — seções 3, 5, 6, 8, 9, 11, 15, 16", "layers": ["primitive", "semantic", "component"], "rule": "Componentes consomem tokens semânticos. Primitivos alimentam apenas os semânticos." }, "brand": { "navy": { "$value": "#081680", "$type": "color", "$description": "Legacy Navy — cor primária institucional" }, "cyan": { "$value": "#75BADE", "$type": "color", "$description": "Legacy Sky / EVO Cyan — acento de evolução e movimento" }, "gold": { "$value": "#DEB255", "$type": "color", "$description": "Legacy Gold — herança e valor, uso parcimonioso" }, "warmGray": { "$value": "#D5D1C8", "$type": "color", "$description": "Warm Gray — neutro de apoio" }, "steel": { "$value": "#5B5E63", "$type": "color", "$description": "Steel — técnico, infraestrutura" }, "coral": { "$value": "#EB6964", "$type": "color", "$description": "Coral — calor humano, expansão B2C" }, "aqua": { "$value": "#5DCAC5", "$type": "color", "$description": "Aqua — frescor e disponibilidade" }, "cream": { "$value": "#F1EDE5", "$type": "color", "$description": "Cream — base clara acolhedora" }, "white": { "$value": "#FFFFFF", "$type": "color" } }, "palette": { "navy": { "50":"#EEF1FB","100":"#D9DFF6","200":"#B0BCEC","300":"#7F90DE","400":"#4C5FC4","500":"#2233A5","600":"#081680","700":"#071269","800":"#050D4C","900":"#030830" }, "cyan": { "50":"#F0F9FD","100":"#DCF0FA","200":"#B9E1F4","300":"#94CFEB","400":"#75BADE","500":"#4B9FC9","600":"#2F80A9","700":"#226384","800":"#1A4A62","900":"#123342" }, "aqua": { "50":"#EFFAF9","100":"#D7F4F2","200":"#AEE9E6","300":"#83DCD8","400":"#5DCAC5","500":"#3AABA6","600":"#268A86","700":"#1E6D6A","800":"#185452","900":"#113B39" }, "gold": { "50":"#FDF7EC","100":"#FAEDD3","200":"#F3D9A5","300":"#EAC578","400":"#DEB255","500":"#C4963B","600":"#A0782C","700":"#7C5D23","800":"#5E461C","900":"#3F2F13" }, "coral": { "50":"#FEF1F0","100":"#FDDEDC","200":"#FABDB9","300":"#F49792","400":"#EB6964","500":"#D14742","600":"#AE332F","700":"#8A2724","800":"#6A1E1C","900":"#491413" }, "neutral": { "0":"#FFFFFF","25":"#FBFAF8","50":"#F1EDE5","100":"#E8E4DB","200":"#D5D1C8","300":"#B8B4AB","400":"#94918A","500":"#74777B","600":"#5B5E63","700":"#44474B","800":"#2E3134","900":"#1B1D20","950":"#0E1013" }, "ink": { "canvas":"#060A1E","surface":"#0C1230","raised":"#141B41","border":"#242C5C","fg":"#F4F6FD","fgMuted":"#A9B2D6" } }, "proportion": { "$description": "Proporção cromática sugerida pelo brandbook (§3)", "lightBase": { "$value": 60, "$unit": "%", "colors": ["brand.cream", "brand.white"] }, "institutionalBlues": { "$value": 25, "$unit": "%", "colors": ["brand.navy", "brand.cyan"] }, "supportNeutrals": { "$value": 10, "$unit": "%", "colors": ["brand.warmGray", "brand.steel"] }, "accents": { "$value": 5, "$unit": "%", "colors": ["brand.gold", "brand.coral", "brand.aqua"] } }, "combinations": [ { "name": "Navy + White + Cyan", "use": "Institucional, corporativo, B2B", "colors": ["#081680", "#FFFFFF", "#75BADE"] }, { "name": "Navy + Cream + Gold", "use": "Herança, documentos, governo", "colors": ["#081680", "#F1EDE5", "#DEB255"] }, { "name": "Steel + White + Aqua", "use": "Técnico, operações, wholesale", "colors": ["#5B5E63", "#FFFFFF", "#5DCAC5"] }, { "name": "Navy + Warm Gray + Coral","use": "Humano, residencial, campanha", "colors": ["#081680", "#D5D1C8", "#EB6964"] } ], "semantic": { "light": { "bg": { "canvas":"{palette.neutral.25}","surface":"{palette.neutral.0}","raised":"{palette.neutral.0}","sunken":"{palette.neutral.50}","subtle":"{palette.neutral.50}","inverse":"{palette.navy.600}","brandSubtle":"{palette.navy.50}","accentSubtle":"{palette.cyan.50}" }, "fg": { "default":"{palette.navy.900}","muted":"{palette.neutral.600}","subtle":"{palette.neutral.400}","brand":"{palette.navy.600}","accent":"{palette.cyan.600}","inverse":"{palette.neutral.0}","onBrand":"{palette.neutral.0}" }, "border": { "subtle":"{palette.neutral.100}","default":"{palette.neutral.200}","strong":"{palette.neutral.300}","brand":"{palette.navy.600}" }, "action": { "primary": { "bg":"{palette.navy.600}","bgHover":"{palette.navy.700}","bgActive":"{palette.navy.800}","fg":"{palette.neutral.0}" }, "secondary": { "bg":"transparent","border":"{palette.navy.600}","fg":"{palette.navy.600}","bgHover":"{palette.navy.50}" }, "tertiary": { "fg":"{palette.navy.600}","bgHover":"{palette.navy.50}" }, "disabled": { "bg":"{palette.neutral.100}","fg":"{palette.neutral.400}" } }, "feedback": { "info": { "fg":"{palette.cyan.700}","bg":"{palette.cyan.50}","border":"{palette.cyan.200}" }, "success": { "fg":"{palette.aqua.700}","bg":"{palette.aqua.50}","border":"{palette.aqua.200}" }, "warning": { "fg":"{palette.gold.700}","bg":"{palette.gold.50}","border":"{palette.gold.200}" }, "danger": { "fg":"{palette.coral.700}","bg":"{palette.coral.50}","border":"{palette.coral.200}" } }, "focusRing": "{palette.cyan.500}" }, "dark": { "bg": { "canvas":"{palette.ink.canvas}","surface":"{palette.ink.surface}","raised":"{palette.ink.raised}","sunken":"#04081A","subtle":"{palette.ink.raised}","inverse":"{palette.neutral.0}","brandSubtle":"rgba(117,186,222,0.10)","accentSubtle":"rgba(117,186,222,0.14)" }, "fg": { "default":"{palette.ink.fg}","muted":"{palette.ink.fgMuted}","subtle":"#7C86AF","brand":"{palette.cyan.300}","accent":"{palette.cyan.300}","inverse":"{palette.navy.900}","onBrand":"{palette.navy.900}" }, "border": { "subtle":"rgba(255,255,255,0.08)","default":"{palette.ink.border}","strong":"#38427A","brand":"{palette.cyan.400}" }, "action": { "primary": { "bg":"{palette.cyan.300}","bgHover":"{palette.cyan.200}","bgActive":"{palette.cyan.400}","fg":"{palette.navy.900}" }, "secondary": { "bg":"transparent","border":"{palette.cyan.300}","fg":"{palette.cyan.300}","bgHover":"rgba(117,186,222,0.12)" }, "tertiary": { "fg":"{palette.cyan.300}","bgHover":"rgba(117,186,222,0.12)" }, "disabled": { "bg":"rgba(255,255,255,0.08)","fg":"#6A739C" } }, "feedback": { "info": { "fg":"{palette.cyan.200}","bg":"rgba(117,186,222,0.12)","border":"rgba(117,186,222,0.32)" }, "success": { "fg":"{palette.aqua.200}","bg":"rgba(93,202,197,0.12)","border":"rgba(93,202,197,0.32)" }, "warning": { "fg":"{palette.gold.200}","bg":"rgba(222,178,85,0.14)","border":"rgba(222,178,85,0.34)" }, "danger": { "fg":"{palette.coral.200}","bg":"rgba(235,105,100,0.14)","border":"rgba(235,105,100,0.34)" } }, "focusRing": "{palette.cyan.300}" } }, "dataviz": { "categorical": ["{palette.navy.500}","{palette.aqua.400}","{palette.cyan.400}","{palette.gold.400}","{palette.coral.400}","{palette.navy.800}","{brand.steel}"], "sequentialNavy": ["{palette.navy.100}","{palette.navy.300}","{palette.navy.500}","{palette.navy.700}","{palette.navy.900}"], "diverging": ["{palette.coral.400}","{palette.coral.200}","{palette.neutral.100}","{palette.aqua.200}","{palette.aqua.500}"], "grid": "{palette.neutral.100}", "axis": "{palette.neutral.400}", "rule": "Máximo 5 séries por gráfico. Acima disso, agrupe em 'Outros'." }, "typography": { "family": { "display": { "$value": "Figtree", "fallback": "Segoe UI, system-ui, sans-serif", "weights": [400,500,600,700,800], "license": "SIL OFL 1.1", "status": "oficial, aprovada em julho de 2026" }, "text": { "$value": "Figtree", "fallback": "Segoe UI, system-ui, sans-serif", "weights": [400,500,600,700] }, "mono": { "$value": "JetBrains Mono", "fallback": "ui-monospace, monospace", "weights": [400,500,700], "license": "Apache 2.0", "status": "oficial, aprovada em julho de 2026" } }, "scale": { "displayXl": { "size": "64px", "lineHeight": 1.02, "weight": 700, "tracking": "-0.022em", "use": "Capa institucional, hero" }, "displayLg": { "size": "52px", "lineHeight": 1.05, "weight": 700, "tracking": "-0.022em", "use": "Abertura de seção" }, "displayMd": { "size": "42px", "lineHeight": 1.08, "weight": 700, "tracking": "-0.018em", "use": "Título de página" }, "h1": { "size": "34px", "lineHeight": 1.15, "weight": 700, "tracking": "-0.014em" }, "h2": { "size": "28px", "lineHeight": 1.20, "weight": 700, "tracking": "-0.014em" }, "h3": { "size": "23px", "lineHeight": 1.25, "weight": 600, "tracking": "-0.010em" }, "h4": { "size": "19px", "lineHeight": 1.35, "weight": 600, "tracking": "-0.006em" }, "bodyLg": { "size": "18px", "lineHeight": 1.60, "weight": 400 }, "body": { "size": "16px", "lineHeight": 1.60, "weight": 400 }, "bodySm": { "size": "14px", "lineHeight": 1.55, "weight": 400 }, "caption": { "size": "13px", "lineHeight": 1.45, "weight": 400 }, "overline": { "size": "12px", "lineHeight": 1.20, "weight": 600, "tracking": "0.08em", "transform": "uppercase" }, "mono": { "size": "13px", "lineHeight": 1.50, "weight": 400 } }, "measure": { "short": "44ch", "default": "68ch", "long": "78ch" }, "minimums": { "print": "12pt", "slide1920": "24px", "ui": "14px" } }, "space": { "0":"0","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","8":"32px","10":"40px","12":"48px","16":"64px","20":"80px","24":"96px","32":"128px" }, "grid": { "columns": 12, "gutter": "24px", "margin": { "sm": "16px", "md": "32px", "lg": "48px" }, "maxContent": "1280px", "maxProse": "720px", "breakpoints": { "sm":"480px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1600px" } }, "radius": { "xs":"4px","sm":"8px","md":"12px","lg":"16px","xl":"20px","2xl":"28px","pill":"999px" }, "elevation": { "1": "0 1px 2px rgba(8,22,128,.06), 0 1px 3px rgba(8,22,128,.04)", "2": "0 2px 4px rgba(8,22,128,.05), 0 6px 16px -4px rgba(8,22,128,.08)", "3": "0 4px 8px rgba(8,22,128,.05), 0 16px 32px -8px rgba(8,22,128,.10)", "4": "0 8px 16px rgba(8,22,128,.07), 0 32px 64px -12px rgba(8,22,128,.14)", "focus": "0 0 0 3px rgba(75,159,201,.45)" }, "motion": { "duration": { "instant":"90ms","fast":"140ms","normal":"200ms","slow":"320ms","deliberate":"480ms" }, "easing": { "standard":"cubic-bezier(.4,0,.2,1)","out":"cubic-bezier(.2,.8,.2,1)","in":"cubic-bezier(.4,0,1,1)" } }, "accessibility": { "targetMin": "44px", "focusRingWidth": "3px", "focusRingOffset": "2px", "contrast": { "bodyText": 4.5, "largeText": 3.0, "uiComponent": 3.0, "institutionalMode": 7.0 }, "notes": [ "Cyan #75BADE e Aqua #5DCAC5 NÃO passam 4.5:1 sobre branco — use apenas em texto grande, ícones decorativos ou fundos.", "Gold #DEB255 nunca como texto sobre branco. Use gold.600 ou superior.", "No modo institutional (Governo · B2G) o alvo de contraste é 7:1 para texto corrido." ] }, "component": { "button": { "height": { "sm":"36px","md":"44px","lg":"52px" }, "paddingX":"20px", "radius":"{radius.pill}", "font":"600 15px/1 Figtree" }, "field": { "height":"44px","radius":"{radius.sm}","borderWidth":"1px","focusRingWidth":"3px" }, "card": { "radius":"{radius.lg}","padding":"24px","shadow":"{elevation.1}","shadowHover":"{elevation.3}" }, "table": { "rowHeight":"48px","rowHeightDense":"36px","headerBg":"{semantic.light.bg.sunken}" }, "nav": { "height":"72px","blur":"12px" } }, "expressionModes": { "core": { "market": "todos", "accent": "{palette.cyan.600}", "radius": "{radius.lg}", "description": "Núcleo inegociável: logo, tipografia, tokens, grid, acessibilidade, componentes funcionais." }, "expressive": { "market": "Para Você (B2C)", "accent": "{palette.coral.500}", "radius": "20px", "canvas": "{brand.cream}", "description": "Mais humano, quente e vibrante. Coral, Aqua, Gold e Cream em maior presença." }, "business": { "market": "Para Empresas (B2S) + Corporate (B2B)", "accent": "{palette.cyan.600}", "radius": "{radius.md}", "description": "Base clara, Navy e Cyan institucionais, maior densidade de informação." }, "institutional": { "market": "Governo (B2G)", "accent": "{palette.navy.600}", "radius": "{radius.sm}", "description": "Formal, previsível, contraste reforçado, poucos elementos decorativos." }, "infrastructure": { "market": "Operadoras, ISPs e OTTs (B2W)", "accent": "{palette.cyan.500}", "radius": "{radius.xs}", "description": "Técnico e denso: Steel, Navy, Cyan e White; dados, mapas e topologias." } }, "assets": { "logo": { "primary": { "$value": "assets/logo/evo-logo-primary.svg", "use": "padrão sobre fundo claro" }, "monoNavy": { "$value": "assets/logo/evo-logo-mono-navy.svg", "use": "uma cor, impressão, gravação" }, "white": { "$value": "assets/logo/evo-logo-white.svg", "use": "negativo sobre Navy, Steel ou foto escura" }, "symbol": { "$value": "assets/logo/evo-symbol.svg", "use": "favicon, app icon, avatar (mín. 24px)" }, "symbolNavy": { "$value": "assets/logo/evo-symbol-navy.svg", "use": "símbolo em uma cor" }, "symbolWhite": { "$value": "assets/logo/evo-symbol-white.svg", "use": "símbolo negativo" } }, "formats": { "svg": { "use": "primeira escolha em qualquer meio digital ou vetorial" }, "png": { "sizes": [512, 1024, 2048], "symbolSizes": [32, 64, 180, 512, 1024], "use": "fundo transparente; apresentação, documento, ícone" }, "ico": { "$value": "assets/logo/favicon.ico", "sizes": [16, 32, 48] }, "webp": { "use": "web otimizada" }, "jpg": { "$value": "assets/logo/evo-logo-primary-2048-fundo-branco.jpg", "use": "sistemas que não aceitam transparência" } }, "readme": "assets/logo/LEIA-ME.txt", "note": "SVGs normalizados para a paleta oficial: os originais vinham com #031687 (navy) e #4AC0DF (cyan).", "minSize": { "logoDigital": "96px", "symbolDigital": "24px", "logoPrint": "22mm", "symbolPrint": "7mm", "symbolPhysicalContour": "400mm" } }, "iconography": { "grid": "24px", "strokeWidth": "1.75px", "cap": "round", "join": "round", "colorRule": "Uma cor sólida ou gradiente Navy→Cyan sutil. Nunca multicolorido.", "set": ["Pessoas","Presença","Movimento","Conexão","Propósito","Segurança","Crescimento","Integração","Tecnologia","Futuro","Mobilidade","Dados"] }, "graphics": { "families": [ { "name": "Ondas fluidas", "use": "fundos e aberturas", "maxOpacity": 0.35 }, { "name": "Topografias leves", "use": "textura e profundidade", "maxOpacity": 0.20 }, { "name": "Órbitas e trajetórias","use": "evolução e conexão", "maxOpacity": 0.60 }, { "name": "Silhuetas e cenários", "use": "referência territorial, com moderação", "maxOpacity": 0.25 } ], "rules": [ "Sempre como apoio, nunca competindo com o conteúdo.", "Preferir baixa opacidade em fundos.", "Usar acentos coral, gold e aqua com parcimônia.", "Manter consistência de espessura e suavidade.", "Priorizar composições leves e respiráveis." ] } }