Reference CWDS — Commercial Web Design System
CWDS — Commercial Web Design System
Style GuideEvergreenPublic
CwdsDesign SystemAbbvie
Overview
CWDS (Commercial Web Design System) is AbbVie's production design system powering AEM-based marketing sites. UXLab provides a Nuxt-native integration with dual rendering modes: AEM-compatible markup and Nuxt utility classes.
Components
Typography
Headings, body text, claims, stats, quotes, and utility text styles.
- Typography Style Guide — Rendered examples with font specs
- AEM HTML Reference — Production markup samples
Button
Primary, secondary, and tertiary buttons with 3 sizes, invert mode, and icon support.
- Button Style Guide — Rendered examples with specs and code snippets
- AEM HTML Reference — Production markup samples
Architecture
- CSS Tokens:
app/assets/css/cwds/tokens.css—--cwds-namespaced custom properties - Utility Classes:
app/assets/css/cwds/typography.css,button.css—.cwds-prefixed classes - Vue Components:
<CwdsTypography>,<CwdsButton>— dual-mode (AEM / Nuxt) rendering - AEM Production CSS:
public/resources/css/abvdesignsystem-themeless-styles.css
Contributing
- Component Contribution Workflow — Step-by-step guide for adding new CWDS components