CaisLab
CaisLab

Em um mar de possibilidades, direção.

CaisLab é a travessia inteira, o cais e o lab no mesmo movimento.

02capítulo 02 · tipografia

Bricolage
Grotesque

Grotesca com textura de bancada.

Bricolage significa “faça você mesmo” em francês. A tipografia apresenta pequenas irregularidades propositais em seus traços, como se cada letra tivesse passado por uma ferramenta manual antes de se transformar em produto digital.

Essa característica conecta a precisão do design contemporâneo ao espírito de protótipo, experimento e prova de conceito presente na CaisLab.

Uma única família para construir todo o sistema.

Bricolage Grotesque funciona tanto em títulos quanto em textos e informações de interface. Essa versatilidade reduz a necessidade de fontes complementares e torna a identidade mais simples, consistente e reconhecível.

Google Fonts · Gratuita · Família variável · Pesos de 200 a 800

Escala tipográfica

Uma família, nove papéis. Cada linha mostra o papel ao vivo, com o tamanho, a entrelinha e o peso que ele usa.

  • DisplayDa ideia ao movimento48 / 52 · -0.02em700capas e números herói
  • Título 1Da ideia ao movimento40 / 44 · -0.01em700aberturas de seção
  • Título 2Da ideia ao movimento32 / 38700subtítulos fortes
  • Título 3Da ideia ao movimento24 / 30500blocos e destaques
  • Corpo grandeDa ideia ao movimento18 / 28400introduções e leitura confortável
  • CorpoDa ideia ao movimento16 / 24400texto padrão e interface
  • PequenoDa ideia ao movimento14 / 20400apoio e legendas
  • LegendaDa ideia ao movimento12 / 16500metadados
  • Label / eyebrowCapítulo 02 · Tipografia12 / 16 · 0.24em500caixa alta, tracking largo

Pesos principais

CaisLab

Regular — 400

Clareza para textos, descrições e conteúdos de leitura.

CaisLab

Medium — 500

Presença para informações, navegação e pequenos destaques.

CaisLab

Bold — 700

Força para títulos, mensagens e ideias principais.

Leis da tipografia

  1. 01Uma única família: Bricolage Grotesque.Nenhuma segunda fonte — a identidade fica simples e reconhecível.
  2. 02700 para títulos, 500 para navegação e destaque, 400 para corpo.Cada peso tem um papel; misturar papéis quebra a hierarquia.
  3. 03Tamanhos grandes fecham a entrelinha e o tracking.Display 48/52 a -0.02em e Título 1 40/44 a -0.01em mantêm o bloco firme.
  4. 04Hierarquia por opacidade (100 · 70 · 60), nunca por cinzas inventados.O texto sempre deriva da cor oficial do tema.
  5. 05Fonte de dado/número: pendente.Ainda não definida — não usar monoespaçada até a decisão.

Da ideia
ao movimento.

Bricolage Grotesque — a voz visual da CaisLab.

03capítulo 03 · cores

Cor também é direção.

A paleta da CaisLab não representa apenas tecnologia. Ela conta uma travessia: parte da profundidade, cria espaço para observar, encontra um horizonte, recebe direção e transforma uma ideia em movimento.

“Nenhuma cor entra apenas para decorar. Cada uma indica onde estamos — e para onde podemos seguir.”

Nível 1

Paleta oficial

As cinco cores que governam o produto e este design system. Só elas entram em interface. Clique para copiar.

fundo escuro, o mar

O desconhecido antes da descoberta. É onde existem os problemas ainda não compreendidos, as perguntas que ainda não foram feitas e as oportunidades que permanecem abaixo da superfície.

Mar Profundo não representa vazio. Representa profundidade, investigação e descoberta.

fundo claro, o papel

O espaço onde se observa, desenha e encontra direção. Representa estratégia, descoberta e construção antes de uma ideia se transformar em produto.

Fundo claro principal da CaisLab. O off-white quente aproxima a marca do papel, dos mapas e dos cadernos de laboratório — branco puro não é o fundo automático de todas as páginas.

estrutura, superfícies, componentes

A estrutura que sustenta a travessia. Representa engenharia, método, robustez e execução silenciosa.

Casco não é um cinza genérico. Ele representa o lado Lab da CaisLab: método, construção e produto.

acento de ação; texto sempre escuro por cima

acento de descoberta e tecnologia

Lei de acento. Farol e Horizonte são acento — cerca de 10% da tela, nunca fundo de página inteira. Sobre Farol e sobre Horizonte, o texto é sempre Mar Profundo. O único verde oficial é Farol.

Tons de apoio

Tons da mesma cor

Cada cor ganha uma rampa curta (100 · 300 · 500 · 700 · 900) em OKLCH, com o mesmo matiz da cor de marca, para superfícies, bordas e texto de apoio. São tons da própria cor — não uma nova paleta. Clique para copiar.

mar profundo
carta nautica
casco
farol
horizonte
errofeedback
avisofeedback

Nas cores de marca e de feedback, a base fica no 500; o 700 já passa 4,5:1 e o 900 passa 7:1 como texto sobre Carta Náutica. Nas duas cores de fundo a base fica na ponta: Carta Náutica é o 100 da própria rampa e Mar Profundo é o 900, porque não existe tom mais claro que o papel nem mais escuro que o mar.

Modos

Claro e escuro

As mesmas cinco cores, em papéis trocados. Sem escolha no alternador do topo, a página segue o modo do sistema.

Modo claro

Superfície elevada

Texto de apoio em 70%.

Metadado em 60%.

FarolHorizonte
Fundo
Carta Náutica
Superfície elevada
branco quente sobre Carta
Texto
Mar Profundo · 100 / 70 / 60
Linhas
texto a 14% (decorativas)
Bordas de controle
texto a 50% · --cl-border
Foco
Horizonte 700 · --cl-focus
Acentos
Farol e Horizonte

Modo escuro

Superfície elevada

Texto de apoio em 70%.

Metadado em 60%.

FarolHorizonte
Fundo
Mar Profundo
Superfície elevada
Casco
Texto
Carta Náutica · 100 / 70 / 60
Linhas
texto a 14% (decorativas)
Bordas de controle
texto a 50% · --cl-border
Foco
Horizonte · --cl-focus
Acentos
Farol e Horizonte
Feedback

Sistema

Só em produto e feedback — não entram como cor de marca. A cor base vai em preenchimento, ícone ou borda. Para escrever no tom do estado, use o token -texto: ele troca sozinho de tom entre claro e escuro e passa 4,5:1.

✓Sucessoreutiliza Farol

Texto no tom do estado.--cl-sucesso-texto

iInformaçãoreutiliza Horizonte

Texto no tom do estado.--cl-info-texto

!Erro#E5484D

Texto no tom do estado.--cl-erro-texto

?Aviso#F5A623

Texto no tom do estado.--cl-aviso-texto

Contraste

Leitura garantida

Cada par abaixo é recalculado sempre que os tokens mudam. Texto pede 4,5:1; bordas de controle, foco e ícones pedem 3:1 (WCAG 2.2, nível AA).

UsoFrente sobre fundoMínimoClaroEscuro
texto--cl-text / --cl-bg4,5:117,72:117,72:1
texto de apoio--cl-text-70 / --cl-bg4,5:17,28:18,76:1
metadado--cl-text-60 / --cl-bg4,5:15,09:16,62:1
metadado em superfície elevada--cl-text-60 / --cl-elevated4,5:15,18:14,56:1
borda de controle--cl-border / --cl-bg3,0:13,64:14,87:1
borda de controle na superfície elevada--cl-border / --cl-elevated3,0:13,68:13,68:1
anel de foco--cl-focus / --cl-bg3,0:14,65:110,84:1
anel de foco na superfície elevada--cl-focus / --cl-elevated3,0:14,92:15,79:1
texto sobre Farol--cl-on-accent / --cl-accent-acao4,5:18,71:18,71:1
texto sobre Farol (hover)--cl-on-accent / --cl-acao-hover4,5:16,66:19,56:1
texto sobre Farol (pressionado)--cl-on-accent / --cl-acao-pressed4,5:15,01:110,47:1
texto sobre Horizonte--cl-on-accent / --cl-accent-tech4,5:110,84:110,84:1
borda/ícone de erro--cl-erro / --cl-bg3,0:13,49:15,07:1
texto de sucesso--cl-sucesso-texto / --cl-soft4,5:16,28:17,68:1
texto de informação--cl-info-texto / --cl-soft4,5:16,29:17,55:1
texto de erro--cl-erro-texto / --cl-soft4,5:16,28:17,21:1
texto de aviso--cl-aviso-texto / --cl-soft4,5:16,33:17,28:1

Paleta expressiva para arte e ilustração: a definir quando houver arte real.

Ritmo da paleta

A fundação ocupa o campo

Mar Profundo e Carta Náutica constroem os dois ambientes principais da marca.

A estrutura organiza

Casco cria hierarquia, contraste e sustentação.

A possibilidade se abre

Horizonte aparece em momentos de investigação, tecnologia e descoberta.

A direção se destaca

Farol entra quando existe decisão, ação, validação ou movimento.

“A base cria o silêncio. A cor mostra onde olhar.”

Combinações oficiais

Carta Náutica é o fundo claro principal e Mar Profundo o fundo escuro principal. Casco sustenta textos e componentes. Sobre verde ou ciano, o texto é sempre Mar Profundo — verde e ciano não funcionam como textos pequenos sobre fundos claros.

Profundidade

Da ideia ao movimento.

Fundo #070A0DTexto #F5F2E8Acentos #2CCFFF · #22C55E

Ambiente de imersão: os acentos entram apenas em pontos de descoberta e decisão.

Carta

Da ideia ao movimento.

Fundo #F5F2E8Texto #070A0DEstrutura #34404C

Superfície de leitura, documentação e desenho.

Estrutura

Da ideia ao movimento.

Fundo #34404CTexto #F5F2E8Acento #22C55E

Componentes, divisórias e superfícies de produto.

Horizonte

Da ideia ao movimento.

Fundo #2CCFFFTexto #070A0D

Não usar branco em textos pequenos sobre o ciano.

Farol

Da ideia ao movimento.

Fundo #22C55ETexto #070A0D

Não usar branco em textos pequenos sobre o verde.

Na CaisLab, a cor não decora a travessia.

Ela revela onde estamos e sinaliza o próximo movimento.

04capítulo 04 · espaçamento e grid

O espaço também dá direção.

Entre uma ideia e outra, o respiro organiza a leitura. A base de 8px dá medida ao ritmo, sem engessar a composição.

Uma escala, muitos intervalos.

De 4px a 64px. As barras mostram a proporção em escala ampliada de 4×.

4px--cl-space-1
8px--cl-space-2
12px--cl-space-3
16px--cl-space-4
24px--cl-space-5
32px--cl-space-6
48px--cl-space-7
64px--cl-space-8
01 · Base

8px como unidade.

A grade parte de 8px. O meio passo de 4px resolve detalhes; os intervalos maiores definem o ritmo.

02 · Contêiner

Margens generosas.

O conteúdo ocupa o centro, até 1400px. As margens laterais crescem com a tela (24px · 40px · 64px) e o texto corrido não passa de 68ch.

03 · Ritmo

Respiro editorial.

Aproximar o que pertence junto. Separar capítulos com espaço suficiente para que cada ideia tenha seu tempo.

Medidas que se repetem.

Contêiner, margens, alturas de controle e tempos de movimento também são tokens. Uma tela nova começa por eles, não por números soltos.

Layout

Contêiner
1400px
--cl-container
Margem base
24px
--cl-gutter-base
Margem a partir de 640px
40px
--cl-gutter-sm
Margem a partir de 1024px
64px
--cl-gutter-lg
Linha de leitura
68ch
--cl-measure

Controles

Compacto
32px
--cl-control-sm
Padrão
40px
--cl-control-md
Grande
48px
--cl-control-lg
Área de toque mínima
44px
--cl-touch-min

Movimento

Resposta
150ms
--cl-dur-fast
Troca de tema
400ms
--cl-dur-base
Revelação
900ms
--cl-dur-reveal
Linha editorial
1100ms
--cl-dur-line
Curva
saída suave
--cl-ease-out

Regras

Botões e campos usam o padrão
40px
--cl-control-md
Alvos de toque nunca menores que
44px
--cl-touch-min
Movimento reduzido zera as durações
0ms
prefers-reduced-motion

Forma e profundidade.

Três raios e uma sombra neutra, cada um com seu papel.

Pill

Botões e controles

--cl-radius-pill · 999px

Card

Superfícies

--cl-radius-card · 16px

Campo

Entradas de dados

--cl-radius-input · 12px

Sombra

Elevação discreta

--cl-shadow
05capítulo 05 · componentes

Forma a serviço da ação.

Cada escolha deve deixar claro o próximo movimento.

Botões

Hierarquia

Anatomia
Área de toque, rótulo e ícone opcional.
Variações
Primário, secundário Casco, contorno, fantasma e link.
Estados
Padrão, passar o cursor, foco de teclado e desabilitado.
Tokens
--cl-farol · --cl-acao-hover · --cl-acao-pressed · --cl-casco · --cl-estrutura-hover · --cl-border · --cl-focus · --cl-control-md · --cl-radius-pill
Faça
Use Farol para a ação principal.
Evite
Não dê o mesmo destaque a todas as ações.

Ícones e estados

Anatomia
Ícone antes ou depois do rótulo, sempre dentro da área de toque.
Variações
Ícone à esquerda ou à direita; com ou sem ícone.
Estados
Passe o cursor ou use Tab para ver hover e foco; a ação desabilitada não recebe interação.
Tokens
--cl-radius-pill · --cl-focus · --cl-border · --cl-text-70 · --cl-space-*
Faça
Faça o ícone reforçar a direção da ação.
Evite
Não use ícone sem significado para enfeitar.

Campos

Texto

Anatomia
Rótulo acima, entrada e mensagem abaixo quando necessário.
Variações
Vazio com placeholder e preenchido.
Estados
Padrão, foco, erro na borda e desabilitado.
Tokens
--cl-radius-input · --cl-border · --cl-focus · --cl-erro · --cl-erro-texto · --cl-text-70 · --cl-space-*
Faça
Mantenha o rótulo visível ao preencher.
Evite
Não use placeholder como único rótulo.

Seleção e texto longo

Anatomia
Rótulo, controle e opções; textarea mantém espaço para texto longo.
Variações
Select de opções e área de texto multilinha.
Estados
Padrão, preenchido, foco e desabilitado; erro segue o padrão do campo de texto.
Tokens
--cl-radius-input · --cl-border · --cl-focus · --cl-erro · --cl-text · --cl-space-*
Faça
Use opções claras e deixe o texto longo respirar.
Evite
Não esconda instruções importantes dentro do placeholder.

Seleção

Checkbox

Anatomia
Caixa, marca e rótulo clicável.
Variações
Desmarcado, marcado e parcial.
Estados
Padrão, foco, marcado, parcial e desabilitado.
Tokens
--cl-radius-input · --cl-farol · --cl-acao-pressed · --cl-on-accent · --cl-border · --cl-focus · --cl-space-*
Faça
Use para escolhas independentes.
Evite
Não use para escolher uma única opção entre várias.

Radio

Fundo da peça
Anatomia
Círculo, ponto de seleção e rótulo clicável.
Variações
Uma opção por grupo; com opção indisponível.
Estados
Padrão, selecionado, foco e desabilitado.
Tokens
--cl-radius-pill · --cl-acao-pressed · --cl-border · --cl-focus · --cl-space-*
Faça
Use para alternativas mutuamente exclusivas.
Evite
Não apresente mais de uma opção ativa no mesmo grupo.

Switch

Anatomia
Trilho, indicador móvel e rótulo clicável.
Variações
Ligado e desligado.
Estados
Padrão, ligado, desligado, foco e desabilitado.
Tokens
--cl-radius-pill · --cl-casco · --cl-farol · --cl-acao-pressed · --cl-carta-nautica · --cl-mar-profundo · --cl-focus · --cl-space-*
Faça
Use para ações que entram em vigor imediatamente.
Evite
Não substitua uma confirmação obrigatória por um switch.

Cards

01 · CONTEÚDO

Uma ideia por vez.

Título, contexto e ação no mesmo espaço.

Ver cores
Anatomia
Superfície, título, contexto e ação opcional.
Variações
Informativo com ou sem ação.
Estados
Padrão; foco e hover na ação, não na superfície estática.
Tokens
--cl-radius-card · --cl-line · --cl-bg · --cl-text · --cl-text-70 · --cl-space-*
Faça
Agrupe apenas conteúdo relacionado.
Evite
Não transforme o card inteiro em botão sem indicar a ação.

02 · SUPERFÍCIE ELEVADA

Destaque com medida.

A sombra neutra separa planos sem criar outra cor.

Anatomia
Superfície elevada, conteúdo e sombra discreta.
Variações
Base e elevada; com ou sem ação.
Estados
Estático; foco e hover ficam reservados aos controles internos.
Tokens
--cl-radius-card · --cl-elevated · --cl-shadow · --cl-line · --cl-space-*
Faça
Use elevação apenas para diferenciar camadas.
Evite
Não aplique sombra forte em todos os cards.

Alertas

Sucesso

Arquivo salvo com sucesso.

Anatomia
Borda e ícone de estado, título e mensagem.
Variações
Sucesso, informação, aviso e erro.
Estados
Informativo por padrão; mensagens dinâmicas devem ser anunciadas quando surgirem.
Tokens
--cl-sucesso · --cl-sucesso-texto · --cl-radius-card · --cl-radius-input · --cl-line · --cl-soft · --cl-text · --cl-space-*
Faça
Identifique o estado por ícone e texto, além da cor. A borda usa a cor base; o ícone, o tom -texto.
Evite
Não use a cor base de erro ou aviso como texto pequeno; use o token -texto.

Informação

Há uma atualização disponível.

Anatomia
Borda e ícone de estado, título e mensagem.
Variações
Sucesso, informação, aviso e erro.
Estados
Informativo por padrão; mensagens dinâmicas devem ser anunciadas quando surgirem.
Tokens
--cl-info · --cl-info-texto · --cl-radius-card · --cl-radius-input · --cl-line · --cl-soft · --cl-text · --cl-space-*
Faça
Identifique o estado por ícone e texto, além da cor. A borda usa a cor base; o ícone, o tom -texto.
Evite
Não use a cor base de erro ou aviso como texto pequeno; use o token -texto.

Aviso

Revise os dados antes de continuar.

Anatomia
Borda e ícone de estado, título e mensagem.
Variações
Sucesso, informação, aviso e erro.
Estados
Informativo por padrão; mensagens dinâmicas devem ser anunciadas quando surgirem.
Tokens
--cl-aviso · --cl-aviso-texto · --cl-radius-card · --cl-radius-input · --cl-line · --cl-soft · --cl-text · --cl-space-*
Faça
Identifique o estado por ícone e texto, além da cor. A borda usa a cor base; o ícone, o tom -texto.
Evite
Não use a cor base de erro ou aviso como texto pequeno; use o token -texto.

Erro

Não foi possível salvar o arquivo.

Anatomia
Borda e ícone de estado, título e mensagem.
Variações
Sucesso, informação, aviso e erro.
Estados
Informativo por padrão; mensagens dinâmicas devem ser anunciadas quando surgirem.
Tokens
--cl-erro · --cl-erro-texto · --cl-radius-card · --cl-radius-input · --cl-line · --cl-soft · --cl-text · --cl-space-*
Faça
Identifique o estado por ícone e texto, além da cor. A borda usa a cor base; o ícone, o tom -texto.
Evite
Não use a cor base de erro ou aviso como texto pequeno; use o token -texto.

Badges e tags

Identificação

Neutro
Identidade visual
Interfaces
Anatomia
Rótulo curto e contorno em forma de cápsula.
Variações
Badge neutro e tags de categoria.
Estados
Estáticos; tags informativas não são botões.
Tokens
--cl-radius-pill · --cl-line · --cl-soft · --cl-text · --cl-space-*
Faça
Use para identificar sem disputar atenção com a ação.
Evite
Não apresente uma tag estática como controle clicável.

Estados

Sucesso
Informação
Aviso
Erro
Anatomia
Rótulo, borda e ícone de estado.
Variações
Sucesso, informação, aviso e erro.
Estados
Informativos; a palavra e o ícone identificam o estado além da cor.
Tokens
--cl-sucesso · --cl-info · --cl-aviso · --cl-erro · --cl-*-texto · --cl-radius-pill · --cl-space-*
Faça
Use borda e ícone para estados; o preenchimento em Farol fica reservado à ação principal.
Evite
Não pinte o fundo de um status com Farol: ele passa a parecer um botão.

Abas

Visões de uma mesma área

Visão geral do projeto.
Anatomia
Lista de abas, aba ativa e painel associado.
Variações
Visão geral, arquivos e histórico.
Estados
Padrão, ativa, foco e desabilitada; setas do teclado percorrem as abas.
Tokens
--cl-radius-pill · --cl-soft · --cl-farol · --cl-on-accent · --cl-focus · --cl-touch-min · --cl-space-*
Faça
Use para alternar conteúdos relacionados sem sair da área.
Evite
Não esconda etapas obrigatórias dentro de abas.

Avatar

Pessoa e grupo

ANAna
Anatomia
Círculo com iniciais; no grupo, sobreposição e contador.
Variações
Individual e grupo com +3.
Estados
Estático; iniciais aparecem quando não há foto.
Tokens
--cl-radius-pill · --cl-soft · --cl-casco · --cl-carta-nautica · --cl-line · --cl-space-*
Faça
Informe o nome da pessoa ou a composição do grupo em texto acessível.
Evite
Não use apenas uma foto sem nome ou alternativa.

Paginação

Páginas de uma lista

Página 1 de 3

Anatomia
Anterior, páginas numeradas, página ativa e próxima.
Variações
Primeira, intermediária e última página.
Estados
Ativa, foco, anterior/próxima desabilitado nos limites.
Tokens
--cl-radius-pill · --cl-farol · --cl-on-accent · --cl-focus · --cl-space-*
Faça
Indique a página atual por número e destaque.
Evite
Não ofereça uma página anterior à primeira ou posterior à última.

Barra de progresso

Avanço de uma tarefa

Não iniciado0%
Em andamento68%
Concluído100%
Anatomia
Rótulo, trilho, preenchimento e porcentagem.
Variações
Não iniciado, em andamento e concluído.
Estados
0%, valor parcial e 100%; o número acompanha a barra.
Tokens
--cl-radius-pill · --cl-soft · --cl-farol · --cl-space-*
Faça
Mostre a porcentagem por escrito, além do preenchimento.
Evite
Não use só a cor para comunicar o avanço.
06capítulo 06 · acervo visual

Cada elemento carrega um papel na travessia.

Animais, objetos, avatares e imagens dão forma ao universo da CaisLab. Nada existe apenas para decorar. Cada elemento representa uma maneira de enxergar, testar, construir, orientar ou colocar uma ideia em movimento.

“Não são apenas ilustrações. São formas de pensar.”

Fundo
01Animal
02Objeto
03Animal
04Objeto
05Animal / Avatar
06Objeto
07Avatar
08Animal

Para um item ficar permanente: coloque o PNG transparente em /public/assets/caislab/acervo/ e adicione uma entrada na lista do acervo (nome, categoria, papel, por que existe, onde usar e caminho da imagem). O formulário abaixo serve só para pré-visualizar.

O universo da CaisLab cresce conforme novas travessias começam.

07capítulo 07 · cenários

A marca vivendo no mundo.

Bancada para compor cenas e aplicações: wallpaper, telas, capas e posts. Cada cenário segue a mesma mecânica de arquivo das logos.

Wallpaper

Fundo de tela com a atmosfera náutica da marca.

Falta o arquivo.
solte aqui: /public/brand/cenarios/wallpaper.png

Mockup de dashboard

A marca aplicada a uma interface de produto.

Falta o arquivo.
solte aqui: /public/brand/cenarios/mockup-dashboard.png

Capa de apresentação

Abertura de decks e documentos da CaisLab.

Falta o arquivo.
solte aqui: /public/brand/cenarios/capa-apresentacao.png

08capítulo 08 · para IA

Uma linguagem que pode continuar sendo construída.

Os prompts oficiais da CaisLab transformam a identidade em instruções claras. Eles orientam diferentes inteligências artificiais a criar imagens, interfaces, apresentações e conteúdos sem perder a lógica visual da marca.

“A consistência não está em repetir a mesma peça. Está em preservar a mesma maneira de pensar.”

Cada prompt pode ser copiado integralmente e adaptado apenas nos campos indicados entre colchetes. As regras fundamentais da identidade devem permanecer inalteradas.

01Identidade Visual

Glassmorfismo CaisLab

Superfícies de vidro fosco com espessura, luz de origem única e leitura garantida — o vidro como matéria física, não como filtro.

Use quando · For preciso criar cards, telas, painéis, ícones ou objetos de vidro para posts, apresentações, mockups ou interfaces.

4 exemplos · versão curta · negativo

02Apresentações

Apresentação CaisLab

Roteiro e telas de apresentações institucionais, comerciais e de diagnóstico — da ideia central à última tela, sem inventar dados.

Use quando · For preciso montar proposta, discovery, diagnóstico, relatório executivo ou apresentação institucional.

3 exemplos

03Identidade Visual

Atmosfera Oceano

Imagens imersivas que partem da profundidade escura e revelam um único ponto de direção — a manifestação expressiva da paleta.

Use quando · For preciso criar capas, campanhas, banners ou fundos de alto impacto para redes sociais e eventos.

3 exemplos · versão curta · negativo

04Identidade Visual

Objetos de vidro e metal

Vidro e metal como matéria física: objetos-símbolo e peças de interface com espessura, luz de estúdio e sombra real — acabamento de produto, não efeito.

Use quando · For preciso criar um objeto 3D premium, uma placa de vidro com interface ou componentes de UI renderizados como peças físicas para capa, case, post ou apresentação.

4 exemplos · versão curta · negativo

05Imagens

Ilustração CaisLab

Ilustrações no estilo do Acervo Visual: desenho naturalista à mão, nanquim, lápis de cor e aquarela, com tecnologia em traços mínimos.

Use quando · For preciso ilustrar um elemento em ação ou em contexto para post, apresentação, página ou documento.

3 exemplos · versão curta · negativo

06Imagens

Novo elemento do acervo

Prompt-mestre para criar um novo animal, objeto, personagem ou estrutura isolado, pronto para entrar no Acervo Visual.

Use quando · For preciso criar uma peça nova e permanente do acervo, com fundo transparente ou branco.

3 exemplos · versão curta · negativo

07Imagens

Arte para redes sociais

Posts, capas de carrossel e stories com uma mensagem, um foco e área segura definida para cada formato.

Use quando · For preciso criar posts, capas, carrosséis, stories ou peças de campanha para Instagram e LinkedIn.

3 exemplos · versão curta · negativo

08Imagens

Imagem conceitual 16:9

Fundos cinematográficos para aberturas, viradas narrativas e manifestos, com área de texto reservada.

Use quando · Uma tela de apresentação ou página precisar comunicar uma ideia por imagem, com o texto aplicado por cima depois.

3 exemplos · versão curta · negativo

09Interfaces

Interface ou landing page

Sites, páginas e telas de produto construídos com os tokens oficiais, da arquitetura da informação ao código.

Use quando · For preciso criar landing page, página institucional, dashboard ou tela de produto — no Figma ou em código.

3 exemplos

10Interfaces

Mockup de produto

Produtos reais da CaisLab apresentados como fotografia editorial de produto — a tela é a protagonista, o dispositivo é moldura.

Use quando · For preciso mostrar uma interface real em notebook, navegador, celular ou tablet para case, proposta ou post.

3 exemplos · versão curta · negativo

11Conteúdo

Tom de voz CaisLab

Escreve ou reescreve textos com a voz da CaisLab: clara, direta, estratégica e humana — sem jargão nem promessa inflada.

Use quando · For preciso escrever ou revisar post, página, proposta, e-mail comercial, manifesto ou legenda.

3 exemplos

12Identidade Visual

Auditoria de consistência

Revisão objetiva de uma peça contra o Design System: o que está consistente, o que ajustar e como, com prioridade.

Use quando · Antes de publicar uma arte, apresentação, página, interface ou campanha — anexe a peça.

3 exemplos

O sistema termina aqui. A linguagem, não.

Cada novo prompt deve ampliar o universo da CaisLab sem romper sua lógica. A forma pode mudar. O contexto pode mudar. A direção precisa permanecer reconhecível.

“Uma identidade viva não repete respostas. Ela preserva critérios.”

Novos prompts devem ser incorporados à biblioteca somente depois de validados visualmente e comparados com o Design System oficial.

Contexto essencial · cole em qualquer IA

CAISLAB — CONTEXTO ESSENCIAL (CaisLab ID 0.3)

Manifesto: Em um mar de possibilidades, direção.
- Cais: onde a ideia encontra direção.
- Lab: onde a direção ganha forma.
- CaisLab: onde o produto entra em movimento.

Paleta:
- mar-profundo: #070A0D — fundo escuro, o mar
- carta-nautica: #F5F2E8 — fundo claro, o papel
- casco: #34404C — estrutura, superfícies, componentes
- farol: #22C55E — acento de ação; texto sempre escuro por cima
- horizonte: #2CCFFF — acento de descoberta e tecnologia
Farol e Horizonte são acento (~10% da tela), nunca fundo inteiro. Sobre ambos, texto Mar Profundo.

Tipografia: Bricolage Grotesque, única família.
- Display: 48/52px · peso 700 · tracking -0.02em · --cl-type-display
- Título 1: 40/44px · peso 700 · tracking -0.01em · --cl-type-h1
- Título 2: 32/38px · peso 700 · tracking 0 · --cl-type-h2
- Título 3: 24/30px · peso 500 · tracking 0 · --cl-type-h3
- Corpo grande: 18/28px · peso 400 · tracking 0 · --cl-type-body-lg
- Corpo: 16/24px · peso 400 · tracking 0 · --cl-type-body
- Pequeno: 14/20px · peso 400 · tracking 0 · --cl-type-small
- Legenda: 12/16px · peso 500 · tracking 0 · --cl-type-caption
- Label / eyebrow: 12/16px · peso 500 · tracking 0.24em · --cl-type-label
Texto: hierarquia por opacidade 100 · 70 · 60 (--cl-text, --cl-text-70, --cl-text-60).
Tons de apoio (--cl-<cor>-<passo>, passos 100, 300, 500, 700, 900; tons da mesma cor, não uma nova paleta):
- mar-profundo: 100 #E7ECF1 · 300 #B3B8BD · 500 #6E7276 · 700 #2F3337 · 900 #070A0D
- carta-nautica: 100 #F5F2E8 · 300 #E1DED3 · 500 #C1BEB3 · 700 #89867D · 900 #57554E
- casco: 100 #E1E9F0 · 300 #95A0AB · 500 #34404C · 700 #242F3B · 900 #131E29
- farol: 100 #DCFCE1 · 300 #A0EDAF · 500 #22C55E · 700 #0A7E38 · 900 #065E28
- horizonte: 100 #E0F6FF · 300 #9DE4FF · 500 #2CCFFF · 700 #057695 · 900 #045870
- erro: 100 #FFEDEC · 300 #FFC8C4 · 500 #E5484D · 700 #CD2F3A · 900 #A50420
- aviso: 100 #FFEFDC · 300 #FECE90 · 500 #F5A623 · 700 #966205 · 900 #704803
Feedback (somente no produto): sucesso #22C55E · info #2CCFFF · erro #E5484D · aviso #F5A623. Cor base só em preenchimento, ícone ou borda; para texto use --cl-sucesso-texto, --cl-info-texto, --cl-erro-texto, --cl-aviso-texto.
Semântica: --cl-border para bordas de controle (3:1), --cl-line para divisórias decorativas, --cl-focus para o anel de foco, --cl-on-accent para texto sobre Farol e Horizonte, --cl-acao-hover/--cl-acao-pressed e --cl-estrutura-hover/--cl-estrutura-pressed para estados.
Forma: grade de 8px, botões 999px, cards 16px, campos 12px; sombra neutra --cl-shadow.
Layout: contêiner 1400px, margens 24px / 40px / 64px, leitura até 68ch. Controles: 40px padrão, área de toque mínima 44px.
Biblioteca de componentes: botões, campos, seleção (checkbox, radio, switch), cards, alertas, badges e tags, abas, avatar, paginação e barra de progresso. Consulte o capítulo 05 para anatomia, estados e tokens.

Acervo: A Garça, A Luneta, O Caranguejo, A Boia, O Polvo, O Mastro, O Mergulhador, A Anêmona-do-mar.

Leis: nada de roxo, rosa, neon, glow, blobs ou gradientes multicoloridos. Nenhuma cor entra só para decorar. Nada entra no sistema sem regra escrita, token e exemplo.

Prompt base de geração de assets

Pendente — definido na etapa de ilustração.

Negative prompt

Pendente — definido na etapa de ilustração.