```meta
title: @tokens — as cores e as fontes de um tema
description: Os tokens de um tema desenhados: as cores como amostras com os códigos, e as fontes como um exemplo de texto.
```

_flows.md · documentação · [Blocos](/@docs/blocks)_

# @tokens

Os tokens de um tema, desenhados: as cores como amostras com os códigos, e as fontes como um exemplo de texto. É a vitrine de um design system guardado numa página.

## Ao vivo

Sem `from:`, o bloco desenha o tema que esta página veste — o da documentação:

```@tokens
```

~~~text
```@tokens
```
~~~

## O tema de outra página

`from:` desenha o tema de outra página do site: a página de um design system, o site de um cliente.

~~~text
```@tokens from:/@ana/design
```
~~~

## O que precisa

Uma página com um tema. O tema se escolhe, não se escreve: em **Tema** no editor, ou pelo `set_theme` do MCP; a [página dos temas](/@docs/temas) mostra os temas para começar. Os componentes de um tema entram numa página pelo [@use](/@docs/blocks/use).