The Brief

Vertical sobre negócios em tecnologia com uma news diária, trazendo as principais notícias do setor em uma linguagem leve e moderna. Para conhecer a vertical, acesse: www.thebrief.com.br

Cores

As cores de marca devem ser seguidas como primárias e possuem os seguintes definições:

Brand primary

600 #31d69a

500 #3afdb4

400 #62fcc2

Brand secondary

600 #121212

500 #1e1e1e

400 #454141

Use os Tokens de cores conforme as diretrizes de uso expressas anteriormente.

Token	Descrição	Valor
`$token-color-brand-primary-600`	Cor de Focus	`#31d69a`
`$token-color-brand-primary-500`	Cor Normal	`#3afdb4`
`$token-color-brand-primary-400`	Cor de Hover	`#62fcc2`
`$token-color-brand-secondary-600`	Cor de Focus	`#121212`
`$token-color-brand-secondary-500`	Cor Normal	`#1e1e1e`
`$token-color-brand-secondary-400`	Cor de Hover	`#454141`
`$token-color-transparent`		`rgba(0, 0, 0, 0)`
`$token-color-white`		`#ffffff`
`$token-color-neutral-900`	Use em planos de fundo	`#23282d`
`$token-color-neutral-800`	Use em planos de fundo	`#3e4851`
`$token-color-neutral-700`	Use em planos de fundo	`#636f7a`
`$token-color-neutral-600`	Use em planos de fundo	`#8995a0`
`$token-color-neutral-500`	Use em planos de fundo	`#b8c2cb`
`$token-color-neutral-400`	Use em planos de fundo	`#dbe1e5`
`$token-color-neutral-300`	Use em planos de fundo	`#f1f5f8`
`$token-color-neutral-200`	Use em planos de fundo	`#f6f8fa`
`$token-color-neutral-100`	Use em planos de fundo	`#fafcfd`
`$token-color-grey-900`	Use em textos que precisam de realce	`#030303`
`$token-color-grey-800`	Use em textos de realce secundário	`#262626`
`$token-color-grey-700`	Use em textos de corpo e subtítulos	`#414141`
`$token-color-grey-600`	Use em textos de corpo e subtítulos	`#575757`
`$token-color-grey-500`	Use em textos de corpo e subtítulos	`#b5b7b9`
`$token-color-grey-400`	Use em textos de labels	`#dddddd`
`$token-color-grey-300`	Use para placeholders	`#ecedee`
`$token-color-grey-200`	Use para textos em fundos escuros	`#f7f7f7`
`$token-color-grey-100`	Use para textos e planos de fundo	`#ffffff`
`$token-color-red-600`	Use para mensagens de erro	`#871e1e`
`$token-color-red-500`	Use para mensagens de erro	`#b92828`
`$token-color-red-400`	Use para mensagens de erro	`#fae7e8`
`$token-color-blue-600`	Use para mensagens informativas	`#004570`
`$token-color-blue-500`	Use para mensagens informativas e links	`#0065a4`
`$token-color-blue-400`	Use para mensagens informativas	`#e2eef6`
`$token-color-yellow-600`	Use para mensagens de atenção	`#755c17`
`$token-color-yellow-500`	Use para mensagens de atenção	`#ffca34`
`$token-color-yellow-400`	Use para mensagens de atenção	`#fff6dd`
`$token-color-green-600`	Use para mensagens de sucesso	`#005726`
`$token-color-green-500`	Use para mensagens de sucesso	`#00893c`
`$token-color-green-400`	Use para mensagens de sucesso	`#e4f2ea`
`$token-color-facebook-600`	Use para Facebook	`#365899`
`$token-color-facebook-500`	Use para Facebook	`#4267b2`
`$token-color-facebook-400`	Use para Facebook	`#476fbf`
`$token-color-linkedin-600`	Use para Linkedin	`#006a9c`
`$token-color-linkedin-500`	Use para Linkedin	`#067ab1`
`$token-color-linkedin-400`	Use para Linkedin	`#007db8`
`$token-color-twitter-600`	Use para Twitter	`#1a90d9`
`$token-color-twitter-500`	Use para Twitter	`#1d9ff0`
`$token-color-twitter-400`	Use para Twitter	`#1fa9ff`
`$token-color-instagram-600`	Use para Instagram	`#a8258c`
`$token-color-instagram-500`	Use para Instagram	`#c32aa3`
`$token-color-instagram-400`	Use para Instagram	`#cc2daa`

Tipografia

Atenção

Essa família tipográfica está depreciada (usada somente em projetos antigos). Opte por usar a Source Sans Pro. Link.

A tipografia de conteúdo usada no The Brief é composta por duas famílias tipográficas, Roboto e Roboto Slab com as variações abaixo:

Família	Peso	Valor
Roboto	Regular	400
Roboto	Medium	500
Roboto	Bold	700
Roboto Slab	Regular	400
Roboto Slab	Bold	700

Recursos

The Brief - Logo - Faça o download da logo The Brief nas versões .eps, .svg, .png e .jpg.

# The Brief

# Cores