Arquivos da marca

Os logos, os ícones, a fonte e as cores da Fitast, os mesmos do design system. O triângulo de cima do raio é sempre vermelho nas versões coloridas, e o vermelho, fora do logo, é só da proteína.

Logos

Logo

Sobre giz, branco ou fotos claras

Logo · fundo escuro

Sobre ferro ou fotos escuras

Logo · uma cor, ferro

Gravação, bordado, documentos

Logo · uma cor, giz

Sobre o vermelho ou fotos escuras

Símbolo

Símbolo

Quando o nome já aparece por perto

Símbolo · fundo escuro

Símbolo · fundo escuro

O mesmo, sobre ferro

Símbolo · uma cor, ferro

Símbolo · uma cor, ferro

Selos e carimbos

Símbolo · uma cor, giz

Símbolo · uma cor, giz

Sobre o vermelho ou fundos escuros

Nome

Rodapés e textos onde o símbolo não cabe

Nome · fundo escuro

O mesmo, sobre ferro

Foto de perfil

Redes sociais, recortada em círculo

Ícones

Ícone do app

Vetor, 1024 px, com os cantos

Ícone do app · claro

Para lojas e materiais sobre fundo escuro

Favicon

A aba do navegador; e o .ico de 16, 32 e 48 px

Tela de início do iOS

180 px, sem transparência

Manifest

192 e 512 px, com os cantos

Manifest · maskable

192 e 512 px, inteiro, o sistema recorta

Os projetos nativos

As fontes dos ícones e da splash do app no Android e no iOS, com os nomes que o @capacitor/assets lê. Os relógios usam os mesmos ícones.

Ícone · iOS e Apple Watch

1024 px, sem transparência; o relógio recorta em círculo

Ícone · Android e Wear OS, frente

1024 px, o símbolo dentro da zona segura

Ícone · Android e Wear OS, fundo

1024 px, ferro

Splash

2732 px, giz

Splash · escura

Splash · escura

2732 px, o giz do tema escuro

Cores

Cada cor tem um valor no tema claro e outro no escuro, e as duas estão no font.css, como --ft-<nome>. As cores das anilhas são do dado, não dos botões.

Superfícies e texto

#F3F4F1#121417

--ft-giz

Fundo de página

#FFFFFF#1C1F23

--ft-surface

Cartões, folhas e listas

#E9EBE7#25292E

--ft-surface-sunken

Campos e células editáveis

#E3E5E1#2A2E33

--ft-track

Trilho vazio das barras; nunca leva texto

#DADDD8#2E3238

--ft-line

Divisórias entre linhas

#868B92#6E747C

--ft-line-strong

Borda de controles

#17191C#ECEDEA

--ft-ferro

Texto principal e botão principal

#5E636B#9A9FA6

--ft-ferro-muted

Texto secundário

#F3F4F1#17191C

--ft-on-ferro

Texto sobre ferro

As anilhas

#E23B2E#FF5B4C

--ft-proteina

Anilha vermelha, 25 kg: proteína

#B9271C#FF5B4C

--ft-proteina-texto

Texto e números de proteína

#FCE3E0#3A1A17

--ft-proteina-suave

Fundo de chips de proteína

#2A5BD7#6B93FF

--ft-carbo

Anilha azul, 20 kg: carboidrato

#2A5BD7#6B93FF

--ft-carbo-texto

Texto de carboidrato e links

#E1E9FB#18264A

--ft-carbo-suave

Fundo de chips de carboidrato

#F2B416#FFC83A

--ft-gordura

Anilha amarela, 15 kg: gordura; nunca texto

#8A5D00#FFC83A

--ft-gordura-texto

Texto e números de gordura

#FDF1CF#3A2E0E

--ft-gordura-suave

Fundo de chips de gordura

#1F9D5C#3CC982

--ft-treino

Anilha verde, 10 kg: feito, recorde, meta

#16794A#3CC982

--ft-treino-texto

Texto de treino e conquistas

#DDF2E6#12321F

--ft-treino-suave

Fundo de série concluída

#17191C#0E1A13

--ft-on-treino

Check sobre o verde

Estados

#C0163F#FF6B8A

--ft-erro

Falhas do sistema, sempre com ícone e frase

#2A5BD7#6B93FF

--ft-focus

Anel de foco do teclado; o mesmo que carbo

Fonte

Archivo Expanded

1.640 kcal

Títulos de tela e números grandes, no peso 800. --ft-font-display

Archivo

Agachamento livre

Todo o resto: textos, rótulos e dados, do 400 ao 700. --ft-font-text

Para usar em qualquer página, inclua esta linha no <head>. Ela traz as duas fontes, as cores dos dois temas, os espaços, os cantos e as classes de texto (ft-title, ft-body, ft-num):

<link rel="stylesheet" href="https://assets.fitast.app/fonts/font.css">