This Claude skill provides a comprehensive reference for CSS styles, color themes, and visual conventions specifically tailored for docs.cloudposse.com. It serves as a centralized source for maintaining visual consistency, offering detailed specifications for primary site colors, semantic color meanings, and specialized styling for Mermaid diagrams and React components.

When should I use docs-styles?

docs-styles is useful in the following scenarios: • Standardizing Documentation Design: Apply consistent primary and background colors to ensure a professional and unified look across all documentation pages. • Creating Semantic Diagrams: Use the predefined hex code palette for Mermaid diagrams to visually represent concepts like 'success', 'danger', or 'identity' consistently. • Dark Mode Implementation: Reference specific CSS selectors and variables to ensure documentation remains readable and visually appealing in dark mode. • Component Development: Guide the styling of React components using co-located CSS modules and established naming conventions like clsx for conditional classes.

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

docs-styles

When & Why to Use This Skill

Use Cases