DWC Design Kit
Overview
The DWC Design Kit is the official Figma kit for the Dynamic Web Client (DWC), the technology behind webforJ and the BBj DWC client. It provides designers with the same semantic, accessible components used in DWC applications. These components are drawn once and kept in step with the platform, so what you design is what your team can build. See: Open the kit on Figma Community.
What is inside
-
Components. Each DWC component is provided as a resizable master with variants for state, size and theme.
-
Tokens as variables. Color, surfaces, spacing, radii and typography as Figma variables, with light and dark as modes.
-
Styles. Text styles for the type scale, effect styles for shadows and focus rings, named the way the theme engine names them.
-
Themes and sizes. Seven themes and five sizes on every component, applied through modes.
-
Example applications. Real screens built only from the kit, in light and dark.
-
Documentation. Each component has its own page covering its anatomy, sizes, themes, and states, with examples showing what to do and what to avoid.
Preview
Versions
The kit is kept aligned with the platform. Use it with webforJ 26.00 and higher and BBj 26.00 and higher. For webforJ and BBj versions 25.00 and earlier, use the legacy DWC Design Kit.
Tokens in the kit and in CSS
Every variable in the kit maps to a CSS variable of the theme engine. Color steps follow the color palette, sizes follow sizing and spacing, and shadows and focus rings follow style. Switching the kit's mode from light to dark mirrors the dark theme in CSS.