Vértice Supply — Design System v2

Design System · v2

Vértice

Supply

O sistema visual que traduz a promessa da marca em linguagem formal.
Cada token, cada componente, cada regra deriva do posicionamento —
não de preferência estética.

01 família tipográfica

05 cores no sistema

03 camadas do símbolo V

0px radius nos cards

Tokens

Variáveis do Sistema

Valores primitivos que alimentam todos os componentes. Alterar um token propaga a mudança em toda a identidade.

Token	Valor	Uso
`--color-bg`	`#0A0A0A`	Fundo base de toda interface
`--color-bg-surface`	`#141414`	Cards e superfícies secundárias
`--color-accent`	`#4A5D4E`	Acento principal — aparece com intenção, nunca como fundo
`--color-accent-light`	`#5F7A65`	Labels, marcadores, estados hover
`--color-support`	`#B5A898`	Calor tátil — bordas de produto, elementos de apoio
`--color-bg-inverse`	`#EBE6DF`	Off-white para lookbook e landing clara
`--font`	`'Inter'`	Única família — hierarquia por peso, nunca por família
`--radius-0`	`0px`	Componentes estruturais — espelha geometria do produto
`--radius-xs`	`2px`	Somente badges e tags onde borda ausente prejudica leitura

Paleta

Sistema de Cores

Cinco cores com papéis distintos. A escassez de cor é intencional — mais cores = menos identidade. Quanto mais raro o acento, maior o impacto quando aparece.

Preto Absoluto #0A0A0A · --color-bg Silêncio visual. Fundo onde o produto é a voz.

Charcoal #141414 · --color-bg-surface Superfície de cards. Profundidade sem competir.

Off-White #EBE6DF · --color-bg-inverse Lookbook e landing clara. Papel não-tratado.

Verde Musgo #4A5D4E · --color-accent Acento principal. Tátil, orgânico, matéria-prima. Aparece com escassez para preservar impacto.

Areia #B5A898 · --color-support Calor tátil. Evita que a paleta fique metálica.

Branco Frio #F4F4F5 · --color-text-primary Texto principal. Alto contraste, sem hedge visual.

Escala de Neutros

Escala do Acento

Verde Musgo como assinatura

Aparece onde há intenção: símbolo, labels de seção, CTAs, marcadores do sistema V. Nunca como cor de fundo, nunca em texto contínuo. A escassez é a regra — não a exceção.

Areia como calor

O #B5A898 evita que a paleta fique fria e metálica. Aparece em bordas de produto, separadores de aplicações físicas. É o calor tátil da marca em versão cromática.

Espaço como elemento

Quantidade de cor ativa nunca deve exceder 15% da superfície. O preto ativo, o espaço respirado. Densidade visual é inimiga direta da percepção de qualidade.

Tipografia

Inter — Única Família

Hierarquia por peso e tamanho, nunca por variedade de fontes. Inter: legibilidade máxima, ego visual zero. Quanto mais clara a tipografia, mais o produto lidera.

Vértice
Supply

Essencial com identidade · Qualidade sentida

Camiseta 100% algodão penteado. 220g/m². Caimento reto, costura tripla reforçada. O básico que você vai usar todo dia — sem precisar pensar no que vestir.

Display · 300 clamp(3.5rem, 8vw, 7rem)
letter-spacing: 0.1–0.15em
uppercase

Vértice

H1 · 300 2.75rem
letter-spacing: -0.02em

Identidade Visual

H2 · 400 2rem
letter-spacing: -0.01em

Sistema de Cores

H3 · 500 1.25rem
letter-spacing: -0.01em

Componentes de interface

Body · 400 0.9rem
line-height: 1.65

O algodão penteado 220g/m² é a razão de ser da peça. Mais denso que o varejo, mais acessível que o premium. Essa é a Vértice — o ponto exato onde os dois mundos convergem.

Caption · 600 0.68rem
letter-spacing: 0.18em
uppercase

Camiseta · Algodão 220g · Preto Absoluto

Componentes

Elementos de Interface

Cada componente tem radius 0px nos elementos estruturais. A geometria do componente espelha a geometria do produto — ângulo reto, construção precisa.

Botões

Badges & Tags

Novo 220g/m² 100% Algodão Pré-lavado Em estoque

Cards

Composição

100% Algodão Penteado

Fibra de longa duração. Sem mistura sintética que comprometa o toque ou o caimento com o uso e a lavagem.

Gramagem

220g/m²

Acima da média do varejo nacional (180g). Você sente a diferença na primeira vez que segura a peça. Peso que permanece após 50 lavagens.

Destaque

Caimento Reto

Silhueta que funciona standalone ou em layering. Desenvolvido para o corpo real — não para o manequim de vitrine.

Campos de Input

CEP de entrega

Tamanho

Divisor com Símbolo V (Camada 2)

Cada peça é desenvolvida com três premissas.

Matéria-prima selecionada por gramagem e durabilidade
Caimento testado em múltiplos corpos, não apenas no manequim
Acabamento que resiste ao uso real — sem pilling, sem deformação

Elemento Proprietário

Sistema V — As 3 Camadas

O símbolo V não é decoração. É um sistema com função específica em cada camada. A repetição constrói reconhecimento — a contenção preserva o impacto.

Camada

Escala

Contexto

Função

Estrutural

Hero · capa · endpage
400–900px

Fundo de seções de alta visibilidade

Identificação sem logotipo. Em qualquer screenshot ou impressão, a marca é reconhecível. Opacidade 4–6%.

Navegacional

Divisores · listas · marcadores
10–14px

Hierarquia de conteúdo e listas de especificações

Substitui bullet genérico. Com repetição, o V passa a significar "isso importa" / "esta é a Vértice".

Aplicada

Hangtag · bordado · carimbo
8–20mm

Produto físico, embalagem, papelaria

Coerência digital-físico. O símbolo do sistema é o mesmo bordado na peça. Nenhuma outra camada no mesmo contexto.

Regra de Contenção

As 3 camadas nunca aparecem simultaneamente na mesma superfície. Apenas uma função por contexto — para preservar hierarquia e evitar que o símbolo vire wallpaper. A escassez do V é tão estratégica quanto a escassez do verde musgo.

Demonstração

Camada Estrutural
Fundo de seção · Opacidade 6%

Algodão 220g/m²
Costura tripla reforçada
Caimento reto, fio pré-lavado

Camada Navegacional
Marcador de lista · 10px

Vértice

Supply
220g · PT

Camada Aplicada
Hangtag físico · Stamp · 16mm

Em Contexto

A Identidade em Uso Real

O sistema não existe em abstrato. Cada elemento é demonstrado na superfície onde vai aparecer — feed, produto, embalagem, chat.

Card de Produto — E-commerce / Instagram

foto de produto
fundo escuro

Camisetas · Algodão 220g

Camiseta Essential

100% algodão penteado · caimento reto · pré-lavada

R$ 89

Post + Caption — Instagram

Vértice Supply

O básico
que dura.

verticesupply

220g/m². Algodão penteado.
O que você segura antes de comprar já conta tudo.

A camiseta que você vai querer daqui a três anos ainda.
Sem estampa que some. Sem malha que deforma.

Atendimento — WhatsApp

Cliente

Oi! A camiseta preta tem em M ainda?

Vértice Supply

Tem sim. Camiseta Essential Preto M — R$ 89 com frete grátis acima de R$ 150.

Vértice Supply

Algodão 220g — diferente do que você vai achar por esse preço normalmente.

Tom: direto, sem "amor" ou "bb". Confiante, sem excesso. Uma ou duas frases por mensagem.

Escala de Espaçamento

Token

Visual

rem

--sp-2

0.5rem

--sp-4

1rem

--sp-6

1.5rem

--sp-8

2rem

--sp-12

3rem

--sp-16

4rem

--sp-24

6rem

--sp-32

8rem

Filosofia

Por Que Cada Decisão Existe

Documentação estratégica das decisões visuais. Cada regra tem uma razão que vai além da estética.

Preto absoluto
como base

O preto não é escolha estética — é o atributo Seletivo aplicado ao ambiente. Um fundo que não compete permite que o produto seja a voz. O preto #0A0A0A é o equivalente visual de uma copy curta e direta: ele retira tudo que não acrescenta.

Verde musgo
com escassez

O #4A5D4E é orgânico e material — remete a algodão cru, fio natural, matéria-prima antes do processo. É o atributo Tátil em linguagem de cor. Aparece raramente porque a escassez é a própria afirmação de posicionamento: o que aparece em todo lugar não significa nada.

0px de border-radius
nos componentes

Bordas arredondadas comunicam suavidade e SaaS. A Vértice Supply não vende software — vende um produto de construção precisa: bolso quadrado, bainha reta, costura em linha. O componente tem 0px de radius pela mesma razão que a peça tem ângulo reto no bolso: porque a geometria do sistema espelha a geometria do produto.

Tensão tipográfica
editorial

A marca vive em três tensões documentadas no brandbook (premium vs acessível, mínimo vs presença, rua vs maturidade). O sistema visual não resolve essas tensões em uma composição confortável — ele as reflete. Título em 6rem ao lado de body em 0.85rem é a tensão editorial que espelha o posicionamento. Atributo: Confiante.

Inter como
única família

Uma única família elimina o ruído de escolha e o risco de incoerência. Inter é funcional sem elitismo — acessa sem afastar. Hierarquia é criada exclusivamente por peso: quem está em 300 serve ao produto; quem está em 700 é a assinatura. Mais famílias = mais decisões = mais margem para inconsistência.

Sistema V
em 3 camadas

O V é o conceito central da marca — convergência. Mas um conceito só cria reconhecimento quando aparece com consistência e função, não como decoração aleatória. As três camadas garantem que o símbolo tenha papel claro em cada contexto: identidade sem logotipo visível (estrutural), hierarquia de conteúdo (navegacional), coerência digital-físico (aplicada).

Design System v2

Vértice Supply

Abril 2025 · OBZON / Branding Squad