# Design System Oficial — kitofer
> Documento consolidado gerado automaticamente pela Propenza Marketing para consumo por Agentes de IA e LLMs.
> Padrão: W3C Design Tokens / WCAG 2.2 AA / Single Source of Truth (SSOT)
---
# 🏗️ Kitofer Ferro e Aço — Visão Geral & Território de Marca
> **Documento:** `00-brand-overview.md`
> **Nome da Marca:** Kitofer Ferro e Aço (Kitofer Distribuidora de Ferro e Aço Ltda)
> **Sede:** Bairro Boqueirão, Curitiba/PR (Atendimento a Curitiba e Região Metropolitana)
> **Slug:** `kitofer`
> **Segmento:** Distribuição B2B de Ferro e Aço para Serralherias e Metalúrgicas (mais de 3.000 itens)
> **Agência Criativa & Estratégica:** Propenza Marketing
> **Status:** `SSOT Homologado` (Single Source of Truth)
---
## 1. ⚓ The Context Anchor (Âncora de Contexto)
### 1.1 A História & Trajetória de Crescimento Sólido
A **Kitofer Ferro e Aço** é um dos grandes símbolos de empreendedorismo industrial e perseverança de Curitiba:
- **2004 (A Garagem)**: A história começou literalmente em uma garagem, atendendo pequenos serralheiros com venda de acessórios e consumíveis de serralheria.
- **2006 (A Entrada no Ferro)**: Com a chegada de dois sócios, iniciou-se a expansão para materiais pesados, perfis estruturais e barras de ferro.
- **2012 (O Nascimento da Kitofer)**: Após a reorganização societária, nasce oficialmente a marca **Kitofer**, estabelecendo sua sede própria no tradicional bairro Boqueirão.
- **2020 (O Primeiro Barracão Industrial)**: Aquisição do primeiro grande barracão para centralizar estoque pesado e acelerar expedição.
- **2024 (O Segundo Barracão & Expansão de Frota)**: Conquista do segundo barracão, expansão de caminhões de frota própria, aumento de equipe e consolidação de um mix com **mais de 3.000 itens em estoque a pronta entrega**.
- **O Futuro**: Expansão contínua em Curitiba e RMC, abertura de uma nova unidade especializada na fabricação e distribuição de telhas metálicas, e liderança ética no setor.
### 1.2 O Diferencial em um Mercado de Commodities
O setor de ferro e aço é historicamente dominado por commodities, onde a concorrência disputa centavos em tabelas de preços. A Kitofer posiciona-se em um patamar superior:
> *"Sabemos que muitos concorrentes vendem os mesmos produtos. Por isso, nosso diferencial vai muito além do preço: entregamos credibilidade, transparência, pesagem exata, entrega ágil com frota própria e atendimento consultivo no balcão e no WhatsApp. Nós suprimos a carência de confiança no mercado."*
---
## 2. 🎯 O Perfil do Cliente & Dinâmica Comercial (ICP B2B)
```
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ O CLIENTE KITOFER: O SERRALHEIRO B2B │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ • Perfil Demográfico: Donos de serralherias e metalúrgicas (90% homens, perfil prático). │
│ • Rotina & Dores: Prazos apertados de obras, clientes cobrando entrega de portões e │
│ estruturas, medo de receber perfis fora da bitola ou atrasos na entrega que paralisam a │
│ oficina, falta de resposta rápida nas cotações. │
│ • Canais de Contato Preferenciais: WhatsApp ágil, Telefone comercial (3289-9675) e │
│ atendimento olho no olho no balcão do Boqueirão. │
│ • Fator Decisivo de Compra: Certeza de que o material vai chegar no dia combinado, bitola │
│ garantida, preço justo e palavra cumprida. │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
```
---
## 3. 🛡️ O Triângulo Arquetípico da Kitofer
```
🏗️ O CONSTRUTOR / FORÇA ESTRUTURAL (45%)
(Solidez do Aço, Grandes Obras, Durabilidade,
"Toda grande estrutura começa pelo Aço certo")
/\
/ \
/ \
/ \
/ 🎯 \
/ \
/____________\
🤝 O CARA COMUM 🛡️ O PROTETOR / HONESTIDADE
(Parceria de Balcão, (Palavra Cumprida, Transparência,
Pé no Chão, Direto, Pesagem Correta, Confiança,
Fácil Acesso no Whats) Tradição desde 2004)
```
1. **O Construtor (45%)**: Fornece o alicerce metálico sobre o qual galpões, coberturas, mezaninos e esquadrias de segurança são erguidos. É o peso, a resistência e a durabilidade do aço certificado.
2. **O Cara Comum / Parceiro de Balcão (35%)**: Fala a língua do serralheiro. Sem enrolação, sem jargões corporativos pedantes. Atendimento ágil pelo WhatsApp, respeito ao profissional da solda e cafezinho quente no balcão.
3. **O Protetor / Transparência Ética (20%)**: Honestidade inegociável. A garantia de que um tubo de 2,00mm tem exatamente 2,00mm e que o caminhão vai encostar na obra no dia prometido.
---
## 4. 🗣️ Tom de Voz, Slogans & Matriz de Modulação
### 4.1 Taglines & Slogans Oficiais
- **Tagline Principal de Campanha**: *"Toda grande estrutura começa pelo Aço certo"*
- **Assinatura Institucional**: *"Kitofer Ferro e Aço — Tradição e confiança para sua serralheria"*
- **Mantra Operacional**: *"Mais de 3.000 itens a pronta entrega com a rapidez que sua obra exige"*
### 4.2 Matriz de Modulação Editorial
| Canal de Contato | Tom Adotado | Diretriz de Comunicação | Exemplo Canônico |
| :--- | :--- | :--- | :--- |
| **WhatsApp Comercial & Cotações** | Direto, Veloz, Eficiente | Respostas imediatas, confirmação clara de bitola, valor e prazo de entrega. | *"Boa tarde, mestre! Tubo metalon 50x30 na chapa 18 temos a pronta entrega no barracão. Carregamos amanhã cedo na sua serralheria. Segue cotação em anexo."* |
| **Redes Sociais (Instagram Stories)** | Industrial, Autêntico, Dinâmico | Vídeos do barracão, caminhão carregando, serralheiro soldando, fotos reais sem filtros artificiais. | *"Toda grande estrutura começa pelo Aço certo. Mais um caminhão saindo do Boqueirão rumo às serralherias de Curitiba! Precisa de material? Clica no link e fala no balcão: (41) 3289-9675."* |
| **Balcão Presencial & Televendas** | Acolhedor, Seguro, Amigável | Parceria firme, conhecimento técnico das peças e acessórios de serralheria. | *"Pode ficar tranquilo que essa cantoneira segura a carga. Qualquer dúvida de corte ou medida, nosso time ajuda na especificação."* |
---
# 🎨 Kitofer Ferro e Aço — Cores & Contraste (SSOT)
> **Documento:** `01-colors-and-contrast.md`
> **Status:** `SSOT Homologado` — Extraído Diretamente do Logotipo Oficial e Materiais de Campo
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Cores
A identidade cromática da **Kitofer Ferro e Aço** reflete a potência do setor metal-mecânico: o **Preto Carbono** da barra de aço usinada, o **Vermelho Industrial** de calor e forja do logotipo oficial e o **Amarelo Segurança** dos barracões, frotas e equipamentos de proteção.
---
## 1. 🏛️ Paleta Oficial da Marca
### 1.1 Cores Primárias de Logotipo & Estrutura
| Token Semântico | Nome Comercial | HEX | RGB | OKLCH | CMYK (FOGRA39) | Pantone™ |
| :--- | :--- | :---: | :--- | :--- | :--- | :--- |
| `color-brand-black` | **Preto Carbono** *(KITOFER)* | `#221E1F` | rgb(34, 30, 31) | `oklch(0.240 0.006 0.4)` | C65 M60 Y55 K75 | **Black 6 C** |
| `color-brand-red` | **Vermelho Kitofer** *(FERRO E AÇO)* | `#ED1A23` | rgb(237, 26, 35) | `oklch(0.602 0.236 27.0)` | C0 M100 Y100 K0 | **485 C** |
| `color-brand-yellow` | **Amarelo Segurança** *(Campo/Frota)* | `#FF9C00` | rgb(255, 156, 0) | `oklch(0.777 0.173 66.1)` | C0 M45 Y100 K0 | **137 C** |
| `color-brand-steel` | **Cinza Chapa de Aço** | `#4A4A4A` | rgb(74, 74, 74) | `oklch(0.409 0.000 263.3)` | C60 M50 Y50 K30 | **Cool Gray 10 C** |
### 1.2 Cores Secundárias & Suporte de Leitura
| Token Semântico | Nome Comercial | HEX | RGB | OKLCH | Uso Recomendado |
| :--- | :--- | :---: | :--- | :--- | :--- |
| `color-neutral-white` | **Branco Puro** | `#FFFFFF` | rgb(255, 255, 255) | `oklch(1.000 0.000 0.0)` | Fundo limpo de tabelas de medidas e orçamentos |
| `color-neutral-offwhite`| **Off-White Concreto** | `#F8F9FA` | rgb(248, 249, 250) | `oklch(0.985 0.002 247.9)` | Fundo de cards de produtos e catálogos |
| `color-brand-red-aa` | **Vermelho Alto Contraste** | `#DE131B` | rgb(222, 19, 27) | `oklch(0.575 0.230 26.5)` | Botões primários com texto branco (5.02:1 WCAG AA) |
---
## 2. 🛡️ Guardrail Inviolável de Acessibilidade (WCAG 2.2)
```
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ ⚠️ REGRA DE OURO: CONTRASTE VERMELHO vs. AMARELO │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ • Razão de Contraste Vermelho (#ED1A23) sobre Amarelo (#FF9C00): APENAS 2.10:1 (FALHA WCAG) │
│ • DIRETRIZ INVIOLÁVEL: É terminantemente PROIBIDO aplicar textos ou botões vermelhos sobre │
│ fundos amarelos em qualquer material digital, website ou tabela técnica. │
│ • SOLUÇÃO HOMOLOGADA: Sobre fundos Amarelo Segurança (#FF9C00), os textos DEVEM ser │
│ estritamente em PRETO CARBONO (#221E1F), que atinge contraste de 7.86:1 (WCAG AAA). │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
```
---
## 3. ✅ Auditoria de Contraste WCAG 2.2 AA / AAA
| Par de Cores (Texto / Fundo) | Razão de Contraste | Nível WCAG | Aplicação Homologada |
| :--- | :---: | :---: | :--- |
| **Preto Carbono sobre Branco** (`#221E1F` / `#FFFFFF`) | **16.49:1** | **AAA** | **Textos de cotação, tabelas de medidas, títulos H1** |
| **Preto Carbono sobre Amarelo** (`#221E1F` / `#FF9C00`) | **7.86:1** | **AAA** | **Stories de ofertas, faixas de segurança, destaques** |
| **Branco sobre Preto Carbono** (`#FFFFFF` / `#221E1F`) | **16.49:1** | **AAA** | **Banners escuros industriais e rodapé** |
| **Branco sobre Vermelho AA** (`#FFFFFF` / `#DE131B`) | **5.02:1** | **AA** | **Botões de ação primária ("Solicitar Cotação")** |
| **Branco sobre Vermelho Oficial** (`#FFFFFF` / `#ED1A23`)| **4.40:1** | **AA Large**| **Títulos grandes e badges com fonte > 18pt bold** |
---
## 4. 📐 Tokens CSS (:root)
```css
:root {
/* Primitivos */
--kitofer-black: #221E1F;
--kitofer-red: #ED1A23;
--kitofer-red-aa: #DE131B;
--kitofer-yellow: #FF9C00;
--kitofer-steel: #4A4A4A;
--kitofer-white: #FFFFFF;
--kitofer-offwhite: #F8F9FA;
--kitofer-border: #E2E8F0;
/* Semânticos */
--color-interactive-primary: var(--kitofer-red-aa);
--color-interactive-hover: #B80D14;
--color-interactive-warning: var(--kitofer-yellow);
--color-brand-header: var(--kitofer-black);
--color-brand-accent: var(--kitofer-yellow);
--bg-surface-base: var(--kitofer-white);
--bg-surface-card: var(--kitofer-offwhite);
--bg-surface-dark: var(--kitofer-black);
--text-primary: var(--kitofer-black);
--text-secondary: var(--kitofer-steel);
--text-on-dark: var(--kitofer-white);
--text-on-yellow: var(--kitofer-black);
}
```
---
# 🔤 Kitofer Ferro e Aço — Tipografia & Escala Fluida (SSOT)
> **Documento:** `02-typography.md`
> **Status:** `SSOT Homologado` — Tríade Oficial: **Rokkitt / Alfa Slab One** + **Barlow Condensed** + **Barlow**
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Tipografia
A identidade tipográfica da **Kitofer Ferro e Aço** transmite a robustez e o peso estrutural do aço. Une a solidez das serifas egípcias da marca às fontes industriais de alta sinalização técnica e legibilidade no canteiro de obras.
---
## 1. 🏛️ Importações Web Oficiais (Google Fonts)
```html
```
```css
/* Importação CSS */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@400;500;600;700&family=Rokkitt:wght@700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
```
---
## 2. 📐 Papel das Famílias no Sistema
| Família | Peso / Estilo | Papel no Sistema | Exemplo de Aplicação |
| :--- | :--- | :--- | :--- |
| **Rokkitt / Alfa Slab One** | **Black (900) / ExtraBold (800)** | **Logotipo "KITOFER" e Destaques Institucionais de Peso** | *"KITOFER"* / *"FERRO E AÇO DESDE 2004"* |
| **Barlow Condensed** | **Bold (700) e Black (900)** | **Subtítulo "FERRO E AÇO", Títulos H1/H2 e Chamadas de Ofertas** | *"TODA GRANDE ESTRUTURA COMEÇA PELO AÇO CERTO"* |
| **Barlow** | **Regular (400) e SemiBold (600)** | **Textos corridos de descrição de produtos, políticas e balcão** | *"Tubos metalon galvanizados com garantia de espessura e entrega ágil."* |
| **JetBrains Mono** | **SemiBold (600)** | **Bitolas técnicas, polegadas, espessuras de chapa e cotações** | *"Tubo 50x30 #18 (1.20mm) - 6.00m"* / *"R$ 84,50/barra"* |
---
## 3. 📱 Escala Tipográfica Fluida (`clamp()`)
```css
:root {
--font-slab: 'Rokkitt', serif;
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Escala Modular 1.25 Fluid Clamp */
--text-hero: clamp(2.50rem, 5vw + 1rem, 4.250rem); /* 40px → 68px */
--text-h1: clamp(2.00rem, 4vw + 0.75rem, 3.250rem);/* 32px → 52px */
--text-h2: clamp(1.60rem, 3vw + 0.5rem, 2.500rem); /* 25px → 40px */
--text-h3: clamp(1.25rem, 2vw + 0.5rem, 1.953rem); /* 20px → 31px */
--text-lead: clamp(1.063rem, 1vw + 0.5rem, 1.250rem); /* 17px → 20px */
--text-body: clamp(0.938rem, 0.4vw + 0.75rem, 1.000rem);/* 15px → 16px */
--text-small:clamp(0.813rem, 0.2vw + 0.7rem, 0.875rem); /* 13px → 14px */
}
```
---
## 4. 🔠 Especificação do Logotipo Oficial
```css
.kitofer-logo {
display: flex;
flex-direction: column;
align-items: center;
text-transform: uppercase;
}
.kitofer-logo__brand {
font-family: var(--font-slab);
font-weight: 900;
font-size: 3.5rem;
letter-spacing: 0.05em;
color: var(--kitofer-black);
border-bottom: 5px solid var(--kitofer-black);
padding-bottom: 2px;
line-height: 0.9;
}
.kitofer-logo__tag {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.6rem;
letter-spacing: 0.22em;
color: var(--kitofer-red);
margin-top: 6px;
}
```
---
# 📐 Kitofer Ferro e Aço — Espaçamento, Tokens & Geometria (SSOT)
> **Documento:** `03-spacing-and-tokens.md`
> **Status:** `SSOT Homologado` — Grade 4pt/8pt & Geometria Industrial de Perfis de Aço
> **Última atualização:** 2026-08-26
---
## 1. 🏗️ Grid System & Espacialidade
A espacialidade da Kitofer segue uma cadência matemática rígida de **4pt e 8pt**, proporcionando uma organização densa, eficiente e direta para catálogos com mais de 3.000 itens:
```
Base: 4px = 0.25rem
Escala: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128px
```
| Token | px | rem | Aplicação Recomendada |
| :--- | :---: | :---: | :--- |
| `space-1` | 4px | 0.250rem | Espaçamento entre ícone de telefone e número |
| `space-2` | 8px | 0.500rem | Padding vertical de badges de bitola (ex.: #18) |
| `space-3` | 12px | 0.750rem | Gap interno de botões e seletores de perfil |
| `space-4` | 16px | 1.000rem | Padding padrão de botões e células de tabela |
| `space-6` | 24px | 1.500rem | Padding de cards de categorias (Tubos, Vigas, Telhas) |
| `space-8` | 32px | 2.000rem | Margem entre seções de catálogo e formulários |
| `space-12` | 48px | 3.000rem | Separação entre grandes blocos industriais |
| `space-16` | 64px | 4.000rem | Padding vertical do Hero de cotação |
---
## 2. 🔘 Raios de Curvatura (Bordas Retas & Chanfradas)
O ferro e o aço caracterizam-se por cortes precisos e ângulos retos. Por isso, a marca utiliza cantos firmes e quase retos:
| Token | px | Aplicação |
| :--- | :---: | :--- |
| `radius-none` | **0px** | **Tabelas técnicas, divisores, chapas e vigas** |
| `radius-sm` | 4px | Badges de estoque e botões industriais |
| `radius-md` | **6px** | **Inputs de formulário e cards de produtos** |
| `radius-lg` | 10px | Banners promocionais e modais de cotação |
| `radius-full`| 9999px | Botão flutuante do WhatsApp oficial |
---
## 3. ⚠️ Grafismo Proprietário: Faixas de Segurança & Chapa Xadrez
- **Faixas Zebradas Industriais**: Padrão de listras inclinadas a 45° alternando Amarelo Segurança (`#FF9C00`) e Preto Carbono (`#221E1F`), utilizadas em rodapés de ofertas e avisos de carregamento imediato.
- **Barra de Sustentação**: A linha horizontal espessa sob "KITOFER" no logotipo é replicada como separador de seções na interface, simbolizando uma viga I laminada de aço.
```css
/* Padrão Zebrado de Alerta Industrial */
.kitofer-hazard-stripe {
background: repeating-linear-gradient(
-45deg,
var(--kitofer-yellow),
var(--kitofer-yellow) 12px,
var(--kitofer-black) 12px,
var(--kitofer-black) 24px
);
}
```
---
## 4. 🌑 Sombras Estruturais
| Token | Valor CSS | Aplicação |
| :--- | :--- | :--- |
| `shadow-sm` | `0 1px 3px rgba(34, 30, 31, 0.12)` | Cards em repouso |
| `shadow-md` | `0 4px 12px rgba(34, 30, 31, 0.16)` | Hover de produtos |
| `shadow-heavy`| `0 8px 24px rgba(34, 30, 31, 0.25)` | Destaque do balcão de cotação |
---
# 💻 Kitofer Ferro e Aço — Componentes Digitais & Cotações Rápidas (SSOT)
> **Documento:** `04-digital-components.md`
> **Status:** `SSOT Homologado` — Arquitetura de Conversão B2B & Balcão Digital
> **Última atualização:** 2026-08-26
---
## 1. 🏛️ HeaderNavbar — O Balcão de Entrada
- **Esquerda**: Logotipo oficial com a barra de sustentação: `KITOFER FERRO E AÇO`.
- **Centro**: Menus objetivos:
- *Catálogo (+3.000 Itens)* (Tubos, Vigas, Chapas, Telhas, Acessórios)
- *Nossa História* (Desde 2004 · Boqueirão)
- *Estrutura & Entrega* (2 Barracões · Frota Própria Curitiba/RMC)
- **Direita**:
- Bloco de Televendas: ` (41) 3289-9675`
- Botão Primário WhatsApp: *"Cotar no Balcão"*.
---
## 2. ⚡ ActionButton (6 Variantes Oficiais)
```
┌───────────────────────────┬───────────────────────────┬───────────────────────────┐
│ 1. PRIMARY RED AA │ 2. WHATSAPP DIRECT │ 3. YELLOW HAZARD │
│ Fundo: #DE131B │ Fundo: #25D366 │ Fundo: #FF9C00 │
│ Texto: #FFFFFF (Bold) │ Texto: #FFFFFF (Bold) │ Texto: #221E1F (Black) │
│ Uso: Conversão principal │ Uso: Conversa imediata │ Uso: Ofertas da semana │
├───────────────────────────┼───────────────────────────┼───────────────────────────┤
│ 4. STEEL SECONDARY │ 5. OUTLINE BLACK │ 6. GHOST LINK │
│ Fundo: #4A4A4A │ Borda: 2px #221E1F │ Sem fundo nem borda │
│ Texto: #FFFFFF │ Texto: #221E1F │ Texto com sublinhado │
│ Uso: Ações secundárias │ Uso: Baixar tabela PDF │ Uso: Links de rodapé │
└───────────────────────────┴───────────────────────────┴───────────────────────────┘
```
### Especificação CSS da Variante Primária:
```css
.btn-kitofer-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: var(--kitofer-red-aa); /* #DE131B */
color: var(--kitofer-white);
font-family: var(--font-display);
font-weight: 800;
font-size: 1.125rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: 4px;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(222, 19, 27, 0.35);
transition: all 180ms ease-in-out;
}
.btn-kitofer-primary:hover {
background-color: #B80D14;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(222, 19, 27, 0.45);
}
```
---
## 3. 💬 QuickQuoteWhatsApp — O Módulo de Cotação em 1 Clique
O serralheiro não preenche cadastros longos no canteiro de obras. Este componente permite enviar a lista de cortes diretamente:
- **Botão Central**: *"Enviar Lista de Materiais pelo WhatsApp"*.
- **Texto de Apoio**: *"Mande foto do projeto ou lista de bitolas. Retorno médio em 15 minutos pelo balcão (41) 3289-9675"*.
---
## 4. 📦 ProductCard — Card Técnico de Produto
- **Header**: Nome do material em Barlow Condensed Bold (ex.: *"Tubo Retangular Metalon"*).
- **Badge**: *"Pronta Entrega - 2 Barracões"*.
- **Tabela de Medidas**: Linhas zebra em JetBrains Mono com bitolas comuns (ex.: 50x30, 40x20, 80x40, espessuras #18, #16, #14).
- **Ação**: Botão *"Cotar Esta Medida"*.
---
# 🧰 Kitofer Ferro e Aço — Bibliotecas & Tooling do Cliente (SSOT)
> **Documento:** `05-libraries-and-tooling.md`
> **Status:** `Dados Pendentes / A Definir pelo Cliente`
> **Última atualização:** 2026-08-26
---
## ⚠️ Diretriz de Isolamento de Stack & Fidelidade aos Dados
> **Status da Stack de Produção:** Não informada nos documentos iniciais / Vazia por determinação do cliente.
> Conforme o Guardrail Anti-Template Bleed, é terminantemente proibido presumir tecnologias que não constam nas especificações homologadas da empresa.
---
## 1. 🏗️ Stack Tecnológica de Produção
*(Pendente de definição pela equipe da Kitofer Ferro e Aço)*
- **Site & Catálogo Online**: `[A definir pelo cliente]`
- **Sistema de Gestão & ERP Metalúrgico**: `[A definir pelo cliente]`
- **Canal de Vendas & Atendimento**: WhatsApp Oficial & Balcão Boqueirão
---
## 2. 🔣 Biblioteca de Ícones Homologada: Lucide Icons
- **Biblioteca Oficial**: [Lucide Icons](https://lucide.dev/)
- **Espessura do Traço (Stroke Width)**: `1.6px` (firme e industrial)
| Ação / Conceito | Componente Lucide | Significado no Sistema |
| :--- | :--- | :--- |
| **Vigas & Estrutura de Aço** | `` | Toda grande estrutura |
| **Tubos & Perfis Metálicos** | `` | Mais de 3.000 itens em estoque |
| **Frota & Entrega Ágil** | `` | Caminhões de frota própria |
| **Balcão & Televendas** | `` | Contato direto (41) 3289-9675 |
| **WhatsApp Oficial** | ``| Cotação rápida para serralheiros |
| **Pesagem & Certificação** | `` | Bitola e peso garantidos |
---
# 🖨️ Kitofer Ferro e Aço — Produção Gráfica & Editorial (SSOT)
> **Documento:** `06-print-and-editorial.md`
> **Status:** `SSOT Homologado` — Tabelas de Serralheria, Sinalização de Frota & Balcão
> **Última atualização:** 2026-08-26
---
## 1. ⚙️ Normas Técnicas para Materiais Impressos
- **Espaço de Cor Gráfico**: CMYK padrão **ISO Coated v2 (ECI) / FOGRA39**.
- **Resolução Mínima**: **300 DPI** em escala 1:1.
- **Sangria (Bleed)**: Mínimo de **3mm** em todas as bordas de corte.
- **Margem de Segurança Interna**: **5mm** para textos e tabelas.
---
## 2. 🎨 Fórmulas CMYK & Pantone™ Oficiais
| Cor | HEX | CMYK Oficial | Pantone™ Correspondente | Aplicação em Gráfica |
| :--- | :---: | :--- | :--- | :--- |
| **Preto Carbono** | `#221E1F` | **C65 M60 Y55 K75** | **Pantone Black 6 C** | Textos do bloco de pedidos, tabelas |
| **Vermelho Kitofer** | `#ED1A23` | **C0 M100 Y100 K0** | **Pantone 485 C** | Destaque do logotipo "FERRO E AÇO" |
| **Amarelo Segurança** | `#FF9C00` | **C0 M45 Y100 K0** | **Pantone 137 C** | Adesivos de caminhão, faixas de alerta |
| **Cinza Aço** | `#4A4A4A` | **C60 M50 Y50 K30** | **Pantone Cool Gray 10 C**| Linhas divisórias de tabelas |
---
## 3. 📄 Peças Gráficas Homologadas
### 3.1 Tabela de Bitolas & Pesos de Parede (Brinde para Serralherias)
- **Finalidade**: Material promocional de alto valor utilitário, afixado na parede das serralherias de Curitiba.
- **Formato**: A3 Vertical (297 × 420mm).
- **Papel**: Couché Brilho 250g/m² com plastificação grossa (para resistir a graxa e poeira de oficina).
- **Conteúdo**: Tabela de peso por metro linear de tubos metalon, cantoneiras, barras chatas e vigas I/U, com telefone em destaque: **(41) 3289-9675**.
### 3.2 Adesivação de Frota de Caminhões Próprios
- **Material**: Vinil adesivo automotivo de alta aderência com proteção UV.
- **Cores**: Fundo Amarelo Segurança (`#FF9C00`) com logotipo oficial `KITOFER` em Preto Carbono e `FERRO E AÇO` em Vermelho, acompanhado do telefone `3289-9675` e do endereço `Boqueirão - Curitiba`.
---
# 📱 Kitofer Ferro e Aço — Redes Sociais & Stories (SSOT)
> **Documento:** `07-social-media.md`
> **Status:** `SSOT Homologado` — Grids Feed 4:5, Stories 9:16 & Comunicação com Serralheiros
> **Última atualização:** 2026-08-26
---
## 1. 📐 Formatos & Safe Zones Obrigatórias
- **Feed Instagram (Padrão Único)**: **1080 × 1350px (Proporção 4:5)**.
- **Stories & Reels (Padrão Oficial do Story Homologado)**: **1080 × 1920px (Proporção 9:16)**.
- *Composição Oficial*: Imagem real do barracão/estoque nos 50% superiores com degradê suave transicionando para a base sólida em Amarelo Segurança (`#FF9C00`).
- *Safe Zone Superior*: 250px livres para avatar e selos.
- *Safe Zone Inferior*: 320px livres para botões de resposta e mensagens diretas.
---
## 2. 🎨 Padrão Visual dos Criativos
1. **Fotografia Real de Operação**: Uso obrigatório de fotos autênticas dos 2 barracões da Kitofer no Boqueirão, fardamento preto/amarelo da equipe com capacete de proteção e pilhas de tubos e perfis.
2. **Tipografia de Títulos**: **Barlow Condensed** em itálico e bold para headlines dinâmicas (*"Toda grande estrutura começa pelo Aço certo"*).
3. **Contraste Rígido**: Textos sobre a base amarela DEVEM ser sempre em Preto Carbono (`#221E1F`).
---
## 3. 🎯 Os 3 Modelos Editoriais Canônicos
```
┌───────────────────────────┬───────────────────────────┬───────────────────────────┐
│ MODELO A │ MODELO B │ MODELO C │
│ "Estoque & Barracão" │ "Oferta da Semana B2B" │ "Dica de Balcão" │
├───────────────────────────┼───────────────────────────┼───────────────────────────┤
│ • Formato: Story 9:16 │ • Formato: Feed 4:5 │ • Formato: Carrossel 4:5 │
│ • Foto da expedição/frota │ • Tabela de bitolas │ • Comparativo técnico │
│ • "Aço Certo para a Obra" │ • Preço da barra e quilo │ • Galvanizado vs. Carbono │
│ • Foco: Movimento e carga │ • Foco: Compra imediata │ • Foco: Confiança técnica │
└───────────────────────────┴───────────────────────────┴───────────────────────────┘
```
---
# 🎬 Kitofer Ferro e Aço — Direção de Arte & Motion (SSOT)
> **Documento:** `08-art-direction-and-motion.md`
> **Status:** `SSOT Homologado` — Fotografia Industrial Autêntica de Barracão & EPI
> **Última atualização:** 2026-08-26
---
## 1. 📷 Direção de Fotografia Industrial
- **Veracidade Operacional**: Toda fotografia deve retratar o ambiente operacional genuíno dos barracões no Boqueirão: pontes rolantes, feixes de tubos amarrados, chapas de corte e a frota de caminhões da empresa.
- **Vestuário & EPI Obrigatório**: Funcionários sempre uniformizados com camiseta preta estampada com o logotipo amarelo e telefone `3289-9675`, utilizando capacete de segurança amarelo e luvas industriais.
- **Iluminação**: Luz natural dos portões de galpão combinada a luminárias industriais de 5000K a 5500K.
- **PROIBIDO**: Fotos de bancos de imagens estrangeiros ou representações fantasiosas de usinas siderúrgicas gigantescas; a força da Kitofer está na proximidade real com a serralheria curitibana.
---
## 2. 🎞️ Motion Tokens Digitais
| Token | Duração | Curva de Aceleração | Uso na Interface |
| :--- | :---: | :--- | :--- |
| `motion-snap` | 120ms | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Troca rápida de abas de produtos |
| `motion-firm` | 200ms | `cubic-bezier(0.2, 0.0, 0.0, 1)` | Hover de botões e cards de aço |
| `motion-heavy` | 350ms | `cubic-bezier(0.16, 1, 0.3, 1)` | Abertura de gavetas e modais técnicos |
---
# 🤖 Kitofer Ferro e Aço — Catálogo de Prompts de IA Generativa (SSOT)
> **Documento:** `09-generative-ai-prompts.md`
> **Status:** `SSOT Homologado` — Prompts para Midjourney v6.1, FLUX.1 & Runway
> **Última atualização:** 2026-08-26
---
## 1. 🖼️ Prompts para Imagens Estáticas (Midjourney v6.1 & FLUX.1)
### Prompt 01: Expedição & Barracão de Ferro e Aço
```text
Documentary industrial photograph of an expansive Brazilian structural steel and metal warehouse in Curitiba, neatly stacked bundles of rectangular steel tubing, galvanized pipes, corrugated roofing sheets, a warehouse worker wearing a black work shirt and bright yellow safety hardhat inspecting inventory, natural morning daylight pouring through high industrial bay doors, authentic textures, Canon EOS R5, 35mm f/2.8 lens, photorealistic, 8k --ar 4:5 --style raw --v 6.1
```
### Prompt 02: Serralheiro em Ação na Oficina
```text
Action shot of an experienced Brazilian metalworker and welder in a local workshop, wearing protective face shield and heavy leather gloves, cutting a thick steel profile with an angle grinder, bright golden sparks showering across dark textured steel, intense focus and craftsmanship, gritty industrial atmosphere, cinematic lighting, 50mm f/1.8 --ar 4:5 --style raw --v 6.1
```
### Prompt 03: Entrega Rápida com Caminhão em Obra
```text
Exterior commercial shot of a medium delivery truck carrying long structural steel beams and metal roofing tiles arriving at a commercial construction site, crisp daylight, sharp contrast, clear professional delivery, Brazilian urban setting, authentic photorealism --ar 4:5 --style raw --v 6.1
```
---
## 2. 🎥 Prompts de Vídeo para B-Roll de Reels (Runway Gen-3)
```text
Cinematic 4k slow motion, close-up of MIG welding torch joining two steel square tubes, intense brilliant blue-orange arc light, glowing puddle of molten metal, shower of fine sparks, professional metalwork --ar 9:16
```
---
# 🛡️ GUARDRAILS — Políticas de Imutabilidade, Isolamento e Governança
> **Projeto:** Kitofer Ferro e Aço Design System v1.0.0
> **Responsável:** Propenza Marketing
> **Data de Vigência:** 2026-08-26
---
## 1. ⚓ Políticas de Fonte Única de Verdade (SSOT)
### Cores (SSOT: `01-colors-and-contrast.md` + `tokens.css`)
- **PROIBIDO** distorcer as cores oficiais da marca:
- Preto Carbono: `#221E1F` (Pantone Black 6 C)
- Vermelho Kitofer: `#ED1A23` (Pantone 485 C)
- Amarelo Segurança: `#FF9C00` (Pantone 137 C)
- **GUARDRAIL CRÍTICO DE CONTRASTE**: É estritamente **PROIBIDO** aplicar texto vermelho sobre fundo amarelo (contraste insuficiente de 2.10:1). Sobre fundos Amarelo Segurança (`#FF9C00`), utilizar unicamente texto Preto Carbono (`#221E1F` - 7.86:1 WCAG AAA).
### Tipografia (SSOT: `02-typography.md`)
- **TÍTULOS E MARCA**: Estritamente **Rokkitt / Alfa Slab One** e **Barlow Condensed**.
- **CORPO E TABELAS**: Estritamente **Barlow** e **JetBrains Mono**.
---
## 2. 🔒 Isolamento da Stack Técnica do Cliente
- A stack de produção da Kitofer está pendente de definição em `05-libraries-and-tooling.md`. É vedado presumir ferramentas não homologadas pelo cliente.
- A aplicação Preact do minisite de documentação opera isolada.
---
## 3. 🚫 Diretriz Anti-Template Bleed (Zero Hallucination)
- É estritamente vedada a importação de dados fictícios de outras marcas.
---