Ui
Plano clínico em papel fosco
shadcn/ui é um workshop para a criação de um sistema de design monocromático: uma tela branca limpa, superfícies em tons suaves de cinza quente e cartões de grande raio posicionados nas bordas mais sutis. A interface é quase inteiramente acromática — texto preto, superfícies brancas, tons secundários de cinza — com uma única cor vermelha, disruptiva, reservada para estados de erro e nada mais. A tipografia se baseia na neutralidade geométrica do Geist, com altura de letra reduzida nas telas, criando uma sensação calma, semelhante à de código, que lembra mais uma infraestrutura de desenvolvimento do que um produto para o consumidor final.
Imagens minimalistas — o sistema consiste quase inteiramente na interface do usuário. Sem fotos principais, ilustrações ou elementos gráficos decorativos. As demonstrações do produto são apresentadas como protótipos de componentes (cartões, campos de entrada, botões) em uma grade, servindo tanto como documentação quanto como conteúdo visual. Os ícones são linhas geométricas finas (provavelmente inspiradas no Lucide) com 1,5 a 2 pixels de espessura, nas cores #0a0a0a ou #737373, usadas com parcimônia como indicadores funcionais. A linguagem visual são os próprios componentes da interface — a página funciona como um guia de estilo vivo, onde cada elemento visível é um elemento de design visível.
Paleta
Neutro
- Canvas
#f5f5f5— Fundo da página, preenchimento de superfície discreto, botões adicionais. - Paper
#ffffff— Superfícies de cartões, fundos pop-up, preenchimentos de botões principais - Surface Alt
#fafafa— Fundo da barra lateral, opção de cartão discreta, estado ocioso do campo de entrada. - Ink
#0a0a0a— Texto principal, títulos, rótulos de botões, contornos de ícones. - Ink Soft
#171717— Imagens de fundo de botões com preenchimento, texto adicional em superfícies claras. - Mid Gray
#737373— O texto principal, o texto de exemplo, os rótulos auxiliares e o preenchimento do ícone em repouso estão todos silenciados.
Tipografia
de 12 a 48px · 8 etapas
- Geist — substituição: Inter · esboços 400, 500, 600 · Todo o texto da interface — corpo do texto com espessura de linha de 14px/400, títulos com espessura de linha de 24–48px/600 e botões com espessura de linha de 13–14px/500. As formas geométricas das letras e a espessura uniforme das linhas da fonte Geist criam uma sensação neutra para as ferramentas de desenvolvedor; uma espessura de linha de 600 com espaçamento entre letras de 48px e espaçamento entre letras de -0,05em garante títulos claros e confiantes que parecem bem elaborados em vez de editados.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8px |
| Raio do botão | 18px |
| Raio do cartão | 24px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 48-80px |
| Largura da página | 1280px |
A IA criará seu site no estilo Ui e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Ventriloc — Um observatório editorial de dados em papel morno – uma única brasa alaranjada destacando a precisão monocromática.
- Geniestudio — Um caderno leve e delicado — daqueles com margens largas e um traço grosso de caneta.
- xAI — Laboratório de Creme Quente com Pílula Preta
- Cal — Praticidade monocromática, uma abordagem humana. Um sistema que prioriza a clareza e a funcionalidade através de uma paleta estritamente em preto e branco, mas que a suaviza com tipografia amigável e formas arredondadas.
- Scale — Um laboratório fotográfico de alta qualidade, com padrão de museu, combinado com um projeto técnico.
- Contractbook — contratos de papel creme sob um céu ultramarino
- AutoSend — Um estúdio aconchegante de pedra com uma única luz roxa — onde títulos em fonte serifada e chamadas à ação em um vibrante tom de índigo coexistem em um espaço tranquilo, quase branco.
- Air — escultura "Céu da Meia-Noite Através do Vidro"
- SpatialChat — pulso roxo em pergaminho branco
- Squarespace — Galeria Cinematográfica Monocromática
- Giga — Horizonte da meia-noite sobre obsidiana congelada
- Supabase — Um editor de código à meia-noite com um ponto verde fosforescente — um único pulso cromático num mar de poeira de carvão.