Theming System
The Nexical styling system is a Semantic Abstraction Layer built on top of Tailwind CSS. It decouples design intent from visual implementation.
Architectural Overview
Section titled “Architectural Overview”- Strict Separation: Components MUST NOT define colors/borders locally. Use semantic utilities (e.g.,
surface-panel). - Single Source of Truth:
src/styles/theme.base.css. - Theme Modules: Customize by overriding CSS variables, not utility classes.
CSS Variable Reference
Section titled “CSS Variable Reference”Themes control the look by modifying properties like:
--primary: Core brand color.--background: Main page background.--surface-panel: Card background.
Utility Class Vocabulary
Section titled “Utility Class Vocabulary”AI Models and Developers must use these standardized utilities:
Typography
Section titled “Typography”text-heading-xl: Main titles.text-body: Standard text.text-subtle: Muted metadata.
Surfaces
Section titled “Surfaces”surface-panel: Standard card/panel.container-page-content: Main content wrapper.
Actions
Section titled “Actions”btn-primary: Main CTA.btn-ghost: Minimal interaction.btn-icon: Standard icon button.
Feedback
Section titled “Feedback”feedback-error-card: Error alerts.badge-primary: Important indicators.