Design system & i18n
Tokens, components, and how to add a new translated string.
Design tokens
All colors, gradients, and shadows live in src/styles.css as oklch() CSS variables. Components consume semantic tokens (--background, --foreground, --primary, --muted, --accent) via Tailwind classes — never hardcoded hex values.
Core components
- PremiumCard — the standard card surface with subtle elevation.
- SectionHeader — page title + subtitle with bottom border.
- TerminalBlock — monospaced log/code display.
- PrimaryButton — the canonical CTA.
- BYOKBadge — provider-key status indicator.
- LanguageToggle — EN / IT switcher.
i18n
Two locale files: src/i18n/locales/en.json and it.json. The active language is controlled by LanguageToggle (LanguageDetector is intentionally disabled to avoid SSR hydration mismatch). To add a string: add the key to both JSON files, then call t('your.key') in the component.
Adding a doc page
Create src/routes/_public/docs.<slug>.tsx with createFileRoute and a head(). Add a 'docs.<slug>' block (title, subtitle, blocks[]) to both en.json and it.json. Add the new entry to the sidebar list in src/routes/_public/docs.tsx.