Device preview
Alterne o viewport para revisar a mesma composição em mobile, tablet e desktop.
Desktop • Tela livre
Uma landing page inteira montada com os blocos de marketing já componentizados.
Esta rota costura o fluxo completo de aquisição e posicionamento da biblioteca, do topo da navegação até o fechamento com contact, CTA, footer e um apêndice para logo e icon system.
Build product marketing pages with a library your AI can actually trust.
Camaleon UI une tokens, componentes e blocos compostos em uma base white-label preparada para geração assistida, handoff e distribuição consistente.
White-label real com tokens semânticos
Registry pronto para agentes e times
Blocos compostos para acelerar páginas reais
Components ready for launch
Registry items
28+
Themes active
3
Application blocks
10+
Brand assets
5+
Ready for iterative rollout
Ideal para equipes que querem publicar rápido e ajustar depois por tema, marca e densidade.
A section library designed to keep generated frontends sharp.
Este bloco cobre a camada de valor e diferenciação típica de landing pages, produto e páginas de posicionamento.
Semantic theming
Troque cor, tipografia, raio e densidade sem reescrever a implementação.
Composable blocks
Use blocos compostos para acelerar hero, onboarding, dashboards e docs.
Fast delivery
A IA começa por patterns estáveis em vez de improvisar layouts frágeis.
Safer handoff
Registry e package deixam o consumo mais previsível entre agentes e times.
Trusted by product teams shipping fast without sacrificing polish.
Use esta seção para ancorar credibilidade, imprensa e validação social em páginas de produto, serviço ou biblioteca.
Customer stories that reinforce trust without flattening the visual system.
Use esta seção para transformar prova social em narrativa, mostrando resultado, contexto e credibilidade em páginas de produto ou biblioteca.
We swapped ad hoc launch pages for a reusable rollout kit and shipped our refresh in 12 days without sacrificing polish.
Maya Chen
VP Product at Northstar
The registry plus the packaged blocks gave our growth team a stable starting point, so the AI stopped inventing new layouts every sprint.
Jonas Price
Growth Lead at Frameflow
We finally have a white-label layer that works for demos, documentation and product marketing without branching the design system.
Elena Torres
Design Systems Manager at Auralith
Introduce the people behind the product without dropping the system language.
Esta seção ajuda a humanizar a página com perfis curtos, foco claro e densidade visual compatível com landing pages e superfícies institucionais.
Maya Chen
Product Lead
Owns rollout strategy across docs, registry and product marketing surfaces.
Jonas Price
Growth Design
Turns reusable sections into campaigns that still feel intentional and brand-safe.
Elena Torres
Design Systems
Bridges white-label tokens, implementation quality and long-term maintainability.
Ari Patel
Developer Experience
Keeps package delivery, registry consumption and agent workflows aligned.
Pricing designed for rollout, not for design debt.
Uma seção de planos pronta para IA montar páginas comerciais sem cair em tabelas genéricas e sem densidade visual excessiva.
Starter
Plan$0
Perfeito para validar o stack e publicar o primeiro projeto.
Theme tokens
Core components
1 active brand
Growth
Popular$89
Para times usando agents e blocos compostos em mais de um produto.
Private registry
Application blocks
Up to 5 active brands
Scale
PlanCustom
Governança, distribuição e múltiplos handoffs entre equipes.
Advanced theming
Design operations
Unlimited brands
Answers that reduce objections before the final conversion step.
Esta seção organiza dúvidas recorrentes em um formato leve, escaneável e pronto para fechar páginas comerciais ou institucionais.
Still evaluating fit?
Combine esta faixa com pricing e CTA para responder dúvidas sem transformar a landing page em uma parede de texto.
ConsumptionQuando devo consumir via package e quando devo puxar via registry?
+-
Quando devo consumir via package e quando devo puxar via registry?
Use o package quando a biblioteca fizer parte do stack contínuo do produto. Use o registry quando você quiser instalar componentes ou blocos sob demanda em apps que não precisam carregar toda a biblioteca.
White-labelEsses blocos são realmente white-label ou ainda carregam identidade rígida?
+-
Esses blocos são realmente white-label ou ainda carregam identidade rígida?
A estrutura visual nasce com uma direção forte, mas o contrato é semântico. Cor, tipografia, raio, densidade e superfícies podem ser trocados sem reescrever o componente.
AI workflowComo esse fluxo ajuda agentes de IA a gerar páginas melhores?
+-
Como esse fluxo ajuda agentes de IA a gerar páginas melhores?
Em vez de improvisar páginas inteiras do zero, a IA passa a montar telas com componentes estáveis, blocos conhecidos e dependências previsíveis, o que reduz drift visual e retrabalho.
CompositionPosso combinar essas seções com componentes de application e editorial?
+-
Posso combinar essas seções com componentes de application e editorial?
Sim. O catálogo foi pensado para misturar blocos de marketing, superfícies editoriais e componentes de aplicação dentro do mesmo tema sem quebrar o sistema.
Close the page with a contact surface that still feels product-grade.
Este bloco combina pontos de contato, contexto operacional e um formulário simples para demos, onboarding comercial ou handoff com clientes.
Sales conversations
Talk through rollout scope, distribution model and design-system fit.
sales@untitledui.local
Implementation support
Get help connecting registry delivery, package usage and tokens in production.
Mon-Fri, 9am-6pm
Regional coverage
Coordinate launches with product, growth and platform stakeholders.
Sao Paulo, Lisbon, New York
Need an executive walkthrough?
Book a rollout session for design, engineering and operations together.
Tell us what you are shipping next.
A compact form block for final outreach without breaking the rhythm of the landing page.
We usually reply within one business day.
Ready to publish a UI library your agents can actually reuse?
Feche a landing page com um CTA claro para trial, demo ou onboarding operacional sem perder a identidade white-label.
A mesma landing pode terminar com uma camada viva de assets e identidade.
Logos, lockups e superfícies claras e escuras no mesmo ritmo do arquivo.
A seção segue a página `↳ Logos` com `Logomark`, `Logo`, `Press logo` e uma vitrine de `Company logo` em `Default` e `Badge`.
Logomark
Logo
Press logo
Company logo / Light mode
Default e Badge no mesmo agrupamento visual do Figma.
Default
Badge
Company logo / Dark mode
Mesmo repertório sobre a superfície escura da página.
Default
Badge
Ícones por domínio, padrões de uso e documentação viva a partir da página `↳ Icons`.
O arquivo do Figma não mostra só o catálogo. Ele também registra exemplos de navegação, componentes com e sem texto, regras de escala, overrides e export. Esta vitrine preserva essa mesma lógica em código.
Families
3463:407486
Layout
Grid, alignment, layers, rows, columns e controles de estrutura.
3463:407551
Charts
Bar charts, line charts, pie charts e tendências para métricas.
3463:407602
Security
Face ID, file locks, password states e sinais de proteção.
3463:408638
Weather
Conjunto climático com nuvens, temperatura, sol, lua e vento.
Reference icon
`align-bottom-01`
Exemplo direto de símbolo exportado da categoria `Layout`. Serve como referência de stroke, respiro e ritmo visual para os mapeamentos futuros da biblioteca completa.
Imported SVG library
Activity Heart
activity-heart.svg
Activity
activity.svg
Airplay
airplay.svg
Airpods
airpods.svg
Alarm Clock Check
alarm-clock-check.svg
Alarm Clock Minus
alarm-clock-minus.svg
Alarm Clock Off
alarm-clock-off.svg
Alarm Clock Plus
alarm-clock-plus.svg
Alarm Clock
alarm-clock.svg
Alert Circle
alert-circle.svg
Alert Hexagon
alert-hexagon.svg
Alert Octagon
alert-octagon.svg
Alert Square
alert-square.svg
Alert Triangle
alert-triangle.svg
Align Bottom 01
align-bottom-01.svg
Align Bottom 02
align-bottom-02.svg
Align Center
align-center.svg
Align Horizontal Centre 01
align-horizontal-centre-01.svg
Align Horizontal Centre 02
align-horizontal-centre-02.svg
Align Justify
align-justify.svg
Align Left 01
align-left-01.svg
Align Left 02
align-left-02.svg
Align Left
align-left.svg
Align Right 01
align-right-01.svg
Esta grade já usa os SVGs locais exportados do seu arquivo no Figma. Conforme fecharmos mais famílias, a biblioteca e os manifestos aumentam sem exigir credenciais extras ou dependência do pacote pago.
Universal icons
Universal icons
Universal icons duotone
Contrato de duotone
Base stroke em `brand-700` e camada `Fill` com opacidade reduzida para manter leitura e consistência no white-label.
Universal icons duotone
Navigation example
Captura exata do Figma
Icons with text
Dashboard
Customers
Projects
Analytics
Settings
Referência do arquivo
Icon components without text
Referência do arquivo
Icon components with text
Referência do arquivo
Icon scaling example
24px
48px
24px
48px
24px
48px
Referência do arquivo
Icon overrides
1. Master icon
2. Change color
3. Change stroke
4. Change instance
Referência do arquivo
Anatomy of an icon
Duotone icon
Stroke color `brand-700` com espessura consistente para o layer principal.
Camada `Fill` separada, com opacidade controlada para manter contraste e flexibilidade de tema.
Referência do arquivo
Avoid boolean groups
Single path icons geram SVG mais leve e com stroke editável.
Boolean groups aumentam peso e dificultam ajustes de traço.
Duotone deve manter layer `Icon` e layer `Fill` com opacidade controlada.
Referência do arquivo
Single path vs boolean group
Referência do arquivo
