MarsalaDS

Theme

Tokens visuais do MarsalaDS: cores em OKLCH, tipografia, radius e bordas. Valores seguem app/globals.css e o preset registry base.

Preset

Instale o item base para aplicar estes tokens no projeto consumidor.

Estilo

base-nova

Base color

neutral

Radius base

0.625rem

Ícones

hugeicons

pnpm dlx shadcn@latest add http://localhost:3000/r/base.json

Superfície

Fundos e textos base da interface.

Use classes semânticas Tailwind (ex.: bg-primary, text-muted-foreground). Os valores abaixo são do tema claro; alterne escuro/claro no header para comparar.

Aa

Background

--background

oklch(1 0 0)

Aa

Foreground

--foreground

oklch(0.145 0 0)

Aa

Card

--card

oklch(1 0 0)

Aa

Popover

--popover

oklch(1 0 0)

Marca e ação

Primária Marsala (vinho) e hierarquia de ênfase.

Use classes semânticas Tailwind (ex.: bg-primary, text-muted-foreground). Os valores abaixo são do tema claro; alterne escuro/claro no header para comparar.

Aa

Primary

--primary

oklch(0.514 0.222 16.935)

Aa

Secondary

--secondary

oklch(0.967 0.001 286.375)

Aa

Accent

--accent

oklch(0.97 0 0)

Aa

Muted

--muted

oklch(0.97 0 0)

Aa

Destructive

--destructive

oklch(0.577 0.245 27.325)

Bordas e foco

Contornos, campos e anel de foco.

Use classes semânticas Tailwind (ex.: bg-primary, text-muted-foreground). Os valores abaixo são do tema claro; alterne escuro/claro no header para comparar.

Aa

Border

--border

oklch(0.922 0 0)

Aa

Input

--input

oklch(0.922 0 0)

Aa

Ring

--ring

oklch(0.708 0 0)

Gráficos

Use classes semânticas Tailwind (ex.: bg-primary, text-muted-foreground). Os valores abaixo são do tema claro; alterne escuro/claro no header para comparar.

Aa

Chart 1

--chart-1

oklch(0.87 0 0)

Aa

Chart 2

--chart-2

oklch(0.556 0 0)

Aa

Chart 3

--chart-3

oklch(0.439 0 0)

Aa

Chart 4

--chart-4

oklch(0.371 0 0)

Aa

Chart 5

--chart-5

oklch(0.269 0 0)

Tipografia

Inter como sans principal (--font-sans). Geist Mono para código (--font-geist-mono).

Display

MarsalaDS

Título de página

Componentes

Seção

Quando usar

Corpo

Texto padrão de parágrafos e descrições.

Pequeno

Legendas, hints e metadados.

Mono

pnpm dlx shadcn@latest add button

Radius

Token base --radius: 0.625rem. Escala derivada no @theme inline.

sm

--radius-sm

calc(--radius - 4px)

md

--radius-md

calc(--radius - 2px)

lg

--radius-lg

0.625rem (base)

xl

--radius-xl

calc(--radius + 4px)

2xl

--radius-2xl

calc(--radius × 1.8)

3xl

--radius-3xl

calc(--radius × 2.2)

Bordas e campos

Exemplos de border, input e foco com ring.

Card com border-border
AntesDepois

Uso em código

  • Prefira tokens semânticos em componentes: bg-background, não hex fixo.
  • Customização global: edite app/globals.css ou reinstale o preset base.
  • Veja também Fundamentos e Diretrizes.