Skip to main content

Styling

Open in ChatGPT

webforJ ships with a comprehensive design system named DWC. It’s more than just a theme, it’s a structured, extensible system that governs the visual language of your app. DWC is built to help developers and designers create consistent, brand-aligned interfaces quickly and confidently.

At its core, DWC provides a set of carefully designed CSS variables (design tokens) that cover key visual elements like colors, typography, borders, and spacing. These tokens serve as the foundational building blocks for all component styles and allow global customization with minimal effort.

To support more advanced styling, webforJ leverages CSS Shadow Parts, allowing component internals to be selectively styled without breaking encapsulation. This gives teams fine-grained control over how components appear, even across larger applications.

DWC also includes a customizable color palette and defaults to a clean, light visual theme, but every aspect can be adapted to your brand or product style.

AI skill available

The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:

  • "Theme this app with a blue palette."
  • "Style the dwc-button to match the brand guidelines."
  • "Make this layout tighter - adjust spacing and typography."

Figma design kit​

The DWC Figma library is the official design resource for creating modern, enterprise-grade web applications. It includes a comprehensive set of components, typography styles, and color tokens that align with the DWC design system. Designers and developers can use this library to build visually consistent, user-friendly interfaces with predictable component behavior, precise spacing, and accessible color contrast.

Figma Design Kit

Topics​