UX Lab
GaleriaCatálogo DSDS Workbench
Kamino UX Lab · galeria viva de mockupsv0.1.0
Galeria
Design System76 componentes · tokens · primitivos

Design System

Fonte única de verdade visual da Kamino. Tokens, primitivos de layout e ~80 componentes compõem cada tela. Mockups, telas de produção e o DS Workbench consomem o mesmo pacote @kamino/design-system.

Componentes76Catálogo navegável
Tokens88Cores · type · spacing · radius · shadow
Primitivos6Stack · Inline · Grid · Box · …
Cores, tipografia, espaçamento, raios e elevações — variáveis CSS resolvidas em runtime, light + dark.

Cores

24

Tokens semânticos — todos resolvidos via CSS vars. Light + dark via [data-theme].

SUPERFÍCIE
Aa
--backgroundFundo da app
Aa
--cardCards e containers
Aa
--popoverPopovers, menus, dropdowns
Aa
--mutedFundo neutro / disabled
Aa
--accentHighlight sutil
Aa
--sidebarFundo de sidebar / nav
MARCA
Aa
--primaryAções primárias
Aa
--secondary
Aa
--brand
Aa
--brand-alt
ESTADO
Aa
--info
Aa
--success
Aa
--alert
Aa
--destructive
Aa
--destructive-alt
Aa
--neutral
BORDA / LINHA
Aa
--borderBorder default
Aa
--inputBorder de inputs
Aa
--ringFocus ring
CHARTS
Aa
--chart-1
Aa
--chart-2
Aa
--chart-3
Aa
--chart-4
Aa
--chart-5

Tipografia

23

3 ramps espelhando tokens/index.ts: famílias (sans/mono), escala de tamanho (display-2xl → 2xs) e pesos (100 → 900). Aplique via Text/Heading do DS — nunca font-size cru.

FONTFAMILY
fontFamily.sans
DM Sans
var(--font-sans)
Família primária — `next/font` no app, Google Fonts no Storybook. Usada em todo o produto.
Ágil, R$ 1.234,56 — 28/05/2026
fontFamily.mono
JetBrains Mono
var(--font-mono)
Monoespaçada — valores tabulares (Currency), códigos, IDs, kbd. Lining numerals + igualdade visual de colunas.
Ágil, R$ 1.234,56 — 28/05/2026
FONTSIZE (12)
fontSize.display-2xl4.5rem · line-height 5.625rem · classe text-display-2xl
R$ 12.480
fontSize.display-xl3.75rem · line-height 4.5rem · classe text-display-xl
R$ 8.240
fontSize.display-lg3rem · line-height 3.75rem · classe text-display-lg
Saldo do dia
fontSize.display-md2.25rem · line-height 2.75rem · classe text-display-md
Conciliação bancária
fontSize.display-sm1.875rem · line-height 2.375rem · classe text-display-sm
Pagamentos pendentes
fontSize.display-xs1.5rem · line-height 2rem · classe text-display-xs
Resumo do mês
fontSize.xl1.25rem · line-height 1.875rem · classe text-xl
Extrato Itaú
fontSize.lg1.125rem · line-height 1.75rem · classe text-lg
Maio · vencimento
fontSize.md1rem · line-height 1.5rem · classe text-md
Texto principal do corpo.
fontSize.sm0.8125rem · line-height 1.25rem · classe text-sm
Texto secundário.
fontSize.xs0.75rem · line-height 1.125rem · classe text-xs
Descrição · 28/05
fontSize.2xs0.625rem · line-height 1rem · classe text-2xs
Caption auxiliar
FONTWEIGHT (9)
fontWeight.thin100Aa Bb Cc 123
fontWeight.extralight200Aa Bb Cc 123
fontWeight.light300Aa Bb Cc 123
fontWeight.regular400Aa Bb Cc 123
fontWeight.medium500Aa Bb Cc 123
fontWeight.semibold600Aa Bb Cc 123
fontWeight.bold700Aa Bb Cc 123
fontWeight.extrabold800Aa Bb Cc 123
fontWeight.black900Aa Bb Cc 123

Espaçamento

18

Escala Tailwind aplicada via tokens. Use sempre props tipadas (gap, padding) — não pixels soltos.

spacing.00px
spacing.px1px
spacing.0.52px
spacing.14px
spacing.1.56px
spacing.28px
spacing.2.510px
spacing.312px
spacing.3.514px
spacing.416px
spacing.520px
spacing.624px
spacing.728px
spacing.832px
spacing.1040px
spacing.1248px
spacing.1664px
spacing.2080px

Radius

7

Cantos arredondados. Use prop `rounded` em Box/Card/Button.

radius.none--radius-none
radius.sm--radius-sm
radius.md--radius-md
radius.lg--radius-lg
radius.xl--radius-xl
radius.2xl--radius-2xl
radius.full--radius-full

Shadow

8

Elevação. Aplicada via prop `shadow` em Box/Card.

shadow.2xs--shadow-2xs
shadow.xs--shadow-xs
shadow.sm--shadow-sm
shadow.default--shadow
shadow.md--shadow-md
shadow.lg--shadow-lg
shadow.xl--shadow-xl
shadow.2xl--shadow-2xl