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)} />
1---2name: docs-styles3description: CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.4---5
6# Documentation Styles
7
8CSS styles and color conventions for docs.cloudposse.com.
9
10## Color Palette
11
12### Site Primary Colors
13
14Defined in `src/css/custom.css`:
15
16| Variable | Light | Dark | Usage |
17|----------|-------|------|-------|
18| `--ifm-color-primary` | `#3578e5` | `#3578e5` | Primary blue, links, buttons |
19| `--ifm-color-primary-dark` | `#306cce` | `#306cce` | Hover states |
20| `--ifm-color-primary-darkest` | `#2554a0` | `#2554a0` | Active states |
21| `--ifm-background-color` | default | `#030711` | Page background |
22
23### Mermaid Diagram Colors
24
25Defined in `src/css/mermaid.css`:
26
27| Variable | Hex | Usage |
28|----------|-----|-------|
29| `--mermaid-primary` | `#3578e5` | Primary elements, read-only access |
30| `--mermaid-primary-dark` | `#2554a0` | Darker blue variant |
31| `--mermaid-secondary` | `#6c757d` | Gray, neutral elements |
32| `--mermaid-success` | `#28a745` | Green, write/apply access |
33| `--mermaid-danger` | `#dc3545` | Red, destructive/admin |
34| `--mermaid-warning` | `#e67e22` | Orange, caution/IdP |
35| `--mermaid-info` | `#17a2b8` | Teal, informational |
36| `--mermaid-user` | `#9b59b6` | Purple, user/identity |
37| `--mermaid-account` | `#2c3e50` | Dark slate, AWS accounts |
38
39### Using Colors in Mermaid Diagrams
40
41Mermaid doesn't support CSS variables directly. Use hex values with `style`:
42
43```mermaid
44flowchart LR
45 user["User"] --> service["Service"]
46
47 style user fill:#9b59b6,color:#fff
48 style service fill:#3578e5,color:#fff
49```
50
51### Semantic Color Meanings
52
53| Color | Meaning | Example Usage |
54|-------|---------|---------------|
55| Blue (`#3578e5`) | Read-only, plan, info | TerraformPlanAccess |
56| Green (`#28a745`) | Write, apply, success | TerraformApplyAccess |
57| Orange (`#e67e22`) | Identity, IdP, warning | Identity Center |
58| Purple (`#9b59b6`) | User, human identity | User nodes |
59| Dark slate (`#2c3e50`) | AWS accounts, infrastructure | Account nodes |
60| Red (`#dc3545`) | Destructive, admin, danger | RootAccess |
61
62## CSS File Locations
63
64| File | Purpose |
65|------|---------|
66| `src/css/custom.css` | Global styles, Infima overrides |
67| `src/css/mermaid.css` | Mermaid diagram styling |
68| `src/css/admonitions.css` | Admonition/callout styling |
69| `src/css/sidebar.css` | Navigation sidebar |
70| `src/css/navbar.css` | Top navigation |
71| `src/css/footer.css` | Footer styling |
72
73## Dark Mode
74
75Use `[data-theme='dark']` or `html[data-theme='dark']` selectors:
76
77```css
78[data-theme='dark'] .my-element {
79 background: #21262d;
80 color: #fff;
81}
82```
83
84## Component Styling
85
86React components have co-located CSS modules:
87
88```
89src/components/
90├── Steps/
91│ ├── index.js
92│ └── index.module.css
93├── ActionCard/
94│ ├── index.js
95│ └── index.module.css
96```
97
98Use `clsx` for conditional class names:
99
100```jsx
101import clsx from 'clsx';
102import styles from './index.module.css';
103
104<div className={clsx(styles.container, isActive && styles.active)} />
105```
majiayu000