---

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:

Variable	Light	Dark	Usage
--ifm-color-primary	#3578e5	#3578e5	Primary blue, links, buttons
--ifm-color-primary-dark	#306cce	#306cce	Hover states
--ifm-color-primary-darkest	#2554a0	#2554a0	Active states
--ifm-background-color	default	#030711	Page background

Mermaid Diagram Colors

Defined in src/css/mermaid.css:

Variable	Hex	Usage
--mermaid-primary	#3578e5	Primary elements, read-only access
--mermaid-primary-dark	#2554a0	Darker blue variant
--mermaid-secondary	#6c757d	Gray, neutral elements
--mermaid-success	#28a745	Green, write/apply access
--mermaid-danger	#dc3545	Red, destructive/admin
--mermaid-warning	#e67e22	Orange, caution/IdP
--mermaid-info	#17a2b8	Teal, informational
--mermaid-user	#9b59b6	Purple, user/identity
--mermaid-account	#2c3e50	Dark slate, AWS accounts

Using Colors in Mermaid Diagrams

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

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

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

Semantic Color Meanings

Color	Meaning	Example Usage
Blue (#3578e5)	Read-only, plan, info	TerraformPlanAccess
Green (#28a745)	Write, apply, success	TerraformApplyAccess
Orange (#e67e22)	Identity, IdP, warning	Identity Center
Purple (#9b59b6)	User, human identity	User nodes
Dark slate (#2c3e50)	AWS accounts, infrastructure	Account nodes
Red (#dc3545)	Destructive, admin, danger	RootAccess

CSS File Locations

File	Purpose
src/css/custom.css	Global styles, Infima overrides
src/css/mermaid.css	Mermaid diagram styling
src/css/admonitions.css	Admonition/callout styling
src/css/sidebar.css	Navigation sidebar
src/css/navbar.css	Top navigation
src/css/footer.css	Footer styling

Dark Mode

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

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

Component Styling

React components have co-located CSS modules:

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

Use clsx for conditional class names:

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

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