Foundation · Lumina

Typography

Três famílias com papéis claros. Comfortaa para títulos com personalidade, Inter para corpo, JetBrains Mono para código e metadados. Hierarquia pelo tamanho, não pelo peso.

Famílias

Cada uma tem um papel exclusivo. Não misture pesos entre famílias na mesma tela.

Display

Comfortaa

--font-title · font-title

Personalidade do Lumina. Curvas geométricas, espaço respirado. Usar em títulos, hero e display.

A marca em movimento

Medium500

Semibold600

Bold700

Corpo

Inter

--font-sans · font-sans

Workhorse de UI. Legibilidade absoluta, neutra. Usar em corpo, label, navegação.

Componentes que aprendem com o uso.

Regular400

Medium500

Semibold600

Mono

JetBrains Mono

--font-mono · font-mono

Código, metadados, kbd. Ligaduras desativadas pra clareza em tokens. Tracking generoso em uppercase.

const lumina = { mood: 'dark' }

Regular400

Medium500

Escala display

display-xxl

A marca em movimento

display-xl

Hero secundário

display-lg

Título de seção

Escala de corpo

text-lg

Tamanho generoso para parágrafos editoriais.

text-base

Tamanho padrão de corpo. Inter regular, leading 1.6.

text-sm

Texto secundário, descrições.

text-xs

Metadados, captions, footnotes.

Tracking

tracking-tight

Títulos respiram menos

tracking-normal

Corpo respeita o desenho da fonte

tracking-[0.16em] uppercase

eyebrow tem tracking largo

Uso na vida real

Card de componente

Component

Button

Magnetic, liquid e ripple. Cada um com intenção.

Token

Primary--color-primary

Code snippet

import { Button } from "@nimbuslab/lumina"

Atalho de teclado

Abrir busca⌘K