Design System v1
"Máxima contenção formal, máxima intensidade de intenção."
Sistema visual completo da LNZ Creative Studio — tokens, tipografia,
cores, componentes e brand.
2
Famílias tipográficas
28
Tokens de cor
13
Etapas de espaço
1
Cor de ação
Fundamentos
10 Princípios
As regras que governam cada decisão visual do sistema.
01
Laranja Só Age
Se um pixel de #FF6E1F não é ação ou ponto focal, remova-o.
02
Apenas Dois Pesos
400 para leitura, 700 para impacto. Tudo mais é exceção.
03
Espaço é Conteúdo
Regiões vazias são ritmo. Padding generoso é disciplina.
04
Branco é Silêncio
O canvas não é simplicidade — é contenção.
05
Fios, Não Sombras
Bordas carregam peso. Sombras são ultrassutis.
06
Nada do Nada
Tudo entra: fade + translate. Nada aparece do nada.
07
Tracking Negativo
−0.03em a −0.025em no tipo grande dá sensação industrial.
08
Lucide Padrão
Stroke 1.5, monocromático, sem fill. Nunca emoji.
09
Ângulos Retos Primeiro
A maioria das superfícies é quadrada. Raios são contidos.
10
Alquimista com Parcimônia
Formas orgânicas: uma vez por seção, máximo. Elas respiram.
Tipografia
Texto & Interface
Visby CF em uso contínuo — corpo de texto, labels, captions e interface.
Body LG
Experiência no detalhe. Ideias que viram sistemas, não peças avulsas.
Body
O elemento está lá porque serve, não porque enfeita. Laboratório, não improviso.
Body SM
Transformamos intenção em linguagem visual com precisão e elegância permanente.
Caption
Metadados, legendas, datas e informações auxiliares de interface.
Micro / Eyebrow
Serviços Estratégicos
Tipografia
Display — Humane
Uso exclusivo em títulos poster, numerais de destaque e aberturas de seção.
Display 2XL
LNZ
clamp(96px,14vw,224px)
Display XL
Studio
clamp(72px,10vw,160px)
Display LG
Criativo
clamp(56px,7vw,112px)
Numeral
12+
80px / orange
Tipografia
Famílias & Pesos
Dois typefaces, oito pesos disponíveis. O sistema privilegia os extremos.
Visby CF — UI & Body
Aa
Thin
100
Aa
Light
300
Aa
Regular
400
Aa
Medium
500
Aa
DemiBold
600
Aa
Bold
700
Aa
ExtraBold
800
Aa
Heavy
900
Humane — Display
Aa
Thin
100
Aa
Light
300
Aa
Regular
400
Aa
Medium
500
Aa
SemiBold
600
Aa
Bold
700
Tipografia
Escala de Títulos
H1–H5 em Visby CF. Fluid sizing via clamp() — responsivo sem media queries.
H1
Ideias que viram sistemas
H2
Experiência no detalhe
H3
Laboratório, não improviso
H4
Estratégia e execução
H5
Identidade visual de marca
Tipografia
Voz & Tom
Confiante, quieto, declarativo. Sem exclamações. Sem superlativos.
✓ Use
Transformamos intenção em linguagem visual.
Construído para durar.
Construído para durar.
✗ Evite
Somos incríveis! Os melhores do mercado!!!
Solução inovadora e disruptiva.
Solução inovadora e disruptiva.
✓ CTA
Iniciar um projeto
Ver o portfólio
Falar com o estúdio
Ver o portfólio
Falar com o estúdio
✗ CTA
CLIQUE AQUI!
FALE CONOSCO AGORA!
VER MAIS!!!
FALE CONOSCO AGORA!
VER MAIS!!!
Casing — Headlines
Sentence case, sem ponto final
Casing — Eyebrows
ALL CAPS + TRACKED
Casing — Buttons
Sentence case — nunca CAPS
Cores
Paleta Principal
Canvas, superfícies, tinta e o único laranja de ação.
Canvas & Superfícies
Canvas
--lnz-canvas
#FFFFFF
Surface
--lnz-surface
#F7F6F3
Surface Warm
--lnz-surface-warm
#F1EEE8
Line
--lnz-line
#E7E4DE
Line Soft
--lnz-line-soft
#EFECE6
Brand — Ação
Orange
--lnz-orange
#FF6E1F
Orange Deep
--lnz-orange-deep
#E85A0F
Orange Soft
--lnz-orange-soft
#FFE5D4
Orange Ink
--lnz-orange-ink
#9A3B0A
Cores
Escala Neutra
Escala de tinta — do preto quente ao placeholder. Cinco degraus.
Ink
--lnz-ink
#141412
Ink 2
--lnz-ink-2
#3A3A36
Ink 3
--lnz-ink-3
#6E6E67
Ink 4
--lnz-ink-4
#A6A59E
Ink 5
--lnz-ink-5
#CFCDC5
Cores
Acentos & Reservados
Nunca simultâneos. Cada cor tem uma função exclusiva — nunca decorativa.
Green
--lnz-green
#7AB800 — Sucesso
Green Ink
--lnz-green-ink
#3E6200
Lilac
--lnz-lilac
#9B59C5 — Criativo
Lilac Ink
--lnz-lilac-ink
#5C2E81
Danger
--lnz-danger
#D23A2C — Destrutivo
Texto em Orange
Branco sobre laranja
Orange em Ink
Laranja sobre preto
Texto em Surface
Ink sobre off-white
Espaçamento
Escala de Espaços
Base 4px, 13 etapas. Multiplicidade consistente em todo o sistema.
Space 1
4px
Space 2
8px
Space 3
12px
Space 4
16px
Space 5
20px
Space 6
24px
Space 7
32px
Space 8
40px
Space 9
56px
Space 10
72px
Space 11
96px
Space 12
128px
Space 13
160px
Espaçamento
Grid & Layout
12 colunas, gutter responsivo. Containers de 640px a 1560px.
1
2
3
4
5
6
7
8
9
10
11
12
8 cols — hero copy
4 cols — sidebar
4 cols
4 cols
4 cols
6 cols — half
6 cols — half
3
3
3
3
12 cols — full bleed
SM
640px
MD
880px
LG
1120px
XL
1360px
2XL
1560px
Espaçamento
Raios
O sistema favorece ângulos retos. Bordas arredondadas são usadas com parcimônia.
None
0
SM
2px
MD
4px
Default
6px
LG
8px
XL
14px
2XL
22px
Pill
999px
Espaçamento
Sombras
Quase nunca. Ultrassutis quando usadas. Hierarquia em 4 níveis.
Sombra 0
Nenhuma — superfície padrão
Sombra 1
Elevação mínima — inputs, listas
Sombra 2
Flutuante — dropdowns, tooltips
Sombra 3
Modal — diálogos, sheets
Sombra Pressão
Inset — estado pressionado
Sombra Foco
Anel laranja 3px — foco
Espaçamento
Movimento
Fast exit, smooth entry. Parece natural — não mecânico.
Micro
140ms
--dur-micro
ease-out
ease-out
Base
260ms
--dur-base
ease-out
ease-out
Lento
480ms
--dur-slow
ease-in-out
ease-in-out
Mola
480ms
--ease-spring
overshoot sutil
overshoot sutil
Espaçamento
Referência de Tokens
Todos os tokens principais em uma visão rápida.
| Token | Valor | Uso | |
|---|---|---|---|
| --lnz-canvas | #FFFFFF | Canvas principal | |
| --lnz-surface | #F7F6F3 | Superfície off-white | |
| --lnz-ink | #141412 | Texto primário | |
| --lnz-orange | #FF6E1F | Ação única — botões, links | |
| --lnz-line | #E7E4DE | Divisores, bordas | |
| --ff-sans | "Visby CF", DM Sans, Inter | UI, body, headings | |
| --ff-display | "Humane", Bebas Neue | Poster, numerais, display | |
| --space-7 | 32px | Gap padrão de componentes | |
| --radius-md | 4px | Raio padrão de UI | |
| --dur-base | 260ms | Transição padrão | |
| --ease-out | cubic-bezier(.22,.61,.36,1) | Curva default |
Componentes
Badges & Tags
Labels curtos. ALL CAPS, sem soft shadows, sempre com intenção semântica.
Badges — pill
Default
Destaque
Novo
Ativo
Beta
Erro
Tags — retangular
Branding
Featured
Web Design
Motion
Strategy
Em branco
Laranja
Sucesso
Tag Ativa
Componentes
Cards
Três variantes de superfície. Sem sombra em repouso — borda sutil define o limite.
Branding
Identidade visual
Construção de marca com sistema visual coeso e aplicações consistentes.
Digital
Experiências web
Sites, plataformas e interfaces com intenção editorial e performance.
Strategy
Posicionamento
Diagnóstico, narrativa e direção criativa para marcas em crescimento.
Componentes
Campos de Formulário
Labels em ALL CAPS. Foco em laranja. Sem sombras em repouso.
Componentes
Nav & Rodapé
Nav sticky com blur. Footer em ink com mark Humane em laranja.
Componentes
Controles & Seleção
Toggles, checkboxes e radios. Estado ativo sempre em laranja; transição spring para o polegar do toggle.
Toggles
Notificações
Ativo por padrão
Modo escuro
Inativo
Atualizações
Desabilitado
Analytics
Ativo e desabilitado
Checkboxes
Radios
Componentes
Tabs & Filtro
Três padrões de navegação horizontal: tab underline, chips de filtro e segmented control.
Tab underline
Exibindo conteúdo da aba Visão Geral. Clique nas outras abas para alternar.
Filter chips
Segmented control
Componentes
Sliders
Range inputs com trilha ultrafina e polegar laranja. Estado desabilitado em 35% de opacidade.
Componentes
Tooltips
Fundo ink, radius 4px, sem seta decorativa. Quatro posicionamentos e variante laranja para ações destrutivas ou de destaque.
Tooltip padrão — topo
Tooltip — base
Tooltip — direita
Confirmar exclusão
Design System LNZ v1
Componentes
Lista Editorial
Padrão de conteúdo vertical com numeração em display, título grande e metadado alinhado à direita. Divider hairline entre itens.
01
Identidade Visual Completa
Logo, paleta, tipografia, formas alquimistas e guia de uso
02
Website Institucional
Design, desenvolvimento e SEO técnico
03
Design System v1
Tokens, componentes, documentação interativa
04
Estratégia de Conteúdo
Voz da marca, calendário editorial e templates
05
Motion Guidelines
Tokens de duração, easing curves e princípios
Componentes
Empty States
Ícone Lucide em ink-5, sem fundo colorido. Texto em ink-4. CTA opcional alinhado ao centro.
Nenhum projeto
Você ainda não tem projetos ativos. Crie um para começar.
Sem resultados
Nenhum item corresponde à sua busca. Tente outros termos.
Sem arquivos
Faça upload de arquivos para visualizá-los aqui.
Brand
Suite de Logotipos
Seis variações para todos os contextos. Nunca deformar, nunca recolorizar.
Horizontal — Preto
Nav, rodapé em fundo claro
Horizontal — Laranja
Nav em fundo escuro
Stacked — Laranja
Layouts verticais, apresentações
Mark — Laranja
Favicon, avatar, ícone de app
Small — Laranja
Versão compacta para espaços reduzidos
Profile Circle
Avatar circular, redes sociais
Brand
Formas Alquimistas
Formas orgânicas da marca. Nunca em escala de ícone. Uma vez por seção, no máximo. Elas respiram.
Alchemist Shape — Orange
SVG vetorial · Uso em hero, CTA bands
Alchemist Shape — Black
SVG vetorial · Uso em fundos claros
Alchemist Flow — Orange
PNG · Uso em seções escuras, full-bleed
Texture 1 & 2
PNG grain · Overlay sutil em camadas especiais
Brand
Iconografia
Lucide Icons — stroke 1.5, 22px padrão, currentColor. Nunca preenchidos, nunca emoji.
arrow-right
arrow-up-right
check
x
plus
minus
chevron-right
chevron-down
menu
search
mail
phone
instagram
linkedin
globe
layers
layout
code-2
pen-tool
camera
video
sparkles
star
zap
target
briefcase
calendar
clock
map-pin
users
user
settings
external-link
download
upload
share-2
copy
eye
heart
bookmark
Tamanhos e Uso
16px — compact
22px — padrão
28px — large
Orange — apenas ação focal
Brand
Specimen de Hero
Exemplo completo de seção hero: tipografia, espaçamento, cor, shape e hierarquia em ação.
Estúdio Criativo
Ideias que viram
sistemas
sistemas
Transformamos intenção em linguagem visual. Marca, web e experiência — construídos para durar.