Cores no código

Carregar os tokens

Uma linha traz as doze cores como custom properties, mais os papéis semânticos. Depois disso, ninguém no projeto precisa saber hex nenhum.

<!-- os tokens como CSS custom properties -->
<link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/tokens/cores.css">

O que o arquivo declara

/* primarias */
var(--bl-rich-black)  var(--bl-bangladesh)  var(--bl-mountain)
var(--bl-caribbean)   var(--bl-off-white)

/* secundarias */
var(--bl-pine)   var(--bl-basil)      var(--bl-forest)  var(--bl-frog)
var(--bl-mint)   var(--bl-pistachio)  var(--bl-stone)

/* papeis semanticos, para nao decidir cor em cada projeto */
var(--bl-texto)        var(--bl-fundo)        var(--bl-borda)
var(--bl-texto-suave)  var(--bl-fundo-suave)  var(--bl-marca)
var(--bl-texto-fraco)

Comece pelo papel, não pela cor

Escrever var(--bl-texto) em vez de var(--bl-rich-black) deixa o projeto sobreviver a uma revisão de paleta. O papel é o contrato; a cor por trás dele pode mudar.

Fora do CSS

O mesmo conteúdo em JSON, para gerar tema em build, alimentar Tailwind, Figma ou app nativo. A estrutura traz hex, RGB, Pantone e o contraste medido.

// tema em build, sem copiar hex para dentro do repositorio
const cores = await fetch('https://cdn.biglink.io/brand/v1/tokens/cores.json')
  .then(r => r.json());

cores.primarias['bangladesh'].hex   // '#03614d'
cores.primarias['bangladesh'].rgb   // [3, 97, 77]

Contraste é regra, não gosto

Caribbean dá 1,56:1 sobre branco e Mountain dá 2,27:1. Nenhum dos dois passa em texto sobre fundo claro. Para texto use var(--bl-bangladesh), que dá 7,44:1. Os dois claros servem para fundo, preenchimento, gráfico e detalhe, onde não há critério de leitura.

Os arquivos

CSScores.css1 KBBaixar

JSONcores.json1 KBBaixar

Nenhum arquivo com esses filtros.

Acesso interno

Entre com a sua conta Biglink