bubba

Referência visual

Os valores-base e a marca do Bubba no @bubbacore/elvis 0.4.0. Cada amostra usa só as entradas públicas do pacote. Clique numa variável para copiar o var() pronto para o CSS.

Cores

color.surface.paper

#FFFFFF

Fundo das telas, dos slides e das páginas.

color.surface.support

#F3F5FB

Superfície dos controles e da caixa do preço.

color.surface.past

#EEF0F5

Fundo da sessão que já começou.

color.surface.brand-blue

#011D97

Fundo das capas sem imagem.

color.text.ink

#0D1330

Títulos e texto principal. Todo título usa esta cor, nunca o azul nem o vermelho.

color.text.ink-muted

#4B5272

Texto secundário e rótulos.

color.text.brand-blue

#011D97

Links e preços. Nunca em títulos.

color.text.on-brand-blue

#FFFFFF

Texto sobre o azul da marca, nas ações, nas seleções e nas capas sem imagem.

color.border.control

#7E86A3

Borda dos controles.

color.border.divider

#DDE1EC

Divisórias e borda da caixa do preço. É decorativa: nada depende dela para ser percebido.

color.action.brand-blue

#011D97

Seleção e ação: fundo do controle selecionado e da ação principal.

color.focus.feather-red

#C71615

Anel de foco, desenhado com focus.width e afastado do controle por focus.offset.

color.alert.feather-red

#C71615

Avisos sobre o papel. Nunca em títulos nem como fundo.

Contraste

Os pares de cor que precisam de contraste, declarados no tokens.json, com a razão calculada a partir das cores do pacote.

Aa Sessão das 19h00

color.text.ink
sobre color.surface.paper

18,21:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.ink
sobre color.surface.support

16,71:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.ink
sobre color.surface.past

15,97:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.ink-muted
sobre color.surface.paper

7,64:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.ink-muted
sobre color.surface.support

7,01:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.ink-muted
sobre color.surface.past

6,70:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.brand-blue
sobre color.surface.paper

12,93:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.brand-blue
sobre color.surface.support

11,86:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.brand-blue
sobre color.surface.past

11,34:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.on-brand-blue
sobre color.surface.brand-blue

12,93:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.text.on-brand-blue
sobre color.action.brand-blue

12,93:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

Aa Sessão das 19h00

color.alert.feather-red
sobre color.surface.paper

5,91:1, mínimo de 4,5:1 para texto

Passa no WCAG 2.2 AA

color.border.control
sobre color.surface.paper

3,60:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.border.control
sobre color.surface.support

3,31:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.action.brand-blue
sobre color.surface.paper

12,93:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.action.brand-blue
sobre color.surface.support

11,86:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.focus.feather-red
sobre color.surface.paper

5,91:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.focus.feather-red
sobre color.surface.support

5,42:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

color.focus.feather-red
sobre color.surface.past

5,18:1, mínimo de 3:1 para interface

Passa no WCAG 2.2 AA

Tipografia

Programação de hoje
Aa Bb Cc 0123456789

font.family.title

Noto Serif Display

Família dos títulos, só em títulos, nunca abaixo de 20 px, com todo título em caixa normal, nunca em caixa alta.

Programação de hoje
Aa Bb Cc 0123456789

font.family.text

Hanken Grotesk

Família de todo o resto: leitura, controles, horários e preços, com algarismos de largura igual por padrão.

Sessão das 19h00 · R$ 22,00

font.weight.title

600

Peso dos títulos.

Sessão das 19h00 · R$ 22,00

font.weight.text.regular

400

Peso da leitura.

Sessão das 19h00 · R$ 22,00

font.weight.text.medium

500

Peso dos destaques leves.

Sessão das 19h00 · R$ 22,00

font.weight.text.bold

700

Peso dos destaques fortes, dos horários e dos preços.

Programação de hoje

font.width.title

62.5%

Largura dos títulos na Noto Serif Display, em porcentagem do eixo wdth, como no font-stretch do CSS.

Programação de hoje

font.size.title.xs

20px

Menor título, como o nome do filme numa lista de sessões. É o mínimo da Noto Serif Display.

Programação de hoje

font.size.title.sm

24px

Título de seção, como o nome do cinema ou do dia.

Programação de hoje

font.size.title.md

32px

Título da página no celular.

Programação de hoje

font.size.title.lg

40px

Título da página em telas largas.

Programação de hoje

font.size.title.xl

48px

Maior título, para destaques e capas em telas largas.

Sessões no Cinema do Centro a partir das 14h30, por R$ 18,00.

font.size.text.sm

14px

Rótulos e informações de apoio. Menor tamanho de texto.

Sessões no Cinema do Centro a partir das 14h30, por R$ 18,00.

font.size.text.md

16px

Leitura, controles, horários e preços.

Sessões no Cinema do Centro a partir das 14h30, por R$ 18,00.

font.size.text.lg

18px

Texto de abertura e destaques de leitura.

Níveis de tipografia

Ó Paí, Ó 2 e Missão: Impossível, o Acerto Final, na sexta-feira

typography.title.xs

Noto Serif Display · 20px · 600 · espaço entre letras 0px · altura de linha 1,2 · largura 62,5%

Menor título, como o nome do filme numa lista de sessões.

Ó Paí, Ó 2 e Missão: Impossível, o Acerto Final, na sexta-feira

typography.title.sm

Noto Serif Display · 24px · 600 · espaço entre letras 0px · altura de linha 1,2 · largura 62,5%

Título de seção, como o nome do cinema ou do dia.

Ó Paí, Ó 2 e Missão: Impossível, o Acerto Final, na sexta-feira

typography.title.md

Noto Serif Display · 32px · 600 · espaço entre letras 0px · altura de linha 1,1 · largura 62,5%

Título da página no celular.

Ó Paí, Ó 2 e Missão: Impossível, o Acerto Final, na sexta-feira

typography.title.lg

Noto Serif Display · 40px · 600 · espaço entre letras 0px · altura de linha 1,1 · largura 62,5%

Título da página em telas largas.

Ó Paí, Ó 2 e Missão: Impossível, o Acerto Final, na sexta-feira

typography.title.xl

Noto Serif Display · 48px · 600 · espaço entre letras 0px · altura de linha 1,1 · largura 62,5%

Maior título, para destaques e capas em telas largas.

Ágatha e Jorge vão à sessão das 19h30 no Cinema do Centro. O preço é o da bilheteria, sem taxa de conveniência, e a programação de quinta ainda não foi divulgada.

typography.text.sm

Hanken Grotesk · 14px · 400 · espaço entre letras 0px · altura de linha 1,4

Rótulos e informações de apoio, quase sempre numa linha só.

Ágatha e Jorge vão à sessão das 19h30 no Cinema do Centro. O preço é o da bilheteria, sem taxa de conveniência, e a programação de quinta ainda não foi divulgada.

typography.text.md

Hanken Grotesk · 16px · 400 · espaço entre letras 0px · altura de linha 1,5

Leitura e controles. É a altura de linha do texto corrido.

Ágatha e Jorge vão à sessão das 19h30 no Cinema do Centro. O preço é o da bilheteria, sem taxa de conveniência, e a programação de quinta ainda não foi divulgada.

typography.text.lg

Hanken Grotesk · 18px · 400 · espaço entre letras 0px · altura de linha 1,5

Texto de abertura e destaques de leitura, como a sinopse.

14h30 · 19h00 · 21h45 · R$ 18,00 · R$ 22,00

typography.figures

Hanken Grotesk · 16px · 700 · espaço entre letras 0px · altura de linha 1,2

Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço.

Espaçamento

space.1

4px

Espaço mínimo, entre um ícone e seu rótulo.

space.2

8px

Espaço entre itens do mesmo grupo, como os horários de um filme.

space.3

12px

Espaço interno dos controles compactos e entre linhas de informação.

space.4

16px

Margem lateral no celular e espaço interno das caixas.

space.5

20px

Espaço entre um título e o conteúdo que ele abre.

space.6

24px

Espaço entre blocos, como os filmes de um cinema.

space.8

32px

Espaço entre seções, como os cinemas de um dia.

space.10

40px

Margem lateral em telas largas.

space.12

48px

Espaço entre grandes áreas da página.

space.16

64px

Maior espaço, no topo e no rodapé da página.

Cantos

radius.control

6px

Canto dos controles e das caixas, como a caixa do preço.

radius.app-icon

12px

Canto do ícone de app.

Bordas

border.width

1px

Espessura das bordas dos controles, das divisórias e da caixa do preço.

Foco

focus.width

2px

Espessura do anel de foco, na cor color.focus.feather-red.

focus.offset

2px

Afastamento entre o anel de foco e o controle, para que o anel fique sobre a superfície em volta, mesmo num controle azul.

Controle com foco Ação com foco

Alvo de toque

target.min-size

44px

Lado mínimo da área de toque de todo controle.

Exemplo de uso

Os tokens combinados numa programação de cinema.

Cinema de prova

Filme de prova

Dublado · 2D · 14 anos

  • 14h30R$ 18,00
  • 19h00R$ 22,00
  • 21h45R$ 22,00

Arquivos do pacote

Os demais arquivos desta versão, como o pacote os entrega.