---
name: fn_tokens
kind: component
lang: kt
domain: ui
version: "0.1.0"
framework: compose
purity: pure
signature: "object FnTokens { colors; spacing; radius; typography; shadows }"
description: "Design tokens del design system Compose del registry (@fn_compose). Paleta heredada exacta (mismos hex) de cpp/DESIGN_SYSTEM.md / Mantine v9 dark + indigo: FnColors, FnSpacing (Dp), FnRadius (Dp), FnTypography (sp + weights), FnShadows (Dp). Fuente unica de valores visuales para apps Android del registry."
tags: [compose, android, ui, tokens, theme, design-system, mantine]
props: []
emits: []
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: []
output: "Objetos Kotlin de solo lectura: FnColors (Color), FnSpacing/FnRadius/FnShadows (Dp), FnTypography (TextUnit + FontWeight), y el agregador FnTokens."
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/theme/FnTokens.kt"
---

## Ejemplo

```kotlin
import fn.compose.theme.FnColors
import fn.compose.theme.FnSpacing
import fn.compose.theme.FnRadius

Box(
    modifier = Modifier
        .background(FnColors.surface, RoundedCornerShape(FnRadius.md))
        .padding(FnSpacing.md)
) {
    Text("Hola", color = FnColors.primary)   // #4C6EF5 — mismo indigo que web y C++
}
```

## Cuando usarla

Siempre que escribas un Composable en una app del registry y necesites un color, espaciado, radio, tamaño de fuente o elevación. NUNCA pongas `Color(0xFF...)` o `8.dp` literal en código de app — usa el token. Garantiza que la app se vea idéntica a su equivalente web (Mantine) y C++ (ImGui), porque los tres comparten los mismos valores.

## Gotchas

- **Paleta heredada, no inventada.** Los hex coinciden 1:1 con `cpp/DESIGN_SYSTEM.md §4.1` (Mantine v9 dark + indigo). Si cambias un color aquí, debe cambiarse también en web y C++ para no romper la coherencia cross-platform.
- **Spacing más denso que CSS.** `FnSpacing` usa la escala de `kotlin/PATTERNS.md` (8/12/16/24/32/48 dp), no los px de CSS Mantine. Es intencional (densidad de pantalla móvil).
- **Es `object`, no `@Composable`.** Se consume directo (`FnColors.primary`), no via `MaterialTheme.colorScheme`. Para colores semánticos theme-aware en componentes propios, prefiere `MaterialTheme.colorScheme.*` (lo aplica `fn_theme_kt_ui`).
