Tokens Globais — Design System Rank

Tipografia

Família de fontes, pesos e escala de tamanhos.

Font Family

--ds-font-family-base Inter, system-ui — The quick brown fox

--ds-font-family-mono JetBrains Mono — const ds = 'rank'

Font Sizes

xs — 12px — Caption, labels auxiliares--ds-font-size-xs

sm — 14px — Labels, body small--ds-font-size-sm

md — 16px — Body principal--ds-font-size-md

lg — 18px — Body enfático--ds-font-size-lg

xl — 20px — H5, subheadings--ds-font-size-xl

2xl — 24px — H4--ds-font-size-2xl

3xl — 30px — H3, métricas--ds-font-size-3xl

4xl — 36px — H1, hero metrics--ds-font-size-4xl

Font Weights

--ds-font-weight-regular400 — Regular — Texto de corpo

--ds-font-weight-medium500 — Medium — Labels, botões

--ds-font-weight-semibold600 — Semibold — Headings, métricas

--ds-font-weight-bold700 — Bold — Títulos, destaque

Espaçamento

Escala de espaçamento progressiva. Use sempre var(--ds-space-*).

--ds-space-1

0.25rem / 4px

--ds-space-2

0.5rem / 8px

--ds-space-3

0.75rem / 12px

--ds-space-4

1rem / 16px

--ds-space-5

1.25rem / 20px

--ds-space-6

1.5rem / 24px

--ds-space-8

2rem / 32px

--ds-space-10

2.5rem / 40px

--ds-space-12

3rem / 48px

--ds-space-16

4rem / 64px

Border Radius

--ds-radius-xs 2px

--ds-radius-sm 4px

--ds-radius-md 6px

--ds-radius-lg 8px

--ds-radius-xl 12px

--ds-radius-2xl 16px

--ds-radius-3xl 24px

--ds-radius-full 9999px

Sombras

--ds-shadow-xs

--ds-shadow-sm

--ds-shadow-md

--ds-shadow-lg

--ds-shadow-xl

--ds-shadow-card

--ds-shadow-dropdown

--ds-shadow-modal

Layout

--ds-topbar-height60px

--ds-sidebar-width240px

--ds-sidebar-width-collapsed64px

--ds-content-max-width1440px

--ds-chart-height-md280px

--ds-modal-width-md560px

--ds-metric-card-height120px

--ds-table-row-height48px

--ds-input-height40px

--ds-button-height40px

Motion

--ds-duration-fast100ms — Hover, press

--ds-duration-base200ms — Abertura padrão

--ds-duration-slow300ms — Modais, drawers

--ds-easing-defaultcubic-bezier(0.4, 0, 0.2, 1)

--ds-easing-entercubic-bezier(0, 0, 0.2, 1)

--ds-easing-exitcubic-bezier(0.4, 0, 1, 1)

--ds-transition-colorsTransição de cores padrão

--ds-transition-hoverTransição completa de hover

Z-Index

--ds-z-base 0

--ds-z-raised 10

--ds-z-sticky 100

--ds-z-dropdown 200

--ds-z-overlay 300

--ds-z-drawer 350

--ds-z-modal 400

--ds-z-popover 450

--ds-z-toast 500

--ds-z-tooltip 600

Estados

--ds-opacity-hover0.85

--ds-opacity-pressed0.75

--ds-opacity-disabled0.45

--ds-focus-ring-width2px

--ds-scale-hover1.02

--ds-scale-pressed0.98

--ds-skeleton-animation-duration1.5s