# RU Design System

Design system commitavel da identidade visual do Restaurante Universitario para o
tema `ru-ufpe-theme`.

Este pacote e deliberadamente **RU-only**. A identidade visual institucional da
UFPE nao deve ser usada, importada, combinada ou replicada aqui em hipotese
alguma. O manual de origem contem uma pagina historica de assinatura
institucional; ela foi tratada como material fora do escopo e esta bloqueada no
manifest de assets.

## Fonte

- Manual versionado no tema: `../assets/identidade-visual-ru.pdf`
- Tokens ja usados pelo front: `../assets/src/css/tokens.css`
- Assets aprovados: `assets/manifest.json`

## Estrutura

- `tokens/ru.tokens.json`: fonte portavel em formato Design Tokens Community
  Group/W3C.
- `tokens/figma-tokens.json`: export compatbridge para Tokens Studio/Figma.
- `penpot/ru-variables.css`: variaveis CSS prontas para uso em Penpot e
  prototipos web.
- `assets/manifest.json`: lista fechada de assets RU aprovados e assets
  proibidos.
- `tools/check-brand-system.mjs`: validacao local sem dependencias externas.

## Guardrails

- Use somente os assets em `approvedAssets`.
- Nunca usar `../assets/images/brand/institutional/*`.
- Nunca usar brasao, assinatura, selo ou regras cromaticas institucionais da
  UFPE como parte da marca RU.
- `ufpe-id.png` pertence ao fluxo de autenticacao, nao a marca RU.
- O token `font.family.legacyArtwork` existe apenas para documentar a arte RU
  legada; a UI digital usa `Geist Variable`.

## Integracao com Figma

1. Instale/abra o plugin Tokens Studio no arquivo Figma.
2. Importe `tokens/figma-tokens.json` como token set `global`.
3. Crie as variaveis Figma a partir dos grupos `color`, `spacing`,
   `borderRadius`, `fontFamilies`, `fontSizes` e `lineHeights`.
4. Importe manualmente apenas os SVGs listados em `assets/manifest.json`.
5. Nao importe assets dentro de `assets/images/brand/institutional/`.

## Integracao com Penpot

1. Use `penpot/ru-variables.css` como fonte de variaveis para bibliotecas,
   prototipos ou handoff.
2. Crie estilos de cor com o prefixo `ru/color/...`.
3. Crie estilos de texto usando `--ru-font-family-ui`.
4. Importe apenas os assets aprovados no manifest.

## Validacao

Rode na pasta do tema:

```bash
npm run design-system:check
```

O check valida JSON, tokens de cor, existencia dos assets aprovados e bloqueia
assets institucionais na lista aprovada.
