Box, Inline, Paragraph
Primitivas estruturais leves que substituem `<div>`, `<span>` e `<p>` no código do design system. Em runtime são idênticas às tags nativas — sem estilos default — existem como convenção: uma forma única e greppable de compor layout no pacote e seus consumidores.
Box
Container block-level — renderiza um `<div>`. Use para layout: wrappers flex / grid, cards com padding, seções, onde você usaria `<div className=…>`.
Inline
Container inline — renderiza um `<span>`. Use para conteúdo inline: pills de status, fragmentos de badge, wrappers de ícone junto a texto, spans decorativos dentro de uma frase.
Status atual: Disponível
Paragraph
Renderiza um `<p>`. Use para body copy, descrições, helper text de inputs, legendas.
Apartamento 302
Cobertura duplex com 3 suítes, varanda gourmet e duas vagas.
Exemplo de composição
Um card típico do Morada usa as três juntas.
Apartamento 302
Endereço: Rua Augusta, 1200 — São Paulo, SP
Cobertura duplex com 3 suítes, varanda gourmet e duas vagas.
Quando manter HTML nativo
Essas primitivas não substituem HTML semântico. Mantenha `<h1>`–`<h6>` (use `Heading` para tipografia), `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`, `<ul>` / `<li>`, `<table>`, `<form>`, `<button>` — carregam semântica de outline e landmark que envelopar em `Box` apagaria.