StyleSheet is the common visual foundation for Teasim web products. It provides a shared vocabulary without requiring Astro and React to share an implementation.
Design tokens
Tokens name the decisions that should remain consistent across products: spacing, type, radii, borders, elevation, and semantic colour roles. Product packages consume those names instead of carrying private scales.
Utility classes
Utilities express the selected token at the point of use. Responsive and state variants stay visible in the markup, so the final surface can be reviewed without tracing an additional component-specific stylesheet.
Colour
Theme-aware colour is expressed in OKLCH so lightness and contrast remain predictable while chroma and hue change. Semantic roles belong here; the exact surface composition belongs to the component or page that renders it.
Ownership boundary
StyleSheet renders nothing and ships no component markup. Accessible structure and interaction belong to the product package for the framework being used.