@metropolle/design-system
Version:
Sistema de design unificado para a plataforma Metropolle
372 lines • 10.7 kB
JSON
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Metropolle Color Tokens",
"description": "Tokens de cores baseados na identidade visual Metropolle (Meridian)",
"color": {
"meridian": {
"description": "Paleta Meridian (flat/zero-borda/monocromatico). LIGHT como default; DARK em color.meridian.dark aplicado via html[data-theme=dark]. Fonte: prototype-28-meridian-design-system.html",
"bg": {
"value": "#FCFCFD",
"type": "color",
"description": "Fundo da aplicacao (light)"
},
"panel": {
"value": "#FFFFFF",
"type": "color",
"description": "Painel/superficie solida (light)"
},
"glass": {
"value": "#FFFFFF",
"type": "color",
"description": "Superficie de card (ex-glass, agora solido branco) (light)"
},
"glass2": {
"value": "#FFFFFF",
"type": "color",
"description": "Superficie secundaria de card (light)"
},
"field": {
"value": "#F1F2F5",
"type": "color",
"description": "Superficie de campo/input (recuo por cor, sem borda) (light)"
},
"ink": {
"value": "#17171C",
"type": "color",
"description": "Tinta principal / texto (light)"
},
"ink-dim": {
"value": "rgba(0,0,0,.58)",
"type": "color",
"description": "Tinta secundaria (light)"
},
"ink-faint": {
"value": "rgba(0,0,0,.40)",
"type": "color",
"description": "Tinta esmaecida (light)"
},
"ink-rgb": {
"value": "23,23,28",
"type": "color",
"description": "Componentes RGB da tinta para rgba(var(--ink-rgb), a)) (light)"
},
"accent": {
"value": "#17171C",
"type": "color",
"description": "Accent monocromatico (light)"
},
"accent-2": {
"value": "#3A3A42",
"type": "color",
"description": "Accent secundario (light)"
},
"accent-soft": {
"value": "rgba(0,0,0,.05)",
"type": "color",
"description": "Accent suave / hover fill (light)"
},
"on-accent": {
"value": "#FFFFFF",
"type": "color",
"description": "Tinta sobre superficie accent (light)"
},
"stroke": {
"value": "rgba(0,0,0,.12)",
"type": "color",
"description": "Stroke sutil (divisorias, nao bordas de card) (light)"
},
"stroke-2": {
"value": "rgba(0,0,0,.18)",
"type": "color",
"description": "Stroke mais forte (light)"
},
"ok": {
"value": "#1a7f4b",
"type": "color",
"description": "Data color: sucesso"
},
"info": {
"value": "#2563eb",
"type": "color",
"description": "Data color: info"
},
"warn": {
"value": "#9a6b00",
"type": "color",
"description": "Data color: aviso"
},
"bad": {
"value": "#b42318",
"type": "color",
"description": "Data color: erro"
},
"gold": {
"value": "#f5a623",
"type": "color",
"description": "Data color: tier gold / premium (light)"
},
"dark": {
"description": "Overrides Meridian DARK aplicados em html[data-theme=dark]",
"bg": {
"value": "#0B0B0D",
"type": "color",
"description": "Fundo da aplicacao (dark)"
},
"panel": {
"value": "#161619",
"type": "color",
"description": "Painel/superficie solida (dark)"
},
"glass": {
"value": "#1C1C20",
"type": "color",
"description": "Superficie de card (dark)"
},
"glass2": {
"value": "#161619",
"type": "color",
"description": "Superficie secundaria de card (dark)"
},
"field": {
"value": "#202024",
"type": "color",
"description": "Superficie de campo/input (dark)"
},
"ink": {
"value": "#F2F0EC",
"type": "color",
"description": "Tinta principal / texto (dark)"
},
"ink-dim": {
"value": "rgba(255,255,255,.60)",
"type": "color",
"description": "Tinta secundaria (dark)"
},
"ink-faint": {
"value": "rgba(255,255,255,.42)",
"type": "color",
"description": "Tinta esmaecida (dark)"
},
"ink-rgb": {
"value": "242,240,236",
"type": "color",
"description": "Componentes RGB da tinta (dark)"
},
"accent": {
"value": "#F2F0EC",
"type": "color",
"description": "Accent monocromatico (dark)"
},
"accent-2": {
"value": "#C8C8CC",
"type": "color",
"description": "Accent secundario (dark)"
},
"accent-soft": {
"value": "rgba(255,255,255,.07)",
"type": "color",
"description": "Accent suave / hover fill (dark)"
},
"on-accent": {
"value": "#0B0B0D",
"type": "color",
"description": "Tinta sobre superficie accent (dark)"
},
"stroke": {
"value": "rgba(255,255,255,.12)",
"type": "color",
"description": "Stroke sutil (dark)"
},
"stroke-2": {
"value": "rgba(255,255,255,.20)",
"type": "color",
"description": "Stroke mais forte (dark)"
},
"gold": {
"value": "#fbbf24",
"type": "color",
"description": "Data color: tier gold / premium (dark)"
}
}
},
"brand": {
"primary": {
"default": {
"value": "#0055FF",
"type": "color",
"description": "Cor primaria da marca Metropolle"
},
"hover": {
"value": "#0044CC",
"type": "color",
"description": "Primary no estado hover"
},
"active": {
"value": "#003399",
"type": "color",
"description": "Primary no estado active/pressed"
},
"disabled": {
"value": "#80AAFF",
"type": "color",
"description": "Primary no estado disabled"
}
},
"secondary": {
"default": {
"value": "#FF9900",
"type": "color",
"description": "Cor secundaria complementar"
},
"hover": {
"value": "#E68A00",
"type": "color",
"description": "Secondary no estado hover"
},
"active": {
"value": "#CC7A00",
"type": "color",
"description": "Secondary no estado active/pressed"
},
"disabled": {
"value": "#FFCC80",
"type": "color",
"description": "Secondary no estado disabled"
}
},
"neutral": {
"value": "#333333",
"type": "color",
"description": "Cor neutra para textos"
}
},
"semantic": {
"success": {
"default": {
"value": "#1a7f4b",
"type": "color",
"description": "Verde para estados de sucesso (Meridian --ok)"
},
"light": {
"value": "#D1FAE5",
"type": "color",
"description": "Success light para backgrounds"
},
"dark": {
"value": "#065F46",
"type": "color",
"description": "Success dark para texto em fundo claro"
}
},
"warning": {
"default": {
"value": "#9a6b00",
"type": "color",
"description": "Amarelo para avisos (Meridian --warn)"
},
"light": {
"value": "#FEF3C7",
"type": "color",
"description": "Warning light para backgrounds"
},
"dark": {
"value": "#92400E",
"type": "color",
"description": "Warning dark para texto em fundo claro"
}
},
"error": {
"default": {
"value": "#b42318",
"type": "color",
"description": "Vermelho para erros (Meridian --bad)"
},
"light": {
"value": "#FEE2E2",
"type": "color",
"description": "Error light para backgrounds"
},
"dark": {
"value": "#991B1B",
"type": "color",
"description": "Error dark para texto em fundo claro"
}
},
"info": {
"default": {
"value": "#2563eb",
"type": "color",
"description": "Azul para informacoes (Meridian --info)"
},
"light": {
"value": "#DBEAFE",
"type": "color",
"description": "Info light para backgrounds"
},
"dark": {
"value": "#1E40AF",
"type": "color",
"description": "Info dark para texto em fundo claro"
}
}
},
"background": {
"primary": {
"value": "#FCFCFD",
"type": "color",
"description": "Fundo principal (Meridian --bg light; ex-gradiente liquid-glass)"
},
"secondary": {
"value": "rgba(0, 0, 0, 0.05)",
"type": "color",
"description": "Background secundário (Meridian --accent-soft light)"
},
"glass": {
"light": {
"value": "#FFFFFF",
"type": "color",
"description": "Superficie de card claro (Meridian --glass, agora solido)"
},
"dark": {
"value": "#1C1C20",
"type": "color",
"description": "Superficie de card escuro (Meridian --glass dark)"
}
}
},
"text": {
"primary": {
"value": "#17171C",
"type": "color",
"description": "Texto principal (Meridian --ink light)"
},
"secondary": {
"value": "rgba(0, 0, 0, 0.58)",
"type": "color",
"description": "Texto secundário (Meridian --ink-dim light)"
},
"muted": {
"value": "rgba(0, 0, 0, 0.40)",
"type": "color",
"description": "Texto esmaecido (Meridian --ink-faint light)"
}
},
"border": {
"light": {
"value": "rgba(0, 0, 0, 0.12)",
"type": "color",
"description": "Stroke sutil (Meridian --stroke light)"
},
"medium": {
"value": "rgba(0, 0, 0, 0.18)",
"type": "color",
"description": "Stroke médio (Meridian --stroke-2 light)"
},
"strong": {
"value": "rgba(0, 0, 0, 0.30)",
"type": "color",
"description": "Stroke forte (Meridian)"
}
}
}
}