@metropolle/design-system

{ "colors": { "$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)" } } } }, "typography": { "$schema": "http://json-schema.org/draft-07/schema#", "title": "Metropolle Typography Tokens", "description": "Tokens de tipografia baseados na identidade Helvetica da Metropolle", "typography": { "fontFamily": { "brand": { "value": "'Helvetica Neue', Helvetica, Arial, sans-serif", "type": "fontFamily", "description": "Meridian --sans: stack principal da marca (Helvetica Neue)" }, "sans": { "value": "'Helvetica Neue', Helvetica, Arial, sans-serif", "type": "fontFamily", "description": "Meridian --sans: stack principal (alias canonico de brand)" }, "aux": { "value": "'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "type": "fontFamily", "description": "Meridian --aux: stack auxiliar (DM Sans) para nav/UI" }, "mono": { "value": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace", "type": "fontFamily", "description": "Meridian --mono: monospace (JetBrains Mono)" }, "ocr": { "value": "'OCR-B', 'OCR B Std', monospace", "type": "fontFamily", "description": "Meridian --ocr: stack OCR-B para credenciais/numeros" } }, "fontSize": { "xs": { "value": "0.75rem", "type": "fontSize", "description": "12px - Texto muito pequeno" }, "sm": { "value": "0.875rem", "type": "fontSize", "description": "14px - Texto pequeno" }, "base": { "value": "1rem", "type": "fontSize", "description": "16px - Texto base" }, "lg": { "value": "1.125rem", "type": "fontSize", "description": "18px - Texto grande" }, "xl": { "value": "1.25rem", "type": "fontSize", "description": "20px - Texto extra grande" }, "2xl": { "value": "1.5rem", "type": "fontSize", "description": "24px - Heading pequeno" }, "3xl": { "value": "1.875rem", "type": "fontSize", "description": "30px - Heading médio" }, "4xl": { "value": "2.125rem", "type": "fontSize", "description": "34px - Logo brand (mobile: 28.8px)" } }, "lineHeight": { "tight": { "value": "1.2", "type": "lineHeight", "description": "Line height apertado para headings" }, "normal": { "value": "1.5", "type": "lineHeight", "description": "Line height normal para texto" }, "relaxed": { "value": "1.75", "type": "lineHeight", "description": "Line height relaxado para leitura" } }, "letterSpacing": { "brand": { "value": "-0.05rem", "type": "letterSpacing", "description": "Letter spacing da marca (desktop)" }, "tight": { "value": "-0.03rem", "type": "letterSpacing", "description": "Letter spacing apertado (mobile)" }, "normal": { "value": "0", "type": "letterSpacing", "description": "Letter spacing normal" }, "wide": { "value": "0.025rem", "type": "letterSpacing", "description": "Letter spacing amplo" } }, "fontWeight": { "light": { "value": "300", "type": "fontWeight", "description": "Peso leve" }, "normal": { "value": "400", "type": "fontWeight", "description": "Peso normal" }, "medium": { "value": "500", "type": "fontWeight", "description": "Peso médio" }, "semibold": { "value": "600", "type": "fontWeight", "description": "Peso semi-bold" }, "bold": { "value": "700", "type": "fontWeight", "description": "Peso bold" } } } }, "spacing": { "$schema": "http://json-schema.org/draft-07/schema#", "title": "Metropolle Spacing Tokens", "description": "Sistema de espaçamento baseado em múltiplos de 4px", "spacing": { "xs": { "value": "0.25rem", "type": "spacing", "description": "4px - Espaçamento extra pequeno" }, "sm": { "value": "0.5rem", "type": "spacing", "description": "8px - Espaçamento pequeno" }, "md": { "value": "1rem", "type": "spacing", "description": "16px - Espaçamento médio (padrão glass card)" }, "lg": { "value": "1.5rem", "type": "spacing", "description": "24px - Espaçamento grande (padrão glass card dark)" }, "xl": { "value": "2rem", "type": "spacing", "description": "32px - Espaçamento extra grande" }, "2xl": { "value": "3rem", "type": "spacing", "description": "48px - Espaçamento muito grande" }, "3xl": { "value": "4rem", "type": "spacing", "description": "64px - Espaçamento máximo" } }, "borderRadius": { "sm": { "value": "2px", "type": "borderRadius", "description": "Meridian: primitivos (cards/grids/badges) - cantos quase retos" }, "md": { "value": "4px", "type": "borderRadius", "description": "Meridian: flutuantes/composer" }, "lg": { "value": "6px", "type": "borderRadius", "description": "Meridian: cmdbar/profile (faixa 6-8px). COLAPSADO de 16px glass" }, "xl": { "value": "8px", "type": "borderRadius", "description": "Meridian: cmdbar/profile topo da faixa (8px). COLAPSADO de 20px glass" }, "full": { "value": "50%", "type": "borderRadius", "description": "Círculo completo" } }, "shadow": { "glass": { "light": { "value": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)", "type": "boxShadow", "description": "Meridian --card-shadow (light). Distincao de card por sombra (zero-borda)" }, "lightHover": { "value": "0 1px 3px rgba(0,0,0,.07), 0 18px 38px -18px rgba(0,0,0,.18)", "type": "boxShadow", "description": "Meridian card-shadow no hover (light) - leve aumento, SEM transform" }, "dark": { "value": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)", "type": "boxShadow", "description": "Meridian --card-shadow (dark): sombra + inset-glow" }, "darkHover": { "value": "0 18px 40px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07)", "type": "boxShadow", "description": "Meridian card-shadow no hover (dark) - inset-glow reforcado, SEM transform" } }, "sm": { "value": "0 1px 2px rgba(0, 0, 0, 0.05)", "type": "boxShadow", "description": "Sombra pequena" }, "md": { "value": "0 4px 6px rgba(0, 0, 0, 0.07)", "type": "boxShadow", "description": "Sombra média" }, "lg": { "value": "0 10px 15px rgba(0, 0, 0, 0.1)", "type": "boxShadow", "description": "Sombra grande" }, "card": { "default": { "value": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)", "type": "boxShadow", "description": "Meridian --card-shadow (light)" }, "sm": { "value": "0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10)", "type": "boxShadow", "description": "Meridian --card-shadow-sm (light)" }, "dark": { "value": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)", "type": "boxShadow", "description": "Meridian --card-shadow (dark)" }, "darkSm": { "value": "inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px -8px rgba(0,0,0,.7)", "type": "boxShadow", "description": "Meridian --card-shadow-sm (dark)" } } }, "blur": { "glass": { "default": { "value": "0px", "type": "blur", "description": "Meridian: blur de glass ZERADO (flat, sem backdrop blur)" }, "light": { "value": "0px", "type": "blur", "description": "Meridian: blur ZERADO" }, "heavy": { "value": "0px", "type": "blur", "description": "Meridian: blur ZERADO" } } } }, "effects": { "$schema": "http://json-schema.org/draft-07/schema#", "title": "Metropolle Effects Tokens", "description": "Efeitos visuais e animações da identidade Metropolle", "transition": { "fast": { "value": "0.15s ease", "type": "transition", "description": "Transição rápida" }, "normal": { "value": "0.3s ease", "type": "transition", "description": "Transição padrão (glass cards)" }, "slow": { "value": "0.5s ease", "type": "transition", "description": "Transição lenta" } }, "animation": { "fadeIn": { "value": "fadeIn 0.3s ease-in-out", "type": "animation", "description": "Animação de fade in" }, "slideUp": { "value": "slideUp 0.3s ease-out", "type": "animation", "description": "Animação de slide para cima" }, "bounce": { "value": "bounce 0.6s ease-in-out", "type": "animation", "description": "Animação de bounce" } }, "backdrop": { "glass": { "filter": { "value": "none", "type": "backdropFilter", "description": "Meridian: backdrop blur ZERADO (flat). Era blur(20px)" }, "webkitFilter": { "value": "none", "type": "webkitBackdropFilter", "description": "Meridian: backdrop blur ZERADO (flat). Era blur(20px)" } } }, "transform": { "hoverUp": { "value": "none", "type": "transform", "description": "Meridian: hover-lift ZERADO (afford por sombra/hover, nao por movimento). Era translateY(-2px)" }, "scale": { "hover": { "value": "scale(1)", "type": "transform", "description": "Meridian: scale no hover ZERADO (1). Era scale(1.02)" }, "active": { "value": "none", "type": "transform", "description": "Meridian: scale no active ZERADO (none). Era scale(0.98)" } } }, "shadow": { "card": { "value": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)", "type": "boxShadow", "description": "Meridian --card-shadow (light) - alias em effects" }, "cardSm": { "value": "0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10)", "type": "boxShadow", "description": "Meridian --card-shadow-sm (light) - alias em effects" } }, "opacity": { "glass": { "light": { "default": { "value": "0.15", "type": "opacity", "description": "Opacidade padrão glass card claro" }, "hover": { "value": "0.2", "type": "opacity", "description": "Opacidade hover glass card claro" } }, "dark": { "default": { "value": "0.8", "type": "opacity", "description": "Opacidade padrão glass card escuro" }, "hover": { "value": "0.85", "type": "opacity", "description": "Opacidade hover glass card escuro" } } }, "disabled": { "value": "0.5", "type": "opacity", "description": "Opacidade para elementos desabilitados" }, "muted": { "value": "0.7", "type": "opacity", "description": "Opacidade para elementos secundários" } } } }