---
title: "Design Tokens 3D — Referência"
created: 2026-05-20
tags: [design-system, tokens, threejs, codex]
---

# 🎨 Design Tokens 3D — Referência

## Equivalência: 2D ↔ ↔ World 3D

| Nível 2D | Equivalente 3D |
|---------|---------------|
| Cores hex | `material.color` (THREE.Color) |
| Espaçamento px | Posições/posição no mundo (units) |
| Raio border-radius | `roundedBoxGeometry.radius` |
| Font-size px | `Text.fontSize` (unidades 3D) |
| Box-shadow | `pointLight` + `emissive` material |

## Material Tokens

```ts
material3d.floating = {
  roughness: 0.08,    // polido/espelhado
  metalness: 0.75,    // metálico
  emissive: '#1e3a8a',
  emissiveIntensity: 0.3,
}
```

## Scene Tokens

```ts
scene: {
  background: '#050510',
  fogNear: 8, fogFar: 40, fogColor: '#050510'
}
```

## Camera Tokens

```ts
camera3d = {
  fov: 60,
  position: [0, 0, 12] as [number, number, number],
  scrollRange: { start:[0,0,12], end:[0,-8,6] }
}
```

## Animation Tokens

```ts
animation = {
  instant: 0.1, quick: 0.25, normal: 0.4, slow: 0.7, cinematic: 1.2
  easeOut: [0.16, 1, 0.3, 1],   // ease-out-expo
  spring: { type:'spring', stiffness:300, damping:20 }
}
```

## Uso nos átomos 3D

```tsx
// FloatingMesh recebe todos os material3d tokens como props
<FloatingMesh
  color={tokens.color.accent}
  metalness={tokens.material3d.floating.metalness}
  roughness={tokens.material3d.floating.roughness}
/>
```

## Referência
- Três tipo de luz: `pointLight` (colorida), `directionalLight` (sol), `ambientLight` (ambiente)
- Niebla: `<fog attach="fog" args={['#050510', 8, 40]} />`
- Performance: `<Canvas dpr={[1,2]} shadows antialias={true} />`