---
description: Color tokens, theme usage, and styling rules for humand-create-app projects.
globs: src/**/*.{ts,tsx}
alwaysApply: false
---

# Humand Frontend Sandbox — Styling & Tokens

> **Before writing any code**, complete the pre-flight check in `sandbox-preflight.md` — it includes reading `newTokens.ts`.

## 1. Color tokens

**Never use hex color values.** All colors must come from the theme.

```tsx
import { useTheme } from '@material-hu/mui/styles';

const theme = useTheme();
sx={{ color: theme.palette.new.text.neutral.default }}
```

**Do not** assign sub-objects to variables:
```tsx
// NO
const neutral = theme.palette.new.text.neutral;
sx={{ color: neutral.default }}

// YES
sx={{ color: theme.palette.new.text.neutral.default }}
```

---

## 2. Finding the right token

When the design specifies a color, search for the closest match in `newTokens.ts` (which you already read during pre-flight). Never assume or guess a token path — incorrect paths fail silently.

If you can't find an exact match, search the file for the hex value or a keyword (e.g. "grey", "border", "disabled") to find the right token.

---

## 3. Border radius

`theme.shape.borderRadiusL` is not typed due to Vite alias limitations. Use the string `'16px'` directly for radius-L (confirmed from design token `--radius/l`).
