Por que as cores no Design System tem os números 500, 400, 300, 200?

Daí Rodrigo, como vai?

Cara, e se eu te falar que quando eu comecei a estudar sobre isso, eu pesquisei MUITO, mas MUUUUUUITO mesmo até conseguir encontrar alguma informação sobre. Assim, sendo sincero, acredito muitos design systems por aí hoje só utilizam desses números porque estão seguindo o flow do Material Design, mas a teoria real por trás é que esses números tem relação com o valor de peso das fontes.

Pensa só: cada peso da fonte (Thin, Light, Regular, Bold...) tem um valor numérico diferente que define o quão grosso será o traçado.

• Thin: 100
• ExtraLight: 200
• Light: 300
• Regular: 400
• Medium: 500
• SemiBold: 600
• Bold: 700
• ExtraBold: 800
• Black: 900

O nível do traçado indica o quão espesso e relevante será a tipografia, concorda comigo? Da mesma forma, passaram isso para nomear cores, entendendo que o "100" é o nível mais claro, e o "500" o mais escuro, e assim por diante.

Mas essa é só uma maneira de nomear cores, e que o pessoal acaba utilizando quando possuem paletas de 9-10 cores. Se vc for trabalhar com paletas menores, eu tenho uma recomendação de nomenclatura que vai ser muito melhor pra vc:

• Use Lightest para cores extremamente claras
• Use Lighter para cores muito claras
• Use Light para cores claras
• Use Base para cores padrão
• Use Dark para cores escuras
• Use Darker para cores muito escuras
• Use Darkest para cores extremamente escuras