Philosophies
Use the Platform
Section titled “Use the Platform”We believe in leveraging the native capabilities of the web platform as much as possible. This means using semantic HTML, built-in browser features, and progressive enhancement to ensure our design system is accessible, performant, and future-proof. By relying on the platform, we reduce dependencies, improve maintainability, and ensure our components work well across a wide range of devices and environments. We avoid reinventing the wheel and instead build upon the solid foundation provided by modern browsers.
Cube CSS
Section titled “Cube CSS”Our design system is built on the principles of Cube CSS, a CSS methodology that emphasizes simplicity, composition, and scalability. Cube stands for Composition, Utility, Block, and Exception. We use these principles to create a CSS architecture that is easy to understand, maintain, and extend. By focusing on composition and utility classes, we keep our styles modular and avoid unnecessary specificity. This approach helps us deliver consistent, predictable results across all our products.
Composition
Section titled “Composition”We embrace the concept of composition, as described in Every Layout’s Composition. Rather than creating rigid, monolithic components, we design our system to be flexible and composable. Layouts and components are built from smaller, reusable pieces that can be combined in different ways to meet a variety of needs. This encourages creativity, adaptability, and scalability, allowing teams to build complex interfaces without duplicating code or styles.
Separate Design and Layout
Section titled “Separate Design and Layout”We maintain a clear separation between layout and design. Layout concerns (such as spacing, positioning, and structure) are handled independently from design concerns (such as color, typography, and visual style). This separation makes our codebase easier to reason about and maintain. It also allows for greater flexibility, as layouts can be adjusted without affecting the underlying design, and vice versa. By keeping these concerns separate, we empower teams to iterate quickly and confidently.