Maciel Ramos · Design Language System · v0.8

Global
Styles

Documentação prática dos fundamentos, tokens, componentes e estados usados no portfólio.

01 · Princípios

01

Editorial

Hierarquia tipográfica forte, grid claro e espaço para as imagens respirarem.

02

Modular

Seções independentes formam camadas que podem ser reorganizadas sem perder coerência.

03

Direto

Poucas cores de identidade e componentes com função visual imediatamente reconhecível.

02 · Brand colors

Cores que identificam Maciel Ramos. Devem permanecer estáveis nos dois temas.

Ink Black

#000000

Tipografia principal, botões neutros, logos e inversões de alto contraste.

Navbar · Headlines · Botões · Logo

Paper White

#FFFFFF

Superfícies principais, texto invertido e componentes sobre fundos escuros.

Hero · Perfil · Cards · Dark mode

Signal Orange

#FF7700

Cor proprietária de destaque, ação e encerramento. Em componentes de ação, usa sempre conteúdo branco.

Rodapé · CTA · Foco · Seleção

03 · Semantic colors

Cores funcionais. Organizam profundidade, legibilidade, estados e feedback sem competir com a identidade.

TokenAmostraValorUso no site
Canvas#D8D8D4

Fundo externo e frestas entre as camadas.

Surface subtle#F2F2F2

Trabalhos, navbar clara e campos neutros.

Border#D4D4D4

Contorno das grandes superfícies e divisões.

Text muted#777777

Metadados, categorias, números e textos auxiliares.

Dark canvas#292929

Fundo externo no dark mode.

Dark surface#111111

Hero, perfil, acervo e cases no dark mode.

Dark elevated#1A1A1A

Trabalhos e módulos elevados no dark mode.

Escala funcional do processo

Orange 05#FFF0E3
Orange 20#FFC38F
Orange 50#FF7700
Orange 70#C95500
Orange 90#642600

04 · Tipografia

TT Commons
Pro

DisplayMaciel RamosBold 700 · 64—200 px · 0 tracking

Hero, títulos de case e Global Styles.

HeadlineUma estrutura clara.Bold 700 · 30—86 px · 0 tracking

Títulos de seção, cards e chamadas.

BodyIdentidades, linguagens e campanhas construídas para diferentes contextos.Regular 400 · 16—38 px

Textos explicativos e narrativas de projeto.

Navigationtrabalhos · perfil · contatoDemiBold 600 · 13 px · lowercase

Navbar, botões e ações compactas.

LabelPROJETO · 2026Regular 400 · 11—12 px · uppercase

Eyebrows, metadados e identificação de seções.

05 · Layout

4 pxGrid base

Todos os espaçamentos derivam de múltiplos de quatro.

12 col.Grid desktop

Estrutura editorial para textos, imagens e metadados.

20—52 pxGutter

Margem horizontal responsiva das seções.

24 / 14 pxFresta

Separação entre camadas no desktop e mobile.

Raios

28 px
Seções
24 px
Projetos
18 px
Módulos
999 px
Ações
50%
Ícones

06 · Ações

Ícone isolado é círculo. Texto é cápsula. Texto com ícone usa cápsula com círculo interno. Todo botão com fundo Signal Orange usa texto e ícone brancos.

Botão primário · cápsula

Default
Hover
Pressed
Focus
Disabled

Botão de ícone · círculo

Default
Hover
Pressed
Focus
Disabled

Item da navbar

Defaulttrabalhos
Pressedtrabalhos
Disabledtrabalhos

07 · Formulários

Altura56 px

Raio16 px

FocoSignal Orange

Erro#BA1A1A

08 · Cards

Projeto · Default
Bronzoni
01BronzoniIdentidade visual
Projeto · Hover
Bronzoni
01BronzoniIdentidade visual

Card de processo

Default
01Entender

Descrição permanece oculta em dispositivos com hover.

Hover
01Entender

Descrição aparece e a aba sobe 10 px.

09 · Temas

Light mode
Paper White + Canvas Gray

Superfícies claras, texto preto e laranja como sinal.

Dark mode
Dark Surface + Dark Canvas

Superfícies escuras, texto branco e o mesmo laranja.

O tema inicial acompanha o sistema operacional.

A preferência escolhida fica salva no navegador.

Imagens e Signal Orange não mudam entre os temas.

Logotipos monocromáticos invertem para preservar contraste.