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

Sistema de design unificado para a plataforma Metropolle

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