Tipografia

O sistema tipográfico HalfByte usa três famílias com papéis bem definidos. As fontes são carregadas via Google Fonts e já estão incluídas no setup da lib.

Famílias

Space Grotesk

Displayfont-display

Headings, títulos de UI, logotipos. Pesos 400–800. Letter-spacing negativo em tamanhos grandes.

Plus Jakarta Sans

Bodyfont-body

Parágrafos, labels, interfaces. Fonte padrão em toda a lib. Pesos 400–800.

JetBrains Mono

Monofont-mono

Código, valores técnicos, Kbd. Carregada opcionalmente.

Adicionar ao projeto

<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
  rel="stylesheet"
/>

---

Escala de tamanhos

5xl
88pxHalfByte

4xl
64pxHalfByte

3xl
48pxHalfByte

2xl
36pxHalfByte

xl
28pxHalfByte Design System

lg
22pxUma biblioteca de componentes Vue 3

md
18pxUma biblioteca de componentes Vue 3 com Panda CSS e Ark UI.

base
16pxUma biblioteca de componentes Vue 3 com Panda CSS e Ark UI. Acessível por padrão.

sm
14pxUma biblioteca de componentes Vue 3 com Panda CSS e Ark UI. Acessível por padrão.

xs
12pxUma biblioteca de componentes Vue 3 com Panda CSS e Ark UI. Acessível por padrão.

---

Pesos

Regular
400O design system da HalfByte

Medium
500O design system da HalfByte

Semibold
600O design system da HalfByte

Bold
700O design system da HalfByte

Xbold
800O design system da HalfByte

---

Altura de linha

tight
1.05

Design systems
criam consistência
em produtos digitais.

snug
1.2

Design systems
criam consistência
em produtos digitais.

normal
1.45

Design systems criam consistência em produtos digitais. Eles definem padrões visuais e de interação reutilizáveis.

relaxed
1.65

Design systems criam consistência em produtos digitais. Eles definem padrões visuais e de interação reutilizáveis.

---

Letter spacing

tight
-0.02emDisplay e hero sections

normal
0Corpo do texto e UI padrão

wide
0.06emSubtítulos e labels de seção

caps
0.12emEyebrows e categorias

---

Componente Typography

O componente <Typography> aplica os estilos tipográficos definidos no design system de forma consistente.

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="lead">Introdução em destaque</Typography>
<Typography variant="p">Parágrafo de corpo</Typography>
<Typography variant="large">Texto grande</Typography>
<Typography variant="small">Texto pequeno</Typography>
<Typography variant="muted">Texto atenuado</Typography>
<Typography variant="code">código inline</Typography>
<Typography variant="blockquote">Citação</Typography>

Props

Prop	Tipo	Padrão
variant	"h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted" | "code" | "blockquote"	"p"
as	string — sobrescreve a tag HTML	—