Back to Ag Grid

Website CSS Conventions

external/ag-shared/prompts/guides/website-css.md

100.0.0701 B
Original Source

Website CSS Conventions

When editing SCSS/CSS files for AG product websites, follow these rules:

  1. Always import the design system: @use 'design-system' as *;
  2. Use semantic variables (--color-bg-primary) — never raw palette variables or hex values
  3. Dark mode uses data-dark-mode: #{$selector-darkmode} & in SCSS. Never prefers-color-scheme
  4. Prefer standard utility classes (.layout-grid, .text-xl, .text-secondary) over custom styles
  5. SCSS modules for components: .module.scss files
  6. Test both light and dark modes

For full reference (colour palettes, design tokens, utility class catalog, dark mode patterns), load the /website-css skill.