The UI Shell is a dedicated container that visually separates specific areas of an application from the rest of the interface. By applying an alternate color mode, it creates a clear boundary that draws attention to context-specific content like dashboards, sidebars, or focused workflows. This distinctive treatment helps users quickly identify and engage with the most important sections without getting distracted by the overall layout.

Designed with simplicity and accessibility, the UI Shell maintains consistency with our design system through standardized colors, typography, and spacing. It reinforces our brand’s identity and improves navigation and interaction by guiding users toward relevant tasks. The UI Shell is a powerful yet straightforward tool that enhances the overall user experience by clearly highlighting where attention is needed.

Core principles

• Clarity & Focus:
  The shell provides a clear visual separation that guides users to critical or specialized content without overwhelming the primary interface.
• Consistency:
  Built on standardized design tokens, the UI Shell maintains visual harmony across components, ensuring that color, spacing, and typography are aligned with the broader Soul Design System.
• Accessibility:
  With a dedicated alternate color mode, the UI Shell is designed to meet and exceed WCAG contrast standards, ensuring all users can easily distinguish and interact with its content.
• Empathy & Engagement:
  By emphasizing essential sections in a friendly, approachable manner, the shell invites users into a more focused and immersive experience.

Visual design

Color mode

• Dark mode palette:
  The UI Shell uses a predefined dark mode set of colors defined by our design tokens. This palette includes specific backgrounds, borders, text, and accent colors tailored for contrast and emphasis.
• Contrast standards:
  All colors are selected to ensure clear separation and meet rigorous accessibility guidelines, ensuring that every user finds the interface both beautiful and functional.

Typography

• Consistent scale:
  The text within the UI Shell adheres to our defined typographic hierarchy, using legible fonts and sizes that support clear communication.
• Balanced spacing:
  Pre-defined margins and paddings ensure the shell feels open and uncluttered, reinforcing its role as a focused container within the overall UI.

Usage guidelines

When to use the UI Shell

• Contextual isolation:
  Use the UI Shell for areas that require clear visual separation—such as bulk action bars or tooltips—where context-specific content demands user focus.
• Task-centric areas:
  It is ideal for features or workflows that benefit from reduced visual noise, enabling users to concentrate on key actions without distraction.

Best practices

• Integration with core components:
  Ensure that buttons, forms, and interactive elements within the shell follow the overall design system’s guidelines for behavior and accessibility.
• Interactive feedback:
  Define clear interaction states—hover, active, and focus—that are consistent with the rest of the Soul Design System, ensuring that users receive timely visual cues during interaction.
• Design documentation:
  Each UI Shell implementation should be accompanied by detailed documentation—including design tokens, component states, and usage examples—to facilitate consistent application across projects.

Accessibility

• Color contrast:
  The color mode is selected to provide sufficient contrast with the primary interface, ensuring readability and clarity for users with visual impairments.
• User testing:
  Regular usability and accessibility testing should be conducted to ensure that the UI Shell meets the needs of all users, fostering an inclusive digital experience.
• Consistent interactions:
  Maintain uniform interactive behaviors within the UI Shell to enhance predictability, ease of use, and overall accessibility.