2025 Monte Carlo Design System

Monte Carlo Web Styles

Primary - 60%

Neutrals

White

#FFFFFF

#E3E6E9

100

#C6CED2

200

#AAB5BC

300

#8E9CA5

400

#71848F

500

#556B78

600

#395262

700

#1C3A4B

800

#002135

Secondary palette 30% - accents

Blue

#CCE0FF

100

#99C0FF

200

#66A1FF

300

#3381FF

400

#0062FF

500

#0355D6

600

#0648AD

700

#083B84

800

#0B2E5B

Gradients

Midnight

Illumination

Cool blue

Energy

*Use approved gradients from asset library only

Tertiary 10% - UI, Semantic colors

Orange - Warning

#FFD6A3

100

#FFB67A

200

#FF9752

300

#FF7729

400

#FF5700

500

#CF4C0A

600

#9F4114

700

#6E371E

800

#3E2C28

Red - Error

#FFD2DD

100

#FFA5B4

200

#FF7D87

300

#FF5050

400

#E71D32

500

#AD1625

600

#8C101C

700

#6E0A1E

800

#4C0A17

Green - Success

#CCEAE7

100

#99D5CF

200

#66C0B8

300

#33ABA0

400

#009688

500

#037F77

600

#066766

700

#085054

800

#0B3843

Text Gradients

Data + AI Hero Gradient

A special gradient treatment designed for hero headlines and prominent text elements that need to convey the "Data + AI" narrative.

Usage:

Hero headlines, prominent CTAs, section headers

CSS Class:

text-gradient-sunrise

Example usage:


                                <span class="text-gradient-sunrise">Data +

                                  AI</span><br />

                                Trust You Can Scale

Data + AI
Trust You Can Scale

Live example of the gradient in action

yellow-300 (start)

yellow-400 (25%)

blue-400 (75%)

blue-600 (end)

Usage Guidelines

✓ Do

Use for hero headlines and primary messaging
Apply to large text elements (36px+ font size)
Ensure sufficient contrast with background
Use sparingly for maximum impact

✗ Don't

Apply to body text or small font sizes
Use multiple gradient texts in close proximity
Combine with other decorative elements
Use on complex background patterns

Typography

Automatic Font Hierarchy System

Our MC Heading component automatically determines font sizes based on the heading tag (H1, H2, H3, etc.) you select. This ensures consistent typography hierarchy and eliminates confusion for content authors.

✨ Benefits for Content Authors

• Simplified authoring - No more confusion about font sizes
• Faster content creation - One less decision to make
• Perfect semantics - Focus on content structure, not visual details
• Always consistent - Design system compliance enforced automatically

🎯 System Benefits

• Consistent typography - Enforces proper design system hierarchy
• Responsive by default - All sizes automatically scale for mobile
• Better accessibility - Proper heading structure for screen readers
• SEO optimized - Semantic heading hierarchy improves rankings

How it works:

1. Choose heading tag (H1, H2, H3, etc.) based on content hierarchy
2. Add your content (title, heading, subheading)
3. Set alignment and text color if needed
4. Font size is automatically perfect! 🎉

Homepage hero titles

H1 Display / XL Semibold 72px 110% LH

Section headings

H2 Display / L Semibold 56px 120% LH

Page titles, content intros

H3 Display / M Semibold 40px 130%LH

Blog titles, card headers

H4 Heading / L Semibold 32px 130% LH

Subsection headers

H5 Heading / M Medium 24px 140%LH

Minor headings, form section titles

H6 Heading / S Regular 20px 140%LH

Editorial body copy

Paragraph body / L Regular 18px 150%LH

Default body text

Paragraph body / M Regular 16px 150%LH

Secondary copy, labels, descriptions

Paragraph body / S Regular 14px 150%LH

Legal text, tooltips, timestamps

CAPTION / XS SEMIBOLD 12PX 140%, 2PX LINE SPACING

Font Size Override Example

The heading component allows you to override the default font size while maintaining the semantic heading tag. This is useful for hero sections where you need an H1 tag for SEO but want H2 visual sizing.

H1 tag with H2 font size:

I'm an H1 tag but look like H2

H2 tag with H4 font size:

I'm an H2 tag but look like H4

List Styles

Checkmark List

A clean bullet list with checkmark icons, perfect for feature lists, benefits, and step-by-step processes.

Usage:

Feature lists, benefits sections, process steps, capabilities

CSS Class:

list-checkmark

HTML Example:


<ul class="list-checkmark">
  <li>End-to-end coverage into data, system, code and model responses</li>
  <li>AI-powered monitors for faster data quality rules</li>
  <li>Automated testing & monitoring to scale with your pipelines</li>
</ul>


<ul class="list-checkmark list-checkmark-blue">
  <li>Blue checkmarks for trust & reliability</li>
</ul>

<ul class="list-checkmark list-checkmark-yellow">
  <li>Yellow checkmarks for insights</li>
</ul>

<ul class="list-checkmark list-checkmark-red">
  <li>Red checkmarks for urgent items</li>
</ul>

✨ Automatic List Styling in MC Blocks

Smart contextual styling! Our WordPress filter automatically adds list-checkmark styling to lists within MC custom blocks only.

Where checkmark styling is applied:

✅ MC Custom Blocks:

• MC Container
• MC Hero
• MC Accordion
• MC Featured Tabs
• MC Cards Grid
• MC Testimonials
• MC Heading
• MC Logo Wall

❌ Standard content areas:

• Blog posts
• Regular page content
• WordPress widgets
• Comments sections
• Archive pages
• Search results

🎯 Why this approach?

• Design consistency: Checkmarks for designed marketing sections
• Editorial flexibility: Standard bullets for blog/article content
• Context-aware: Different list styles for different purposes
• No manual work: Automatic detection based on block context
• Preserves existing classes: Won't override manually added styling

🎨 Automatic Color Inheritance:

• Dark backgrounds: White checkmarks (midnight, blue gradients)
• Light backgrounds: Blue checkmarks (light grey, white)
• Component context: Featured tabs = yellow, testimonials = blue
• Sunrise gradients: Dark blue checkmarks for contrast
• No configuration needed: Colors adapt automatically!

This ensures marketing pages get beautiful checkmark lists while blog content maintains standard editorial formatting!

Live Examples

Default (Cool Grey - Primary)

End-to-end coverage into data, system, code and model responses
AI-powered monitors for faster data quality rules
Automated testing & monitoring to scale with your pipelines

Blue for Trust & Reliability

Trust and reliability features
Data observability capabilities

Yellow for Insights

Key insights and breakthrough moments
Important highlights and discoveries

Red for Urgency

Critical alerts and immediate actions
High-priority issues resolved

Style Details

Cool grey checkmark icon (w-6 h-6) - Primary theme color

• Vertical spacing: space-y-3

• Font weight: Regular text

• Icon alignment: Top-aligned with text

Usage Guidelines

✓ Best Practices

Use for positive features and benefits
Keep list items concise and scannable
Limit to 3-7 items for optimal readability
Use parallel sentence structure
Great for capability and feature lists

⚠️ Considerations

Don't use for negative or warning content
Avoid very long list items that wrap multiple lines
Consider standard bullets for neutral content
Test readability on mobile devices

Buttons

Default

Hover

Focused

Active

Disabled

Primary button

Primary CTA

Outfit, Semibold, #1C3448 fill

Outfit, Semibold, Gradient #0648AD → #338FF

Outfit, Semibold, #083884 fill

Outfit, Semibold, #002135 fill

Outfit, Semibold, #C4CED2 fill

Secondary button

Secondary CTA

Outfit, Semibold, #002135

Outfit, Semibold, + arrow

Outfit, Semibold, #E3E6E9 fill, #002135 stroke

Outfit, Semibold, #002135

Outfit, Semibold, #8EVCA5 text + stroke

Tertiary button

Tertiary CTA

Outfit, Semibold, #002135

Outfit, Semibold, #002135 + arrow

Outfit, Semibold, #71848F

Default

Hover

Focused

Active

Disabled

Primary button

Primary CTA

Outfit, Semibold, #1C3448 fill

Outfit, Semibold, Gradient #0648AD → #338FF

Outfit, Semibold, #083884 fill

Outfit, Semibold, #002135 fill

Outfit, Semibold, #C4CED2 fill

Secondary button

Primary CTA

Outfit, Semibold, #002135

Outfit, Semibold, + arrow

Outfit, Semibold, #E3E6E9 fill, #002135 stroke

Outfit, Semibold, #002135

Outfit, Semibold, #8EVCA5 text + stroke

Tertiary button

Tertiary CTA

Outfit, Semibold, #002135

Outfit, Semibold, #002135 + arrow

Outfit, Semibold, #71848F

Hero Components

Hero sections are flexible layout containers that use InnerBlocks. Wrap heroes with MC Container for backgrounds and use MC Heading blocks for titles.

Step-by-Step Setup

1. Add Container Block: Insert the MC Container block for background control
2. Add Hero Block: Insert the MC Hero block inside the container
3. Add MC Heading: Use the + button inside hero to add MC Heading block
4. Add Buttons: Insert Button blocks for call-to-action
5. Configure Layout: Set container background, hero image position, text alignment

Container Block Settings

Background: Solid color or gradient
Width: Full, container, 75%, 50%
Padding: None to 3xl options
HTML Tag: Section, div, etc.

Hero Block Settings

Image: Optional hero image
Text Alignment: Left, center, or right
Image Position: Left, right, top, bottom
Layout: 50-50, 33-66, 66-33

Content Blocks (InnerBlocks)

MC Heading: Main title and subtitle
Button: Call-to-action links
Custom HTML: Any additional content

Field Options & Settings

MC Container Block

• Background Color: Custom color picker
• Background Gradient: Blue, midnight, sunrise
• Width: Full, container, 75%, 50%
• Padding: None to 3xl options

MC Hero Block

• Text Alignment: Left, center, right
• Image Position: Left, right, top, bottom
• Layout: 50-50, 33-66, 66-33
• Image: Optional hero image

MC Heading Block

• Heading: Main title text
• Subheading: Supporting description
• Font Size: xs to 9xl options
• Text Color: Custom color picker

Best Practices

• Keep headings concise (under 60 characters)
• Use MC Heading block for consistent styling
• Include clear call-to-action buttons
• Set proper heading levels for SEO (H1 for main page title)
• Test the InnerBlocks layout on mobile devices
• Use the same MC Heading block in other components for consistency

Standard Hero

Hero with centered gradient text

Hero with image below content

Hero with sunrise gradient background (CTA style)

Social Proof Carousel

Social proof sections combine MC Container for backgrounds, MC Heading for titles, and Social Proof Carousel for testimonials.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Heading Block: Insert MC Heading block for section title and description
3. Add Carousel Block: Insert Social Proof Carousel block for testimonials
4. Configure Content: Add testimonial items in the carousel
5. Style Section: Set container background, carousel scroll amount

Container Block

Background: Colors and gradients
Width: Full, container, 75%, 50%
Padding: Spacing control
HTML Tag: Semantic markup

MC Heading Block

Heading: Section title
Subheading: Supporting description
Font Size: xs to 9xl options
Text Color: Custom styling

Carousel Block

Testimonials: Customer quotes and ratings
Scroll Amount: 1-5 items at once
Author Info: Names and titles
Ratings: Star ratings (1-5)

Best Practices

• Use authentic customer testimonials with real names and titles
• Include star ratings for visual credibility
• Keep quotes concise but specific about benefits
• Ensure mobile-friendly carousel navigation
• Test keyboard accessibility for navigation
• Use MC Heading block for consistent section styling

Customer Testimonials with Blue Background

What our customers say

Monte Carlo is the only solution battle-tested in 100s of production environments

"Monte Carlo has completely transformed how we handle data quality. The insights we get are invaluable for our decision-making process."

"The data observability features have saved us countless hours of debugging. We can now trust our data pipelines completely."

"Implementation was smooth and the support team was fantastic. Our data quality has improved dramatically since using Monte Carlo."

"The real-time monitoring and alerting has been a game-changer for our team. We catch issues before they impact our business."

"Monte Carlo gives us the confidence we need in our data. The lineage tracking and anomaly detection are best-in-class."

"We have seen a 40% reduction in data incidents since implementing Monte Carlo. The ROI has been incredible."

Customer Testimonials with Gradient Background

Trusted by industry leaders

See what data teams around the world are saying about Monte Carlo

"Monte Carlo has completely transformed how we handle data quality. The insights we get are invaluable for our decision-making process."

"The data observability features have saved us countless hours of debugging. We can now trust our data pipelines completely."

"Implementation was smooth and the support team was fantastic. Our data quality has improved dramatically since using Monte Carlo."

"The real-time monitoring and alerting has been a game-changer for our team. We catch issues before they impact our business."

"Monte Carlo gives us the confidence we need in our data. The lineage tracking and anomaly detection are best-in-class."

"We have seen a 40% reduction in data incidents since implementing Monte Carlo. The ROI has been incredible."

Customer Testimonials on White Background

Customer success stories

Real results from real customers using Monte Carlo Data

"Monte Carlo has completely transformed how we handle data quality. The insights we get are invaluable for our decision-making process."

"The data observability features have saved us countless hours of debugging. We can now trust our data pipelines completely."

"Implementation was smooth and the support team was fantastic. Our data quality has improved dramatically since using Monte Carlo."

"The real-time monitoring and alerting has been a game-changer for our team. We catch issues before they impact our business."

"Monte Carlo gives us the confidence we need in our data. The lineage tracking and anomaly detection are best-in-class."

"We have seen a 40% reduction in data incidents since implementing Monte Carlo. The ROI has been incredible."

Logo Wall

Logo walls showcase partner, client, or company logos with automatic mobile animation. Use Container + Logo Wall blocks for background control and flexible content management.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Logo Wall Block: Insert the MC Logo Wall block inside container
3. Add MC Heading: Use the + button to add MC Heading block for title
4. Add Gallery: Insert Gallery block and upload company logos
5. Add CTA (Optional): Insert Button blocks for call-to-action

Container Block

Background: Colors and gradients
Width: Full, container, 75%, 50%
Padding: Spacing control
HTML Tag: Semantic markup

Logo Wall Block

Mobile Animation: Automatic infinite scroll
Responsive Layout: Grid on desktop, scroll on mobile
Content Management: Uses InnerBlocks

Content Blocks (InnerBlocks)

MC Heading: Title and subtitle text
Gallery Block: Company/partner logos
Button Group: Optional call-to-action buttons

Mobile Animation Behavior

Desktop (>768px)

• Layout: Centered flexbox grid
• Sizing: 120px-180px width
• Spacing: 2rem gap between logos
• Hover: Opacity transition effect

Mobile (≤768px)

• Animation: Infinite horizontal scroll
• Duration: 40 seconds per cycle
• Direction: Right to left movement
• Smooth: CSS-only seamless loop

Logo Management

• Upload: Use WordPress Gallery block
• Reorder: Drag and drop in gallery
• Format: PNG, SVG, or JPG logos
• Aspect Ratio: Consistent sizing recommended

Best Practices

• Use consistent logo aspect ratios for professional appearance
• Optimize logo images for web (compressed PNG/SVG preferred)
• Keep logo count reasonable (8-16 logos work well)
• Test mobile animation speed on actual devices
• Include alt text for accessibility
• Consider logo contrast against background colors

Example: Customer Logos with Gray Background

Trusted by the world's leading enterprises

Cards Grid Hero Layout

Learn how to create feature showcase sections using the modular Container + Heading + Cards Grid blocks approach. Perfect for highlighting product features or service offerings.

Cards Grid Hero sections showcase multiple features or services in an organized layout. Build them using Container + Hero + Heading + Cards Grid blocks for full control.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Heading Block: Insert MC Heading block for section title and description
3. Add Cards Grid Block: Insert MC Cards Grid block for feature showcase
4. Add Button Block: Insert Button blocks for call-to-action
5. Configure Content: Set up cards, icons, descriptions, and links

Container Block

Background: Gradients for feature showcases
Width: Full width for impact
Padding: Large spacing
HTML Tag: Section for semantics

MC Heading Block

Heading: Value proposition
Subheading: Supporting description
Font Size: 4xl for feature sections
Text Color: White for dark backgrounds

Cards Grid Block

Cards: 6-8 feature items
Icons: Consistent style
Titles: Concise names
Links: Relevant URLs

Best Practices

• Use 6-8 cards maximum for optimal scanning and comprehension
• Keep card descriptions concise and benefit-focused (15-25 words)
• Group related features together logically
• Use consistent icon styles and colors across all cards
• Test card content length for mobile readability
• Ensure all cards have clear, actionable links
• Use Container component for consistent backgrounds across sections

Modular Architecture Benefits

• Flexible: Easy to add/remove cards or change layout independently
• Reusable: Each component works in other page sections
• Maintainable: Each block has independent settings and logic
• Consistent: Container handles all background styling uniformly
• SEO-Friendly: Proper heading hierarchy and structured content
• Responsive: Automatic mobile optimization across all components

Cards Grid Layout Example

This example shows how the final result looks when you combine Container + MC Heading + MC Cards Grid + Button blocks:

The only end-to-end data + AI observability platform for enterprise teams.

Reduce risk, improve data + AI health, and promote trust at scale with the only fully end-to-end data + AI observability platform.

Data quality

Monitor and improve data quality across your entire data stack with automated profiling and anomaly detection.

Observability Agents

Accelerate workflows with agents for monitor creation, troubleshooting, root cause & more.

Alerting & Communication

Get intelligent alerts and communicate issues effectively across your team with contextual notifications.

AI Profiling

Profile and monitor AI models in production with comprehensive metrics and performance insights.

Data Lineage

Understand data flow and dependencies across your entire data ecosystem with visual lineage tracking.

Impact Analysis

Assess the impact of data issues on downstream systems and business processes with comprehensive analysis.

FinOps

Optimize data costs and resource usage with financial operations insights and cost management tools.

Integrations

Connect with your existing data stack through our extensive library of integrations and APIs.

Benefits Grid

A flexible grid layout for displaying benefits, features, or value propositions with optional images or headings.

Example 1: With Icons

Accelerate detection, triage, and resolution workflows

Leverage thoughtful automation and AI-enabled workflows to dramatically reduce time to detect and resolve

Create a single pane of glass for data teams and consumers

Eliminate silos with a comprehensive monitoring and incident response framework

Right-size compute costs and satisfy critical SLAs

Identify long running queries, reduce, investigate bottlenecks, and improve performance across critical products

Example 2: With Numbered Headings

01

Discovery & Planning

Understand your data landscape and identify critical assets that need monitoring

02

Implementation

Deploy monitors across your data stack with our easy-to-use setup wizard

03

Optimization

Fine-tune alerts and thresholds based on your team's specific needs

04

Scale & Grow

Expand coverage as your data infrastructure evolves

Example 3: Two Column Layout

💡

Smart Detection

ML-powered anomaly detection that learns from your data patterns and reduces false positives

🔗

End-to-End Lineage

Trace data dependencies and understand the impact of changes across your entire pipeline

Usage Notes:

Images take priority over headings - if both are provided, only the image will display
Grid automatically adjusts columns based on number of items (1, 2, 3, or 4 columns)
Headings are displayed as large H2 elements when no image is provided
Content supports line breaks using the Enter key in the ACF field
Best used for 1-6 benefit items for optimal layout

Testimonials

Customer testimonials showcase success stories and build trust. Use Container + Testimonials blocks for background control and flexible content management.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Testimonials Block: Insert MC Testimonials block inside container
3. Add Testimonial Items: Create customer stories with titles, logos, and content
4. Add Background Images: Upload relevant images for each testimonial
5. Configure Content: Set up challenges, solutions, and call-to-action buttons

Container Block

Background: Colors and gradients
Width: Full, container, 75%, 50%
Padding: Spacing control
HTML Tag: Semantic markup

Testimonials Block

Carousel: Touch/keyboard navigation
Stories: Challenge/solution format
Media: Customer logos and backgrounds
Accessibility: ARIA labels and screen reader support

Content Options

Titles: Customer case study names
Logos: Company brand images
Challenges: Problem descriptions
Solutions: How Monte Carlo helped

Best Practices

• Use authentic customer stories with specific metrics and outcomes
• Include customer logos and relevant background images
• Keep testimonial titles concise and benefit-focused
• Structure content with clear challenges and solutions
• Link to detailed case studies for more information
• Use Container component for consistent backgrounds across sections

Modular Architecture Benefits

• Flexible: Easy to adjust layouts and backgrounds independently
• Reusable: Testimonials component works in other page sections
• Maintainable: Clear separation between container and content logic
• Consistent: Container handles all background styling uniformly
• Accessible: Built-in ARIA labels and keyboard navigation
• Responsive: Automatic mobile optimization and touch gestures

Example: Container + Columns + Testimonials Layout

CUSTOMER STORIES

Reliability designed for the enterprise

Our customers scale trust, reduce risk, and deliver better business outcomes. See how you can too.

How Backcountry Increases Data Team Efficiency by 30% with Monte Carlo

The Challenge:

Migrating to a modern data stack left data quality blind spots

The Solution:

End-to-end data observability with Monte Carlo

DataCorp Reduces Data Incidents by 60% with Monte Carlo

The Challenge:

Legacy data systems caused frequent downtime and quality issues

The Solution:

Automated data monitoring and alerting system

Modular Testimonials Architecture

This example shows the modular Container + Columns + Heading + Testimonials approach, giving content authors complete control over layout and styling.

Step-by-Step Setup:

Add Container Block: Insert MC Container for background and spacing control
Add Columns Block: Insert WordPress Columns inside container (2 columns, 33%/66%)
Left Column: Add MC Heading block for title, heading, and description
Add Buttons: Insert WordPress Buttons block with MC Button components
Right Column: Add MC Testimonials block with customer stories
Configure Testimonials: Add testimonial items with logos, challenges, and solutions

Container Block

• Background control
• Width options
• Padding control
• Semantic HTML tags

WordPress Columns

• Flexible column widths
• Responsive stacking
• Easy editor control
• Standard WP pattern

Testimonials Block

• Customer stories
• Challenge/solution format
• Carousel navigation
• Background images

Benefits of Modular Architecture:

• Flexible: Easy to adjust layouts, backgrounds, and content independently
• Reusable: Each component works in other page sections
• Editor-Friendly: Content authors have full control without code changes
• Consistent: Container handles all background styling uniformly
• Responsive: Automatic mobile optimization across all components

Featured Blog Carousel

Featured blog carousels showcase your latest or most important blog posts in an interactive, swipeable format. Perfect for resources sections and engaging visitors with your content.

Required Fields

Heading: Section title (e.g., "Unlock your reliability strategy")

Optional Fields

Blog Posts: Select 1-10 blog posts to feature
CTA Button: Call-to-action button below carousel

Features & Capabilities

Responsive Design

• Mobile: 1 item per view
• Tablet: 2 items per view
• Desktop: 3.5 items with peek

Navigation

• Arrows: Previous/Next navigation
• Dots: Pagination indicators
• Touch: Swipe support
• Keyboard: Arrow key navigation

Accessibility

• ARIA labels: Screen reader support
• Focus management: Keyboard navigation
• Live region: Status announcements

Best Practices

• Select 4-6 blog posts for optimal display
• Use high-quality featured images for all posts
• Keep blog titles concise and compelling
• Include a clear CTA button to drive engagement
• Choose posts that represent your key topics

Standard Featured Blog Carousel

Resources

Unlock your reliability strategy

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Blog Carousel with Many Posts

Resources

Latest insights and updates

Data Quality

How to Build a Comprehensive Data Quality Strategy

Discover the key components of a successful data quality strategy that scales with your organization.

Data Observability

Understanding Data Lineage and Its Impact on Business

Learn how data lineage helps organizations trace data from source to destination.

Best Practices

Implementing Data Governance in Modern Organizations

A practical guide to establishing effective data governance frameworks.

Case Study

How Enterprise Teams Achieve 99.9% Data Reliability

Real-world examples of companies that transformed their data operations.

Technology

The Future of Data Monitoring and Alerting

Explore emerging trends in data monitoring and automated alerting systems.

Tutorial

Getting Started with Data Observability Metrics

A step-by-step guide to implementing key data observability metrics.

Featured Tabs

Featured tabs provide an interactive way to showcase different features, benefits, or content areas. Use Container + Heading + Featured Tabs blocks for background control and flexible content management.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Heading Block: Insert MC Heading block for section title and description
3. Add Featured Tabs Block: Insert MC Featured Tabs block inside container
4. Configure Tabs: Add tab items with names, content, icons, and images
5. Add Interactions: Configure buttons and links for each tab

Container Block Settings

Background: Solid color or gradient
Width: Full, container, 75%, 50%
Padding: None to 3xl options
HTML Tag: Section, div, etc.

MC Heading Block

Title: Small section identifier
Heading: Main section title
Subheading: Supporting description
Text Color: Custom styling

Featured Tabs Block

Tab Names: Interactive navigation
Icons: Visual tab indicators
Content: Rich text for each tab
Images: Supporting visuals

Best Practices

• Keep tab names short and descriptive (1-2 words)
• Use 3-6 tabs for optimal user experience
• Ensure content length is similar across tabs
• Use icons consistently across all tabs
• Test the component on mobile devices
• Use Container component for consistent backgrounds across sections

Modular Architecture Benefits

• Interactive: Smooth tab transitions with Alpine.js
• Flexible: Easy to adjust backgrounds and layouts independently
• Reusable: Each component works in other page sections
• Accessible: Built-in ARIA labels and keyboard navigation
• Consistent: Container handles all background styling uniformly
• Mobile-Friendly: Responsive design with touch-friendly interactions

Example: Interactive Feature Showcase

FEATURES & BENEFITS

Find and fix data + AI reliability issues at scale.

Data + AI observability is the only approach to reliability that delivers reliability at every layer of your data estate—including the data, system, code, and model outputs.

End-to-end coverage into data, system, code and model responses
AI-powered monitors for faster data quality rules
Automated testing & monitoring to scale with your pipelines
AI-powered profiling to quickly identify coverage gaps
Automatic alerts so you're always the first to know

Learn about detection

Smart alerting reduces noise and focuses on what matters
Intelligent incident grouping and prioritization
Root cause analysis with automated suggestions
Impact assessment across downstream systems
Collaborative investigation tools for teams

Learn more

Automated remediation workflows and playbooks
Integration with existing DevOps and DataOps tools
Version control and rollback capabilities
Real-time validation of fixes and changes
Documentation and knowledge sharing features

Learn more

Comprehensive metrics and KPI tracking
Custom dashboards and reporting capabilities
Trend analysis and predictive insights
Business impact measurement and ROI tracking
Compliance and audit trail maintenance

Learn more

Accordion Hero Layout

Learn how to create accordion hero sections using the modular Container + Heading + Accordion blocks approach. Perfect for feature showcases with interactive content.

Accordion Hero sections combine prominent headings with expandable content areas, perfect for feature explanations with supporting visuals. Use Container + Heading + Accordion blocks for background control and flexible content management.

Step-by-Step Setup

1. Add Container Block: Insert MC Container for background and width control
2. Add Heading Block: Insert MC Heading block for section title and description
3. Add Accordion Block: Insert MC Accordion block for interactive content
4. Add Supporting Content: Insert additional blocks like images and buttons
5. Configure Layout: Arrange content in grid layout for desktop presentation

Container Block Settings

Background: Solid color or gradient
Width: Full, container, 75%, 50%
Padding: None to 3xl options
HTML Tag: Section, div, etc.

MC Heading Block Settings

Heading: Main section title
Subheading: Supporting description
Font Size: xs to 9xl options
Text Color: Custom styling

MC Accordion Block Settings

Accordion Items: Interactive content panels
Text Color: Custom text styling
Expand/Collapse: Smooth animations
Content: Rich text support

Best Practices

• Keep accordion items focused and scannable (3-5 items max)
• Place the most important accordion item first
• Use consistent text colors across all blocks
• Test the layout on mobile devices to ensure proper stacking
• Use midnight gradient for professional, tech-focused content
• Use Container component for consistent backgrounds across sections

Modular Architecture Benefits

• Interactive: Smooth accordion expand/collapse animations
• Flexible: Easy to adjust backgrounds and layouts independently
• Reusable: Each component works in other page sections
• Maintainable: Clear separation between container and content logic
• Consistent: Container handles all background styling uniformly
• Responsive: Automatic mobile optimization and content stacking

Example: Accordion Hero Layout

Monitor what matters—and scale coverage in seconds

Create and deploy new monitors in seconds, discover the best monitors for each table, and autoscale coverage with your environment.

AI monitoring dashboard showing automated detection

Get broad baseline coverage right out of the box for things like freshness, volume, and schema monitors powered by AI.

Create custom monitors with SQL or Python to catch data quality issues specific to your business logic.

Automatically scale monitoring coverage as your data environment grows with intelligent suggestions.

Leverage generative AI to automatically suggest monitor configurations and accelerate incident resolution.

MC Container Layout

Learn how to use the MC Container block to create properly centered and constrained content sections with background control, width options, and responsive padding.

MC Container provides responsive, centered content with background control, width options, and customizable padding. Essential for creating consistent layouts and maintaining proper spacing across all components.

Step-by-Step Setup

1. Add Container Block: Insert MC Container from the block inserter
2. Configure Background: Set background color or gradient for section styling
3. Set Text Color: Choose text color for all child content (optional)
4. Set Width: Choose from full, container, 75%, or 50% width options
5. Configure Padding: Select appropriate spacing for your content
6. Add Content Blocks: Insert any WordPress blocks inside the container

Background & Text Settings

Background: Colors and gradients from theme palette
Text Color: Override text color for all child content
Full Width: Backgrounds extend edge-to-edge
Inheritance: Child blocks inherit container text color

Width & Layout Settings

Full: Full width (w-full)
Container: Standard container width
75%: Three-quarters width
50%: Half width

Spacing & Semantic Settings

Padding: None to 3xl options
HTML Tag: div, section, article, etc.
Custom Classes: Additional CSS classes
Responsive: Mobile-optimized spacing

Best Practices

• Use container for all major page sections for consistency
• Set text color at container level to control all child content
• Choose appropriate padding based on content density
• Use semantic HTML tags when possible (section, article)
• Test contrast when using custom text colors with backgrounds
• Container text color overrides individual component text colors
• Combine with other MC components for modular layouts

Modular Architecture Benefits

• Universal: Works with all other MC components seamlessly
• Flexible: Easy to adjust backgrounds, widths, and spacing independently
• Consistent: Ensures uniform spacing and layout across entire site
• Maintainable: Centralized background and layout control
• Responsive: Automatic mobile optimization for all settings
• Semantic: Proper HTML structure for accessibility and SEO

Example: Container with Background and Width Control

This example shows how MC Container provides background control, width options, and proper content centering:

2025 Monte Carlo Design System

Monte Carlo Web Styles

Primary - 60%

Secondary palette 30% - accents

Tertiary 10% - UI, Semantic colors

Text Gradients

Data + AI Hero Gradient

Data + AI Trust You Can Scale

Usage Guidelines

✓ Do

✗ Don't

Typography

Automatic Font Hierarchy System

✨ Benefits for Content Authors

🎯 System Benefits

How it works:

H1 Display / XL Semibold 72px 110% LH

H2 Display / L Semibold 56px 120% LH

H3 Display / M Semibold 40px 130%LH

H4 Heading / L Semibold 32px 130% LH

H5 Heading / M Medium 24px 140%LH

H6 Heading / S Regular 20px 140%LH

Font Size Override Example

I'm an H1 tag but look like H2

I'm an H2 tag but look like H4

List Styles

Checkmark List

✨ Automatic List Styling in MC Blocks

Live Examples

Default (Cool Grey - Primary)

Blue for Trust & Reliability

Yellow for Insights

Red for Urgency

Style Details

Usage Guidelines

✓ Best Practices

⚠️ Considerations

Buttons

Primary button

Secondary button

Tertiary button

Primary button

Secondary button

Tertiary button

Hero Components

How to Create a Hero Section

Step-by-Step Setup

Container Block Settings

Hero Block Settings

Content Blocks (InnerBlocks)

Field Options & Settings

MC Container Block

MC Hero Block

MC Heading Block

Best Practices

Standard Hero

Hero with centered gradient text

Hero with image below content

Hero with sunrise gradient background (CTA style)

Social Proof Carousel

How to Create a Social Proof Section

Step-by-Step Setup

Container Block

MC Heading Block

Carousel Block

Best Practices

Customer Testimonials with Blue Background

What our customers say

Customer Testimonials with Gradient Background

Trusted by industry leaders

Customer Testimonials on White Background

Customer success stories

Logo Wall

How to Create a Logo Wall

Step-by-Step Setup

Container Block

Logo Wall Block

Content Blocks (InnerBlocks)

Mobile Animation Behavior

Desktop (>768px)

Data + AI
Trust You Can Scale