GUI Theming

GUI Theming

The GUI theme system combines Radix Themes tokens with CSS Modules and strict styling conventions for consistent, dark-mode-friendly UI.

Core styling stack

The preferred building blocks are:

• Radix Themes design tokens
• CSS Modules for component-scoped styles

Use Radix primitives such as Flex, Box, Text, Card, and Button when possible.

Styling rules

• Use tokens like var(--space-3) and var(--accent-9) instead of hardcoded values.
• Do not use inline styles.
• Do not introduce hardcoded colors.
• Avoid magic numbers.
• Avoid global CSS unless there is a very strong reason.

These rules keep the UI consistent and make theme changes predictable.

File naming conventions

• Components: PascalCase.tsx
• Hooks: useCamelCase.ts
• Utilities: camelCase.ts
• Styles: PascalCase.module.css

Dark mode

The styling system is expected to work in dark mode without ad hoc overrides. Rely on theme tokens and component primitives so the same layout and spacing rules hold across light and dark appearances.

See also: GUI Architecture, Context Compression