Style Guide: Operations Consulting DocumentsVersion: 1.0Date: July 20, 2025Purpose: To establish a single, unified design standard for all case studies, Statements of Work (SOWs), and Standard Operating Procedures (SOPs). Adherence to this guide ensures brand consistency, readability, and a professional appearance across all documentation.1.0 Layout & StructureThe foundational structure ensures a consistent reading experience across all devices.1.1 Global BodyThe tag sets the global font and background color for the entire document page.Font Family: InterBackground Color: bg-slate-50 (#f8fafc)Implementation:...
1.2 Main ContainerAll content must be wrapped in a primary container card. This creates a clean, focused, and elevated presentation.Max Width: max-w-6xl (1152px)Centering: mx-autoBackground: bg-whiteBorder Radius: rounded-2xlShadow: shadow-2xl shadow-gray-300/30Implementation:
1.3 Content PaddingConsistent internal padding is crucial for whitespace and readability.Padding: p-8 md:p-12 (2rem on mobile, 3rem on medium screens and up)Implementation:
2.0 TypographyA clear typographic hierarchy guides the reader through the document.ElementFont Size (Tailwind)Font WeightColor (Tailwind)NotesH1 - Main Titletext-4xl md:text-5xlfont-extraboldtext-whiteUsed exclusively in the main header.H2 - Section Titletext-3xlfont-boldtext-gray-900Always paired with an icon.H3 - Sub-Sectiontext-xlfont-semiboldtext-gray-800For major divisions within a section.H4 - Component Titletext-lgfont-semiboldtext-gray-800For titles of tables, diagrams, etc.Body Texttext-basefont-normaltext-gray-700Standard paragraph text.Linkstext-basefont-semiboldtext-indigo-600Use hover:underline.Emphasistext-basefont-boldtext-gray-700For bolding key terms.3.0 Color PaletteThe color palette is designed for clarity, professionalism, and accessibility.UsageNameTailwind ClassHex CodePrimary/BrandIndigobg-indigo-600#4f46e5Text (Headings)Gray 900text-gray-900#111827Text (Body)Gray 700text-gray-700#374151Background (Page)Slate 50bg-slate-50#f8fafcBackground (Card)Whitebg-white#ffffffSuccess/PositiveGreentext-green-700#047857Danger/NegativeRedtext-red-600#dc2626Info/WarningYellowtext-yellow-800#854d0eAccentPurpletext-purple-700#7e22ce4.0 ComponentsThese are the standardized building blocks for all documents.4.1 Section Header (H2)Every major section must begin with this header format.Structure: Flex container with an icon and text.Icon Library: Font Awesome ()Icon Styling: mr-3 text-indigo-600Implementation:
1.0 Executive Summary
4.2 KPI / Data TablesTables must be clean and easy to read.Header: bg-gray-100, font-semibold, text-gray-800Body: divide-y divide-gray-200 for row separation.Implementation:
Metric
4.3 Info / Callout BoxUsed for highlighting purpose, audience, or important notes.Structure: A colored left border provides a visual anchor.Styling: bg-yellow-50, border-l-4 border-yellow-400, text-yellow-800, p-6 rounded-r-lgImplementation:
Purpose: This document outlines...
Audience: Front Desk Staff, Office Managers.
4.4 Collapsible SOW/SOP SectionsThe standard for embedding SOWs and SOPs at the end of a document. Uses the native element.Header (): bg-gray-50, p-4, cursor-pointer, flex items-center justify-betweenContent Container: p-6 border-t border-gray-200Separators: Use to separate multiple documents within one container.Implementation: