Wireframe de referência
Design final da interface
O Desafio
O sétimo desafio foi para criar um design genérico de cartão de crédito, contendo o chip de segurança, número do cartão, bandeira, nome do titular, data de vencimento e ícone de aproximação
Espaçamentos
Os espaçamentos foram definidos a partir da grade de 8 pontos, o que significa que todos os espaços entre elementos são múltiplos de 8.
Tipografia
Para a tipografia, escolhi a fonte Space Mono para os numerais e Space Grotesk para o nome do titular.
Por ser um design muito simples e com pouquíssimos elementos, os pesos e tamanhos permaneceram os mesmos para todos os itens, tamanho 32 e peso bold.
Cores
O cartão em si não possui cor definida, adaptando-se ao design do plano de fundo, no caso, como o plano é escuro, composto por um gradiente mesh com as cores predominantes (#1B1B1B, #333333 e #8B8B8B), a tipografia segue na cor branco puro (#000000).
Para o ícone da bandeira, que neste caso é a MasterCard, temos as cores da marca: vermelho (#EB001B), laranja (#FF5F00) e amarelo (#F79E1B).
Para o ícone de chip, temos apenas duas cores, um tom de ocre (#BC9A20) para o plano de fundo e um uma variante mais escura para os detalhes (#815900).
Componentes
Os componentes consistem em:
Ícone da bandeira retirado da plataforma Brandfetch, em tamanho 104x64 pontos.
Ícone de chip de segurança, no estilo Color, em tamanho 96 pontos, retirado da plataforma icons8.
Ícone de pagamento por aproximação, no estilo Material Outlined, medindo 40 pontos, também da plataforma icons8.
Gradiente mesh gerado pelo MeshGradient, adicionado a um filtro de noise em 10% de opacidade, como plano de fundo.
Por fim, o componente de cartão possui uma borda de 4 pontos, apenas nas margens esquerda e inferior, em branco puro com opacidade em 50%.
Variantes
