Guiding principles
User-centric
Every decision starts with the people using the product. Components, patterns, and guidance are shaped by real user needs and goals — not internal convenience.
Accessibility
BEEQ is built to be inclusive. All components are designed and tested to support users with disabilities, targeting WCAG 2.1 Level AA compliance across the board.
Reusability
Components are designed to be shared and adapted across projects. The goal is a library you reach for instead of rebuild — saving time without sacrificing quality.
Modularity
The system is built from small, independent pieces that can be composed freely. Nothing is tightly coupled — swap, extend, or replace parts without breaking the whole.
Extensibility
BEEQ is a starting point, not a constraint. It’s designed to be extended with custom tokens, brand overrides, and additional components when a project’s needs go beyond the core.
Scalability
From a small product to a multi-brand, multi-platform suite — the same system scales. Token-based theming and web components make it possible to grow without rewriting.
Consistency
Shared language, shared patterns, shared decisions. Consistency reduces cognitive load for users and speeds up design and development by removing repeated judgment calls.
Flexibility
BEEQ works across B2C and B2B products, desktop and mobile, light and dark themes. The system adapts to diverse contexts while maintaining a coherent identity.
How BEEQ is organized
BEEQ follows Atomic Design — a methodology that structures UI from the smallest design decisions up to complete layouts. Understanding this makes it easier to navigate the Figma file, reason about component relationships, and know where new things belong.
| Level | What it is | Examples in BEEQ |
|---|---|---|
| Design Tokens | Shared values that define how everything looks — color, spacing, typography, radius, shadow. The foundation all components build on. | --bq-brand, --bq-spacing-m, --bq-radius-m |
| Atoms | The smallest, self-contained components. | Button, Icon, Badge, Input, Checkbox |
| Molecules | Two or more atoms working together as a unit. | Search field (Input + Button), labeled form field |
| Organisms | Larger, self-contained UI sections made from molecules and atoms. | Navigation header, product card, alert banner |
| Templates | Full layout compositions using multiple organisms. | Page shell, dashboard layout |
| Pages | Realized instances of templates filled with real content. | A product detail page, a settings screen |