Xpandi · v1.0

Design System

A identidade completa em tokens: cor OKLCH, tipografia Satoshi, elevação, gradientes de marca e movimento. Copie o CSS e leve para qualquer projeto.

Baixar tokens CSS Como usar

01 — Fundação

Cor

Todos os valores em OKLCH para contraste perceptual estável entre light e dark. Trocar --brand, --brand-soft e --brand-foreground re-skina a marca inteira.

Base

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Muted foreground

--muted-foreground

Marca

Brand

--brand

Brand soft

--brand-soft

Accent

--accent

Ring

--ring

Superfícies

Surface

--surface

Surface elevated

--surface-elevated

Panel

--panel

Border

--border

Estados e data viz

Success

--success

Destructive

--destructive

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

02 — Fundação

Tipografia

Satoshi para tudo na interface e display; JetBrains Mono para números e acentos técnicos. Nunca serifada.

.display-light · 72px

Aprenda com quem faz

h2 · 40px

Vitrine de cursos

.text-gradient-primary

Xpandi Academy

.eyebrow + corpo

Fundamentos

Corpo de texto em 14–16px com cor --ink-soft, usado em descrições, listas e conteúdo longo.

.tnum · .font-mono-accent

1.284 alunos · 12h 40min · R$ 497,00

03 — Superfície

Elevação

Sombras compostas com color-mix sobre --foreground, então se adaptam ao dark automaticamente.

.ring-hairline

.shadow-soft

.shadow-card

.shadow-glow

04 — Superfície

Gradientes e texturas

.bg-gradient-primary

.bg-hero-glow

.bg-dotted

.bg-brand-soft

.progress-fill

05 — Padrões

Componentes

Os blocos recorrentes da plataforma, montados só com tokens.

iniciante

Ações

Chips

PerfilCertificadosCompras

Campo

Estados

NovoConcluídoErro

Carregando

06 — Movimento

Motion

Easing único cubic-bezier(0.22, 1, 0.36, 1) em três durações. Tudo respeita prefers-reduced-motion.

--dur-fast

160ms

hover, toggles

--dur-base

260ms

cards, transições de estado

--dur-slow

700ms

reveal em scroll

07 — Exportar

Levar para outro projeto

Dois arquivos e pronto: o CSS de tokens e o guia em markdown na raiz do repositório (DESIGN-SYSTEM.md).

# 1. CSS puro
<link rel="stylesheet" href="/xpandi-design-system.css" />

# 2. Tailwind v4 (src/styles.css)
@import "tailwindcss";
@import "./xpandi-design-system.css";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand: var(--brand);
  --color-border: var(--border);
  /* … demais tokens no DESIGN-SYSTEM.md */
}
@custom-variant dark (&:is(.dark *));

# 3. Re-skin da marca — só 3 variáveis
:root {
  --brand: oklch(0.58 0.24 290);
  --brand-soft: oklch(0.95 0.055 292);
  --brand-foreground: oklch(1 0 0);
}

xpandi-design-system.css