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

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

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

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

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

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

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

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

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)} />