# Mci-group Design System

> A structured, achromatic foundation punctuated by high-contrast color blocks and sharp, geometric precision.

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

## TL;DR
The Mci-group design system is built on a rigorous achromatic foundation of pure white (#ffffff) and black (#000000), utilizing a "monochrome parent" strategy where brand energy is derived from high-saturation color blocks rather than a single primary hue. Typography is anchored by **Jost**, a geometric sans-serif that provides a clean, architectural feel across all headings and interactive elements. The system rejects soft depth, opting for a "flat" aesthetic characterized by 0px border radii (sharp corners) and a total absence of box shadows. Layouts are defined by generous vertical spacing (up to 114px) and a modular grid that uses saturated accents like Aqua (#74c6ca) and Blue (#33487d) to categorize content and drive action.

## Signature DNA
1. **Achromatic Rigor** (The canvas is strictly white #ffffff with black #000000 text, ensuring maximum contrast and a professional, agency-grade baseline.)
2. **Geometric Sharpness** (A universal 0px border radius is applied to all primary buttons, cards, and content blocks, creating a precise, architectural silhouette.)
3. **Chromatic Categorization** (Saturated colors like #74c6ca and #33487d are used as full-bleed surface backgrounds to differentiate business capabilities and news sectors.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Not captured in source | — | — | — | — |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--white` | `#ffffff` | Primary Page Background, Button Text | 95 | 1 | Computed Style |
| `--wp--preset--color--black` | `#000000` | Primary Text, Footer Background | 27 | 1 | Computed Style |
| `--wp--preset--color--grey-pale` | `#f7f7f7` | Secondary Surface Background | 6 | 1 | Computed Style |
| `--wp--preset--color--grey-darker` | `#4d4d4d` | Secondary Body Text | 4 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--clr-aqua-1` | `#74c6ca` | Primary Action, Capability Background | 12 | 1 | Computed Style |
| `--clr-blue-4` | `#33487d` | Link Text, Surface Background | 13 | 1 | Computed Style |
| `--clr-blue-1` | `#2d6eb6` | Capability Background | 9 | 1 | Computed Style |
| `--clr-turquoise-3` | `#169bd7` | Surface Background | 5 | 1 | Computed Style |
| `--clr-orange-1` | `#ec6608` | Decorative Highlight | 2 | 1 | decorative_only |
| `--clr-tangerine-1` | `#f8ab00` | Decorative Highlight | 2 | 1 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Jost | 400 | All Headings, UI Labels, Buttons | Jost (Google Fonts) | SIL Open Font |
| Arial | 400 | Body Fallback | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{display-mega}` | 70px | 84px | normal | 400 | Hero Stats | `div.stat-block-color__figure` |
| `{display-lg}` | 48px | 60px | normal | 400 | Section Headings | `h2.wp-block-heading.hdg` |
| `{heading-md}` | 39px | 48.75px | normal | 400 | Secondary Headings | `h2.wp-block-heading.hdg` |
| `{heading-sm}` | 25px | 32.5px | normal | 400 | Card Titles | `h3.case-card__heading` |
| `{body-lg}` | 20px | 23px | normal | 400 | Navigation, Intro Text | `div.page-outer` |
| `{body-md}` | 18px | 28px | normal | 400 | Default Paragraphs | `p.has-grey-darker-color` |
| `{button}` | 16px | 20.44px | normal | 400 | Primary CTAs | `a.btn.page-header__button` |
| `{body-sm}` | 14px | 16.1px | normal | 400 | Footer Links | `li#menu-item-1866` |

### Principles
1. **Geometric Uniformity:** Jost is used exclusively for both display and UI, maintaining a consistent geometric voice.
2. **Weight Restraint:** The system relies on scale rather than weight; almost all typography is rendered at weight 400.
3. **Vertical Rhythm:** Line heights are generous, typically 1.2x to 1.5x the font size, to maintain readability in dense blocks.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space-xs}` | 4px | 7 |
| `{space-sm}` | 10px | 4 |
| `{space-md}` | 20px | 6 |
| `{space-lg}` | 40px | 7 |
| `{space-xl}` | 114px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius-none}` | 0px | Buttons, Cards, Capability Blocks | `a.btn`, `div.case-card` |
| `{radius-full}` | 50% | Carousel Controls, Social Icons | `button.logo-panel__control` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All UI elements | Universal |

## Components

### Tier 1: Foundational

#### Ghost Button (Primary)
**Role:** Primary site actions and "Contact Us"
**Pages observed:** https://mci-group.com
**Spec:** Background: transparent / Text: #74c6ca / Border: 1px #74c6ca / Radius: 0px / Padding: 8.5px 26px / Typography: Jost 16px
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured

#### Nav Link
**Role:** Top-level site navigation
**Pages observed:** https://mci-group.com
**Spec:** Background: transparent / Text: #000000 / Border: none / Radius: 0px / Typography: Jost 16px (18.4px line-height)
**States observed:** Default | Hover: captured | Focus: not captured

### Tier 2: Patterns

#### Capability Card
**Role:** Defining business sectors (Events, Comms, etc.)
**Pages observed:** https://mci-group.com
**Spec:** Background: #33487d (or #2d6eb6) / Text: #ffffff / Radius: 0px / Padding: 40px / Typography: Jost 20px
**States observed:** Default | Hover: captured

#### News Card
**Role:** Editorial content previews
**Pages observed:** https://mci-group.com
**Spec:** Background: #169bd7 / Text: #ffffff / Radius: 0px / Typography: Jost 18px
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Stat Block
**Role:** High-impact data visualization
**Pages observed:** https://mci-group.com
**Spec:** Background: #ec6608 / Text: #ffffff / Radius: 0px / Typography: Jost 70px (figure) / Jost 24px (label)
**States observed:** Default

#### Footer
**Role:** Global site closure
**Pages observed:** https://mci-group.com
**Spec:** Background: #000000 / Text: #ffffff / Radius: 0px / Typography: Jost 14px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Gap | 114px |
| Horizontal Padding | 40px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; capability cards stack vertically. |
| Desktop | 1440px | 12-column grid; horizontal capability slider. |

## Imagery & decoration
The brand uses high-contrast, full-bleed photography often overlaid with saturated color blocks. Decorative elements include sharp geometric "shards" (visible in mobile hero) and the "impact" highlight—a solid color block behind specific words in headings.

## Do's
- Use **Jost** for all headings to maintain geometric consistency.
- Keep all container corners at **0px** radius for a sharp, professional look.
- Use **#74c6ca** for primary interactive outlines and ghost buttons.
- Apply **#ffffff** as the primary background to ensure maximum contrast for black text.
- Use full-bleed color blocks (**#33487d**, **#169bd7**) to separate major content sections.

## Don'ts
- **Wrong:** Using #74c6ca as the primary text color for long-form body copy. **Right:** Use #000000. **Reason:** Accessibility and readability.
- **Wrong:** Applying a border-radius to capability cards. **Right:** Keep at 0px. **Reason:** Brand DNA is strictly geometric and sharp.
- **Wrong:** Using a sub-brand color (like #ec6608) for the global navigation. **Right:** Use #000000. **Reason:** Sub-brand colors are for decorative highlights, not global architecture.
- Do not use box shadows or depth effects; the system is strictly flat.
- Do not use serif fonts; the brand is exclusively geometric sans-serif.

## Similar brands
- Pentagram (Achromatic, type-heavy, sharp)
- McKinsey & Company (Professional, blue-anchored, structured)
- Publicis Sapient (Agency-grade, modular, high-contrast)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --clr-black: #000000;
  --clr-white: #ffffff;
  --clr-aqua: #74c6ca;
  --clr-blue: #33487d;
  --font-main: 'Jost', sans-serif;
  --radius-none: 0px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #000000;
  --color-accent: #74c6ca;
  --font-sans: 'Jost';
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a primary ghost button using Jost 16px, a 1px border of #74c6ca, and 0px border radius."
- "Generate a section heading using Jost 48px in #000000 with a vertical margin of 114px."
- "Design a content card with a background of #33487d, white Jost 20px text, and sharp 0px corners."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the computed style trace.
- The specific transition timing for the capability slider was not recorded.
- Form input states (focus/error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://mci-group.com | 1440x900 | 2026-06-06 |
| Homepage (Mobile) | https://mci-group.com | 390x844 | 2026-06-06 |