# Theproindia Design System

> Corporate blue and gold precision anchored by heavy geometric sans-serif typography and high-contrast monochrome foundations.

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

## TL;DR
Theproindia utilizes a high-contrast monochrome base (#000000, #ffffff) punctuated by a signature "Marigold" accent (#f9be52) for primary actions and "Corporate Blue" (#0072bc) for text emphasis. The system relies on heavy typographic weights (700) using DM Sans and ui-sans-serif to establish authority. Layouts are structured around large, rounded containers (16px to 24px) and pill-shaped interactive elements. Visual rhythm is defined by significant vertical spacing (up to 81px) and a clear distinction between dark-canvas service sections and light-canvas content areas.

## Signature DNA
1. **The Marigold Pill** (Primary CTA buttons use a #f9be52 background with a 9999px radius and black text, creating a high-visibility focal point against both light and dark backgrounds. Seen on Home and About pages.)
2. **Heavy-Weight Display** (Headlines consistently utilize 700 weight at 61px or 49px, creating a "stamped" authoritative feel. Seen across all analyzed pages.)
3. **Rounded Geometry** (A consistent application of 16px and 24px border radii on cards and panels softens the otherwise rigid monochrome grid. Seen in "Our Products" and "Our Services" sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.black}` | `#000000` | Primary text, dark section backgrounds, borders | 143 | 0.8 | Computed style |
| `{color.white}` | `#ffffff` | Page background, text on dark surfaces, ring offsets | 18 | 1.0 | Computed style |
| `{color.gray.62}` | `#626262` | Secondary body text, de-emphasized content | 3 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.marigold}` | `#f9be52` | Primary CTA background, "Vision" section highlight | 9 | 0.6 | Computed style |
| `{color.accent.blue}` | `#0072bc` | Brand text emphasis, link highlights | 4 | 0.6 | Computed style |

### Semantic
| Token | Hex | Role | Source |
| :--- | :--- | :--- | :--- |
| `{color.link.blue}` | `#3b82f6` | Focus rings and interactive outlines | `--tw-ring-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| `ui-sans-serif` | 400, 500, 600, 700 | Primary Display & UI | Inter | System |
| `DM Sans` | 400, 500, 700 | Body & Secondary Headings | DM Sans (Google Fonts) | OFL |
| `DMSans-Bold` | 700 | Specialized Headings | DM Sans Bold | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.lg}` | 61px | 91.125px | normal | 700 | Hero Headlines | `div.text-fontHeading` |
| `{type.display.md}` | 49px | 66.825px | normal | 700 | Section Titles | `div.text-5xl` |
| `{type.heading.lg}` | 35px | 53.16px | normal | 700 | Sub-section labels | `div.text-fontLabel_1` |
| `{type.heading.md}` | 30px | 45px | normal | 700 | Component titles | `tspan.astro-QNEPRLMS` |
| `{type.heading.sm}` | 25px | 37.98px | normal | 500 | Card headers | `div.text-fontLabel_3` |
| `{type.body.lg}` | 20px | 30.37px | normal | 500 | Intro paragraphs | `span.text-fontPara_1` |
| `{type.body.md}` | 18px | 27.33px | normal | 400 | Standard body text | `div.text-fontPara_2` |
| `{type.body.sm}` | 16px | 24.3px | normal | 400 | Footer, Nav, Small copy | `header#navbarMenu` |

### Principles
1. **Bold by Default**: All headings from 25px and up utilize a minimum weight of 500, with 700 being the standard for display.
2. **Generous Leading**: Line heights for display text are roughly 1.5x the font size (e.g., 61px/91px), ensuring legibility in multi-line heroes.
3. **Achromatic Hierarchy**: Text color is strictly #000000 on light or #ffffff on dark, with #0072bc reserved only for specific brand-aligned keywords.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 7 |
| `{space.lg}` | 24px | 14 |
| `{space.xl}` | 32px | 4 |
| `{space.xxl}` | 81px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Default containers | 120 occurrences |
| `{radius.md}` | 12px | Controls / Small surfaces | 3 occurrences |
| `{radius.lg}` | 16px | Product/Service Cards | 10 occurrences |
| `{radius.xl}` | 24px | Pricing/About Panels | 3 occurrences |
| `{radius.pill}` | 9999px | Buttons and Badges | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | All observed components | Component spec "shadow: none" |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Contact Us, Know More)
**Pages observed:** Home, About
**Spec:** Background: `#f9be52` | Text: `#000000` | Radius: `9999px` | Padding: `12px 24px` | Typography: `16px/500`
**States observed:** Default | Hover: Not captured | Focus: Not captured

#### Ghost Button
**Role:** Secondary navigation or de-emphasized actions
**Pages observed:** Home
**Spec:** Background: `transparent` | Text: `#000000` | Radius: `9999px` | Padding: `12px 0px` | Typography: `16px/400`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Product Card
**Role:** Showcasing individual software offerings
**Pages observed:** Home
**Spec:** Background: `transparent` | Border: `1px solid #e5e7e5` | Radius: `16px` | Padding: `16px 12px` | Typography: `25px/700` (Title)
**States observed:** Default | Hover: Not captured

#### Service Plate
**Role:** Grouping high-level service categories
**Pages observed:** Home
**Spec:** Background: `#000000` (or dark gray) | Text: `#ffffff` | Radius: `24px` | Padding: `4px 36px` | Typography: `20px/500`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Vision Banner
**Role:** High-impact brand statement
**Pages observed:** Home
**Spec:** Background: `#f9be52` | Text: `#000000` | Radius: `12px` | Padding: `24px` | Typography: `35px/700`
**States observed:** Default

#### AI Solution Node
**Role:** Diagrammatic representation of technical features
**Pages observed:** Home
**Spec:** Background: `rgba(0,0,0,0)` | Border: `1px solid #000000` | Radius: `12px` | Padding: `12px` | Typography: `16px/400`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1440px |
| Section Vertical Gap | 81px |
| Grid Columns | 12-column (implied) |
| Card Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Headlines scale from 61px to 32px; Flex-direction: column for cards |
| Desktop | 1440px | Horizontal multi-column grids (3-up for products) |

## Imagery & decoration
The brand uses high-quality photography of professionals interacting with technology, often overlayed with geometric "tech" motifs (circles, lines). It avoids illustrative or "cartoonish" styles, preferring realistic imagery that reinforces the "PRO" (Peninsular Research Operation) identity.

## Do's
- Use `#f9be52` for primary buttons only.
- Ensure all headlines use `700` weight for `ui-sans-serif`.
- Apply a `16px` radius to all content cards.
- Maintain a minimum of `81px` vertical spacing between major sections.
- Use `#0072bc` sparingly for text emphasis within paragraphs.

## Don'ts
- **Wrong:** Using `#f9be52` as a text color for body copy. **Right:** Use `#000000` for readability. **Reason:** Contrast ratios must be maintained for accessibility.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders or flat color fills. **Reason:** The system is strictly flat/monochrome.
- **Wrong:** Using sub-brand colors (like the blue from the logo) as the primary button fill. **Right:** Use the Marigold `#f9be52`. **Reason:** Parent brand identity relies on the gold-on-black/white contrast.
- Do not use border radii smaller than `12px` for interactive surfaces.
- Do not use weights below `500` for headings larger than `20px`.

## Similar brands
- IBM (Achromatic foundation, heavy sans-serif)
- Deloitte (Corporate blue/black authority)
- GE (Industrial-technical aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #000000;
  --color-accent: #f9be52;
  --color-brand-blue: #0072bc;
  --color-surface: #ffffff;
  --font-heading: "ui-sans-serif", system-ui, sans-serif;
  --font-body: "DM Sans", sans-serif;
  --radius-card: 16px;
  --radius-pill: 9999px;
}
```

### Tailwind v4 Theme
```javascript
@theme {
  --color-marigold: #f9be52;
  --color-pro-blue: #0072bc;
  --font-display: "ui-sans-serif";
  --font-body: "DM Sans";
  --radius-card: 16px;
  --spacing-section: 81px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Marigold #f9be52 background, black text, and a pill-shaped 9999px radius."
- "Create a section header using ui-sans-serif at 49px with a font weight of 700 and #000000 color."
- "Design a product card with a 1px solid #e5e7e5 border, 16px border radius, and 24px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Detailed shadow tokens are missing as the analyzed pages utilize a flat design language.
- Specific mobile-only component variations (e.g., hamburger menu internals) were not fully spec'd.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://theproindia.com | 1440px / 390px | 2026-06-06 |
| Pricing | https://theproindia.com/pricing | 1440px | 2026-06-06 |
| About | https://theproindia.com/about | 1440px | 2026-06-06 |