SIMMM Design System

Stylescapes

Duas direções visuais em contraste. Escolha a que melhor representa a marca SIMMM!

Leitura obrigatória Por favor leia antes de ver os stylescapes.

O que é um Stylescape?

Um stylescape é uma ferramenta de direção criativa utilizada no design de marcas. Ao contrário de um simples moodboard (uma colagem de imagens de inspiração), um stylescape é uma composição deliberada que simula a linguagem visual real da marca — tipografia, cor, fotografia, elementos gráficos e componentes de interface — tudo reunido num único ambiente coerente.

O objetivo é criar uma visão clara de como a marca comunica com o público, antes de avançar para o desenvolvimento. É uma conversa visual — uma proposta que permite validar a direção criativa e alinhar expectativas.

Porque o desenvolvimento dos stylescapes em HTML?

Stylescapes são habitualmente criados em ferramentas como Figma ou Adobe. Neste caso, optámos por HTML porque existia a necessidade de expandir o sistema visual, pois apenas foi fornecido logótipo, uma cor base, e uma opção tipográfica.

Ao construir os stylescapes diretamente em HTML, conseguimos mostrar elementos reais: vídeo em movimento, tipografia web moderna como alternativa a tipografias Microsoft, animações, proporções e comportamento em ecrã real — simulando o que o cliente final irá experienciar.

Partindo dos elementos fornecidos — logótipo, cor #46AA82 e uma escolha tipográfica — expandimos o sistema visual para explorar como a marca pode ganhar expressão, profundidade e emoção no ambiente onde vai viver.

Crédito.
Claro.

Stylescape 01

Gráfico

Tipografia pura, sem imagens. Verde + preto + branco. Estrutura, rigor, geometria. Trebuchet MS em todo o sistema.

Abrir Stylescape →

Diga Simmm!

Stylescape 02

Sorriso

Vídeo hero, fotografia emocional, Açores, pessoas reais. Sora + Manrope. O Simmm! que sorri, que afirma, que conquista.

Abrir Stylescape →

Design tokens

Core palette

#46aa82
#3e9874
#dcf4ea
#0f1728

Typography

Sora for headlines

Manrope for body and UI

Spacing scale

4, 8, 12, 16, 24, 32, 48, 64

Radii + elevation

8, 12, 20 + soft layered shadows

Core components

Buttons

Badges

Crédito Habitação Sem custos Acompanhamento

Service cards

Crédito Habitação

Comparação de propostas com foco em taxa e estabilidade.

Transferência

Otimização da prestação mensal com acompanhamento integral.

Form controls

Content patterns

Caso real

Poupança anual estimada: 1 800 EUR

Cliente com spread acima do mercado. Reestruturamos proposta com menor risco e melhor prestação.

Ver estrutura da página de casos

Testemunho

"Explicaram todas as opções e conseguimos condições muito melhores."

- Cliente SIMMM

Comparação de direções · Hero

Duas abordagens para o hero. À esquerda, a direção Sorriso — vídeo, emoção, vida. À direita, a direção Gráfico — solid green, tipografia pura, geometria. Os stylescapes completos estão disponíveis abaixo.

Direção A — Sorriso

Intermediação de crédito

Diga Simmm!
ao crédito certo.

Vídeo hero com fotografia emocional. Sora + Manrope. Pessoas, Açores, alegria.

Dinâmico · Emocional · Premium · Sora + Manrope · Fotografia e vídeo

Direção B — Gráfico