Philosophies

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

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

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

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.

No rem Units

The styleguide intentionally disallows rem units (enforced via stylelint). The legacy design system sets html { font-size: 62.5% }, redefining 1rem to equal 10px. While this was a common pattern years ago, it makes rem unreliable as a unit across the codebase — any rem value silently depends on whether the legacy font-size reset is present. Since the legacy and new design system coexist during the transition, we use px for fixed sizes and em for text-relative sizes. Using px is perfectly fine for modern responsive design when combined with proper use of relative units where they matter (such as em for inline spacing that should scale with font size, and viewport or container units for fluid layouts).