# Sourcemogul Design System

> High-contrast data utility anchored by deep obsidian voids and sharp signal-red actions.

**Source:** https://sourcemogul.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sourcemogul utilizes a high-contrast "Dark Mode" foundation as its primary identity, transitioning to a clean white canvas for utility pages like pricing. The system is defined by a deep purple-black obsidian (`#190831`) paired with a high-energy red accent (`#d63f41`) used for primary conversions. Typography is a dual-font system: **Space Grotesk** provides a technical, geometric feel for headlines, while **DM Sans** handles high-density data and body copy. Geometry is predominantly sharp or slightly softened (`16px` cards), with rare pill-shaped elements reserved for secondary social icons.

## Signature DNA
1. **The Obsidian Void** (The use of `#190831` as a primary surface and text color creates a high-authority, data-centric atmosphere across the homepage and footer.)
2. **Signal Red Conversions** (Primary CTAs and critical emphasis points use `#d63f41`, providing a stark 18.7:1 contrast against white and high visibility against dark backgrounds.)
3. **Geometric Tech-Type** (Space Grotesk at weight 700 is the structural anchor for all major section headings, signaling a modern, software-first toolset.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.background}` | `#ffffff` | Primary page canvas and pricing card backgrounds | 54 | 1 | `css_variable:--background` |
| `{colors.obsidian}` | `#190831` | Primary text, footer background, and hero surface | 61 | 1 | `css_variable:--primary` |
| `{colors.midnight}` | `#0f1729` | Deep section backgrounds (About page) | 3 | 0.6 | `computed_style` |
| `{colors.slate-light}` | `#f8fafc` | Deemphasized text on dark surfaces | 33 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.accent-red}` | `#d63f41` | Primary CTAs, "Free Trial" buttons, and text highlights | 31 | 1 | `css_variable:--accent` |
| `{colors.slate-muted}` | `#94a3b8` | Secondary body text and metadata | 19 | 0.8 | `computed_style` |
| `{colors.purple-tint}` | `#8033cc` | Decorative text accents (About page) | 5 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#4ade80` | Positive indicators and perks |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Space Grotesk | 700 | Primary Headings | Space Grotesk (Google Fonts) | OFL |
| DM Sans | 400, 500, 600, 700, 900 | Body, UI, Subheadings | DM Sans (Google Fonts) | OFL |
| Arial | 400 | Form Inputs | Helvetica | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 60px | normal | -2.4px | 900 | Pricing values | `span.plan-price` |
| `{type.display-h1}` | 56px | 67.2px | normal | 700 | Hero headlines | `h1` |
| `{type.display-stat}` | 48px | 76.8px | normal | 700 | About page metrics | `div.about-stat-number` |
| `{type.heading-h2}` | 36px | 43.2px | normal | 700 | Section titles | `h2` |
| `{type.heading-h3}` | 20px | 24px | normal | 700 | Card titles | `h3` |
| `{type.body-lg}` | 18px | 28.8px | normal | 400 | Hero descriptions | `p.desc` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Standard body | `section.page-hero` |
| `{type.ui-label}` | 14px | normal | 0.35px | 700 | Button labels | `a.plan-cta.btn-accent` |
| `{type.caption}` | 12px | 19.2px | -0.32px | 400 | Small metadata | `p.plan-subtitle` |

### Principles
1. **Heavyweight Pricing**: Financial values use DM Sans 900 with aggressive negative tracking (-2.4px) to emphasize scale.
2. **Geometric Headers**: All structural headers use Space Grotesk to maintain a "software utility" aesthetic.
3. **Tight UI Tracking**: Small UI labels and captions use -0.32px letter spacing to maintain density on high-information pages.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 15 |
| `{space.md}` | 16px | 34 |
| `{space.lg}` | 24px | 14 |
| `{space.xl}` | 32px | 7 |
| `{space.section}` | 64px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, footer | `radius: 0px` |
| `{radius.sm}` | 8px | Primary buttons | `Rounded Button` |
| `{radius.md}` | 12px | Pricing feature containers | `Surface` |
| `{radius.lg}` | 16px | Content cards | `Card` |
| `{radius.pill}` | 9999px | Social icons | `radius: 9999px` |

## Components

### Tier 1: Foundational

#### Primary Action (Accent)
**Role:** Main conversion point (Free Trial, Sign In)
**Pages observed:** https://sourcemogul.com, https://sourcemogul.com/pricing
**Spec:** Background `{colors.accent-red}` (#d63f41) / Text `{colors.background}` (#ffffff) / Radius 8px / Padding 12px 24px / Typography `{type.ui-label}`
**States observed:** Default | Hover: captured

#### Obsidian Surface
**Role:** High-contrast section containment (Footer, Hero)
**Pages observed:** https://sourcemogul.com, https://sourcemogul.com/about
**Spec:** Background `{colors.obsidian}` (#190831) / Text `{colors.background}` (#ffffff) / Radius 0px / Padding 64px 0px

### Tier 2: Patterns

#### Feature Card
**Role:** Pricing tiers and benefit blocks
**Pages observed:** https://sourcemogul.com/pricing, https://sourcemogul.com/about
**Spec:** Background `{colors.background}` (#ffffff) / Border 1px `rgba(25, 8, 49, 0.1)` / Radius 16px / Padding 24px
**States observed:** Default: captured

#### Pricing Header
**Role:** Plan identification
**Pages observed:** https://sourcemogul.com/pricing
**Spec:** Background `{colors.obsidian}` (#190831) / Text `{colors.background}` (#ffffff) / Radius 12px 12px 0 0 / Padding 20px 24px

### Tier 3: Surface-specific

#### Login Card
**Role:** User authentication container
**Pages observed:** https://sourcemogul.com (Hero)
**Spec:** Background `rgba(255, 255, 255, 0.03)` / Border 1px `rgba(255, 255, 255, 0.1)` / Radius 16px / Padding 32px 24px

#### Award Badge
**Role:** Trust signaling
**Pages observed:** https://sourcemogul.com/about
**Spec:** Background `rgba(255, 255, 255, 0.03)` / Text `{colors.slate-light}` (#f8fafc) / Radius 16px / Padding 24px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 64px (Vertical) |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; hero text aligns center; cards stack 1-up. |
| Desktop | 1440px | 2-up or 3-up card grids; horizontal top-nav with right-aligned CTAs. |

## Imagery & decoration
- **Iconography**: Uses thin-stroke checkmarks and simple geometric arrows (e.g., `Sign In →`).
- **Dividers**: Thin 1px lines using `rgba(25, 8, 49, 0.1)` on light surfaces or `rgba(255, 255, 255, 0.1)` on dark.
- **Avoids**: Heavy drop shadows, complex gradients, or rounded corners exceeding 16px.

## Do's
- Use `#d63f41` exclusively for primary conversion actions.
- Pair Space Grotesk 700 with DM Sans 400 for a clear hierarchy.
- Maintain a 16px border radius for all content-containing cards.
- Use `#190831` for large-scale section backgrounds to maintain brand authority.
- Apply negative letter-spacing (-2.4px) to large numerical data points.

## Don'ts
- **Wrong:** Using a generic bright red (#ff0000) for buttons. **Right:** Use the brand-specific `#d63f41`. **Reason:** Brand consistency and specific contrast ratios.
- **Wrong:** Applying pill-shaped (9999px) radii to primary buttons. **Right:** Use 8px radius. **Reason:** Pill shapes are reserved for social icons and small tags.
- **Wrong:** Using Space Grotesk for long-form body copy. **Right:** Use DM Sans. **Reason:** Space Grotesk is a display face and loses legibility at small sizes.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #190831;
  --accent: #d63f41;
  --background: #ffffff;
  --slate-muted: #94a3b8;
  --radius-card: 16px;
  --radius-btn: 8px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}
```

## Agent prompt examples
- "Generate a pricing card using a white background, a 1px border in rgba(25, 8, 49, 0.1), and a 16px border radius. The header should be a solid #190831 block with white Space Grotesk text."
- "Create a primary CTA button with a #d63f41 background, 8px border radius, and white DM Sans bold text."
- "Design a footer section using #190831 as the background and #f8fafc for secondary links."

## Known gaps
- Hover and Active states for secondary navigation items were not explicitly captured in the token data.
- Specific shadow values were not detected in the CSS variable crawl, suggesting a flat design approach.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://sourcemogul.com | 1440x900 | 2026-06-06 |
| Pricing | https://sourcemogul.com/pricing | 1440x900 | 2026-06-06 |
| About | https://sourcemogul.com/about | 1440x900 | 2026-06-06 |