Skip to content

Design System

bootstack includes a built-in design system that defines how applications look, feel, and behave visually—independent of individual widgets.

The design system establishes a shared visual language across the framework, covering color semantics, variants, typography, and icons.

Rather than styling widgets individually, bootstack applications express intent using design tokens. The framework ensures those intentions are rendered consistently across themes, platforms, and screen densities.

What the Design System Is

The design system defines:

  • semantic colors (meaning, not appearance)
  • visual variants (emphasis and affordance)
  • typography tokens (hierarchy and readability)
  • iconography rules (symbolic, theme-aware icons)

These rules apply uniformly across all widgets.

What the Design System Is Not

The design system does not:

  • explain how to use widgets
  • document APIs or parameters
  • provide step-by-step tutorials

Those topics are covered elsewhere:

Why bootstack Is Opinionated

bootstack intentionally constrains visual choices to reduce inconsistency and design drift.

By adopting the design system:

  • applications look cohesive by default
  • light/dark themes behave predictably
  • widgets share common interaction patterns
  • customization remains structured and maintainable

Next steps

  • Learn how color semantics work in Colors
  • Understand emphasis and hierarchy in Variants
  • Explore text styling in Typography
  • See how icons are treated in Icons

To learn how these concepts are applied in real applications, see Guides → Color & Theming.