@metropolle/design-system/dist/tokens/colors.json

Sistema de design unificado para a plataforma Metropolle

{
  "$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"
      }
    }
  }
}