@softize/opus 12.2.0 → 12.3.0

package/CHANGELOG.md

@@ -7,6 +7,24 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 `opus copy --check` · `base copy check` · `manifest:check`) — eles apontam o que a
 mudança cobra do seu código.
 
+## 12.3.0 — 2026-08-23
+
+O Opus deixa de definir `font-size` em `html`. A fonte raiz volta a pertencer ao navegador e à
+aplicação, enquanto texto, espaçamento, arredondamento, foco, elevação e limites dimensionais da
+UI usam uma escala relativa em `rem`. Assim, preferências de acessibilidade e identidades próprias
+conseguem ajustar a densidade do documento sem disputar com o tema da biblioteca.
+
+A mudança é visual e não exige migração de API. Sem uma regra do consumidor, `1rem` segue a
+configuração do navegador. Aplicações que desejarem conservar a proporção anterior podem definir
+`html { font-size: 93.75%; }` no próprio CSS. `px` permanece apenas em hairlines e compensações
+geométricas inventariadas por teste.
+
+## 12.2.1 — 2026-08-23
+
+O cabeçalho de `Page` passa a alinhar `actions` à base do bloco formado por título e descrição.
+Assim, os botões permanecem junto ao fim do contexto quando a página apresenta uma linha
+explicativa. Múltiplas ações conservam o espaçamento entre si. A API pública não muda.
+
 ## 12.2.0 — 2026-08-23
 
 A escala de arredondamento ganha uma base mais presente sem transformar todo componente em uma

package/docs/elevation-scale.md

@@ -20,6 +20,8 @@ uma superfície que precisava apenas de mais presença acabava recebendo um nome
 - O Opus declara a composição diretamente em `--shadow-*`, mantendo a progressão do
   Tailwind com camadas mais claras, difusas e spread negativo. Sem variável intermediária,
   modifiers nativos como `shadow-xl/30` continuam funcionando.
+- Deslocamento, desfoque e spread usam `rem`, portanto a elevação acompanha a escala raiz
+  escolhida pelo documento.
 - Componentes escolhem a intensidade pelo contexto: `sm` para repouso, `md` para
   flutuantes e `lg` para modais ou destaques fortes. Essa associação é default, não uma
   restrição semântica.

package/docs/radius-scale.md

@@ -18,6 +18,7 @@ voltaria a acoplar forma e tipo de componente, problema removido na versão 10.0
 
 - `--radius` passa a `0.75rem`. Aplicações podem sobrescrever essa base para ajustar a identidade
   inteira sem forkar componentes.
+- Os offsets da escala também usam `rem`, acompanhando a fonte raiz escolhida pelo documento.
 - `rounded-xs` até `rounded-2xl` formam uma progressão derivada da mesma base. `rounded-full`
   continua reservado a círculos e variantes explicitamente pill.
 - Componentes escolhem o degrau pela escala visual. Em geral, detalhes e itens internos usam

package/docs/relative-unit-scale.md

@@ -0,0 +1,55 @@
+# Escala relativa e fonte raiz
+
+> **Status: decidido (ago/2026).** O documento define a fonte raiz; o Opus organiza sua
+> escala visual em `rem` e não altera essa escolha.
+
+## Contexto
+
+O tema do Opus fixava `font-size: 15px` em `html`. Isso tornava a densidade uniforme, mas
+também fazia uma biblioteca decidir a tipografia raiz de toda a aplicação. A regra alcançava
+conteúdo que não pertencia ao Opus, reduzia a preferência do navegador e obrigava o consumidor
+a desfazer o tema antes de escolher sua própria escala.
+
+Parte das medidas visuais ainda usava `px`. Radius, elevação, foco, limites de conteúdo e texto
+compacto deixavam de acompanhar a raiz mesmo quando a aplicação assumia essa responsabilidade.
+
+## Decisão
+
+- O tema do Opus não declara `font-size` em `html` nem em `:root`. O navegador e a aplicação
+  definem a fonte raiz.
+- Medidas que pertencem à identidade e à escala da interface usam `rem`, diretamente ou pela
+  escala do Tailwind, que também é relativa à raiz.
+- Aplicações ajustam a densidade no próprio CSS. Para conservar a proporção que antes resultava
+  de uma raiz de 15 sobre a base usual de 16, podem usar `html { font-size: 93.75%; }`.
+- `px` fica restrito a encaixes técnicos que não devem crescer com a tipografia: espessura de
+  hairline, compensação exata de uma borda, ajuste óptico preso a esse traço e o raio efetivamente
+  infinito do scrollbar nativo. Cada ocorrência integra a allowlist do teste de contrato.
+- Valores históricos no changelog podem continuar em `px`, pois descrevem versões anteriores;
+  eles não definem o contrato vigente.
+
+## Consequências
+
+- Sem uma regra da aplicação, `1rem` segue a configuração do navegador. A UI pode ficar maior
+  para consumidores que recebiam os antigos 15px; essa mudança é visual e intencional.
+- Preferências de acessibilidade e identidades próprias deixam de disputar com um override da
+  biblioteca.
+- Alterar a raiz na aplicação escala texto, espaçamento, radius, foco, elevação e limites
+  dimensionais do Opus como um conjunto.
+- Hairlines e compensações de borda permanecem nítidas e geometricamente estáveis.
+
+## Alternativas descartadas
+
+- **Manter 15px como default:** conserva a densidade anterior, mas mantém a biblioteca como dona
+  do documento inteiro.
+- **Declarar `font-size: 100%`:** costuma reproduzir o default, mas ainda é uma opinião redundante
+  e pode sobrescrever uma decisão anterior da aplicação.
+- **Converter também hairlines para `rem`:** torna a regra absoluta, mas permite que bordas e
+  compensações deixem de coincidir quando a raiz muda.
+
+## Verificação
+
+- Um teste de contrato confirma que o tema não define a fonte raiz.
+- O mesmo teste inventaria `px` no código vivo da UI e reprova qualquer ocorrência fora da
+  allowlist técnica.
+- Testes de radius e elevação validam as fórmulas em `rem`.
+- A documentação de tokens e a skill `build-opus-ui` orientam a responsabilidade do consumidor.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/registry/skills/build-opus-ui/SKILL.md

@@ -19,18 +19,22 @@ existentes, mantendo navegação observável e componentes reutilizáveis sem la
    o produto precisa de deep link, back/forward ou refresh.
 4. Manter margem e posicionamento no consumidor; componente reutilizável controla apenas
    seu interior.
-5. Evoluir um pattern compartilhado apenas quando a recorrência e o contrato estiverem claros.
-6. Tratar tokens de superfície como pares indivisíveis no mesmo fragmento de classes:
+5. Não definir a fonte raiz em uma biblioteca ou componente. O navegador e a aplicação são
+   responsáveis por `font-size` em `html`; medidas escaláveis da UI usam `rem` ou a escala
+   relativa do Tailwind. Reservar `px` a hairlines e compensações presas à geometria da borda,
+   com justificativa e cobertura explícitas.
+6. Evoluir um pattern compartilhado apenas quando a recorrência e o contrato estiverem claros.
+7. Tratar tokens de superfície como pares indivisíveis no mesmo fragmento de classes:
    `bg-card text-card-foreground` e `bg-popover text-popover-foreground`. Não depender da
    igualdade atual com `--foreground`, porque o app pode sobrescrever cada par.
-7. Usar diretamente a escala `rounded-*`; não criar radius por nome de componente quando
+8. Usar diretamente a escala `rounded-*`; não criar radius por nome de componente quando
    `rounded-xs` a `rounded-2xl` já expressam a forma. Escolher o degrau pela escala visual:
    detalhes e itens internos tendem a `xs`/`sm`, controles e flutuantes compactos a `md`,
    molduras estruturais a `lg`, e superfícies principais ou modais a `xl`. Essa associação
    orienta o default, não cria uma restrição semântica. Em aninhamento, evitar moldura dupla e
    reduzir o raio interno; em grupos conectados, remover os raios das arestas internas. Tamanho
    e forma permanecem eixos separados; usar `shape="pill"` quando a pílula for intencional.
-8. Testar estados de loading, vazio, erro, sucesso, permissão e interação relevante.
+9. Testar estados de loading, vazio, erro, sucesso, permissão e interação relevante.
 
 ## Verificação
 

package/registry/skills/build-opus-ui/references/ui-patterns.md

@@ -5,6 +5,8 @@
   operação, não a uma tela isolada.
 - URL representa estado que precisa sobreviver a refresh, deep link ou histórico.
 - Componentes compartilhados não impõem margem externa; páginas e shells compõem layout.
+- A fonte raiz pertence ao navegador e à aplicação. Medidas escaláveis usam `rem` ou a escala
+  relativa do Tailwind; `px` fica restrito a hairlines e compensações ligadas a essas bordas.
 - Superfície semântica e foreground são um par local (`bg-card text-card-foreground`,
   `bg-popover text-popover-foreground`); herança do foreground global não substitui o par.
 - Forma usa a escala `rounded-*`; nome de componente não cria uma segunda escala de radius.

package/src/ui/components/patterns/page.tsx

@@ -3,7 +3,8 @@
  *
  * Padroniza o que toda página repete: <main> + container de largura CHEIA (o caso
  * comum do back-office; quem quiser estreito passa `className="max-w-5xl"`) + header
- * (título, descrição e a ação à direita — em geral o botão de criar). O conteúdo é
+ * (título, descrição e ações à direita, alinhadas ao fim desse bloco — em geral o botão
+ * de criar). O conteúdo é
  * children, sem nada imposto. Presentacional (sem contrato) de propósito: uma página
  * agrega N fontes; o que é action-driven mora dentro (ActionList, listas query-backed).
  */
@@ -17,7 +18,7 @@ export interface PageProps {
   count?: number
   /** Linha de contexto sob o título. */
   description?: ReactNode
-  /** Ação à direita do header — em geral o botão de criar. */
+  /** Ações à direita do header, alinhadas ao fim do bloco de contexto. */
   actions?: ReactNode
   /** Classes do container. Default: largura cheia; `max-w-5xl` estreita e centra. */
   className?: string
@@ -28,16 +29,22 @@ export function Page({ title, count, description, actions, className, children }
   return (
     <main data-slot="page" className="min-w-0 flex-1">
       <div className={cn('mx-auto px-8 py-8', className)}>
-        {/* As ações alinham com o TÍTULO; a descrição vem abaixo, em linha própria. */}
+        {/* As ações acompanham o fim do contexto, mesmo quando há uma descrição sob o título. */}
         <div data-slot="page-header" className="mb-6">
-          <div className={cn(actions !== undefined && 'flex items-center justify-between gap-4')}>
-            <h1 className="flex items-baseline gap-2 text-2xl font-semibold tracking-tight">
-              {title}
-              {count !== undefined && <span className="font-mono text-base text-muted-foreground/60">{count}</span>}
-            </h1>
-            {actions}
+          <div className={cn(actions !== undefined && 'flex items-end justify-between gap-4')}>
+            <div data-slot="page-heading" className="min-w-0">
+              <h1 className="flex items-baseline gap-2 text-2xl font-semibold tracking-tight">
+                {title}
+                {count !== undefined && <span className="font-mono text-base text-muted-foreground/60">{count}</span>}
+              </h1>
+              {description !== undefined && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+            </div>
+            {actions !== undefined && (
+              <div data-slot="page-actions" className="flex shrink-0 items-center gap-4">
+                {actions}
+              </div>
+            )}
           </div>
-          {description !== undefined && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
         </div>
         {children}
       </div>

package/src/ui/components/patterns/sidebar.tsx

@@ -104,7 +104,7 @@ export function SidebarNav({ groups, activeId, onSelect, navLabel = 'Navegação
         {!collapsed && titled(group.label) && <div className="px-2.5 pb-1 text-xs font-medium text-muted-foreground/70">{group.label}</div>}
         {group.items?.map((item) => renderItem(item))}
         {group.subgroups?.map((subgroup, si) => !subFilled(subgroup) ? null : <div key={si} className="space-y-0.5">
-          {!collapsed && titled(subgroup.label) && <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[11px] font-medium text-muted-foreground/50">{subgroup.label}</div>}
+          {!collapsed && titled(subgroup.label) && <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[0.6875rem] font-medium text-muted-foreground/50">{subgroup.label}</div>}
           {subgroup.items.map((item) => renderItem(item, titled(subgroup.label)))}
         </div>)}
       </div>)}

package/src/ui/components/primitives/accordion.tsx

@@ -33,7 +33,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className
         )}
         {...props}

package/src/ui/components/primitives/button.tsx

@@ -31,11 +31,11 @@ export const buttonVariants = cva(
         sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
         lg: 'h-10 px-6 has-[>svg]:px-4',
         icon: 'size-9',
-        // Ícone na escala `sm` (32px) — o par do `sm` pra fileiras densas (toolbar, header)
-        // onde os irmãos são sm. Sem ele, um botão de ícone ao lado de controles sm ficava
-        // 4px mais alto ou virava override na mão.
+        // Ícone na escala `sm` (2rem) — o par do `sm` para fileiras densas, onde os irmãos
+        // também usam `sm`. Sem ele, um botão de ícone ao lado desses controles ficava
+        // 0.25rem mais alto ou virava override local.
         'icon-sm': 'size-8',
-        // Ícone MENOR (24px) — a ação DENTRO de um campo (o clear/mostrar-senha no
+        // Ícone menor (1.5rem) — a ação dentro de um campo (clear/mostrar senha no
         // `trailing` do Input/Select), que precisa caber folgado num h-9. É o mesmo tamanho
         // do `icon-xs` do InputGroupButton; sem ele, o exemplo virava `className="size-6"`.
         'icon-xs': 'size-6',

package/src/ui/components/primitives/calendar.tsx

@@ -72,7 +72,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative rounded-md border border-input has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          "relative rounded-md border border-input has-focus:border-ring has-focus:ring-[0.1875rem] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -206,7 +206,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[0.1875rem] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/ui/components/primitives/chat.tsx

@@ -136,7 +136,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
       className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
     >
       {items.length === 0 && !indicatorVisible && greeting !== undefined && (
-        <div data-slot="chat-empty" className="m-auto max-w-[280px] text-center text-muted-foreground">
+        <div data-slot="chat-empty" className="m-auto max-w-[17.5rem] text-center text-muted-foreground">
           <div className="mb-2 text-4xl">✦</div>
           <p className="text-sm leading-relaxed">{greeting}</p>
         </div>

package/src/ui/components/primitives/checkbox.tsx

@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 rounded-[4px] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        "peer size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
         className
       )}
       {...props}

package/src/ui/components/primitives/command.tsx

@@ -88,7 +88,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        "max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       )}
       {...props}

package/src/ui/components/primitives/dialog.tsx

@@ -81,7 +81,7 @@ export function DialogHeader({ className, ...props }: React.ComponentProps<'div'
       // Fixo (shrink-0), com divisor embaixo (border-b). p-5: padding igual nos quatro
       // lados, casando com o body. O :has tira o divisor quando o header é seguido
       // DIRETO pelo footer (confirm sem body) — senão o border-b dele encostaria no
-      // border-t do footer (2px); aí o divisor é só o do footer.
+      // A compensação coincide com a soma das hairlines; o divisor fica no footer.
       className={cn(
         'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left',
         '[&:has(+[data-slot=dialog-footer])]:border-b-0',

package/src/ui/components/primitives/input-group.tsx

@@ -24,7 +24,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[0.1875rem] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
@@ -37,7 +37,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-0.3125rem)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -84,10 +84,10 @@ const inputGroupButtonVariants = cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-0.3125rem)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
         sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
         "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+          "size-6 rounded-[calc(var(--radius)-0.3125rem)] p-0 has-[>svg]:p-0",
         "icon-sm": "size-8 p-0 has-[>svg]:p-0",
       },
     },

package/src/ui/components/primitives/input-otp.tsx

@@ -49,7 +49,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/ui/components/primitives/input.tsx

@@ -14,7 +14,7 @@ export interface InputProps extends React.ComponentProps<"input"> {
 
 // O <input> CRU (sem adorno): ELE é o campo — borda, foco, ref e className moram nele.
 const bareInput =
-  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
 
 function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Sem adorno: o <input> cru de sempre — retrocompatível (refs, forms, InputGroupInput).
@@ -24,7 +24,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Adornado: o MESMO modelo flex do InputGroup/Select. A borda e o anel moram no WRAPPER
   // (disparados pelo `:focus-visible` do input interno — foco de teclado); o <input> fica
   // SEM borda e CRESCE (flex-1), e os adornos são IRMÃOS ao lado. Sem conta de pl-9/pr-9: o
-  // `px-3` + `gap` posicionam sozinhos (o trailing fica a 12px da borda, como no Select). O
+  // `px-3` + `gap` posicionam sozinhos (o trailing fica a 0.75rem da borda, como no Select). O
   // `className` estiliza o CAMPO (largura, raio, fundo, fonte), como no Select — e a fonte/
   // cor cascateiam pro <input> (um `text-xs`/`font-mono` aqui alcança o texto digitado).
   return (
@@ -32,7 +32,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
       data-slot="input-wrapper"
       className={cn(
         "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-base transition-[color,box-shadow] outline-none md:text-sm dark:bg-input/30",
-        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/50",
+        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[0.1875rem] has-[input:focus-visible]:ring-ring/50",
         "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40",
         "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
         className,
@@ -59,8 +59,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
       {trailing !== undefined && (
         // Interativo (AÇÃO, não decoração): sem pointer-events-none. O tom muted (ação
         // secundária) mora no slot — o botão ghost herda, sem sprinklar no call site. Se o
-        // trailing é BOTÃO, puxa ~6px pra o inset direito casar com o vertical (botão
-        // quadrado no canto, não flutuando a 12px), como o InputGroup.
+        // trailing é botão: aproxima 0.375rem para casar o inset horizontal com o vertical.
         <span data-slot="input-trailing" className="flex shrink-0 items-center text-muted-foreground has-[button]:-mr-1.5">
           {trailing}
         </span>

package/src/ui/components/primitives/item.tsx

@@ -31,7 +31,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
   {
     variants: {
       variant: {

package/src/ui/components/primitives/radio-group.tsx

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/ui/components/primitives/scroll-area.tsx

@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/src/ui/components/primitives/select.tsx

@@ -154,7 +154,7 @@ function NativeSelect({
         onChange={(e) => onChange(e.target.value)}
         className={cn(
           "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 data-[shape=pill]:rounded-full dark:bg-input/30 dark:hover:bg-input/50",
-          'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+          'focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50',
           'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
           icon ? 'pl-9' : '',
           className,
@@ -468,7 +468,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   // Ação no fim do campo é SECUNDÁRIA: o tom muted mora no slot (o botão
                   // ghost herda), pra não sprinklar `text-muted-foreground` em cada call
                   // site. O hover acende via o próprio `hover:text-accent-foreground` do ghost.
-                  // Botão trailing na BORDA (buscável, sem chevron): puxa ~6px pra o inset
+                  // Botão trailing na borda: aproxima 0.375rem para equilibrar o inset.
                   // direito casar com o vertical (botão quadrado no canto), como o InputGroup.
                   // Com chevron, NÃO puxa — senão cola no chevron (o `gap-1.5` do control).
                   className={cn('flex shrink-0 items-center text-muted-foreground', canSearch && 'has-[button]:-mr-1.5')}

package/src/ui/components/primitives/switch.tsx

@@ -15,7 +15,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         className
       )}
       {...props}

package/src/ui/components/primitives/table.tsx

@@ -68,7 +68,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className
       )}
       {...props}
@@ -81,7 +81,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className
       )}
       {...props}

package/src/ui/components/primitives/tabs.tsx

@@ -5,7 +5,7 @@ import { Tabs as TabsPrimitive } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
-// não tinha, e uma fileira densa (o header do Maestro) ficava com o segmento 4px mais alto
+// não tinha, e uma fileira densa ficava com o segmento 0.25rem mais alto
 // que os irmãos. O tamanho flui pra TabsList via contexto (a altura é dela).
 type TabsSize = "default" | "sm"
 const TabsSizeContext = React.createContext<TabsSize>("default")
@@ -37,7 +37,7 @@ const tabsListVariants = cva(
   // A altura horizontal entra como classe simples no componente (abaixo), para que um
   // `className="h-full"` do consumidor consiga substituí-la via tailwind-merge. Seletores
   // condicionais por data-size têm especificidade maior e tornavam a altura inextensível.
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[0.1875rem] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
   {
     variants: {
       variant: {
@@ -78,7 +78,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",

package/src/ui/components/primitives/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/ui/components/primitives/toggle.tsx

@@ -5,7 +5,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

package/src/ui/components/primitives/tooltip.tsx

@@ -46,7 +46,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[0.125rem] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

package/src/ui/docs/DocBrowser.tsx

@@ -86,7 +86,7 @@ export function DocBrowser({
       items: g.pages.map((p) => ({
         id: p.slug,
         label: p.title,
-        badge: p.badge === undefined ? undefined : <span className="rounded border border-border/60 px-1 font-mono text-[10px] leading-tight text-muted-foreground/60">{p.badge}</span>,
+        badge: p.badge === undefined ? undefined : <span className="rounded border border-border/60 px-1 font-mono text-[0.625rem] leading-tight text-muted-foreground/60">{p.badge}</span>,
       })),
     })),
   }))

package/src/ui/docs/content/button.md

@@ -14,7 +14,7 @@ quando destrói de verdade.
 
 ## Tamanhos
 
-size icon exige aria-label (não tem texto pra ler). Os só-ícone vêm em três: `icon` (36px), `icon-sm` (32px, pra fileira densa como o header) e `icon-xs` (24px, pra ação DENTRO de um campo — o `trailing` do Input/Select).
+O tamanho icon exige `aria-label`, porque não há texto visível. Os botões só-ícone vêm em três tamanhos: `icon` (2.25rem), `icon-sm` (2rem, para uma fileira densa como o cabeçalho) e `icon-xs` (1.5rem, para uma ação dentro de um campo, como o `trailing` de Input ou Select).
 
 ```tsx preview
 <Button size="sm">Pequeno</Button>
@@ -54,7 +54,7 @@ buttonVariants serve pro caso sem filho único.
 | Prop | Tipo | Default | Descrição |
 |---|---|---|---|
 | `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'` | `'default'` | A intenção da ação — define cor e peso visual. |
-| `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (36/32/24px), pra botão só de ícone (com aria-label). |
+| `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (2.25/2/1.5rem) para botões só de ícone, com `aria-label`. |
 | `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<button>` — pra âncoras e afins. |
 | `busy` | `boolean` | `false` | Ação em andamento (depois do clique): mostra Spinner + desabilita. Não é "carregando" de conteúdo (que é Spinner/Skeleton num nível de página). |
 | `icon` | `React.ElementType` | | Ícone à esquerda (ex.: icon={Plus}). No busy é trocado pelo Spinner — não soma. |

package/src/ui/docs/content/customization.md

@@ -28,6 +28,11 @@ divergência declarada), pra valer pra casa toda.
 O Opus deriva de `rounded-xs` a `rounded-2xl` dessa base. Assim, a marca muda a presença dos
 cantos sem substituir as utilities escolhidas pelos componentes nem criar tokens por papel.
 
+O tema não define `font-size` em `html`: a fonte raiz pertence ao navegador e à aplicação.
+Quando o produto precisa de outra densidade, declare essa escolha no CSS do app. Por exemplo,
+`html { font-size: 93.75%; }` conserva a proporção que uma raiz de 15 teria sobre a base usual
+de 16, sem transformar esse valor em uma regra da biblioteca.
+
 ## 2 · className em tudo
 
 > Todo componente termina em `cn(base, className)` com tailwind-merge: o utilitário do consumidor

package/src/ui/docs/content/page.md

@@ -1,6 +1,10 @@
 ## Esqueleto de página
 
-O que toda página do back-office repete, num pattern só: `<main>` + container de largura cheia (o caso comum; `className="max-w-5xl"` estreita e centra) + header com título, descrição e a ação à direita. O conteúdo é children, sem nada imposto. Presentacional de propósito — uma página agrega N fontes; o que é action-driven (listas, forms) mora dentro.
+Use `Page` para manter título, contexto, ações e conteúdo no mesmo ritmo visual nas telas do
+back-office. As ações ficam à direita e acompanham a base do conjunto formado pelo título e pela
+descrição. O componente ocupa a largura disponível; passe `className="max-w-5xl"` quando a tela
+pedir conteúdo mais estreito e centralizado. A área abaixo do cabeçalho permanece livre para
+tabelas, cards ou outras composições.
 
 ```tsx preview col
 render(
@@ -8,6 +12,7 @@ render(
     <Page
       title="Workspaces"
       count={3}
+      description="Ambientes compartilhados pela equipe."
       actions={
         <Button>
           <Plus /> Novo workspace
@@ -29,6 +34,6 @@ render(
 | `title` | `string` | | O h1 da página. |
 | `count` | `number` | | Total de itens ao lado do título (mono, esmaecido). |
 | `description` | `ReactNode` | | Linha de contexto sob o título (ex.: "N no total · X ativos"). |
-| `actions` | `ReactNode` | | Ação à direita do header — em geral o botão de criar. |
+| `actions` | `ReactNode` | | Ações à direita do cabeçalho, alinhadas à base do título e da descrição. |
 | `className` | `string` | largura cheia | Classes do container (`max-w-5xl` estreita e centra). |
 | `children` | `ReactNode` | | O conteúdo — espaçamento e diagramação são seus. |

package/src/ui/docs/content/tabs.md

@@ -69,7 +69,7 @@ orientation=vertical no Tabs: a lista vira coluna e o traço da variante line mi
 
 ## Densidade (size)
 
-`size="sm"` no `Tabs` baixa a lista de h-9 (36px) pra h-8 (32px) — o par do `sm` que Button e Select já têm, pra uma fileira densa (toolbar, header) onde o segmento não pode ficar mais alto que os irmãos.
+`size="sm"` no `Tabs` reduz a lista de `h-9` (2.25rem) para `h-8` (2rem). É o par do `sm` de Button e Select para uma fileira densa, como uma toolbar ou um cabeçalho, em que o segmento não deve ficar mais alto que os elementos vizinhos.
 
 ```tsx preview col
 <Tabs defaultValue="preview" size="sm">

package/src/ui/docs/content/tokens.md

@@ -101,11 +101,11 @@ render(
 )
 ```
 
-## Densidade
+## Escala relativa
 
-> A base é 15px: o `html` da casa fixa o rem, e TODA a escala (texto, spacing, radius) deriva
-> dele — a UI densifica ~6% vs o default do browser (16px). Nada de font-size solto em px nos
-> componentes; quem quiser outra densidade sobrescreve o `html` no app.
+> O Opus não define a fonte raiz. Cada `rem` acompanha o documento, portanto o navegador e a
+> aplicação continuam responsáveis pela densidade. Uma aplicação pode ajustar `font-size` em
+> `html`; texto, espaçamento, radius, foco e elevação acompanham a mesma decisão.
 
 ## Radius
 
@@ -118,12 +118,12 @@ render(
 render(
   <div className="flex flex-wrap gap-4">
     {[
-      ['rounded-xs', 'radius − 6px'],
-      ['rounded-sm', 'radius − 4px'],
-      ['rounded-md', 'radius − 2px'],
+      ['rounded-xs', 'radius − 0.375rem'],
+      ['rounded-sm', 'radius − 0.25rem'],
+      ['rounded-md', 'radius − 0.125rem'],
       ['rounded-lg', 'radius (0.75rem)'],
-      ['rounded-xl', 'radius + 4px'],
-      ['rounded-2xl', 'radius + 8px'],
+      ['rounded-xl', 'radius + 0.25rem'],
+      ['rounded-2xl', 'radius + 0.5rem'],
     ].map(([cls, calc]) => (
       <div key={cls} className="flex items-center gap-3">
         <div className={'h-12 w-12 border-2 border-foreground/30 bg-muted ' + cls} />

package/src/ui/docs/doc.tsx

@@ -30,7 +30,7 @@ function InlineMd({ text }: { text: string }): React.ReactElement {
       {parts.map((part, i) =>
         i % 2 === 1 ? (
           // eslint-disable-next-line react/no-array-index-key
-          <code key={i} className="rounded-[calc(var(--radius)-4px)] bg-muted px-1.5 py-0.5 font-mono text-[0.85em]">
+          <code key={i} className="rounded-[calc(var(--radius)-0.25rem)] bg-muted px-1.5 py-0.5 font-mono text-[0.85em]">
             {part}
           </code>
         ) : (

package/src/ui/meta.ts

@@ -33,7 +33,7 @@ export const componentMeta = {
     name: 'button',
     ancestry: 'shadcn',
     whenToUse:
-      'Ação clicável. `variant` define intenção (default/secondary/outline/ghost/destructive/link), `size` define altura (default/sm/lg · icon/icon-sm/icon-xs pros só-ícone, 36/32/24px) e `shape="pill"` troca somente a geometria, sem alterar cor ou hierarquia. `busy` mostra spinner e desabilita. `asChild` renderiza como outro elemento.',
+      'Ação clicável. `variant` define intenção (default/secondary/outline/ghost/destructive/link), `size` define altura (default/sm/lg · icon/icon-sm/icon-xs para os casos só-ícone, 2.25/2/1.5rem) e `shape="pill"` troca somente a geometria, sem alterar cor ou hierarquia. `busy` mostra spinner e desabilita. `asChild` renderiza como outro elemento.',
   },
   'card': {
     name: 'card',
@@ -116,7 +116,7 @@ export const componentMeta = {
     name: 'select',
     ancestry: 'opus',
     whenToUse:
-      'O seletor ÚNICO da casa: toda escolha em lista. Data-driven (`options` = { value, label, hint?, content?, group? }), nunca JSX de item. Modos por prop: `searchable`, `multiple`, `onSearch` e `native`. `variant="default"` é campo de formulário; `outline` abraça o conteúdo com borda; `ghost` abraça o conteúdo sem borda. `size` segue a régua inline (default 36px/sm 32px) e `shape="pill"` troca somente a geometria. Também aceita `icon`, `trailing`, `triggerLabel` e `clearable`.',
+      'Seletor para escolhas em lista. Recebe `options` no formato { value, label, hint?, content?, group? }, sem JSX por item. Os modos são definidos por `searchable`, `multiple`, `onSearch` e `native`. `variant="default"` funciona como campo de formulário; `outline` envolve o conteúdo com borda; `ghost` o envolve sem borda. `size` segue a régua inline (default 2.25rem/sm 2rem), e `shape="pill"` altera somente a geometria. Também aceita `icon`, `trailing`, `triggerLabel` e `clearable`.',
   },
   'separator': {
     name: 'separator',

package/src/ui/theme.css

@@ -49,7 +49,7 @@
   --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(0 0% 92.5%);
   --input: hsl(0 0% 92.5%);
-  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[3px] + /50,
+  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[0.1875rem] + /50,
      ~86% encosta na borda (89.8%) — um sussurro de foco. */
   --ring: hsl(0 0% 86%);
   --radius: 0.75rem;
@@ -134,23 +134,23 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  --radius-xs: calc(var(--radius) - 6px);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-xs: calc(var(--radius) - 0.375rem);
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius-md: calc(var(--radius) - 0.125rem);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-xl: calc(var(--radius) + 0.25rem);
+  --radius-2xl: calc(var(--radius) + 0.5rem);
 
   /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
      `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
-  --shadow-2xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
-  --shadow-xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
-  --shadow-sm: 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
-  --shadow: 0 2px 6px -2px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 6px 14px -6px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
-  --shadow-md: 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 10px 28px -8px light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
-  --shadow-lg: 0 6px 16px -6px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 18px 48px -12px light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
-  --shadow-xl: 0 8px 24px -10px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 24px 64px -18px light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
-  --shadow-2xl: 0 12px 32px -14px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 32px 88px -24px light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
+  --shadow-2xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
+  --shadow-xs: 0 0.0625rem 0.125rem -0.0625rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
+  --shadow-sm: 0 0.125rem 0.25rem -0.125rem light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
+  --shadow: 0 0.125rem 0.375rem -0.125rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.375rem 0.875rem -0.375rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
+  --shadow-md: 0 0.25rem 0.5rem -0.25rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 0.625rem 1.75rem -0.5rem light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
+  --shadow-lg: 0 0.375rem 1rem -0.375rem light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 1.125rem 3rem -0.75rem light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
+  --shadow-xl: 0 0.5rem 1.5rem -0.625rem light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 1.5rem 4rem -1.125rem light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
+  --shadow-2xl: 0 0.75rem 2rem -0.875rem light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 2rem 5.5rem -1.5rem light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
 }
 
 /* Base canônica do consumidor — vem DAQUI, não do entry de cada app. Tailwind v4
@@ -160,15 +160,6 @@
   * {
     border-color: var(--border);
   }
-  /* Base 15px: o rem da casa — TODA a escala rem (texto, spacing, radius) deriva daqui,
-     então a UI densifica ~6% vs o default do browser (16px). Histórico (conferido no git):
-     até a 2.31.4 o pacote NÃO fixava rem (valia o 16px do browser); a 2.31.5 introduziu
-     14px; a 2.35.0 assenta em 15px — valor INÉDITO, não é revert. O 15px veio da prática:
-     a Empresa X escolheu 15px por conta própria em DOIS apps, e a exceção reincidente
-     virou default. Quem quiser mais denso sobrescreve o `html` no próprio entry. */
-  html {
-    font-size: 15px;
-  }
   /* Canvas da casa: quase-branco vem do BODY — o shell é transparente e as
      superfícies (cards, miolo flush) pintam bg-background por cima. Tinte de 25%
      de muted: separa a superfície do canvas sem virar cinza; segue o tema. */
@@ -241,7 +232,7 @@
  * regra custom vaza pra dentro do not-prose (o CodeBlock ganhava uma SEGUNDA
  * borda no <pre>, colada na do contêiner — a "borda duplicada"). */
 .prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *)) {
-  border-radius: calc(var(--radius) - 4px);
+  border-radius: calc(var(--radius) - 0.25rem);
   background: var(--muted);
   padding: 0.125rem 0.375rem;
   font-weight: 400;