@metropolle/design-system
Version:
Sistema de design unificado para a plataforma Metropolle
470 lines • 13.2 kB
JSON
{
"colors": {
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Metropolle Color Tokens",
"description": "Tokens de cores baseados na identidade visual Metropolle",
"color": {
"brand": {
"primary": {
"value": "#0055FF",
"type": "color",
"description": "Cor primária da marca Metropolle"
},
"secondary": {
"value": "#FF9900",
"type": "color",
"description": "Cor secundária complementar"
},
"neutral": {
"value": "#333333",
"type": "color",
"description": "Cor neutra para textos"
}
},
"semantic": {
"success": {
"value": "#10B981",
"type": "color",
"description": "Verde para estados de sucesso"
},
"warning": {
"value": "#F59E0B",
"type": "color",
"description": "Amarelo para avisos"
},
"error": {
"value": "#EF4444",
"type": "color",
"description": "Vermelho para erros"
},
"info": {
"value": "#3B82F6",
"type": "color",
"description": "Azul para informações"
}
},
"background": {
"primary": {
"value": "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%)",
"type": "color",
"description": "Gradiente principal usado na homepage"
},
"secondary": {
"value": "rgba(255, 255, 255, 0.05)",
"type": "color",
"description": "Background secundário com transparência"
},
"glass": {
"light": {
"value": "rgba(255, 255, 255, 0.15)",
"type": "color",
"description": "Background glass card claro"
},
"dark": {
"value": "rgba(60, 60, 60, 0.8)",
"type": "color",
"description": "Background glass card escuro"
}
}
},
"text": {
"primary": {
"value": "#ffffff",
"type": "color",
"description": "Texto principal (branco)"
},
"secondary": {
"value": "rgba(255, 255, 255, 0.7)",
"type": "color",
"description": "Texto secundário com transparência"
},
"muted": {
"value": "rgba(255, 255, 255, 0.5)",
"type": "color",
"description": "Texto esmaecido"
}
},
"border": {
"light": {
"value": "rgba(255, 255, 255, 0.1)",
"type": "color",
"description": "Borda sutil clara"
},
"medium": {
"value": "rgba(255, 255, 255, 0.2)",
"type": "color",
"description": "Borda média"
},
"strong": {
"value": "rgba(255, 255, 255, 0.3)",
"type": "color",
"description": "Borda forte"
}
}
}
},
"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, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"type": "fontFamily",
"description": "Stack de fontes da marca Metropolle"
},
"mono": {
"value": "'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace",
"type": "fontFamily",
"description": "Fonte monospace para código"
}
},
"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": "0.25rem",
"type": "borderRadius",
"description": "4px - Raio pequeno"
},
"md": {
"value": "0.5rem",
"type": "borderRadius",
"description": "8px - Raio médio"
},
"lg": {
"value": "1rem",
"type": "borderRadius",
"description": "16px - Raio grande (glass card dark)"
},
"xl": {
"value": "1.25rem",
"type": "borderRadius",
"description": "20px - Raio extra grande (glass card light)"
},
"full": {
"value": "50%",
"type": "borderRadius",
"description": "Círculo completo"
}
},
"shadow": {
"glass": {
"light": {
"value": "0 8px 32px rgba(0, 0, 0, 0.1)",
"type": "boxShadow",
"description": "Sombra do glass card claro"
},
"lightHover": {
"value": "0 12px 40px rgba(0, 0, 0, 0.15)",
"type": "boxShadow",
"description": "Sombra do glass card claro no hover"
},
"dark": {
"value": "0 8px 32px rgba(0, 0, 0, 0.3)",
"type": "boxShadow",
"description": "Sombra do glass card escuro"
},
"darkHover": {
"value": "0 12px 40px rgba(0, 0, 0, 0.4)",
"type": "boxShadow",
"description": "Sombra do glass card escuro no hover"
}
},
"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"
}
},
"blur": {
"glass": {
"default": {
"value": "20px",
"type": "blur",
"description": "Blur padrão dos glass cards"
},
"light": {
"value": "15px",
"type": "blur",
"description": "Blur leve"
},
"heavy": {
"value": "30px",
"type": "blur",
"description": "Blur pesado"
}
}
}
},
"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": "blur(var(--blur, 20px))",
"type": "backdropFilter",
"description": "Filtro backdrop padrão"
},
"webkitFilter": {
"value": "blur(var(--blur, 20px))",
"type": "webkitBackdropFilter",
"description": "Filtro backdrop WebKit"
}
}
},
"transform": {
"hoverUp": {
"value": "translateY(-2px)",
"type": "transform",
"description": "Transform hover padrão dos glass cards"
},
"scale": {
"hover": {
"value": "scale(1.02)",
"type": "transform",
"description": "Scale sutil no hover"
},
"active": {
"value": "scale(0.98)",
"type": "transform",
"description": "Scale no estado ativo"
}
}
},
"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"
}
}
}
}