Template de site
Scalar - Modelo para produto/aplicativo/SaaS em Next.js & Astro
Modelo moderno para produtos, aplicativos e soluções SaaS, desenvolvido com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Ideal para projetos no GitHub, softwares open source ou soluções SaaS voltadas para desenvolvedores e comunidades.
SaaS · E-commerce · Grátis
Análise do design
Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.
- Visão geral
Produto SaaS, limpo e técnico, baixa densidade, claro
- Paleta
fundo #ffffff; superfícies #ffffff, #f9fafb; texto #111827; texto suavizado #6b7280; primário #10b981; acentos #374151, #ef4444, #f59e0b
- Tipografia
títulos Inter, 700, caixa de frase; corpo Inter, 14px; escala h1 48px, h2 32px, h3 24px
- Forma e espaçamento
raio de botão/cartão 8px, bordas 1px solid #e5e7eb, sombras nenhuma, espaçamento entre seções 80px, largura do conteúdo 1280px
- Seções (de cima para baixo)
- Cabeçalho — navegação horizontal com logotipo, links, contagem de usuários, login e botão CTA; fundo branco
- Hero — título centralizado, subtítulo e dois botões CTA (escuro e delineado); fundo branco
- Tabela de fluxo de trabalho — grade de dados em largura total com colunas para fluxos de trabalho, gatilhos, status, usuários e última atualização; linha de cabeçalho cinza-claro, opacidade alternada nas linhas; fundo branco
- Barra lateral — painel de trecho de código alinhado à direita com consulta GraphQL com realce de sintaxe; posição fixa, sobreposição semitransparente
- Detalhes marcantes
- Bloco de código monoespaçado na barra lateral com realce de sintaxe
- Indicadores de status usando etiquetas coloridas (verde, vermelho, cinza)
- Ícones de avatar com iniciais e fundos codificados por cores
- Interface minimalista sem elementos decorativos
- Estados de passagem do mouse em linhas da tabela e botões
- Tipografia limpa e alinhada com espaçamento consistente
- Outras páginas
- /workflows: interface de gerenciamento de fluxos de trabalho com controles de filtro/ordenação
- /community: layout de fórum de discussão com avatares de usuários e threads de mensagens
Detalhes do template
- Categoria
- SaaS, E-commerce
- Feito com
- Next.js, Astro, Tailwind CSS, shadcn/ui
- Licença
- Commercial
- Autor
- Shadcnblocks
- Publicado em
- Shadcnblocks
- Preço
- Grátis
Design original de Shadcnblocks, publicado no Shadcnblocks. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.
O briefing de onde o Ottermind parte
Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.
Construa um site SaaS inspirado no modelo "Scalar". Resumo de referência: modelo moderno para produtos, aplicativos e soluções SaaS, desenvolvido com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Ideal para projetos no GitHub, softwares open source ou soluções SaaS voltadas para desenvolvedores e comunidades. Use os conteúdos e imagens originais da minha marca, não os conteúdos de exemplo do modelo.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
