design-guidelines

To build a browser extension sidebar UI without hardcoded CSS values, use a design token system that defines approved colors, typography, spacing, and radius properties to ensure consistent styling and maintainability across components.

The best way to ensure focus-visible accessibility in a sidebar interface is to apply focus-visible requirements defined in the core stylesheet, enforcing clear visual focus indicators for keyboard navigation across all UI components.

To create an onboarding flow for credential entry that matches an existing design system, reference the component pattern library to pull correct button variants, form field styles, and progress header patterns for visual consistency.

Yes, you can use native CSS nesting for responsive sidebar UI components by following fluid responsive sizing rules and native CSS nesting rules defined in the extension's core stylesheet to structure component styles efficiently.

Your extension UI styling breaks when adding new screens because of inconsistent styling and hardcoded design values, which can be fixed by enforcing adherence to an approved design token system and documented component patterns.

You do not need a separate CSS framework to style an encrypted vault interface if you use the extension's established design token system and component pattern library to implement the vault UI with native CSS nesting and fluid responsive sizing.