# Mindex Design System

> High-contrast corporate engineering aesthetic defined by deep navy foundations, burnt orange action points, and light-weight Roboto typography.

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

## TL;DR
Mindex utilizes a "monochrome-plus" system where a dominant deep navy (#003764) provides the structural floor for a high-voltage burnt orange (#b94d17) primary action color. The typography is exclusively Roboto, leaning heavily on the 300 (Light) weight for all display and body copy to maintain a technical, airy feel despite the heavy color blocks. Layouts are strictly modular, alternating between pure white (#ffffff) canvases and deep navy full-width sections. Components use a tight 3px border radius, signaling a precision-engineered software identity rather than a soft consumer one.

## Signature DNA
1. **Light-Weight Display** (Roboto at weight 300 is used for everything from 65px heroes to 14px body text, creating a consistent "technical blueprint" texture across all pages.)
2. **The Navy-to-Orange Pivot** (Primary navigation and large surfaces use #003764, while the singular conversion path is always highlighted in #b94d17.)
3. **Precision Geometry** (A consistent 3px radius on all interactive elements—buttons and inputs—creates a sharp, professional edge without being fully square.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 136 | 0.8 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary headings and high-contrast text | 110 | 0.8 | computed_style |
| `{color.ink.secondary}` | `#444444` | Default body text and secondary labels | 82 | 0.8 | computed_style |
| `{color.surface.navy}` | `#003764` | Hero backgrounds and primary footer surface | 16 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.action.primary}` | `#b94d17` | Primary CTA backgrounds and key text highlights | 37 | 0.8 | computed_style |
| `{color.action.secondary}` | `#0066ba` | Secondary links and decorative surface accents | 32 | 0.8 | computed_style |
| `{color.accent.gold}` | `#de9e44` | Tertiary decorative accents and specific section backgrounds | 11 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 300, 400, 700, 800 | All display, body, and UI labels | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 65px | 71.5px | normal | 300 | Main hero headlines | `h1` |
| `{type.display.md}` | 50px | 55px | normal | 300 | Section headers | `h2` |
| `{type.heading.lg}` | 37px | 40.7px | normal | 300 | Sub-section titles | `h3` |
| `{type.heading.md}` | 28px | 30.8px | normal | 300 | Card titles | `h4` |
| `{type.body.lg}` | 18px | 27px | normal | 300 | Primary body prose | `p` |
| `{type.body.md}` | 16px | 24px | normal | 300 | List items, secondary text | `li.dot` |
| `{type.label.bold}` | 16px | 17.6px | normal | 700 | Small labels/subheadings | `h6` |
| `{type.button}` | 13px | 14.95px | 1px | 800 | CTA text (uppercase style) | `a.cta-secondary` |

### Principles
1. **Weight 300 is the default.** Bold weights (700+) are reserved strictly for micro-labels and specific button emphasis.
2. **Tight Heading Leading.** Headings maintain a 1.1x line-height ratio to keep large type blocks cohesive.
3. **Generous Body Leading.** Paragraphs use a 1.5x line-height (27px on 18px font) to ensure legibility against white or navy backgrounds.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 26 |
| `{space.sm}` | 10px | 13 |
| `{space.md}` | 20px | 25 |
| `{space.lg}` | 25px | 38 |
| `{space.xl}` | 50px | 18 |
| `{space.section}` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, large surfaces | 334 occurrences |
| `{radius.sm}` | 3px | Buttons, form inputs | Rounded Button component |
| `{radius.lg}` | 15px | Content cards | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `0px 0px 15px 0px rgba(0, 0, 0, 0.1)` | Subtle lift for white cards on white canvas | Card component |
| `{shadow.button}` | `0px 10px 20px 0px rgba(0, 0, 0, 0.1)` | Directional shadow for primary actions | Rounded Button component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Primary site conversion (e.g., "Sign Me Up")
**Pages observed:** https://mindex.com, https://mindex.com/pricing
**Spec:** Background: `#b94d17` | Text: `#ffffff` | Radius: `3px` | Padding: `20px 25px` | Typography: `13px / 800` | Shadow: `{shadow.button}`
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Rounded Button (Navy)
**Role:** Secondary section actions
**Pages observed:** https://mindex.com
**Spec:** Background: `#003764` | Text: `#ffffff` | Radius: `3px` | Padding: `20px 25px` | Typography: `13px / 800` | Shadow: `{shadow.button}`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature and blog post previews
**Pages observed:** https://mindex.com
**Spec:** Background: `#ffffff` | Text: `#000000` | Radius: `15px` | Shadow: `{shadow.card}` | Padding: `0px` (internal content handles spacing)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Navy Surface Section
**Role:** Full-width structural breaks
**Pages observed:** https://mindex.com/pricing, https://mindex.com/about
**Spec:** Background: `#003764` | Text: `#ffffff` | Radius: `0px` | Padding: `100px 0px 25px`
**States observed:** Default: Captured

#### Secondary Action Button (Green)
**Role:** Specialized contextual actions (Pricing/About)
**Pages observed:** https://mindex.com/pricing, https://mindex.com/about
**Spec:** Background: `#468254` | Text: `#ffffff` | Border: `2px solid #000000` | Radius: `3px` | Padding: `11.52px 28.8px`
**States observed:** Default: Captured

#### Gold Surface Accent
**Role:** Decorative informational bands
**Pages observed:** https://mindex.com
**Spec:** Background: `#de9e44` | Text: `#444444` | Radius: `0px`
**States observed:** Default: Captured

## Do's
- Use **Roboto 300** for all long-form prose and headlines.
- Apply the **3px radius** to all interactive elements to maintain the system's "precision" feel.
- Use **#b94d17** exclusively for the primary conversion path on any given page.
- Alternate between **#ffffff** and **#003764** for major vertical section transitions.
- Ensure all cards sit on the **{shadow.card}** token when placed on white backgrounds.

## Don'ts
- **Wrong:** Using a sub-brand color like #0066ba for a primary "Submit" button. 
  **Right:** Use #b94d17. 
  **Reason:** #b94d17 is the validated primary action color for the Mindex parent brand.
- **Wrong:** Setting display headlines to weight 700 or 800.
  **Right:** Use weight 300.
  **Reason:** The brand's signature DNA relies on the light, airy texture of Roboto 300 at scale.
- **Wrong:** Using large border radii (>15px) for standard UI components.
  **Right:** Stick to 3px for buttons and 15px for cards.
  **Reason:** Excessive roundness conflicts with the technical/engineering aesthetic.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --mindex-navy: #003764;
  --mindex-orange: #b94d17;
  --mindex-white: #ffffff;
  --mindex-gray: #444444;
  --mindex-radius-sm: 3px;
  --mindex-radius-lg: 15px;
  --mindex-shadow-card: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  --mindex-font-primary: 'Roboto', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Mindex brand specs: background #b94d17, text #ffffff, 3px border radius, and Roboto weight 800 at 13px."
- "Design a feature card for Mindex: white background, 15px border radius, and a subtle 15px blur shadow (rgba 0,0,0,0.1)."
- "Build a hero section with a #003764 background and a headline using Roboto Light (300) at 65px."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific typography scaling (fluid type) was not explicitly defined in the token set.
- Success and Error semantic colors were not present in the analyzed pages.