01 · Fundamentos

Paleta de Cores

Sistema 85-10-5 — regra cardinal da marca. Neutros (preto, superfície, branco-off) dominam 85% do espaço visual. Identidade (roxo #9A11E9) aplica personalidade nos 10% restantes. CTA (verde #00A47B) exclusivo para conversão: apenas 5%, nunca decorativo. O branco oficial é #F0F0F3 — NUNCA #FFFFFF puro em fundos escuros.

Background

#000000

60% — fundo de página

Surface

#0E0E0E

60% — fundo de cards

Surface 2

#161616

60% — superfície elevada

White (Oficial)

#F0F0F3

BRANCO OFICIAL — nunca #FFFFFF

Brand

#9A11E9

30% — identidade da marca

Brand Dark

#7F2DC1

30% — hover/variante brand

CTA

#00A47B

10% — ação EXCLUSIVA

CTA Dark

#006653

10% — hover/variante CTA

Neutral

#6A6A6A

Texto secundário

Cores Proibidas

#FFFFFF puro — Sempre usar #F0F0F3 em textos e componentes.
Brand (#9A11E9) como CTA — Brand é identidade. CTA (#00A47B) é ação. Nunca trocar.

/* CSS Custom Properties — Cores Ordus Digital */
:root {
  --color-bg:        #000000;   /* 60% — fundo */
  --color-surface:   #0E0E0E;   /* 60% — cards */
  --color-surface-2: #161616;   /* 60% — elevado */
  --color-white:     #F0F0F3;   /* BRANCO OFICIAL */
  --color-brand:     #9A11E9;   /* 30% — identidade */
  --color-brand-dark:#7F2DC1;
  --color-cta:       #00A47B;   /* 10% — conversão */
  --color-cta-dark:  #006653;
  --color-neutral:   #6A6A6A;
}

/* Tailwind config — extend colors */
colors: {
  'od-bg':        '#000000',
  'od-surface':   '#0E0E0E',
  'od-surface-2': '#161616',
  'od-white':     '#F0F0F3',
  'od-brand':     '#9A11E9',
  'od-brand-dk':  '#7F2DC1',
  'od-cta':       '#00A47B',
  'od-cta-dk':    '#006653',
  'od-neutral':   '#6A6A6A',
}

01 · Fundamentos

Sistema de Logotipo

Três elementos: Wordmark (nome completo), Isotipo (símbolo — dois Ls angulados) e Rúbrica (bracket angular). Sempre SVG. Nunca substituir por texto em fonte genérica.

Wordmark — Variantes

XL — 280×52px
Hero sections, capas

LG — 200×37px
Destaques, footer

MD — 140×26px
Navbar padrão

SM — 80×15px
Sidebar, watermarks

Wordmark — Variantes de Cor

Branco Oficial Preto Brand CTA

Isotipo + Rúbrica

Isotipo

64px

48px

32px

20px

Rúbrica

64px

48px

32px

20px

HTML

<!-- Wordmark SVG — MD (navbar padrão) -->
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="26"
     viewBox="0 0 556 104" fill="none" aria-label="Ordus Digital">
  <!-- 19 paths — fill="#F0F0F3" padrão / trocar cor conforme contexto -->
  <path d="M476.238 0L452.512 23.726L555.845 23.726V0L476.238 0Z" fill="#F0F0F3"/>
  <!-- ... demais paths ... -->
</svg>

<!-- Isotipo SVG — 48px -->
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
     viewBox="0 0 3809 3770" fill="none" aria-label="Ordus isotipo">
  <path d="M1269.67 1986.65L2026.49 1229.83L2026.5 3769.16H1269.68L1269.67 1986.65Z" fill="#F0F0F3"/>
  <path d="M2026.49 1229.83H3809V1986.65H2026.49L2026.49 1229.83Z" fill="#F0F0F3"/>
  <path d="M0 756.819L756.819 0L756.829 2539.33H0L0 756.819Z" fill="#F0F0F3"/>
  <path d="M756.819 0L2539.33 0V756.819H756.819L756.819 0Z" fill="#F0F0F3"/>
</svg>

01 · Fundamentos

Assets Hospedados — URLs para Copiar

URLs publicas permanentes hospedadas no CDN da Ordus. Clique em qualquer card para copiar a URL completa — use diretamente em plataformas que pedem link de logo (LinkedIn, GHL, n8n, Notion, e-mails, apresentacoes).

12 assets PNG em CDN permanente. Clique no card para copiar a URL. Nunca envie o arquivo — sempre o link direto.

RUBRICA — 4 VARIANTES

Rubrica Branca

PNG · Fundo escuro

rubrica-branca.png

Rubrica Preta

PNG · Fundo claro

rubrica-preta.png

Rubrica Roxa

PNG · Brand

rubrica-roxa.png

Rubrica Verde

PNG · CTA

rubrica-verde.png

ISOTIPO — 4 VARIANTES

Isotipo Branco

PNG · Fundo escuro

isotipo-branca.png

Isotipo Preto

PNG · Fundo claro

isotipo-preta.png

Isotipo Roxo

PNG · Brand

isotipo-roxa.png

Isotipo Verde

PNG · CTA

isotipo-verde.png

LOGOTIPO — 4 VARIANTES

Logotipo Branco

PNG · Fundo escuro

logotipo-branca.png

Logotipo Preto

PNG · Fundo claro

logotipo-preta.png

Logotipo Roxo

PNG · Brand

logotipo-roxa.png

Logotipo Verde

PNG · CTA

logotipo-verde.png

Base URL:https://s3.launchpro.digital/ordus-assets/brand12 assets · Bucket: ordus-assets/brand/

01 · Fundamentos

Tipografia

Dois tipos de fonte com papéis fixos. Fractul: headlines e corpo. Lowvetica: labels, botões, badges — SEMPRE uppercase. Máximo 3 pesos por página.

Fractul Black 900 — Headline / Hero

CONSTRUINDO
CREDIBILIDADE

Fractul Black / Alt Black 900 UPPERCASE em hero Mixed Case em seções Nunca italic

Fractul Regular 400 — Body

A Ordus Digital é uma assessoria B2B de credibilidade operacional. Ajudamos empresas a construir sistemas de comunicação que convertem autoridade em oportunidades reais de negócio.

Fractul Regular 400 Mixed Case Bold inline em keywords Nunca ALL-CAPS

Lowvetica DemiBold 700 — Labels / Botões

COMEÇAR AGORA · DESIGN SYSTEM · VER MAIS

Lowvetica DemiBold 700 SEMPRE UPPERCASE letter-spacing: 0.05–0.1em Botões, labels, badges, tabs

Lowvetica Regular 400 — Handles / Metadados

@ordusdigital · 12 abr 2026 · 5 min de leitura

Lowvetica Regular 400 lowercase opacity: 0.5–0.6 Handles, datas, captions

HTML

/* Declarações @font-face */
@font-face {
  font-family: 'Fractul';
  src: url('fonts/fonnts.com-fractul-black.otf') format('opentype');
  font-weight: 900;
}
@font-face {
  font-family: 'Fractul';
  src: url('fonts/fonnts.com-fractul-regular.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'Lowvetica';
  src: url('fonts/LowveticaDemiBold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Lowvetica';
  src: url('fonts/Lowvetica.ttf') format('truetype');
  font-weight: 400;
}

/* CSS vars de tipografia */
:root {
  --font-headline: 'Fractul', 'Plus Jakarta Sans', sans-serif;
  --font-label:    'Lowvetica', 'Plus Jakarta Sans', sans-serif;
  --font-body:     'Fractul', 'Plus Jakarta Sans', sans-serif;
}

/* Headline hero */
.headline-hero {
  font-family: var(--font-headline);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
}

/* Label / botão */
.label-style {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

01 · Fundamentos

Espaçamento — Escala Base-4

APENAS múltiplos de 4px. Valores como 5, 7, 13, 17, 22, 25px são PROIBIDOS. Zero tolerância para valores arbitrários.

4px / var(--sp-1)

Tailwind: p-1

8px / var(--sp-2)

Tailwind: p-2

12px / var(--sp-3)

Tailwind: p-3

16px / var(--sp-4)

Tailwind: p-4

24px / var(--sp-3)

Tailwind: p-6

32px / var(--sp-4)

Tailwind: p-8

48px / var(--sp-4)

Tailwind: p-12

64px / var(--sp-4)

Tailwind: p-16

96px / var(--sp-12)

Tailwind: p-24

HTML

/* Escala de espaçamento — base-4 */
:root {
  --sp-1:  4px;    /* p-1  em Tailwind */
  --sp-2:  8px;    /* p-2  */
  --sp-3:  12px;   /* p-3  */
  --sp-4:  16px;   /* p-4  */
  --sp-6:  24px;   /* p-6  */
  --sp-8:  32px;   /* p-8  */
  --sp-12: 48px;   /* p-12 */
  --sp-16: 64px;   /* p-16 */
  --sp-24: 96px;   /* p-24 */
}
/* PROIBIDO: 5px, 7px, 13px, 17px, 22px, 25px, 30px — valores arbitrários */

01 · Fundamentos

Sombras

Sistema de elevação com 4 níveis + 2 variantes com cor (CTA e Brand). Usadas para comunicar profundidade e estado hover.

SM

Subtle, tooltips

MD

Cards em repouso

LG

Cards em hover

XL

Modals, drawers

CTA

Botão CTA em hover

Brand

Card brand em hover

HTML

/* Sombras Ordus Digital */
:root {
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.6);
  --shadow-cta:   0 8px 24px rgba(0,164,123,0.35);
  --shadow-brand: 0 8px 24px rgba(154,17,233,0.25);
}

01 · Fundamentos

Border Radius

DNA ANGULAR — isotipo e rubrica da Ordus usam angulos de 90 graus e cortes chanfrados. Border-radius maximo recomendado: 8px (MD). Valores acima de 12px devem ser usados com cautela e nunca em elementos primarios de marca. Pill (100px) esta disponivel no token mas e PROIBIDO em botoes e cards principais — contradiz o DNA da marca. Consultar o Brand Guidelines antes de usar valores acima de --r-lg.

SM

4px

Badges tiny, chips pequenos

MD

8px

Botões, inputs, badges padrão

LG

12px

Cards menores, popovers

XL

16px

Cards maiores, modals

2XL

24px

Sections, containers hero

PILL

100px

Avatares, badges pill, botões pill

HTML

/* Border Radius */
:root {
  --r-sm:   4px;    /* badges tiny */
  --r-md:   8px;    /* botões, inputs */
  --r-lg:   12px;   /* cards menores */
  --r-xl:   16px;   /* cards maiores, modals */
  --r-2xl:  16px; /* = r-xl, max no sistema */   /* sections, hero */
  --r-pill: 100px;  /* avatares, pill buttons */
}

02 · Atoms

Botões

Três variantes: CTA (verde, conversão exclusiva), Brand (roxo, destaque secundário) e Ghost (outlined). Nunca usar Brand como botão de conversão primário.

Variantes

Tamanhos

Estados

:default

:hover

:active

:focus-visible

:disabled

<!-- Botão CTA (conversão) -->
<button class="btn-cta">Começar Agora</button>

<!-- Botão Brand (destaque secundário) -->
<button class="btn-brand">Saiba Mais</button>

<!-- Botão Ghost (outlined) -->
<button class="btn-ghost">Ver Portfolio</button>

<!-- Tamanhos -->
<button class="btn-cta btn-sm">Pequeno</button>
<button class="btn-cta btn-lg">Grande</button>

<!-- Disabled -->
<button class="btn-cta" disabled>Desabilitado</button>

<!-- Tailwind — Botão CTA -->
<button class="inline-flex items-center justify-center gap-2
  bg-[#00A47B] text-[#F0F0F3] px-6 py-3 rounded-[8px]
  font-['Lowvetica'] font-bold text-[13px] uppercase tracking-[0.05em]
  border-0 cursor-pointer
  transition-all duration-200 ease-out
  hover:bg-[#006653] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,164,123,0.35)]
  active:translate-y-0 active:shadow-none
  disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none">
  Começar Agora
</button>

Botões — Variantes Adicionais (Outline, Muted, Destructive, Icon, XL, Loading)

<button class="btn-outline">Saiba mais</button>
<button class="btn-muted">Cancelar</button>
<button class="btn-destructive">Deletar</button>
<button class="btn-icon">⚙</button>
<button class="btn-xl">Começar agora →</button>

<!-- Tailwind — btn-outline -->
<button class="inline-flex items-center gap-2
  border border-[rgba(255,255,255,.15)] bg-transparent text-[#F0F0F3]
  px-6 py-3 rounded-[8px]
  font-['Lowvetica'] text-[13px] uppercase tracking-[0.05em] font-bold cursor-pointer
  transition-all duration-200
  hover:border-[#9A11E9] hover:text-[#C060FF] hover:bg-[rgba(154,17,233,0.08)] hover:-translate-y-px">
  Saiba mais
</button>

02 · Atoms

Badges

Indicadores de estado, categoria ou destaque. Sempre Lowvetica uppercase. Quatro variantes de cor com backgrounds semitransparentes.

Design System ✓ Ativo Versão 1.0 Arquivado

Novo ● Online Beta ⚠ Atenção

<span class="badge badge-brand">Design System</span>
<span class="badge badge-cta">✓ Ativo</span>
<span class="badge badge-neutral">Versão 1.0</span>
<span class="badge badge-dark">Arquivado</span>

<!-- Tailwind — Badge Brand -->
<span class="inline-flex items-center gap-1 px-[10px] py-1
  rounded-full font-['Lowvetica'] font-bold text-[11px]
  uppercase tracking-[0.08em]
  bg-[rgba(154,17,233,0.15)] text-[#9A11E9]
  border border-[rgba(154,17,233,0.3)]">
  Design System
</span>

Badges — Variantes Adicionais (Dot-Pulse, LG, Outline, Muted, Error)

Ao Vivo Novo Design System v1.1 Badge Outline metadado Erro crítico

<span class="badge badge-dot">
  <span class="bdot"></span>Ao Vivo
</span>
<span class="badge badge-brand badge-lg">Destaque</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-muted">muted</span>
<span class="badge badge-error">Erro</span>

<!-- Tailwind — Badge Dot -->
<span class="inline-flex items-center gap-[6px] px-[10px] py-1 rounded-full
  bg-[rgba(154,17,233,0.12)] text-[#C060FF] border border-[rgba(154,17,233,0.25)]
  font-['Lowvetica'] text-[11px] uppercase tracking-[0.06em] font-bold">
  <span class="w-[6px] h-[6px] rounded-full bg-[#9A11E9] animate-pulse shrink-0"></span>
  Ao Vivo
</span>

02 · Atoms

pk-chip-expand — Componente Assinatura

Chip expansível com spring animation. Expande de 205px para 465px no hover via cubic-bezier(0.34, 1.56, 0.64, 1). Componente de identidade da Ordus — NÃO substituir o easing por linear.

Novo: Ordus OS v2 — Experimente agora →

27 skills disponíveis no seu plano atual →

← Passe o mouse nos chips para ver o spring expand

<div class="pk-chip">
  <span style="display:flex;align-items:center;"><svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="var(--color-brand,#9A11E9)"/></svg></span>
  <span>Novo: Ordus OS v2 — Experimente agora</span>
  <span class="pk-arrow">→</span>
</div>

<!-- Tailwind — pk-chip-expand (spring) -->
<div class="inline-flex items-center gap-[10px]
  w-[205px] overflow-hidden whitespace-nowrap
  px-[14px] py-[8px] rounded-[6px]
  bg-[rgba(154,17,233,0.12)] border border-[rgba(154,17,233,0.25)]
  transition-[width] duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]
  cursor-pointer text-[#C060FF] text-[12px] uppercase tracking-[0.06em] font-bold
  hover:w-[465px] hover:bg-[rgba(154,17,233,0.20)] hover:border-[rgba(154,17,233,0.35)]">
  <span style="display:flex;align-items:center;"><svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="var(--color-brand,#9A11E9)"/></svg></span>
  <span>Novo: Ordus OS v2</span>
  <span class="opacity-0 -translate-x-2 transition-all duration-500
    ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:opacity-100 group-hover:translate-x-0">→</span>
</div>

02 · Atoms

Inputs & Forms

Campo padrão com label uppercase (Lowvetica), estados de foco (brand), hover, erro e sucesso. Sempre indicar o estado via border-color + box-shadow.

Nome completo

Seu nome completo para personalização

E-mail

Estado: focus

Empresa

⚠ Campo obrigatório não preenchido corretamente

Website

✓ URL válida

<!-- Input padrão -->
<div class="input-group">
  <label class="input-label">Nome completo</label>
  <input class="input" type="text" placeholder="Ex: Leandro Geseth">
  <div class="input-hint">Texto auxiliar opcional</div>
</div>

<!-- Input com erro -->
<div class="input-group">
  <label class="input-label">E-mail</label>
  <input class="input error" type="email" placeholder="e-mail">
  <div class="input-error">⚠ E-mail inválido</div>
</div>

<!-- Input com sucesso -->
<div class="input-group">
  <label class="input-label">Website</label>
  <input class="input success" type="url" placeholder="https://">
</div>

<!-- Tailwind — Input -->
<div class="flex flex-col gap-1.5">
  <label class="font-['Lowvetica'] text-[11px] font-bold uppercase
    tracking-[0.08em] text-[rgba(240,240,243,0.6)]">
    Nome completo
  </label>
  <input type="text" placeholder="Ex: Leandro"
    class="bg-[#0E0E0E] border border-[rgba(255,255,255,0.1)]
    rounded-[8px] text-[#F0F0F3] text-sm px-4 py-2.5
    outline-none transition-all duration-150
    focus:border-[#9A11E9] focus:shadow-[0_0_0_3px_rgba(154,17,233,0.12)]
    hover:border-[rgba(255,255,255,0.2)]
    placeholder:text-[#6A6A6A]">
</div>

02 · Atoms

Card Base

Unidade base de container. Border sutil (8%), hover lift com translateY(-4px) e box-shadow. Radius xl (16px).

Estado: default

Card Base

Conteúdo do card em repouso.

Estado: hover

Card Hover

translateY(-4px) + shadow-lg.

Estado: selecionado

Card Selected

Border vira brand color.

<div class="card">
  <!-- Conteúdo aqui -->
</div>

<!-- Tailwind — Card Base -->
<div class="bg-[#0E0E0E] border border-[rgba(255,255,255,0.08)]
  rounded-[16px] p-6
  transition-all duration-[250ms] ease-out
  hover:-translate-y-1 hover:shadow-[0_8px_32px_rgba(0,0,0,0.5)]
  hover:border-[rgba(255,255,255,0.12)]">
  <!-- Conteúdo aqui -->
</div>

03 · Molecules

StatCard

Exibe métricas e KPIs. Número em destaque com Fractul 900, label uppercase Lowvetica, delta opcional com cor CTA.

47+

Clientes Ativos

↑ 12% este mês

98%

Taxa de Retenção

↑ 3pts

3.2x

ROI Médio

● Estável

<div class="stat-card">
  <div class="stat-value">47<span class="accent">+</span></div>
  <div class="stat-label">Clientes Ativos</div>
  <div class="stat-delta">↑ 12% este mês</div>
</div>

<!-- Tailwind — StatCard -->
<div class="bg-[#0E0E0E] border border-[rgba(255,255,255,0.08)]
  rounded-[16px] p-6
  transition-transform duration-[250ms] ease-out
  hover:-translate-y-0.5">
  <div class="font-['Fractul'] text-[36px] font-black
    text-[#F0F0F3] leading-none">
    47<span class="text-[#00A47B]">+</span>
  </div>
  <div class="font-['Lowvetica'] text-[11px] font-bold
    uppercase tracking-[0.1em] text-[#6A6A6A] mt-1">
    Clientes Ativos
  </div>
  <div class="inline-flex items-center gap-1 text-xs
    text-[#00A47B] bg-[rgba(0,164,123,0.1)]
    px-2 py-0.5 rounded-full mt-2">
    ↑ 12% este mês
  </div>
</div>

03 · Molecules

FeatureCard

Apresenta funcionalidades ou benefícios. Ícone em container brand, título Fractul 900, descrição com opacidade 0.6.

Posicionamento Estratégico

Construímos a narrativa que transforma sua empresa em autoridade reconhecida no mercado B2B.

Execução Operacional

Sistemas e processos que garantem consistência na comunicação em todos os canais.

Resultados Mensuráveis

KPIs claros e relatórios que mostram o impacto real da credibilidade no seu negócio.

<div class="feature-card">
  <div class="feature-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
  <div class="feature-title">Posicionamento Estratégico</div>
  <div class="feature-desc">
    Construímos a narrativa que transforma sua empresa
    em autoridade reconhecida no mercado B2B.
  </div>
</div>

<!-- Tailwind — FeatureCard -->
<div class="bg-[#0E0E0E] border border-[rgba(255,255,255,0.08)]
  rounded-[16px] p-6
  transition-all duration-[250ms] ease-out
  hover:-translate-y-1 hover:shadow-[0_8px_32px_rgba(0,0,0,0.5)]
  hover:border-[rgba(154,17,233,0.2)]">
  <div class="w-12 h-12 rounded-[8px]
    bg-[rgba(154,17,233,0.1)] border border-[rgba(154,17,233,0.2)]
    flex items-center justify-center mb-4 text-[22px]">
    [icon-svg]
  </div>
  <div class="font-['Fractul'] text-[17px] font-black
    text-[#F0F0F3] mb-2">
    Posicionamento Estratégico
  </div>
  <div class="text-sm text-[rgba(240,240,243,0.6)] leading-[1.7]">
    Construímos a narrativa que transforma sua empresa...
  </div>
</div>

03 · Molecules

Testimonial

Depoimento de cliente com estrelas, citação e autor. Stars com cor brand, avatar com inicial.

"A Ordus transformou completamente como nos posicionamos no mercado. Em 90 dias já vínhamos resultados concretos."

M

Marcos Oliveira

CEO, TechBrasil

"Profissionalismo e estratégia de verdade. A equipe entende como nenhuma outra o mercado B2B de serviços."

A

Ana Ferreira

Diretora Comercial, GrupoNex

HTML

<div class="testimonial">
  <div class="testi-stars">
    <!-- 5x star SVG aqui -->
  </div>
  <div class="testi-quote">
    "Texto do depoimento aqui."
  </div>
  <div class="testi-author">
    <div class="testi-avatar">M</div>
    <div>
      <div class="testi-name">Nome do Cliente</div>
      <div class="testi-role">Cargo, Empresa</div>
    </div>
  </div>
</div>

03 · Molecules

Progress Bar

Indicador de progresso com label, percentual e barra com gradient brand→cta. Animação na entrada.

Design System 92%

Estratégia de Conteúdo 78%

Automação 65%

Tráfego Pago 55%

HTML

<div class="progress-item">
  <div class="progress-header">
    <span class="progress-name">Design System</span>
    <span class="progress-pct">92%</span>
  </div>
  <div class="progress-track">
    <div class="progress-bar-fill" style="width: 92%;"></div>
  </div>
</div>

03 · Molecules

InfoBox / Alert

Quatro variantes: brand (destaque), cta (sucesso), warn (aviso), error (erro). Sempre com ícone e título.

Dica de Design System

Use sempre CSS custom properties para tokens — facilita manutenção e theming.

Concluído

Design System gerado com sucesso e disponível em designsystem.ordusdigital.com.br.

Atenção

Nunca usar #FFFFFF puro. O branco oficial da Ordus é #F0F0F3.

Proibido

Usar brand color (#9A11E9) como botão de conversão primário.

HTML

<div class="info-box brand">
  <div class="info-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16" stroke-width="3" stroke-linecap="round"/></svg></div>
  <div class="info-text">
    <div class="info-title">Título</div>
    Texto explicativo aqui.
  </div>
</div>
<!-- Variantes: brand / cta / warn / error -->

03 · Molecules

NLCard — Captura de Lead

Card de captura com gradient brand+cta, campo de e-mail e botão CTA. Usado em seções de newsletter, lead magnet e upgrades.

Receba insights B2B toda semana

Estratégias de credibilidade e posicionamento direto no seu e-mail.

HTML

<div class="nl-card">
  <div class="nl-title">Receba insights B2B toda semana</div>
  <div class="nl-desc">Estratégias direto no seu e-mail.</div>
  <div class="nl-form">
    <input type="email" placeholder="seu@email.com.br">
    <button class="btn-cta">Assinar</button>
  </div>
</div>

04 · Organisms

Navbar — Floating Pillsite real

Comportamento ÚNICO da Ordus: a navbar começa transparente e fullwidth, depois flutua como uma pílula centralizada com glassmorphism ao scroll. Extraído diretamente do site real.

Estado Default (topo da página)

Estado Scrolled (floating pill)

Comportamento exclusivo

No scroll: top: 35px; left: calc(50% - 550px); right: calc(50% - 550px) — a navbar se torna uma pílula flutuante centralizada, não apenas muda o background. Diferente de 99% das navbars que só trocam a cor.

<!-- HTML da Navbar -->
<nav id="navbar" class="navbar">
  <div class="nav-container">
    <!-- Logo SVG aqui -->
    <div class="nav-links">
      <a href="/servicos">Serviços</a>
      <a href="/clientes">Clientes</a>
      <a href="/blog">Blog</a>
    </div>
    <button class="btn-cta btn-sm">Começar</button>
  </div>
</nav>

/* CSS da Navbar Floating Pill */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 85px;
  background: transparent;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex; align-items: center;
  padding: 0 32px;
}
.navbar.scrolled {
  top: 35px;
  left: calc(50% - 550px);
  right: calc(50% - 550px);
  height: 64px;
  border-radius: 10px;
  background: radial-gradient(
    400px 400px at 400px -100px,
    rgba(30,30,30,0.85),
    rgba(15,15,15,0.80)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* JS */
window.addEventListener('scroll', () => {
  document.getElementById('navbar')
    .classList.toggle('scrolled', window.scrollY > 80);
}, { passive: true });

04 · Organisms

Hero Sectionsite real

Hero centralizado com gradient animado, eyebrow pill, headline Fractul 900 uppercase, subtítulo e dois CTAs. Gradient spotlight segue o mouse.

Assessoria B2B de Credibilidade

CONSTRUINDO
AUTORIDADE REAL

Transformamos a comunicação da sua empresa em um sistema que gera credibilidade, pipeline e resultados mensuráveis.

<section class="hero-centered" data-reveal>
  <div class="hero-eyebrow">Assessoria B2B de Credibilidade</div>
  <h1 class="hero-title">
    CONSTRUINDO AUTORIDADE <span class="grad">REAL</span>
  </h1>
  <p class="hero-sub">
    Transformamos a comunicação da sua empresa em um sistema
    que gera credibilidade, pipeline e resultados mensuráveis.
  </p>
  <div class="hero-ctas">
    <button class="btn-cta btn-lg">Começar Agora</button>
    <button class="btn-ghost btn-lg">Ver Cases</button>
  </div>
</section>

/* CSS do Hero */
.hero-centered {
  background: linear-gradient(-45deg, #000, #0D0D0D, #1a0033, #000);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  padding: 128px 24px;
  text-align: center;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Gradient text */
.grad {
  background: linear-gradient(135deg, #9A11E9, #00A47B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Spotlight mouse effect */
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  hero.style.background = `radial-gradient(circle at ${x}% ${y}%,
    rgba(154,17,233,0.12) 0%, transparent 60%)`;
});

04 · Organisms

Features Grid

Grade de funcionalidades ou benefícios. 3 colunas em desktop, 1 em mobile. Cada card com hover lift e border brand.

ECC — Estratégia Central

Documento estratégico que define posicionamento, tom de voz e narrativa da marca.

Produção de Conteúdo

Conteúdo consistente e estratégico em todos os canais: LinkedIn, site, newsletter.

Design System

Biblioteca visual completa: tokens, componentes, guidelines e manifesto para IA.

Automação Inteligente

Workflows e integrações que eliminam trabalho repetitivo e aceleram a operação.

CRM & Pipeline

GoHighLevel configurado para o seu processo de vendas com automações customizadas.

Tráfego Estratégico

Google Ads e Meta Ads com GTM e Analytics configurados para decisões baseadas em dados.

<section class="features-section">
  <div class="features-grid">
    <div class="feature-card" data-reveal>
      <div class="feature-icon">[inline-svg]</div>
      <div class="feature-title">Título do Feature</div>
      <div class="feature-desc">Descrição aqui.</div>
    </div>
    <!-- Repetir para cada feature -->
  </div>
</section>

<!-- Tailwind — Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-[#0E0E0E] border border-[rgba(255,255,255,0.08)]
    rounded-[16px] p-6 transition-all duration-[250ms] ease-out
    hover:-translate-y-1 hover:shadow-[0_8px_32px_rgba(0,0,0,0.5)]
    hover:border-[rgba(154,17,233,0.2)]">
    <!-- conteúdo -->
  </div>
</div>

04 · Organisms

Process Stepssite real

Etapas numeradas com fundo brand sutil. Extraído do site real: background rgba(127,45,193,0.08) com border rgba(127,45,193,0.2).

01

Diagnóstico

Mapeamos o estado atual da comunicação e posicionamento da marca.

02

Estratégia

Criamos a ECC — Estratégia Central de Comunicação da marca.

03

Execução

Produzimos e publicamos conteúdo consistente em todos os canais.

04

Otimização

Analisamos resultados e iteramos para maximizar impacto.

<div class="process-grid">
  <div class="process-step" data-reveal>
    <div class="process-num">01</div>
    <div class="process-title">Diagnóstico</div>
    <div class="process-desc">Descrição da etapa aqui.</div>
  </div>
  <!-- Repetir -->
</div>

<!-- Tailwind — Process Step -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-[rgba(127,45,193,0.08)] border border-[rgba(127,45,193,0.2)]
    rounded-[16px] p-6
    transition-all duration-[250ms] ease-out
    hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(154,17,233,0.25)]">
    <div class="font-['Fractul'] text-[36px] font-black
      text-[#9A11E9] opacity-60 leading-none mb-3">01</div>
    <div class="font-['Fractul'] text-base font-black text-[#F0F0F3] mb-2">
      Diagnóstico
    </div>
    <div class="text-[13px] text-[rgba(240,240,243,0.6)] leading-relaxed">
      Texto aqui.
    </div>
  </div>
</div>

04 · Organisms

Pricing — Card + Section

Seção completa de preços com header, tabela de planos e CTA. Plano featured tem gradient e destaque especial.

Componente — PricingCard

Starter

R$2.500

por mês · contrato 6 meses

ECC completa
4 posts/semana
Relatório mensal
Dashboard dedicado

Growth ✦

R$4.900

por mês · contrato 12 meses

ECC completa
7 posts/semana
Relatório semanal
Dashboard dedicado

HTML

<div class="pricing-card featured">
  <div class="pricing-plan">Growth ✦</div>
  <div class="pricing-price"><span>R$</span>4.900</div>
  <div class="pricing-period">por mês · contrato 12 meses</div>
  <ul class="pricing-features">
    <li><!-- chk SVG --> Feature 1</li>
    <li><!-- chk SVG --> Feature 2</li>
  </ul>
  <button class="btn-cta" style="width:100%">Começar Agora</button>
</div>

Seção Completa — Pricing Section

div class="sublabel" style="margin-top:32px;">Seção Completa — Pricing Section

04 · Organisms

Announcement Bar

Faixa no topo com dot animado (dot-pulse) e botão dismiss. Usa --purple-bg-sm como fundo. Dispensável pelo usuário via JS.

Ordus OS v1.1 disponível — Ver novidades

↑ Clique no × para dispensar

<div class="ann-bar">
  <div class="ann-bar__inner">
    <span class="ann-dot"></span>
    <span>Novidade: Ordus OS v1.1</span>
    <button class="ann-dismiss">×</button>
  </div>
</div>

<!-- Tailwind — Announcement Bar -->
<div class="w-full px-5 py-[10px] bg-[rgba(154,17,233,0.08)] border-b border-[rgba(154,17,233,0.20)]">
  <div class="flex items-center justify-center gap-[10px]">
    <span class="w-2 h-2 rounded-full bg-[#9A11E9] animate-pulse shrink-0"></span>
    <span class="text-[13px] text-[rgba(240,240,243,0.8)]">Novidade: Ordus OS v1.1</span>
    <button class="ml-auto bg-transparent border-none text-[rgba(240,240,243,0.5)] text-lg cursor-pointer">×</button>
  </div>
</div>

04 · Organisms

Logo Bar — Marquee Infinito

Logos de parceiros em scroll infinito (marquee 20s). Grayscale + opacidade reduzida no default, colorido no hover. CRÍTICO: duplicar os logos no HTML para que o loop seja suave.

Parceiros e tecnologias

GoHighLevel

ClickUp

n8n Automation

Vercel

Supabase

Cloudflare

GoHighLevel

ClickUp

n8n Automation

Vercel

Supabase

Cloudflare

<div class="logobar">
  <div class="logobar__track">
    <img src="logo1.svg" alt="Parceiro 1">
    <!-- ... mais logos ... -->
    <!-- Set B (duplicar exatamente os mesmos) -->
    <img src="logo1.svg" alt="Parceiro 1">
  </div>
</div>

<!-- Tailwind — Logo Bar Marquee -->
<div class="overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
  <div class="flex gap-12 items-center w-max
    animate-[marquee_20s_linear_infinite] hover:[animation-play-state:paused]">
    <img src="logo.svg" alt="" class="h-7 opacity-50 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0">
    <!-- Duplicar todos os logos para loop suave -->
  </div>
</div>
<!-- CSS keyframe necessário: -->
<style>
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
</style>

04 · Organisms

CTA Section — SM / MD / LG

3 tamanhos de seção de conversão. SM: inline entre seções. MD: padrão ao fim de seções. LG: CTA final da página com impacto máximo. Estrutura: badge + H2 + subtext + btn-xl.

CTA Section SM

Pronto para crescer?

Agende uma conversa e descubra como a Ordus pode transformar sua operação.

MD: padding 64px · LG: padding 100px 80px + btn-xl + --gradient-halo

<!-- CTA Section MD -->
<section style="background:var(--card-gradient-brand);border:1px solid var(--border-brand);
  border-radius: 16px;padding:64px;text-align:center;">
  <span class="badge badge-brand">Pronto?</span>
  <h2 style="font-family:var(--font-headline);font-weight:900;font-size:40px;margin:12px 0;">
    Título da CTA
  </h2>
  <p style="color:rgba(240,240,243,0.6);max-width:480px;margin:0 auto 32px;">
    Subtext de apoio.
  </p>
  <button class="btn-xl">Call to Action →</button>
</section>

<!-- Tailwind — CTA Section MD -->
<section class="bg-[radial-gradient(500px_500px_at_0px_0px,rgb(22,8,40),rgb(9,9,9))]
  border border-[rgba(154,17,233,.25)] rounded-[16px] p-16 text-center">
  <span class="badge badge-brand">Pronto?</span>
  <h2 class="text-[40px] font-black mt-3 mb-3">Título da CTA</h2>
  <p class="text-[rgba(240,240,243,0.6)] text-[15px] max-w-[480px] mx-auto mb-8">Subtext.</p>
  <button class="btn-xl">Call to Action →</button>
</section>

04 · Organisms

FAQ Accordion

Perguntas colapsáveis — ícone + gira 45° para × quando aberto. Transição suave via max-height. JS mínimo: toggle de classe .open no .faq-item.

A Ordus Digital é uma assessoria B2B de credibilidade operacional que transforma a presença digital de empresas em ativos estratégicos de posicionamento e conversão.

Design System, Estratégia de Comunicação (ECC), Tráfego Pago, Automações com IA e Gestão de CRM via GoHighLevel.

Após a contratação, realizamos um kickoff para mapeamento completo da operação, seguido da criação do backlog de implementação e ativação das ferramentas.

<div class="faq-item">
  <button class="faq-question">
    <span>Pergunta aqui?</span>
    <span class="faq-icon">+</span>
  </button>
  <div class="faq-answer">
    <div class="faq-answer-inner">Resposta aqui.</div>
  </div>
</div>
<!-- JS: -->
<script>
document.querySelectorAll('.faq-question').forEach(q => {
  q.addEventListener('click', () =>
    q.closest('.faq-item').classList.toggle('open'));
});
</script>

<!-- A transição é por max-height -->
<style>
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 400ms ease-out; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-question .faq-icon { transition: transform 300ms; }
.faq-item.open .faq-question .faq-icon { transform: rotate(45deg); }
</style>

04 · Organisms

Footer

Footer em 4 colunas: brand + descrição + 3 colunas de links. Divider sutil + bottom bar com copyright e links legais.

HTML

<footer class="footer-demo">
  <div class="footer-grid">
    <div>
      <!-- Logo SVG aqui -->
      <p class="footer-brand-desc">Descrição da empresa.</p>
    </div>
    <div>
      <div class="footer-heading">Serviços</div>
      <div class="footer-links">
        <a href="#">Link</a>
      </div>
    </div>
  </div>
  <div class="footer-divider"></div>
  <div class="footer-bottom">
    <span>© 2026 Ordus Digital.</span>
  </div>
</footer>

05 · Guidelines

Atomic Design Map

Mapa navegacional de todos os componentes por nível atômico. Clique em qualquer pill para navegar direto para o componente.

05 · Guidelines

Regras de Design

Regras imutáveis que garantem consistência visual. Cada violação degrada a percepção de credibilidade da marca.

REGRA GLOBAL: ZERO EMOJIS

Emojis são terminantemente proibidos em qualquer trabalho de design — DS, projetos de clientes, copy de marca, UI, headlines, botões. Substitua sempre por SVG inline ou texto puro.

Regra	Correto	Proibido	Justificativa
Branco	#F0F0F3	#FFFFFF puro	Nunca usar branco puro em texto ou componentes
CTA	#00A47B (verde)	#9A11E9 como CTA	Brand é identidade. CTA é exclusivo para conversão.
Glassmorfismo	1x por viewport	2+ elementos blur	Máximo 1 backdrop-filter por viewport visível
Espaçamento	4·8·12·16·24·32px	5·7·13·17·22·25px	Escala base-4 estrita. Zero valores arbitrários.
Tipografia	Máx. 3 pesos/pág	4+ pesos misturados	Máximo 3 font-weight distintos por página
Headlines	ALL-CAPS em hero	mixed case em hero h1	Hero sections sempre uppercase. Subseções: mixed case.
Labels	Lowvetica UPPER	outra fonte em buttons	Botões, badges, tabs: sempre Lowvetica uppercase
Logo	SVG sempre	texto genérico	Nunca substituir logo por texto em outra fonte
Radius	escala r-md a r-2xl	5px, 7px, 10px custom	Usar sempre tokens de radius. Nada arbitrário.
Cor decorativa	CTA só em ação	verde em títulos/bordas	Verde CTA é gatilho de clique. Uso decorativo diluí impacto.
Emojis	Nunca — ZERO emojis em qualquer projeto	Qualquer emoji em UI, copy ou código de cliente

05 · Guidelines

Matriz de Canais

Diretrizes de adaptação para cada canal. O DS serve de base — cada canal tem variações de tamanho, tom e formato.

Site / Landing Page CTA

• Navbar floating pill

• Hero gradient animado

• Fractul black em headlines

• Scroll reveal em seções

LinkedIn / Instagram Brand

• Fractul black bold

• Fundo preto puro

• Cor CTA só em call to action

• Lowvetica nos labels de post

Dashboard / SaaS CTA

• Surface cards (#0E0E0E)

• Stat cards com delta

• Progress bars gradient

• Inputs com focus brand

Apresentações / Slides Brand

• Fundo preto puro

• 1 conceito por slide

• Logo MD no canto

• Máx. 2 cores por slide

05 · Guidelines

Tom de Voz

A Ordus comunica com Simples, Original e Sobriedade. Direto ao ponto, sem buzzwords, com substância real.

SIMPLES

Linguagem clara, sem jargão desnecessário. Se pode dizer em 5 palavras, não use 15.

ORIGINAL

Ponto de vista único. Evita clichês de marketing. Fala o que pensa, com fundamento.

SOBRIEDADE

Seriedade sem arrogância. Confiança sem exagero. Ordem na forma de comunicar.

✓ Ordus Fala Assim

"Transformamos comunicação em credibilidade mensurável."

"Sua marca precisa de um sistema, não de posts aleatórios."

"Credibilidade não é percepção. É resultado."

✗ Ordus Não Fala Assim

"Somos apaixonados por inovação disruptiva!"

"Soluções 360° para o seu ecossistema digital."

"Clique aqui e transforme seu negócio agora!!!"

05 · Guidelines

Skill Instalável — Para Agentes de IA

Este Design System inclui um arquivo SKILL.md que pode ser instalado em qualquer agente de IA (Claude, Cursor, etc.) para garantir que o agente respeite automaticamente todas as regras da marca.

ordus-digital-ds.skill

Skill instalável para agentes de IA — Claude, Cursor, Copilot

Este arquivo define automaticamente cores, fontes, componentes e regras para qualquer agente de IA que trabalhe com a marca Ordus Digital. Instale em ~/.claude/skills/ ou no diretório de skills do seu agente.

06 · Motion System

Motion Tokens

Assim como há tokens de cor, há tokens de movimento. Duração e easing como CSS vars garantem consistência em todas as animações da marca.

Duração

--dur-instant

100ms

Feedback imediato: tooltips, ripples

--dur-fast

150ms

Micro-interações: hover, foco

--dur-default

300ms

Transições padrão: cards, reveals

--dur-slow

600ms

Entrada de seções, scroll reveals

--dur-very-slow

1000ms

Animações de hero, onboarding

Easing

--ease-default

Material ease — uso geral

--ease-spring

Spring com overshoot — elementos de destaque

--ease-ease-out

Desaceleração — entradas de elementos

--ease-ease-in

Aceleração — saídas de elementos

HTML

/* Motion Tokens — CSS Custom Properties */
:root {
  /* Duração */
  --dur-instant:   100ms;  /* feedback imediato */
  --dur-fast:      150ms;  /* micro-interações */
  --dur-default:   300ms;  /* transições padrão */
  --dur-slow:      600ms;  /* entrada de seções */
  --dur-very-slow: 1000ms; /* hero, onboarding */

  /* Easing */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);     /* material */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);        /* entrada */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);        /* saída */

  /* Blur (glassmorphism) */
  --blur-sm:  4px;   /* sutil */
  --blur-md:  12px;  /* navbar scrolled */
  --blur-lg:  24px;  /* modals */
}

/* Uso correto */
.card {
  transition: transform var(--dur-default) var(--ease-out),
              box-shadow var(--dur-default) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

06 · Motion System

Scroll Behaviors

Comportamentos ativados pelo scroll. A navbar floating pill é exclusiva da Ordus. O scroll reveal usa IntersectionObserver para performance.

Navbar Floating Pill — Exclusivo Ordus

Não é um simples scroll header. A navbar se reposiciona como uma pílula flutuante: top:35px; left:calc(50% - 550px); right:calc(50% - 550px) com glassmorphism radial. Ver código completo na seção Organisms → Navbar.

HTML

/* ─────────────────────────────────────────────────
   Behavior 1: Navbar Floating Pill
   ─────────────────────────────────────────────────*/
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 85px; background: transparent;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.scrolled {
  top: 35px;
  left: calc(50% - 550px);
  right: calc(50% - 550px);
  height: 64px;
  border-radius: 10px;
  background: radial-gradient(400px 400px at 400px -100px,
    rgba(30,30,30,0.85), rgba(15,15,15,0.8));
  backdrop-filter: blur(12px);
}

/* JS */
window.addEventListener('scroll', () => {
  document.getElementById('navbar')
    .classList.toggle('scrolled', window.scrollY > 80);
}, { passive: true });

/* ─────────────────────────────────────────────────
   Behavior 2: Scroll Reveal (fade + translateY)
   ─────────────────────────────────────────────────*/
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0,0,0.2,1),
              transform 600ms cubic-bezier(0,0,0.2,1);
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

/* JS — IntersectionObserver */
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      io.unobserve(e.target);
    }
  });
}, { threshold: 0.15 });
document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));

06 · Motion System

Hover States — Matriz de Estados

Cada componente Ordus tem 5 estados documentados com preview ao vivo e código copiável. Copie o CSS diretamente para seu projeto.

btn-cta — Botão CTA Principal

Default

Hover

Active

Focus

Disabled

CSS

/* btn-cta — 5 estados */
.btn-cta {
  background: var(--pk-cta-bg); /* gradient left→right */
  background-position: left center;
  transition: background-position 0.4s, transform 0.3s, box-shadow 0.3s;
}
.btn-cta:hover {
  background-position: right center;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 0 24px rgba(154,17,233,0.4); /* pk-cta-glow */
}
.btn-cta:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-cta:focus-visible {
  outline: 2px solid #00A47B;
  outline-offset: 2px;
}
.btn-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

btn-outline — Botão Secundário

Default

Hover

Active

Focus

Disabled

CSS

/* btn-outline — 5 estados */
.btn-outline {
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--color-white);
  transition: border-color 200ms, color 200ms, background 200ms, transform 200ms;
}
.btn-outline:hover {
  border-color: #9A11E9;
  color: #C060FF;
  background: rgba(154,17,233,0.08);
  transform: translateY(-1px);
}
.btn-outline:active {
  transform: translateY(0);
  background: rgba(154,17,233,0.12);
}
.btn-outline:focus-visible {
  outline: 2px solid #9A11E9;
  outline-offset: 2px;
}
.btn-outline:disabled {
  opacity: 0.35;
  pointer-events: none;
}

pk-chip-expand — Chip Assinatura

Estado Default→

Default — 205px

Spring expand hover→

Hover — 465px

CSS

/* pk-chip-expand — hover state (spring) */
.pk-chip {
  width: 205px;
  border-radius: 6px;
  transition: width 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 300ms, border-color 300ms;
}
.pk-chip:hover {
  width: 465px;
  background: var(--purple-bg-lg, rgba(154,17,233,0.20));
  border-color: rgba(154,17,233,0.35);
}
/* Arrow aparece no hover */
.pk-chip .pk-arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 300ms 150ms, transform 300ms 150ms;
}
.pk-chip:hover .pk-arrow {
  opacity: 1;
  transform: translateX(0);
}
.pk-chip:focus-visible {
  outline: 2px solid #9A11E9;
  outline-offset: 2px;
}
.pk-chip[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

Card (.card) — Container Base

Card

Default

Card

translateY(-4px)

Hover

Card

Selecionado

Selected

Card

Desabilitado

Disabled

CSS

/* .card — estados */
.card {
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 250ms ease-out, box-shadow 250ms ease-out,
              border-color 250ms ease-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
  border-color: rgba(255,255,255,0.12);
}
.card[aria-selected="true"],
.card.selected {
  border-color: rgba(154,17,233,0.3);
}
.card[aria-disabled="true"],
.card.disabled {
  opacity: 0.4;
  pointer-events: none;
}

Navbar — States (Scroll)

NAV LINK

Default (top)

NAV LINK

Scrolled (floating pill)

CSS + JS

/* Navbar — scroll state */
.pk-navbar {
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pk-navbar.scrolled {
  border-radius: 10px;
  background: radial-gradient(400px 400px at 400px -100px,
    rgba(30,30,30,0.85), rgba(15,15,15,0.8));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
/* Nav links — hover */
.pk-navbar .nav-links a {
  opacity: 0.7;
  transition: opacity 300ms;
}
.pk-navbar .nav-links a:hover,
.pk-navbar.scrolled .nav-links a {
  opacity: 1;
}

/* JS — adicionar classe .scrolled */
window.addEventListener('scroll', () => {
  const nav = document.querySelector('.pk-navbar');
  nav.classList.toggle('scrolled', window.scrollY > 10);
});

06 · Motion System

Background Animations

Três tipos de animação de fundo: gradient shift (hero), noise texture (sutil) e spotlight que segue o mouse.

Gradient Shift — Hero

Gradient Animado

Mova o mouse para ver o spotlight

Spotlight Mouse Effect

Mova o mouse aqui

HTML

/* Gradient Shift Animado */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-bg {
  background: linear-gradient(-45deg, #000000, #0D0D0D, #1a0033, #000000);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* Mouse Spotlight */
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  hero.style.setProperty('--mx', x + '%');
  hero.style.setProperty('--my', y + '%');
});
/* CSS com variável */
.hero-spotlight {
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(154,17,233,0.12) 0%,
    transparent 60%
  );
}

Animações — dot-pulse e Logo Marquee

dot-pulse — Status ativo / ao vivo

Ao Vivo Novo Lançamento

Announcement Bar dot

marquee — Logo Bar scroll infinito

GoHighLevel

ClickUp

n8n

Vercel

Supabase

GoHighLevel

ClickUp

n8n

Vercel

Supabase

↑ Passe o mouse para pausar o scroll

/* dot-pulse */
@keyframes dot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.4; transform:scale(0.75); }
}
.bdot { animation: dot-pulse 2s infinite; }

/* marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logobar__track { animation: marquee 20s linear infinite; }
.logobar__track:hover { animation-play-state: paused; }

/* Tailwind — dot-pulse (precisa de config custom) */
/* animate-[dot-pulse_2s_ease_infinite] */

/* keyframes no tailwind.config.js: */
animation: {
  'dot-pulse': 'dot-pulse 2s infinite',
},
keyframes: {
  'dot-pulse': {
    '0%,100%': { opacity: '1', transform: 'scale(1)' },
    '50%': { opacity: '0.4', transform: 'scale(0.75)' },
  },
  'marquee': {
    from: { transform: 'translateX(0)' },
    to: { transform: 'translateX(-50%)' },
  },
}

06 · Motion System

Text Effects

Três efeitos de tipografia: gradient text (brand→cta), outline text e smoke reveal (entrada cinematográfica).

Gradient Text (brand → cta)

ORDUS DIGITAL

Outline Text

CREDIBILIDADE

Smoke Reveal (clique para reanimar)

RESULTADOS

Clique para repetir a animação

HTML

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #9A11E9, #00A47B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Outline Text */
.outline-text {
  -webkit-text-stroke: 1px #F0F0F3;
  color: transparent;
}

/* Smoke Reveal */
@keyframes smokeReveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.smoke-text {
  animation: smokeReveal 800ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

06 · Motion System

Background Library

7 fundos de marca prontos para usar — isotipo em grid, halos radiais e grids geométricos. Todos adaptados ao DNA ANGULAR da Ordus. Copie o CSS e aplique em qualquer seção. A cor de identidade nunca deve dominar o fundo: máx. 12% de opacidade em fundos escuros.

Isotipo Sutil

isotipo-grid-sutil

Quadrado da rúbrica repetido em grid — opacidade 5-6%. Tom de presença, não distração.

Neutro

Isotipo Médio

isotipo-grid-media

Mesma grade, opacidade 8-9%. Para seções de destaque que precisam de mais presença.

Destaque

Halo Brand

gradient-halo-brand

Halo roxo no topo da seção — 20% opacidade. Hero sections, abertura de blocos importantes.

Brand

Halo CTA

gradient-halo-cta

Halo verde no topo — 18% opacidade. Seções de conversão, CTAs, pricing, formulários.

CTA

Dual Halo

gradient-dual-halo

Roxo (esq.) + verde (dir.) — tensão criativa. Hero section principal ou seções de transição.

Brand + CTA

Grid Geométrico

grid-lines-geometric

Grade de 32px com linhas roxas em 6% de opacidade. Fundo técnico para seções de processo ou dados.

Técnico

Corner Accent

corner-accent-angular

Linhas angulares nos cantos — 35% opacidade brand. Reforça o DNA chanfrado da rúbrica.

Angular

BG-1 — isotipo-grid-sutil

CSS

.section-com-isotipo-sutil {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='20' y='12' width='20' height='20' rx='0' fill='none' stroke='rgba(154,17,233,0.06)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Variável CSS — adicionar ao :root */
--bg-isotipo-sutil: url("data:image/svg+xml,...") #000;

BG-2 — isotipo-grid-media

CSS

.section-com-isotipo-medio {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='20' y='12' width='20' height='20' rx='0' fill='none' stroke='rgba(154,17,233,0.09)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Use em seções de destaque: features, process steps, depoimentos */

BG-3 — gradient-halo-brand

CSS

.section-halo-brand {
  background: #000000;
  background-image: radial-gradient(
    ellipse 80% 55% at 50% 0%,
    rgba(154, 17, 233, 0.20) 0%,
    transparent 70%
  );
}

/* Token equivalente: var(--gradient-halo) */
/* Uso: hero sections, above the fold, abertura de páginas */

BG-4 — gradient-halo-cta

CSS

.section-halo-cta {
  background: #000000;
  background-image: radial-gradient(
    ellipse 80% 55% at 50% 0%,
    rgba(0, 164, 123, 0.18) 0%,
    transparent 70%
  );
}

/* Uso exclusivo: seções de conversão, CTA, pricing, formulários */
/* REGRA: halo CTA nunca junto com halo brand na mesma seção */

BG-5 — gradient-dual-halo

CSS

.section-dual-halo {
  background: #000000;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(154, 17, 233, 0.15) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(0, 164, 123, 0.12) 0%, transparent 65%);
}

/* Uso: hero principal, seções de maior impacto visual */
/* Máx. 1 uso por página — não repetir */

BG-6 — grid-lines-geometric

CSS

.section-grid-linhas {
  background: #000000;
  background-image:
    linear-gradient(rgba(154, 17, 233, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 17, 233, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Uso: process steps, tabelas, seções técnicas/dados */
/* Combina bem com corner-accent-angular */

BG-7 — corner-accent-angular

CSS

.section-corner-accent {
  background: #000000;
  position: relative;
}

.section-corner-accent::before {
  content: '';
  position: absolute;
  top: 24px; left: 24px;
  width: 40px; height: 40px;
  border-top: 2px solid rgba(154, 17, 233, 0.35);
  border-left: 2px solid rgba(154, 17, 233, 0.35);
  pointer-events: none;
}

.section-corner-accent::after {
  content: '';
  position: absolute;
  bottom: 24px; right: 24px;
  width: 40px; height: 40px;
  border-bottom: 2px solid rgba(154, 17, 233, 0.35);
  border-right: 2px solid rgba(154, 17, 233, 0.35);
  pointer-events: none;
}

/* Reforça DNA chanfrado (ANGULAR) da rúbrica Ordus */
/* Combina com isotipo-grid-sutil para máximo impacto */

REGRAS DE USO — Background Library

Distribuicao: 85% #000 puro / 10% roxo (halo ou grid) / 5% verde (apenas em seções CTA)

Maxima opacidade: roxo 20%, verde 18% — jamais acima disso em fundos

Maximos por pagina: 1 dual-halo, 1 halo-cta, halos simples ilimitados

DNA: Todos os elementos usam angulos retos (rx=0). Pill em fundo: PROIBIDO

06 · Motion System — Text Effects

Typewriter Cycling

Headline com frases alternadas — a palavra-chave troca com efeito blur-swap (sai para cima com blur, entra de baixo sem blur). Ideal para seções com múltiplos benefícios ou propostas de valor. Palavra que muda fica em --color-brand.

ASSESSORIA DE CREDIBILIDADE

Alternando automaticamente a cada 3s

HTML + CSS + JS

/* CSS */
@keyframes tw-out {
  to { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
}
@keyframes tw-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
.tw-word          { color: var(--color-brand); display: inline-block; }
.tw-word.tw-exit  { animation: tw-out 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
.tw-word.tw-enter { animation: tw-in  0.45s cubic-bezier(0.4,0,0.2,1) forwards; }

/* HTML */
<h2>ASSESSORIA DE <span class="tw-word" id="tw-headline">CREDIBILIDADE</span></h2>

/* JS */
const phrases = ['CREDIBILIDADE', 'RESULTADOS', 'CRESCIMENTO'];
let idx = 0;
const el = document.getElementById('tw-headline');
setInterval(() => {
  el.className = 'tw-word tw-exit';
  setTimeout(() => {
    idx = (idx + 1) % phrases.length;
    el.textContent = phrases[idx];
    el.className = 'tw-word tw-enter';
  }, 350);
}, 3000);

/* NOTA: frases devem ter tamanho similar para evitar layout shift */

06 · Motion System — Background Library

Hero Light Beam

Feixe de luz vertical centralizado no hero — efeito de ponto de fuga acima da tela. Cria presença visual cinematográfica sem imagem. Adaptado: original usa azul Huly (#5683DA) — versão Ordus usa brand purple → cta green.

CREDIBILIDADE
OPERACIONAL

HTML + CSS

/* CSS */
.hero-beam-wrap {
  position: relative;
  overflow: hidden;
  background: #000;
}

.hero-beam {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 600px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-brand) 40%,
    var(--color-cta) 70%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
}

.hero-beam::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--color-brand) 0%, transparent 70%);
  opacity: 0.3;
  border-radius: 50%;
}

/* HTML */
<section class="hero-beam-wrap">
  <div class="hero-beam"></div>
  <div class="hero-content">
    <h1>CREDIBILIDADE OPERACIONAL</h1>
    <!-- ... -->
  </div>
</section>

/* background_library_id: hero-light-beam-vertical */

03 · Molecules — FeatureCard

Card Angular Orbital — Border Scan

Card com energia varrendo o perímetro retangular — o brilho corre pelas bordas do card, não em órbita circular. Alinhado ao DNA angular da Ordus: o logo é feito de retângulos, e toda animação orbital deve seguir a geometria da marca. A energia usa conic-gradient animado como border do próprio card.

PERFORMANCE

Métricas em tempo real com rastreamento end-to-end.

DNA ANGULAR — POR QUE NÃO CIRCULAR

O logo Ordus é construído com retângulos e Ls angulares. Efeitos orbitais circulares colidem com esse DNA. A energia deve correr pelas bordas retangulares do card — mesma ideia de "algo em órbita", forma diferente.

CSS + HTML

/* Requer suporte a @property (Chrome 85+, Safari 15.4+) */
@property --orbit-angle {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rect-border-scan {
  from { --orbit-angle: 0deg; }
  to   { --orbit-angle: 360deg; }
}

/* O próprio card é o "wrapper de borda" — padding: 1px cria o canal da borda */
.card-angular-orbital {
  border-radius: var(--r-xl); /* 16px */
  padding: 1px;
  background: conic-gradient(
    from var(--orbit-angle),
    transparent 0deg,
    var(--color-brand) 50deg,
    var(--color-cta) 90deg,
    transparent 140deg,
    transparent 360deg
  );
  animation: rect-border-scan 5s linear infinite;
}

/* Inner: fundo sólido do card, 1px menor p/ mostrar a borda animada */
.card-angular-orbital .card-inner {
  background: var(--color-surface);
  border-radius: calc(var(--r-xl) - 1px);
  padding: 32px;
}

/* HTML */
<div class="card-angular-orbital">
  <div class="card-inner">
    <!-- conteúdo -->
  </div>
</div>

/* DNA ANGULAR: energia corre pelo perímetro RETANGULAR do card.
   NUNCA usar border-radius:50% em efeitos orbitais da Ordus.
   origin: huly.io ACH-03 — adaptado de circular para angular */

03 · Molecules — FeatureCard

Card Neon Chase — Full Border

Duas cores (brand purple + cta green) correm ao redor do perímetro completo do card, trocando de posição. Versão CSS: loop infinito automático. Versão Scroll: as cores avançam conforme a página é scrollada — o card "reage" ao movimento do usuário.

Loop automático (CSS)

Integração

CRM + AUTOMAÇÃO

Sincronização bidirecional entre todos os seus sistemas.

Reage ao scroll da página

Integração

CRM + AUTOMAÇÃO

Scroll na página para ver as cores trocarem de posição.

CSS — Loop automático

/* Requer @property (Chrome 85+, Safari 15.4+) */
@property --neon-angle {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}

@keyframes neon-chase-anim {
  from { --neon-angle: 0deg; }
  to   { --neon-angle: 360deg; }
}

/* Wrapper = border animada (padding: 1px é o "canal" da borda) */
.card-neon-chase {
  border-radius: var(--r-xl); /* 16px */
  padding: 1px;
  background: conic-gradient(
    from var(--neon-angle),
    var(--color-brand) 0deg,
    rgba(154,17,233,0.1) 80deg,
    var(--color-cta) 180deg,
    rgba(0,164,123,0.1) 260deg,
    var(--color-brand) 360deg
  );
  animation: neon-chase-anim 4s linear infinite;
}

.card-neon-chase .card-inner {
  background: var(--color-surface);
  border-radius: calc(var(--r-xl) - 1px);
  padding: 32px;
}

/* HTML */
<div class="card-neon-chase">
  <div class="card-inner">
    <!-- conteúdo -->
  </div>
</div>

CSS + JS — Reage ao scroll

/* CSS — sem animation, angle controlado por JS */
.card-neon-scroll {
  border-radius: var(--r-xl);
  padding: 1px;
  background: conic-gradient(
    from var(--neon-angle, 0deg),
    var(--color-brand) 0deg,
    rgba(154,17,233,0.1) 80deg,
    var(--color-cta) 180deg,
    rgba(0,164,123,0.1) 260deg,
    var(--color-brand) 360deg
  );
}
.card-neon-scroll .card-inner {
  background: var(--color-surface);
  border-radius: calc(var(--r-xl) - 1px);
  padding: 32px;
}

/* JS — atualiza o ângulo conforme o scroll */
function updateNeonScroll() {
  document.querySelectorAll('.card-neon-scroll').forEach(card => {
    const rect   = card.getBoundingClientRect();
    const vh     = window.innerHeight;
    // progress: 0 (card no fundo da tela) → 1 (card no topo)
    const prog   = 1 - (rect.top + rect.height / 2) / vh;
    const angle  = Math.max(0, Math.min(1, prog)) * 720; // 2 voltas completas
    card.style.setProperty('--neon-angle', angle + 'deg');
  });
}
window.addEventListener('scroll', updateNeonScroll, { passive: true });
updateNeonScroll(); // estado inicial

03 · Molecules — FeatureCard

Card Gradient Glow Top

Card dark com borda superior luminosa via pseudo-elemento — como se a borda fosse a fonte de luz. Hover revela borda brand sutil. Versão sofisticada do border-draw. Combina bem em grids de features e bento layout.

Feature 01

AUTOMAÇÃO

Fluxos automáticos que eliminam trabalho manual.

Feature 02

INTEGRAÇÃO

Conecta todos seus sistemas em tempo real.

Feature 03

ANÁLISE

Dados em tempo real para decisões mais rápidas.

CSS

.card-glow-top {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--r-xl); /* 16px */
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Borda superior luminosa */
.card-glow-top::before {
  content: '';
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-brand),
    transparent
  );
  filter: blur(2px);
}

.card-glow-top:hover {
  border-color: rgba(154,17,233,0.3);
}

/* motion_id: card-gradient-glow-top | origin: huly.io ACH-06 */
/* Combina com: cb-bento-features, cb-features-grid */

02 · Atoms — Botões

Btn CTA Glow Border

Botão CTA com box-shadow glow e borda translúcida — efeito de fonte de luz premium. Radius 16px (adaptado de pill 9999px do original Huly — DNA ARREDONDADO_CAP16 da Ordus). O glow preserva o visual premium mesmo com radius menor.

CSS

/* Versão CTA (verde) */
.btn-cta-glow {
  background: var(--color-cta);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-md); /* 8px — DNA ARREDONDADO_CAP16, botões usam --r-md */
  padding: 14px 48px;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(0,164,123,0.4);
  transition: box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),
              transform  0.2s cubic-bezier(0.4,0,0.2,1);
}
.btn-cta-glow:hover {
  box-shadow: 0 0 44px rgba(0,164,123,0.65);
  transform: translateY(-2px);
}

/* Versão Ghost Brand (roxo) */
.btn-brand-glow {
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--r-md); /* 8px */
  padding: 14px 48px;
  box-shadow: 0 0 20px rgba(154,17,233,0.25);
  /* mesmas transições */
}
.btn-brand-glow:hover {
  box-shadow: 0 0 36px rgba(154,17,233,0.5);
  transform: translateY(-2px);
}

/* NOTA: pill (9999px) PROIBIDO em botões — DNA ARREDONDADO_CAP16 */
/* Botões usam --r-md (8px), não --r-xl (16px). Cap é máximo, não padrão. */
/* origin: huly.io ACH-07 — radius adaptado de 9999px → 8px */

04 · Organisms — Features

Bento Features Grid

Grid de features com cards de tamanhos variados (bento layout) — 3 colunas com cards que podem ocupar 1 ou 2 colunas. Cria hierarquia visual sem listas. Combina bem com card-glow-top. Radius: 16px (adaptado de 30px do original).

Feature Principal

GESTÃO CENTRALIZADA

Controle todos os projetos de clientes em um único painel. Visibilidade total do funil ao resultado.

Feature 02

AUTOMAÇÃO

Fluxos automáticos que eliminam o trabalho manual repetitivo.

Feature 03

RELATÓRIOS

Dados em tempo real para decisões mais rápidas.

Feature 04

INTEGRAÇÃO

Conecta CRM, ferramentas de marketing e sistemas legados.

Feature 05

SUPORTE DEDICADO

Time especialista disponível para garantir execução e resultado ao longo de todo o contrato.

HTML + CSS

/* CSS */
.bento-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); /* 16px */
}

.bento-features .card     { border-radius: var(--r-xl); padding: 24px; }
.bento-features .card-wide { grid-column: span 2; }
.bento-features .card-tall { grid-row: span 2; }

/* HTML */
<section class="bento-features">
  <div class="card card-glow-top card-wide">
    <!-- feature principal -->
  </div>
  <div class="card card-glow-top"><!-- feature 2 --></div>
  <div class="card card-glow-top"><!-- feature 3 --></div>
  <div class="card card-glow-top"><!-- feature 4 --></div>
  <div class="card card-glow-top card-wide">
    <!-- feature 5 -->
  </div>
</section>

/* NOTA: radius 16px — adaptado de 30px do original huly.io */
/* Combina com: card-gradient-glow, orbital-ring no card-wide */
/* origin: huly.io ACH-10 */

03 · Molecules — Testimonial

Testimonial — Avatar Overlap

Avatar circular com z-index elevado, sobrepondo o container de texto — cria profundidade sem 3D. Indicado para seções de depoimento, equipe ou prova social humanizada. Borda brand, shadow brand.

Depoimento

"A Ordus transformou completamente a forma como gerenciamos nossa operação comercial."

Fulano de Tal — CEO, Empresa X

HTML + CSS

/* CSS */
.avatar-overlap-wrap {
  position: relative;
  padding: 28px 200px 28px 28px;
  background: var(--color-surface);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.06);
}

.overlap-avatar {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border-radius: 50%; /* permitido — elemento circular geométrico */
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid var(--color-brand);
  box-shadow: 0 8px 32px rgba(154,17,233,0.3);
}

/* HTML */
<div class="avatar-overlap-wrap">
  <blockquote>"Depoimento aqui."</blockquote>
  <cite>Nome — Cargo, Empresa</cite>
  <img src="foto.jpg" class="overlap-avatar" alt="Nome" />
</div>

/* NOTA: pill (50%) é permitido aqui pois avatar é elemento circular geométrico */
/* origin: huly.io ACH-08 */

06 · Motion System — Background Library

Dark/Light Alternation Pattern

Padrão de alternância deliberada entre seções escuras e claras — cria "respiração visual" e evita fadiga em landing pages longas. Proporção: 60% escuro / 40% claro. Hero e CTA section sempre escuras.

Escuro — #000000

Hero Section — Sempre escuro

Claro — #F5F5F5

Features / Social Proof

Escuro — #000000

Process Steps / Integrações

Claro — #F5F5F5

Cases / Resultados / Equipe

Escuro — #000000

CTA Section — Sempre escuro

CSS

/* Seção escura (padrão) */
.section-dark {
  background: var(--color-bg, #000000);
  color: var(--color-white, #F0F0F3);
}

/* Seção clara */
.section-light {
  background: #F5F5F5;
  color: #111111;
}

.section-light h2, .section-light h3 {
  color: #0A0A0A;
}

.section-light p {
  color: #3A3A3A;
}

.section-light .eyebrow {
  color: var(--color-brand); /* mantém brand mesmo em fundo claro */
}

/* Padrão de alternância recomendado:
   Hero            → section-dark
   Features/Prova  → section-light
   Process/Cases   → section-dark
   Resultados/Time → section-light
   CTA Section     → section-dark (sempre)

   Proporção: 60% escuro / 40% claro
   Hero e CTA: SEMPRE escuros
   Máx. 2 seções claras consecutivas */

/* origin: huly.io ACH-09 */

REGRAS DE USO

Proporção: 60% seções escuras / 40% seções claras

Hero e CTA: sempre escuros — nunca inverter

Máximo: 2 seções claras consecutivas (cria sensação de flacidez visual)

Componentes: em seções claras, usar variantes de card com fundo branco (#FFF) ou cinza claro (#F0F0F3)

Paleta de Cores

Sistema de Logotipo

Assets Hospedados — URLs para Copiar

Tipografia

Espaçamento — Escala Base-4

Sombras

Border Radius

Botões

Badges

pk-chip-expand — Componente Assinatura

Inputs & Forms

Card Base

StatCard

FeatureCard

Testimonial

Progress Bar

InfoBox / Alert

NLCard — Captura de Lead

Navbar — Floating Pillsite real

Hero Sectionsite real

CONSTRUINDOAUTORIDADE REAL

Features Grid

Process Stepssite real

Pricing — Card + Section

ENCONTRE SEU PLANO

Announcement Bar

Logo Bar — Marquee Infinito

CTA Section — SM / MD / LG

FAQ Accordion

Footer

Atomic Design Map

Regras de Design

Matriz de Canais

Tom de Voz

Skill Instalável — Para Agentes de IA

Motion Tokens

Scroll Behaviors

Hover States — Matriz de Estados

Background Animations

Text Effects

Background Library

Typewriter Cycling

Hero Light Beam

Card Angular Orbital — Border Scan

Card Neon Chase — Full Border

Card Gradient Glow Top

Btn CTA Glow Border

Bento Features Grid

Testimonial — Avatar Overlap

Dark/Light Alternation Pattern

CONSTRUINDO
AUTORIDADE REAL