---
name: Opus
description: Autoridade editorial e clareza operacional para advogados da saúde.
colors:
  petroleo: "#123F4A"
  abissal: "#0B2931"
  marfim: "#F4F0E8"
  salvia: "#A8B8AC"
  latao: "#B59B6C"
  white: "#fff"
  ink: "#17343C"
  muted: "#54666A"
  line: "#CFD8D5"
  control: "#71868A"
  success: "#235A49"
  success-bg: "#E8F1EB"
  warning: "#805616"
  warning-bg: "#FBF0D9"
  error: "#983C36"
  error-bg: "#F9E9E5"
  info: "#235D79"
  info-bg: "#E8F0F4"
  focus: "#006DAB"
  petrol-interaction: "#214D57"
  disabled: "#E5EAE5"
  navigation-text: "#DDE6E1"
typography:
  display:
    fontFamily: "Newsreader, Georgia, serif"
    fontSize: "44px"
    fontWeight: 450
    lineHeight: 1.1
    letterSpacing: "-.025em"
  headline:
    fontFamily: "Newsreader, Georgia, serif"
    fontSize: "40px"
    fontWeight: 450
    lineHeight: 1.1
    letterSpacing: "-.025em"
  section:
    fontFamily: "Newsreader, Georgia, serif"
    fontSize: "32px"
    fontWeight: 450
    lineHeight: 1.15
    letterSpacing: "-.025em"
  title:
    fontFamily: "Manrope, 'Segoe UI', sans-serif"
    fontSize: "16px"
    fontWeight: 650
    lineHeight: 1.4
  body:
    fontFamily: "Manrope, 'Segoe UI', sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Manrope, 'Segoe UI', sans-serif"
    fontSize: "14px"
    fontWeight: 650
    lineHeight: "20px"
  metadata:
    fontFamily: "Manrope, 'Segoe UI', sans-serif"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "18px"
rounded:
  control: "6px"
  panel: "10px"
  tag: "4px"
  switch: "12px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-6: "24px"
  space-8: "32px"
  space-12: "48px"
  space-16: "64px"
components:
  button-primary:
    backgroundColor: "{colors.petroleo}"
    textColor: "{colors.white}"
    typography: "{typography.label}"
    rounded: "{rounded.control}"
    padding: "11px 16px"
  button-primary-hover:
    backgroundColor: "{colors.abissal}"
  button-primary-active:
    backgroundColor: "{colors.petrol-interaction}"
  button-secondary:
    backgroundColor: "{colors.white}"
    textColor: "{colors.petroleo}"
    typography: "{typography.label}"
    rounded: "{rounded.control}"
    padding: "11px 16px"
  button-quiet:
    backgroundColor: "transparent"
    textColor: "{colors.petroleo}"
    typography: "{typography.label}"
    rounded: "{rounded.control}"
    padding: "11px 16px"
  button-danger:
    backgroundColor: "{colors.white}"
    textColor: "{colors.error}"
    typography: "{typography.label}"
    rounded: "{rounded.control}"
    padding: "11px 16px"
  input:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.control}"
    padding: "11px 12px"
    width: "100%"
  navigation-item:
    textColor: "{colors.navigation-text}"
    rounded: "{rounded.control}"
    padding: "13px 12px"
  tag-info:
    backgroundColor: "{colors.info-bg}"
    textColor: "{colors.info}"
    rounded: "{rounded.tag}"
    padding: "5px 8px"
  case-panel:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.panel}"
  alert-error:
    backgroundColor: "{colors.error-bg}"
    textColor: "{colors.error}"
    rounded: "{rounded.panel}"
    padding: "20px"
---

# Design System: Opus

## Overview

**Creative North Star: "Composição e continuidade"**

A Ligadura Opus conecta uma expressão editorial de autoridade e sofisticação a uma interface de trabalho clara. A continuidade aparece na marca, na organização da informação e na passagem entre contexto e próxima ação. O nome desta direção sintetiza os fundamentos já aprovados; não constitui uma nova identidade.

O brandbook v1 e, posteriormente, o catálogo ampliado de componentes globais foram aprovados pelo fundador em 13/10/2026. Este registro extrai os valores efetivamente usados em `ui/opus.css` e `ui/controls.css`. O repertório demonstrado é a base visual aprovada para as próximas telas, conforme [registro de aprovação](ui/APROVACAO.md). Os exemplos usam dados sintéticos e interações locais; os fluxos reais mantêm sua validação própria.

**Key Characteristics:**

- Autoridade editorial com Newsreader e clareza de interface com Manrope.
- Petróleo para orientação e ação; superfícies claras para leitura.
- Hierarquia por alinhamento, espaço e divisórias discretas.
- Estado expresso por texto e contexto, além da cor.

Fontes de autoridade: [produto](PRODUCT.md), [brandbook aprovado](.planning/brand/brandbook-v1/BRANDBOOK.md), [contrato da superfície](.impeccable/surfaces/fundamentos.md) e [implementação demonstrativa](mockups/fundamentos/index.html). Tokens do frontmatter são normativos para esta aplicação. O catálogo não substitui o pacote vetorial nem as licenças de fontes.

## Colors

A paleta combina petróleo profundo, claros quentes e acentos contidos. Os nomes e valores normativos estão no frontmatter.

### Primary

- **Petróleo Opus:** marca, navegação e comando principal. Abissal aprofunda fundos e hover; petrol-interaction identifica o estado pressionado observado.

### Secondary

- **Sálvia:** apoio e superfícies secundárias.
- **Latão fosco:** detalhe decorativo, como a pequena regra na navegação. Não aplicar a texto normal sobre marfim ou petróleo.

### Neutral

- **Marfim e branco:** diferenciação editorial e leitura densa.
- **Texto e texto secundário:** corpo e metadados, respectivamente.
- **Divisória e controle:** line organiza superfícies; control identifica campos e botões secundários.
- **Navigation-text e disabled:** texto da navegação escura e fundo de ações indisponíveis.

### Semantic states

Sucesso, aviso, erro e informação usam pares próprios de texto/fundo. Foco usa o token focus em superfícies claras e marfim na navegação escura. O sidecar contém rampas sintéticas apenas para pré-visualização; elas não ampliam a paleta aprovada.

**The Estado Legível Rule.** Todo estado deve ter texto ou ícone com significado explícito além da cor.

## Typography

Newsreader, com Georgia e serif como fallback, expressa títulos. Manrope, com Segoe UI e sans-serif, organiza textos e controles. As fontes variáveis são locais, com `font-display: swap`; preservar as licenças SIL OFL fornecidas no pacote de marca.

A hierarquia extraída diferencia display do espécime, título de tela, título de seção, título funcional, corpo, rótulo e metadado. O espécime display deste catálogo é menor que o intervalo editorial de capas do brandbook; não redefine esse intervalo. Os títulos usam ajuste óptico automático. A amostra de escala apresenta também subtítulo de 28/32; o título de seção real usa o papel section do frontmatter.

Texto de apoio das seções tem limite observado de 72ch. Identificadores em tabelas usam algarismos tabulares. Legendas do catálogo variam entre 12 e 13 px e são auxiliares, sem substituir o corpo de leitura.

**The Marca em Contornos Rule.** Aplicar o SVG fornecido; nunca recriar a Ligadura Opus digitando seu nome em Newsreader.

## Layout

Usar alinhamento e proximidade para agrupar informação, com respiro entre decisões. A escala de espaço extraída está no frontmatter; o catálogo emprega divisórias finas entre grupos. A composição de índice lateral e documento contínuo pertence a esta superfície de fundamentos, não é obrigação para toda tela operacional.

No catálogo desktop, a navegação fixa ocupa 232 px; o conteúdo tem margem correspondente, padding inicial de 48 px por 56 px e largura máxima de 1540 px. Seções começam com 48 px de respiro. O formulário divide espaço em 1,5:1; o corpo do caso, em 1,4:1.

Breakpoints observados: até 1150 px, reduzir espaços e empilhar o cabeçalho; até 850 px, substituir a lateral pelo cabeçalho sticky com menu recolhível e empilhar o caso; até 560 px, empilhar formulário e espécimes, reduzir títulos e usar margens de 20 px. A partir de 1772 px há ajuste de centralização do conteúdo. Estes valores documentam o mock, sem impor uma grade definitiva ao aplicativo.

Tabelas conservam largura mínima de 660 px dentro de região com rolagem horizontal. Controles principais têm altura mínima de 44 px; tabs, 48 px. A variante compacta da tabela reduz padding vertical de 20 para 12 px. A marca principal respeita o mínimo de 120 px do brandbook; em espaço menor, usar a ligatura reduzida ou o micro ícone no contexto apropriado.

## Elevation & Depth

Superfícies são predominantemente planas. Marfim, branco, divisórias e cabeçalhos estabelecem profundidade. Painéis e alertas não recebem sombra. A única sombra observada é a do feedback flutuante: `0 8px 24px rgb(0 0 0 / 12%)`. Não inferir uma escala de elevação a partir desse caso isolado.

**The Profundidade Funcional Rule.** Reservar a sombra observada ao feedback que sobrepõe o conteúdo; organizar os painéis por tom, borda e espaço.

## Shapes

Controles e painéis usam os raios control e panel; tags e esqueletos usam tag. A borda do campo é mais marcada que a divisória de conteúdo. Ícones outline medem 20 px, com traço de 1,75 px; nas tags medem 16 px. Linhas do histórico usam pontos circulares discretos, sem transformar a interface em uma coleção de cápsulas.

Preservar proporção, ponte, espaçamento e área livre da Ligadura Opus. Aplicar palavra, ligatura op e micro o segundo a hierarquia do brandbook. Curvas gráficas podem derivar do gesto da ligatura, sem encobrir dados e decisões.

## Components

**Regra do fundador: nenhum componente visual pode herdar a aparência padrão da stack.** Toda tela reutiliza `ui/`, inclusive ícones, controles, camadas e estados. Um padrão ausente deve ser desenhado no global e exposto no catálogo antes de entrar na tela. Bibliotecas headless são permitidas como comportamento; presets visuais não são.

Inventário e contratos: [ui/CATALOGO.md](ui/CATALOGO.md). As novas amostras incluem seletor e calendário próprios, checkbox/radio/switch personalizados, menu, tooltip, acordeão, upload, avatar, breadcrumb, paginação, progresso, diálogo e gaveta. O mock demonstra sua apresentação e interações locais; componentes avançados pendentes estão explicitados no inventário.

Comandos do sistema operacional e adaptações de acessibilidade permanecem sob controle da plataforma. A personalização da aplicação preserva semântica, teclado e foco.

Os padrões abaixo foram implementados no mock de fundamentos e constituem a **base visual aprovada**. O sidecar fornece amostras visuais sem dependência do JavaScript do catálogo; comportamentos demonstrativos estão no mock. Componentes futuros ainda exigem definição no global.

### Buttons

Ação principal em petróleo, secundária com borda control, discreta sem borda visível e destrutiva com texto/borda de erro. Preservar o padding e a tipografia normativos. Hover da principal usa abissal; pressionado usa petrol-interaction. Secundária e discreta usam marfim no hover; destrutiva usa error-bg. Indisponibilidade usa fundo disabled e texto muted. Carregamento usa texto explícito, `disabled` e `aria-busy`.

Transições observadas: cor e fundo em 180 ms, curva `cubic-bezier(.16,1,.3,1)`. Foco tem contorno de 3 px afastado 4 px. A preferência por movimento reduzido desliga transições e rolagem suave. A espera de 900 ms no salvamento é simulação local, não token de movimento.

### Inputs / Fields

Rótulo permanente, borda control, fundo branco, texto ink e ajuda próxima. Campos inválidos recebem borda de erro, mensagem associada por `aria-describedby` e `aria-invalid`. O exemplo valida título obrigatório e move foco ao erro. Checkbox, radio e switch preservam semântica nativa com apresentação própria (appearance:none). O seletor usa combobox/listbox Opus, com opções estilizadas e teclado. Textarea mantém semântica nativa e aparência global. Campos desativados usam marfim e texto secundário.

### Navigation

Navegação escura com item corrente marfim/petróleo e hover petrol-interaction. Foco marfim sobre petróleo. Menu mobile expõe `aria-expanded` e `aria-controls`; links atualizam `aria-current`. Tabs têm sublinhado de seleção, foco móvel e navegação por setas, Home e End no mock.

### Chips / Tags

Tags são indicadores, não botões: texto de 12 px, peso 600, pares semânticos e ícones opcionais. Não adicionar hover de ação a um estado estático.

### Cards / Containers

Painel do caso reúne cabeçalho marfim, conteúdo claro e histórico, com borda line e raio panel. A próxima ação recebe hierarquia própria. Documentos exibem nome, metadado e ação descritiva. A expansão demonstrativa possui estado acessível e devolve foco ao comando quando fechada.

### Feedback and data

Alertas combinam ícone, mensagem e recuperação explícita. Tabela usa cabeçalho marfim, divisórias e rótulos semânticos. Vazio explica a situação e oferece retorno; carregamento usa texto e esqueletos estáticos, sem animação contínua. Toast informa resultado por cinco segundos, com alternativa textual quando a cópia para clipboard falha. Todas essas ações são locais.

### Global controls and layers

O switch usa trilho de 38×22 px e raio switch; checkbox tem quadrado de20px com visto próprio; radio usa círculo e núcleo de10px. Campos mantêm alvos de44px por meio de seus rótulos. Seletor e calendário possuem painéis brancos com borda control e foco Opus, sem painel visual herdado do navegador.

Diálogo tem largura máxima de520px e superfície branca, padding32px (24px mobile), raio panel e backdrop abissal a56%. Gaveta usa largura de440px limitada à viewport, altura100dvh e cantos retos. Ambos preservam confinamento e retorno de foco por dialog sem aparência nativa. Menu usa lista de comandos com Tab, Escape e clique externo. A ajuda contextual pode ser dispensada com Escape.

Avatar usa sálvia e iniciais; acordeão usa divisória e chevron do registro global; progresso é uma barra petróleo em trilho line. Upload possui comando Opus e nome do arquivo anunciado; a janela de seleção pertence ao SO. O calendário demonstrativo não implementa intervalos, fuso ou regras de prazo jurídico.

## Do's and Don'ts

### Do:

- **Do** preservar os SVGs e as fontes locais do brandbook aprovado.
- **Do** usar superfícies claras para leitura e petróleo para orientação e ação.
- **Do** manter foco visível, rótulos permanentes e estados descritos em texto.
- **Do** reutilizar o repertório visual aprovado e submeter novos padrões à revisão antes de adoção.
- **Do** respeitar redução de movimento e permitir rolagem localizada em tabelas.

### Don't:

- **Don't** aplicar temas/componentes/ícones default de bibliotecas diretamente nas telas.
- **Don't** inventar uma variante local: completar e reutilizar primeiro o global.

- **Don't** redigitar, distorcer, sombrear ou anexar símbolos jurídicos à logo.
- **Don't** usar latão como texto normal sobre marfim ou petróleo.
- **Don't** usar divisória decorativa como única identificação de campo.
- **Don't** expor dados de pacientes em exemplos ou apresentar ações locais como operação real.
- **Don't** transformar rampas de pré-visualização em novos tokens aprovados.