---

name: docs-styles description: CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.

Documentation Styles

CSS styles and color conventions for docs.cloudposse.com.

Color Palette

Site Primary Colors

Defined in src/css/custom.css:

Mermaid Diagram Colors

Defined in src/css/mermaid.css:

Using Colors in Mermaid Diagrams

Mermaid doesn't support CSS variables directly. Use hex values with style:

Copyflowchart LR
    user["User"] --> service["Service"]

    style user fill:#9b59b6,color:#fff
    style service fill:#3578e5,color:#fff

Semantic Color Meanings

CSS File Locations

Dark Mode

Use [data-theme='dark'] or html[data-theme='dark'] selectors:

Copy[data-theme='dark'] .my-element {
    background: #21262d;
    color: #fff;
}

Component Styling

React components have co-located CSS modules:

Copysrc/components/
├── Steps/
│   ├── index.js
│   └── index.module.css
├── ActionCard/
│   ├── index.js
│   └── index.module.css

Use clsx for conditional class names:

Copyimport clsx from 'clsx';
import styles from './index.module.css';

<div className={clsx(styles.container, isActive && styles.active)} />