Design System

A biblioteca viva da marca Bluefields

Todos os tokens, logos e componentes usados nas landing pages da Bluefields. Use estes blocos como fonte única para construir novas páginas consistentes com a marca.

Fundamentos

Tokens, logo e tipografia

Cores

Paleta semântica. Em componentes, use sempre a variável CSS e nunca o hexadecimal literal.

color: var(--bf-electric)
Electric--bf-electric
Brand--bf-brand
Navy--bf-navy
Navy Deep--bf-navy-deep
Orange--bf-orange
Light--bf-light
Off-white--bf-off
Line--bf-line
Text--bf-text
Muted--bf-muted
Tipografia

Space Grotesk para títulos display; Montserrat para textos, rótulos e interface.

font-family: var(--bf-font-display) | var(--bf-font-body)

Título H1 display

Título H2 de seção

Título H3 de card

Parágrafo lead, usado logo abaixo dos títulos principais.

Parágrafo padrão de corpo de texto, com medida controlada para leitura confortável.

Eyebrow / rótulo

Componentes

Blocos prontos para montar páginas

Cada bloco abaixo é um componente exportado por @/components/bluefields.

Botões

Quatro variantes e versão compacta para o header.

<Button variant="primary" />
Pills e indicadores

Marcadores curtos de categoria e faixa de credibilidade.

<Pill /> · <IndicatorRow />
EstratégiaValidaçãoVenture building
DiagnósticoValidaçãoModelagemEscala
Listas de verificação

Listas positivas e negativas, em uma ou duas colunas.

<TickList items={[]} negative columns={2} />
  • Escopo fechado
  • Time sênior
  • Entrega por sprints
  • Relatório sem execução
  • Hipótese sem teste
Métricas

Números de destaque, em fundo claro ou escuro.

<StatBlock value='+120' label='Projetos' />
+120Projetos estruturados
8 sem.Da ideia ao MVP
100%Com evidência de mercado
Cards

Família principal de cards de conteúdo.

<NumberedCard /> · <PlanCard /> · <FeatureCard />
Empreendedores

Sair do zero com evidência

Validar demanda antes de queimar caixa.

Corporações

Inovação que sai do piloto

Iniciativas com dono e resultado.

Investidores

Decisão com dados

Diligência de mercado e leitura de risco.

01Semana 1-2

Diagnóstico

Contexto, hipóteses críticas e critérios de decisão.

02Semana 3-5

Validação

Experimentos em campo com métricas definidas.

03Semana 6-8

Estruturação

Modelo de negócio e roadmap de execução.

◆

Método aplicado

Rigor de pesquisa somado à velocidade de produto.

◈

Time sênior

Quem conduz é quem executa, do início ao fim.

◇

Evidência

Nenhuma recomendação sem dado que a sustente.

Comparação

Contraste entre o caminho comum e o caminho da marca.

<ComparisonCard active />

O jeito comum

Diagnóstico sem execução

  • Relatórios genéricos
  • Hipóteses não testadas

O jeito Bluefields

Evidência e ritmo

  • Hipóteses testadas em semanas
  • Entregável que vira execução
Dor e risco

Blocos de tensão narrativa usados antes da proposta.

<PainStatement /> · <RiskNote />
01

A ideia é boa, mas ninguém consegue provar que existe mercado.

!

O custo de não decidir

Cada trimestre parado é mercado entregue a quem executou primeiro.

Depoimento

Citação de cliente com autoria e contexto.

<QuoteCard />
Em oito semanas saímos de uma ideia difusa para um modelo validado.
Diretoria de Inovação · Grupo industrial
Pessoas

Card de perfil para time, mentores e lideranças.

<PersonCard image={} />
Retrato de Sócio-líder

Estratégia e validação

Sócio-líder

Conduz os ciclos de diagnóstico e a leitura de mercado dos projetos.

Retrato de Liderança de produto

Execução

Liderança de produto

Traduz evidência em roadmap e operação com donos definidos.

Materiais e prévia

Cards de material com abertura em lightbox.

<MaterialCard onClick={} /> · <Lightbox />
Linha de processo

Grade hairline com etapas numeradas e nós de avanço.

<ProcessLine><ProcessStep /></ProcessLine>
01

Diagnóstico

Entender o problema real

Contexto, hipóteses e critérios.

Entrevistas · Desk research
02

Validação

Testar antes de investir

Experimentos com métricas claras.

Protótipos · Testes de demanda
03

Estruturação

Transformar em negócio

Modelo, roadmap e governança.

Business case · Roadmap
Acordeões

Conteúdo modular detalhado e perguntas frequentes.

<AccordionItem /> · <FAQItem />
01
MÓDULO 01

Diagnóstico estratégico

Duas semanas para entender o que precisa ser verdade.

  • Entrevistas com stakeholders
  • Mapa de hipóteses
  • Benchmark de mercado
  • Critérios de decisão

Ao final: um mapa claro do que validar primeiro.

01Em quanto tempo vejo resultado?

O diagnóstico entrega leitura acionável em duas semanas.

Cards de horizonte

Sequência temporal com leve rotação e linha do tempo.

<FutureStackCard />
Hoje

Ideia parada

Discussão sem evidência e sem dono.

AGORA5 ANOS
Em 8 semanas

Modelo validado

Hipóteses testadas e business case pronto.

AGORA5 ANOS
Em 6 meses

Negócio operando

Execução com métricas e governança.

Formulário de captação

Formulário curto de contato, pronto para integrar.

<LeadForm onSubmit={} />

Contato

Vamos conversar sobre o seu próximo passo

Retornamos em até 1 dia útil.

Superfícies

Blocos sobre fundo navy

O manifesto ancora a narrativa da marca em seções escuras. Inovação não é sorte. É método aplicado com rigor.

Diagnóstico
Validação
Modelagem
Escala

Use ClosingNote para fechar seções com uma frase de reforço.

Oferta

Painel de proposta

Bluefields

Sprint de Validação

  • Diagnóstico completo
  • Pesquisa e entrevistas
  • Experimentos de demanda
  • Business case
  • Roadmap de execução

Investimento

Sob proposta

Escopo fechado, em ciclos de 2 semanas.

Time sênior dedicado.

Sem compromisso.
✓ Time sênior✓ Escopo claro✓ Entrega por sprints

● Você está aqui

Encerramento em azul elétricocom rotas divergentes.

Use este bloco sempre como última seção antes do rodapé.

Componente: <FinalCTA />