149 lines
3.9 KiB
Markdown
149 lines
3.9 KiB
Markdown
# Brand Guidelines — Jusbrasil / Jus IA
|
|
|
|
_Extraído via Firecrawl branding format em 2026-03-08._
|
|
|
|
---
|
|
|
|
## Jusbrasil (jusbrasil.com.br)
|
|
|
|
### Colors
|
|
|
|
| Token | Hex | Uso |
|
|
|-------|-----|-----|
|
|
| Primary | `#5C6F8A` | Texto principal, links |
|
|
| Accent | `#007A5F` | CTAs, destaques |
|
|
| Background | `#FFFFFF` | Fundo principal |
|
|
| Text Primary | `#0F172A` | Texto escuro |
|
|
| Link | `#0F172A` | Links |
|
|
|
|
### Logo Colors
|
|
|
|
| Cor | Hex |
|
|
|-----|-----|
|
|
| Amarelo | `#FFCE00` |
|
|
| Azul | `#378CC8` |
|
|
| Verde | `#7AB441` |
|
|
|
|
### Typography
|
|
|
|
- **Primary/Heading/Body**: Inter
|
|
- **Fallback**: system-ui, -apple-system, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif
|
|
|
|
### Font Sizes
|
|
|
|
| Token | Size |
|
|
|-------|------|
|
|
| h1 | 40px |
|
|
| h2 | 14px |
|
|
| body | 14px |
|
|
|
|
### Spacing
|
|
|
|
- Base unit: 4px
|
|
- Border radius: 6px
|
|
|
|
### Components
|
|
|
|
**Button Primary (Jusbrasil main):**
|
|
- Background: `#FFFFFF`
|
|
- Text: `#007A5F`
|
|
- Border: `#B3C0D0`
|
|
- Border radius: 8px
|
|
- Shadow: `rgba(25, 52, 102, 0.04) 0px 2px 4px 0px`
|
|
|
|
### Personality
|
|
|
|
- Tone: Professional
|
|
- Energy: Medium
|
|
- Target: Legal professionals and individuals seeking legal information
|
|
|
|
---
|
|
|
|
## Jus IA (ia.jusbrasil.com.br)
|
|
|
|
### Colors
|
|
|
|
| Token | Hex | Uso |
|
|
|-------|-----|-----|
|
|
| **Primary** | `#007A5F` | CTAs, botões primários, brand color principal |
|
|
| **Accent** | `#007A5F` | Mesmo que primary |
|
|
| **Background** | `#FFFFFF` | Fundo principal |
|
|
| **Text Primary** | `#5C6F8A` | Texto principal (azul acinzentado) |
|
|
| **Link** | `#5C6F8A` | Links |
|
|
|
|
### Typography
|
|
|
|
- **Primary/Heading/Body**: Inter
|
|
- **Fallback**: system-ui, -apple-system, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif
|
|
|
|
### Font Sizes
|
|
|
|
| Token | Size |
|
|
|-------|------|
|
|
| h1 | 40px |
|
|
| h2 | 18px |
|
|
| body | 16px |
|
|
|
|
### Spacing
|
|
|
|
- Base unit: 8px
|
|
- Border radius: 6px (base), 8px (buttons)
|
|
|
|
### Components
|
|
|
|
**Button Primary (Jus IA):**
|
|
- Background: `#007A5F` (verde)
|
|
- Text: `#FFFFFF` (branco)
|
|
- Border: `#007A5F`
|
|
- Border radius: 8px
|
|
- Shadow: `rgba(25, 52, 102, 0.04) 0px 2px 4px 0px`
|
|
|
|
**Button Secondary (Jus IA):**
|
|
- Background: `#FFFFFF`
|
|
- Text: `#007A5F`
|
|
- Border: `#B3C0D0`
|
|
- Border radius: 8px
|
|
- Shadow: `rgba(25, 52, 102, 0.04) 0px 2px 4px 0px`
|
|
|
|
### Design System
|
|
|
|
- Framework: Custom
|
|
- Component library: Radix UI
|
|
|
|
### Personality
|
|
|
|
- Tone: Professional
|
|
- Energy: Medium
|
|
- Target: Lawyers and legal professionals
|
|
|
|
---
|
|
|
|
## Design Decisions for Jus IA Start Kit
|
|
|
|
O Start Kit redireciona para o Jus IA, portanto deve alinhar sua identidade visual com o Jus IA (não com o Jusbrasil principal).
|
|
|
|
### Paleta Adotada
|
|
|
|
| Token | Hex | Fonte | Uso no Start Kit |
|
|
|-------|-----|-------|-----------------|
|
|
| `primary` | `#007A5F` | Jus IA primary | Botões primários, CTAs, header |
|
|
| `primary-light` | `#009B78` | Derivado (lighter) | Hover states, links |
|
|
| `primary-dark` | `#005C47` | Derivado (darker) | Active states |
|
|
| `text-primary` | `#5C6F8A` | Jus IA text | Texto principal, corpo |
|
|
| `text-dark` | `#0F172A` | Jusbrasil text | Headings, texto enfático |
|
|
| `accent` | `#D4A843` | Custom (dourado) | Badges de fundamentação jurídica (diferenciador do Start Kit) |
|
|
| `surface` | `#FFFFFF` | Jus IA bg | Cards, áreas de conteúdo |
|
|
| `background` | `#F8F9FA` | Custom | Background geral |
|
|
| `border` | `#B3C0D0` | Jus IA border | Bordas de cards, inputs, botões secondary |
|
|
| `success` | `#7AB441` | Jusbrasil logo green | Confirmações, progresso |
|
|
| `warning` | `#D97706` | Custom | Atenção |
|
|
| `error` | `#DC2626` | Custom | Erros |
|
|
|
|
### Justificativa
|
|
|
|
- **Verde (#007A5F) como primary** alinha o Start Kit com o Jus IA — continuidade visual do redirect
|
|
- **Dourado (#D4A843) mantido** para badges jurídicos — diferenciador do Start Kit, não existe no Jus IA
|
|
- **Inter** confirmada como fonte — já era nossa escolha
|
|
- **Border radius 8px** para botões — alinhado com Jus IA
|
|
- **Shadow sutil** `rgba(25, 52, 102, 0.04)` — mesmo padrão Jus IA
|