Da ideia à conversa
Um ponto de partida para qualquer possibilidade.
O que vamos criar hoje?
Pronto para sua próxima ideia↵ enviar · ⇧ ↵ nova linha
Design system/Biblioteca de componentes
ONIHAUS / DESIGN SYSTEM
Um sistema.
Infinitas possibilidades.
Inteligência com identidade. Da primeira ideia ao que vem depois.
Uma identidade. Muitas possibilidades.Molduras que conectam.
Oni GreenHaus Gold
34 famílias de componentes
PROMPT INPUT
A inteligência certa
Um modelo para cada momento.
RápidoRaciocínio avançado
Uma conversa em movimento
Experimente uma conversa completa. Envie, interrompa, continue.
Um espaço para pensar juntoConversa simulada · sem APIs externas
HOJE · UM NOVO COMEÇO
OnihausOni Pro
Oi! Sou a Oni. Vamos dar forma a uma ideia? Me conte o que você quer criar — uma marca, uma imagem ou um novo projeto.
↵ enviar
Escreva uma mensagem ou escolha um ponto de partida.Composição · estados · movimento
01 / ONIHAUS UI
Fundamentos
Uma base compartilhada para todas as experiências.
Luz, profundidade e matéria
Três transparências. A mesma linguagem visual.
01 / CLEAR
Leve por natureza.
A cor atravessa. O conteúdo permanece.
12 px blur · 10% tint02 / FROSTED
Um pouco mais perto.
Difusão suave para momentos de foco.
32 px blur · 28% tint03 / LIQUID
Uma nova dimensão.
Reflexos nas bordas. Profundidade no toque.
24 px blur · optical rim Feito para suas próximas ideias.
GlassSurface · clear, frosted e liquid · fundo translúcido, desfoque e reflexos reutilizáveis.
GLOW / FEEDBACK
Uma resposta em luz.
Hover, foco, toque e geração com halos suaves.
Passe o cursor ou toque
Cores e superfícies
Selecione uma cor para copiar seu valor.
Campos de possibilidades
A cor cria o ambiente. O vidro deixa a luz atravessar.
Tipografia
Inter · títulos leves, contraste de escala e espaço para ler.
Título principal72 / 73
Ideias.
Título de seção40 / 46
Um espaço para criar
Subtítulo24 / 31
Sua próxima descoberta
Texto16 / 26
Cada conversa abre novas possibilidades.
Rótulo14 / 21
Nome do projeto
Legenda12 / 18
Atualizado há 2 minutos
Código13 / 22
const ideia = await onihaus.criar()
Espaçamento e forma
Escala de 4 px. Curvas que acolhem o conteúdo.
040.25 rem080.5 rem120.75 rem161 rem241.5 rem322 rem483 rem644 rem8 px24 px40 pxpillSuperfície
shadow.softSobreposição
shadow.raisedIconografia
Símbolos Onihaus + ícones funcionais Lucide · traço de 1,65 px.
Ícones acompanham rótulos. Ações sem texto recebem nome acessível e tooltip.
Pronto para reutilizar
Uma fonte de verdade, de ponta a ponta.
// Superfície Onihaus
background: var(--orbit-glass);
border-radius: var(--orbit-radius-lg);
box-shadow: var(--orbit-shadow-soft);O movimento também é linguagem
Toque nas peças. Sinta cada mudança de estado.
Emil KowalskiSuave ao entrar. Imediato ao responder.
01 / PRESSÃO E RESPOSTA
Um clique, uma resposta
Pressão tátil, carregamento e confirmação no mesmo botão.
02 / SELEÇÃO CONTÍNUA
O contexto acompanha você
O vidro desliza junto com a seleção. Nenhum salto entre estados.
03 / CONFIRMAÇÃO
Um pequeno momento de certeza
Toque no ícone para confirmar e retornar ao estado inicial.
04 / ENTRADA EM SEQUÊNCIA
Briefing.pdf
Referências.png
Pesquisa.md
Uma coisa de cada vez
Uma sequência curta dá ritmo à chegada de novos arquivos.
05 / MUDANÇA DE ESTADO
Cada descoberta conta
Uma transição breve marca a chegada de informação nova.
06 / GERAÇÃO
A inteligência está trabalhando
O ritmo aparece durante a geração e desaparece ao concluir.
Histórias que explicam
Vídeos de apresentação para cada frente da Onihaus. MP4 ou YouTube, com a mesma identidade.
Reproduz somente ao clicar · Controles nativos
VÍDEO ONIHAUSIA para Marketing e Vendas
Inteligência aplicada à comunicação e às vendas.
Como usar este componente
MP4: reprodução, volume, busca na linha do tempo e tela cheia pelo navegador. YouTube: controles do player incorporado. As capas desta demonstração usam imagens da biblioteca Onihaus.
<VideoPlayer source="mp4" src="/design/videos/onihaus/marketing-ia.mp4" title="IA para Marketing e Vendas" poster="/design/images/onihaus/scene-17.webp" /> <VideoPlayer source="youtube" src="URL_OU_ID_DO_VIDEO" title="IA para Marketing e Vendas" />
Legendas opcionais: passe captions com src de arquivo WebVTT, language e label. Nenhuma faixa de legendas foi fornecida para estes exemplos.
Documentação oficial do player YouTube ↗Uma marca. Muitas línguas.
Seleção de idioma com bandeiras, nomes nativos e indicação da opção ativa.
MARKETING INTERNACIONAL
Novos mercados. Conexões sem fronteiras.
Inteligência artificial e estratégia para conectar sua construtora a novos públicos, em diferentes idiomas.
Nome completo · configurações
Compacto · cabeçalhos
Indisponível
Uso e comportamento
As versões compartilham a seleção nesta demonstração. Apenas a prévia acima é traduzida. Use Tab, Enter e as setas para navegar; Escape fecha o menu. O nome acompanha a bandeira para que o idioma não dependa apenas de identificação visual.
const [language, setLanguage] = useState<LanguageCode>('pt-BR');
<LanguageSwitcher
value={language}
onValueChange={setLanguage}
variant="compact"
/>Na aplicação, conecte onValueChange às traduções e rotas de idioma. Defina o atributo lang da página e salve a preferência conforme a estratégia de internacionalização do produto.
02 / ONIHAUS UI
Componentes básicos
Peças essenciais, prontas para se combinar.
Botões
Variantes, ações e estados de interação.
Primário
Secundário
Vidro
Discreto
Destrutivo
Com ícone
ESTADOS
Padrão
Hover
Foco
Selecionado
Desabilitado
Carregamento
Campos de entrada
Texto, senha, busca e área de texto.
Escolha um nome fácil de encontrar.
Insira um e-mail válido, como marina@example.com.
Gerenciado pela sua organização.
Seleção e controles
Escolhas claras, do simples ao granular.
Mais precisoMais criativo
Avatares e badges
Identidade, contexto e status.
CATEGORIAS
STATUS
Tooltip e menu dropdown
Ações complementares sempre à mão.
Passe o mouse ou use Tab para explorar as dicas.
Accordion
Detalhes no ritmo de quem explora.
Um prompt combina campo de texto, botões, seletor de modelo e upload. Os mesmos tokens mantêm todas as peças consistentes.
Alertas e feedback
Contexto útil, na hora certa.
Seu contexto faz a diferença
Adicione arquivos para receber respostas mais relevantes.
Tudo pronto para começar
Seus arquivos foram processados.
Créditos perto do limite
Você já utilizou 80% do seu limite mensal.
Não foi possível concluir
Tente novamente em alguns instantes.
Modal, drawer e toast
Experimente cada interação.
Esc fecha a sobreposição. O foco retorna à ação que a abriu.
Navegação
Tabs, breadcrumbs e paginação.
3 conversas sobre a nova identidade da Aurora.
Página 1 de 3
03 / ONIHAUS UI
Componentes de IA
Inteligência com contexto, clareza e controle.
Uma conversa que evolui
Mensagens, ações e fontes consultadas.
MLVocêagora
Como podemos começar a identidade da Aurora?
OnihausOni Proagora
Vamos começar pela essência: o que a Aurora representa e como quer ser percebida. Depois, traduzimos isso em três pilares — voz, cor e forma — para criar uma identidade que faça sentido em cada ponto de contato.
Princípios de design acessívelw3.org
Código com contexto
Linguagem, realce e cópia em uma ação.
const projeto = await onihaus.projetos.criar({
nome: "Identidade da Aurora",
modelo: "orbit-pro",
});FONTE CONSULTADA
Documentação do Reactreact.dev
GERAÇÃO EM ANDAMENTO
Exemplo de estado de geração4s
Ideias que ganham imagem
Explore, amplie e crie novas perspectivas.
16:9Inteligência na obraOni Vision
Profissionais conectados no canteiro de obras. Imagem ilustrativa fornecida para esta demonstração.
Contexto que faz a diferença
Upload local com progresso e validação.
Solte suas ideias aqui
PDF, TXT, Markdown e imagens · até 20 MB
Arquivos ficam apenas nesta sessão de demonstração.
Uma parceira para cada missão
Avatar, função, ferramentas e disponibilidade.
Disponível
Íris
Sua parceira de pesquisaConecta referências, encontra perspectivas e transforma perguntas em descobertas.
Ferramentas com propósito
Você escolhe o que seu agente pode fazer.
ETAPAS DE EXECUÇÃO
Você no controle
Ações importantes pedem uma decisão explícita.
Sua aprovação é importante
AguardandoÍris quer adicionar o resumo da pesquisa ao projeto Aurora.
Pesquisa de referências.md Projeto Aurora · 4,2 KB
Um lugar para suas ideias
Contexto compartilhado, trabalho conectado.
Em andamento
Identidade da Aurora
Estratégia e linguagem visual para uma marca que está nascendo.
8 arquivos·12 conversas
MLLAAC+2
Há 2 horasClareza para continuar criando
Consumo, saldo e limite sempre visíveis.
Seus créditosOni Pro
320disponíveis
680 utilizadosLimite de 1.000
Renovação em 1º de outubro
Tudo a um atalho
Busca, grupos de ações e navegação pelo teclado.
Explorar prompts↵Ver imagens geradas↵Explorar projetos↵
Cada estado tem seu lugar
Vazio, carregando e limite atingido.
Espaço para um novo começo
Reúna suas ideias, conversas e arquivos em um projeto.