# Dmgt Design System

> Corporate authority expressed through deep slate typography and sharp-edged, high-contrast green functional accents.

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

## TL;DR
Dmgt utilizes a high-contrast palette of Slate Blue (#425463) and Corporate Green (#47a23f) set against a stark white foundation. The system is strictly rectilinear, with a 0px border radius applied to all buttons, cards, and containers to project institutional stability. Typography pairs a serif display face (Source Serif Pro) for headings with a clean sans-serif (Source Sans Pro) for functional UI and body copy. Layouts use generous vertical spacing and full-width color bands to separate information hierarchies.

## Signature DNA
1. **The Institutional Square** (Every interactive element, from primary CTAs to content containers, uses a strict `{radii.sharp}` (0px) value, rejecting modern rounded trends for a more traditional corporate aesthetic.)
2. **Slate-Green Contrast** (The primary brand voltage comes from the juxtaposition of deep Slate Blue `#425463` text against vibrant Green `#47a23f` action elements, particularly in the "Sustainability" and "Annual Report" sections.)
3. **Hybrid Type Hierarchy** (Source Serif Pro at weight 600 provides a "newspaper" heritage feel for section headers, while Source Sans Pro handles high-density information and navigation.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text, hero copy | 9 | 1 | `--wp--preset--color--white` |
| `{colors.slate}` | `#425463` | Primary text, heading emphasis | 16 | 1 | `--wp--preset--color--blue` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.green}` | `#47a23f` | Primary button background, success indicators | 3 | 1 | `--wp--preset--color--green` |
| `{colors.navy-deep}` | `#18242d` | Footer background, dark section surfaces | 4 | 0.6 | Computed Style |
| `{colors.grey-light}` | `#e0e5e0` | Decorative dividers, neutral backgrounds | 2 | 0.8 | `--wp--preset--color--grey` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Source Serif Pro | 600, 700 | Section headings, display | Source Serif 4 | SIL Open Font |
| Source Sans Pro | 400 | Body, navigation, buttons, sub-headers | Source Sans 3 | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.h2-serif}` | 27px | 32.4px | normal | 600 | Section headers | `h2.wp-block-heading.has-blue-color` |
| `{text.h2-sans}` | 24px | 28.8px | normal | 400 | Secondary headers | `h2` |
| `{text.hero-body}` | 22px | 31.36px | normal | 400 | Hero intro text | `p.has-text-align-left.has-white-color` |
| `{text.body-lg}` | 18px | 21.6px | normal | 400 | Grouped content | `div.wp-block-group.full-width-group` |
| `{text.body-md}` | 18px | 25.2px | normal | 400 | Standard paragraphs | `p.wp-block-paragraph` |
| `{text.button}` | 18px | 1.0 | normal | 400 | CTA labels | `button` |
| `{text.nav}` | 16px | 1.4 | normal | 400 | Top navigation | `nav a` |
| `{text.footer}` | 14px | 1.5 | normal | 400 | Legal/Footer links | `footer a` |

### Principles
1. **Serif for Authority:** Use Source Serif Pro exclusively for high-level section headings to signal heritage.
2. **Sans for Utility:** All interactive elements and long-form body copy must use Source Sans Pro for legibility.
3. **Color-Coded Headers:** Headings frequently adopt the Slate Blue `{colors.slate}` or Green `{colors.green}` tokens rather than pure black.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 24px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radii.sharp}` | 0px | Buttons, cards, images, input fields | Observed on all interactive elements |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | All surfaces (cards, buttons) | 100% of analyzed components |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Discover More", "Got it")
**Pages observed:** https://dmgt.com
**Spec:** 
- Background: `{colors.green}` (#47a23f)
- Text: `{colors.white}` (#ffffff)
- Radius: `{radii.sharp}` (0px)
- Padding: 14px 26px
- Typography: `{text.button}` (18px)
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Global Footer
**Role:** Corporate navigation and legal info
**Pages observed:** https://dmgt.com, https://dmgt.com/about
**Spec:**
- Background: `{colors.navy-deep}` (#18242d)
- Text: `{colors.white}` (#ffffff)
- Border-top: 1px solid `{colors.slate}` (approx)
- Typography: `{text.footer}`

### Tier 2: Patterns

#### Section Header Group
**Role:** Introducing major page divisions
**Pages observed:** https://dmgt.com
**Spec:**
- Heading: `{text.h2-serif}` in `{colors.slate}`
- Margin-bottom: `{space.md}` (24px)

#### Image Card (Sharp)
**Role:** Visual navigation for "Our Businesses"
**Pages observed:** https://dmgt.com/about
**Spec:**
- Radius: 0px
- Overlay: Gradient or solid bar with `{text.body-lg}` in `{colors.white}`

### Tier 3: Surface-specific

#### Annual Report Banner
**Role:** High-priority document link
**Pages observed:** https://dmgt.com
**Spec:**
- Heading: `{text.h2-serif}` in `{colors.green}` (#47a23f)
- Layout: Split 50/50 with graphic asset

#### Cookie Consent Banner
**Role:** Regulatory notification
**Pages observed:** https://dmgt.com
**Spec:**
- Background: `{colors.white}`
- Primary Action: Green Button (#47a23f)
- Typography: `{text.body-md}`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 60px - 80px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; hero text aligns center; buttons become full-width. |
| Desktop | 1440px | Horizontal navigation visible; multi-column business grids. |

## Imagery & decoration
- **Green Gradients:** Used in hero backgrounds to soften the transition from solid green to photography.
- **Circular Accents:** The Annual Report uses a circular "Satisfying the need to know" graphic, providing a rare organic shape in an otherwise rectilinear system.
- **Avoidance:** No drop shadows, no rounded corners, no pastel colors.

## Do's
- Use `{radii.sharp}` (0px) for every single border-radius property.
- Set primary headings in Source Serif Pro weight 600.
- Use `{colors.green}` (#47a23f) for the most important action on any given page.
- Ensure all body text is `{colors.slate}` (#425463) for better readability than pure black.
- Maintain generous vertical whitespace between WP blocks.

## Don'ts
- **Wrong:** Using `#007cba` (WP Admin Blue) for public-facing buttons. **Right:** Use `#47a23f`. **Reason:** Brand identity is green-accented, not standard WordPress blue.
- **Wrong:** Applying a 4px or 8px radius to buttons. **Right:** 0px. **Reason:** The brand DNA is strictly rectilinear.
- **Wrong:** Using Source Serif Pro for body paragraphs. **Right:** Source Sans Pro. **Reason:** Serif is reserved for display/authority moments.
- Do not use drop shadows to create depth; use color blocking instead.
- Do not use the sub-brand purple (`#9b51e0`) or orange (`#ff6900`) tokens for parent-level navigation.

## Similar brands
- The New York Times (Typography/Heritage)
- BP (Corporate Green/Institutional feel)
- Reuters (Information-heavy/Professional)

## Quick start

### CSS Variables
```css
:root {
  --dmgt-green: #47a23f;
  --dmgt-slate: #425463;
  --dmgt-navy: #18242d;
  --dmgt-white: #ffffff;
  --dmgt-font-serif: "Source Serif Pro", serif;
  --dmgt-font-sans: "Source Sans Pro", sans-serif;
  --dmgt-radius-none: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #47a23f;
  --color-slate: #425463;
  --font-display: "Source Serif Pro";
  --font-body: "Source Sans Pro";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using #47a23f background, white text, 18px Source Sans Pro, and exactly 0px border radius."
- "Design a section header with a 27px Source Serif Pro title in #425463 and a 24px spacing below it."
- "Generate a footer component with a #18242d background and white text links at 14px."

## Known gaps
- Hover and Active states for buttons were not captured in the initial crawl.
- Specific mobile breakpoint transitions for the "Our Businesses" grid were not fully mapped.
- Form input styling (text fields, checkboxes) was not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://dmgt.com | 1440px | 2026-06-06 |
| About Page | https://dmgt.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://dmgt.com | 390px | 2026-06-06 |