---
name: diretiva-identidade-visual
type: feedback
title: "Visual Identity — Directives"
description: "Visual identity guidelines for artifacts. Anthropic dark mode as default, light mode as alternative. Serious typography. Never AI slop."
tags: [identidade, visual, dark-mode, anthropic, artefatos]
timestamp: 2026-07-07
---

# Visual Identity — Directives

**Main rule:** Never produce artifacts that look "AI generated" — no neon gradients, no empty glamorous effects. Own identity, inspired by the labs but never copying.

## Default Mode: Anthropic Dark

Dark mode as default. Approved on 2026-07-07 after the pricing-analysis-v2 artifact ("what a beautiful thing").

### Anthropic Dark Palette

| Token | Value | Usage |
|---|---|---|
| `--bg` | `#171717` | Main background |
| `--bg2` | `#1e1e1e` | Secondary background |
| `--surface` | `#232329` | Cards, tables, blocks |
| `--border` | `#2e2e32` | Borders, separators |
| `--text` | `#e8e8ed` | Main text |
| `--text2` | `#a1a1aa` | Secondary text |
| `--text3` | `#71717a` | Tertiary text, muted |
| `--warm` | `#d4a574` | Primary accent (Anthropic warm) |
| `--green` | `#66bfa2` | Best, success, positive |
| `--red` | `#e8706a` | Worst, error, negative |

### Dark mode rules
- Background `#171717`, never pure black (`#000`)
- Tables with uppercase headers, `letter-spacing: 0.4px`, muted color (`--text3`)
- Row hover: `rgba(212,165,116,.04)` — barely perceptible
- Callouts with `border-left: 3px solid var(--warm)` and background `rgba(212,165,116,.06)`
- Notes with `border-left: 3px solid var(--text3)` and background `rgba(255,255,255,.03)`
- Model family badges with rgba family color background, 10% opacity
- Premium/reference rows with background `rgba(212,165,116,.06)`

## Alternative Mode: Light

Light mode remains valid for print PDFs, official documents, and contexts where dark is not appropriate.

### Light Palette

| Token | Value | Usage |
|---|---|---|
| `--bg` | `#ffffff` | Background |
| `--surface` | `#f8f9fa` | Cards, tables |
| `--border` | `#ddd` | Borders |
| `--text` | `#1a1a2e` | Main text |
| `--accent` | `#2563eb` | Accent (blue) |
| `--green` | `#16a34a` | Best |
| `--red` | `#dc2626` | Worst |

## What NOT to do (both modes)
- Purple/neon green gradients (the classic "AI slop")
- Status bars with colored dots in gray blocks
- Animations or decorative elements without function
- Excessive formatting that pollutes content
- "Tech bro" or "startup pitch deck" tones
- Generic dark mode with bright borders or colored shadows

## What TO do (both modes)
- **Serious typography:** Source Serif 4 for headings, Inter for body, JetBrains Mono for code
- **Clean tables** in the style of official documents
- **Document headers** with metadata table (Project, Author, Version, Date, Status)
- **Simple borders** — 1px solid, no exaggerated border-radius
- **Generous whitespace** — breathing room between sections
- **Discreet footer** with version + date

## Inspiration
- **Anthropic dark mode:** Warm accent (#d4a574), muted surfaces, editorial clean
- **Anthropic light mode:** Generous whitespace, serious typography, editorial
- **OpenAI Research:** Blog post structure, blockquotes, clean tables
- **System Cards (Mythos/Fable 5):** Complete technical document, benchmark tables
- **Pentest Template (Platform Builders):** Official header, professional layout

## Tone
- Technical but accessible
- No flattery, no coaching
- Data speaks for itself — minimalism in narrative
- Citations when relevant, without exaggeration

**Apply to:** every PDF, blog post, dashboard, or artifact produced for external distribution.