MrAnalyze Style Guide

A comprehensive style guide for creating consistent, data-driven pages with professional design elements optimized for SEO insights and data comparisons.

Typography

Our typography system uses three font families for different purposes:

Headline Font (Montserrat) - H1

Headline Font (Montserrat) - H2

Headline Font (Montserrat) - H3

Headline Font (Montserrat) - H4

Headline Font (Montserrat) - H5
Headline Font (Montserrat) - H6

This is body text using Open Sans. It's highly readable and perfect for longer content blocks, descriptions, and general text content.

This is data font using Roboto Mono. Perfect for displaying metrics, code, URLs, and numerical data: 1,234,567 visitors, conversion rate: 3.45%

/* Font Variables */ --headline: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --data: "Roboto Mono", "SF Mono", "Monaco", monospace;

Color Palette

Brand Colors

Primary
Brand Primary
#2c3e50
Success
Brand Green
#27ae60
Secondary
Brand Secondary
#3498db
Accent
Brand Accent
#e74c3c

Data Visualization Colors

Blue
Viz Blue
#3498db
Green
Viz Green
#2ecc71
Purple
Viz Purple
#9b59b6
Orange
Viz Orange
#f39c12

Neutral Colors

Black
Brand Black
#1a1a1a
Gray
Brand Gray
#95a5a6
Light Gray
Brand Light Gray
#ecf0f1
White
Brand White
#ffffff

Buttons

Button styles for different actions and contexts:

Link Button CTA Button
<button class="button-blue">Primary Button</button> <button class="button-green">Success Button</button> <a href="#" class="button-blue">Link Button</a>

Forms

Form elements with consistent styling and validation states:

Layout System

Flexible grid system and layout utilities:

Flex Grid

Column 1 of 2
Column 2 of 2
Column 1 of 3
Column 2 of 3
Column 3 of 3
Column 1 of 4
Column 2 of 4
Column 3 of 4
Column 4 of 4

Utility Classes

Centered text

capitalized text

uppercase text

Element with top and bottom padding

Components

Breadcrumbs

  • Home
  • SEO Analysis
  • Domain Report
  • Current Page

Content Boxes

Information Box

This is a content box with light gray background. Perfect for highlighting important information, links, or interactive elements.

Status Badges

Success Warning Error In Progress

Data Visualization Elements

Data Cards

1,234,567
Page Views
89.5%
SEO Score
2.3s
Load Time

Chart Legend

Organic Traffic
Direct Traffic
Referral Traffic
Social Traffic

Data Table

Keyword Position Search Volume Difficulty Status
SEO analysis tool 3 12,000 65% Ranking
Website audit 15 8,500 72% Improving
Technical SEO 45 15,200 89% Needs Work

Usage Guidelines

Best Practices

  • Use Montserrat for headings and important UI elements
  • Use Open Sans for body text and general content
  • Use Roboto Mono for data, metrics, and code
  • Maintain consistent spacing with the paddingtopbottom and margintopbottom utilities
  • Use the flex grid system for responsive layouts
  • Apply status badges to indicate data states and progress
  • Use data cards for highlighting key metrics
  • Implement proper color contrast for accessibility