# Sourcepro.co.in Design System

> Deep navy industrial precision meets high-visibility safety orange, anchored by geometric Poppins typography.

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

## TL;DR
Sourcepro.co.in utilizes a high-contrast industrial palette where a deep navy "Midnight" (#001949) provides the structural weight for headings and backgrounds, while a saturated "Safety Orange" (#e95108) signals primary actions and key brand emphasis. The system is built on Poppins, using a wide range of weights from 300 (Light) for secondary display to 600 (Semi-Bold) for structural emphasis. Layouts are defined by generous vertical spacing (up to 80px between sections) and a mix of sharp edges and moderate 10px radii, creating a feeling of robust, enterprise-grade software reliability.

## Signature DNA
1. **The Midnight/Orange Contrast** (Headings and primary text use #001949 against white, while critical CTAs and "highlighted" text spans use #e95108 for maximum visibility. Observed on Home and About.)
2. **Geometric Display Hierarchy** (Large-scale Poppins headings at 48px-60px with tight -0.1px letter spacing create a modern, authoritative technical voice. Observed on Home hero.)
3. **The Industrial Card** (Surfaces often use a 10px border radius with subtle 2px light-gray borders #e9ecef, signaling modularity and software "panes". Observed in feature grids.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background and card surface | 92 | 1.0 | Computed style |
| `{color.midnight}` | `#001949` | Primary text, headings, and dark section backgrounds | 342 | 1.0 | `--pix-primary` |
| `{color.ash}` | `#e9ecef` | Secondary surface and soft borders | 11 | 1.0 | `--pix-gray-2` |
| `{color.ink}` | `#000000` | Input text and deep shadows | 6 | 1.0 | `--pix-black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.safety-orange}` | `#e95108` | Primary CTA background and brand highlights | 18 | 1.0 | `--pix-secondary` |
| `{color.electric-blue}` | `#0072ff` | Decorative text accent (rare) | 57 | 0.8 | Computed style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#4ed199` | Positive indicators |
| `{color.warning}` | `#f0b155` | Cautionary states |
| `{color.error}` | `#0d2883` | Error states (Note: Brand uses a deep blue for "red" tokens) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 300, 400, 500, 600 | All headings, body, and UI | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 76.8px | -0.1px | 500 | Hero H1 | `h1.pix-highlighted-items` |
| `{type.display-md}` | 56px | 70px | -0.1px | 300 | Secondary Hero | `h1.display-4` |
| `{type.h2}` | 48px | 61.44px | -0.1px | 500 | Section Heads | `h2.pix-highlighted-items` |
| `{type.h4}` | 30px | 38.4px | -0.1px | 500 | Sub-section Heads | `h4` |
| `{type.h5}` | 24px | 30.72px | -0.1px | 600 | Feature Titles | `h5.pix-feature-title` |
| `{type.body-lg}` | 18px | 26px | -0.1px | 400 | Intro paragraphs | `p.text-18` |
| `{type.body}` | 16px | 28.8px | -0.1px | 400 | Default body | `article#post-26056` |
| `{type.button}` | 14px | 25.2px | -0.1px | 400 | CTA Labels | `a.btn.m-0` |

### Principles
1. **Headings never use default spacing.** All display and heading levels (H1-H6) apply a consistent -0.1px letter-spacing for a tighter, more professional appearance.
2. **Weight signals hierarchy over color.** Midnight (#001949) is used for both body and headings; differentiation is achieved through weight shifts (400 to 600).
3. **Orange is for emphasis only.** The safety orange (#e95108) is never used for long-form body text, only for spans of 1-3 words within a heading.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 9 |
| `{space.sm}` | 16px | 40 |
| `{space.md}` | 20px | 17 |
| `{space.lg}` | 30px | 9 |
| `{space.section}` | 80px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main section containers | 359 occurrences |
| `{radius.sm}` | 4px | Primary Buttons | `radius: 4px` on Rounded Button |
| `{radius.md}` | 10px | Cards and Feature Blocks | `radius: 10px` on Surface components |
| `{radius.pill}` | 50px | Large decorative panels | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 1px 5px 0px` | Hovered cards or floating nav | Observed on 2 pages |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Request Demo, Read More)
**Pages observed:** Home, About
**Spec:** Background `{color.safety-orange}` (#e95108) | Text `{color.canvas}` (#ffffff) | Radius `{radius.sm}` (4px) | Padding 9px 18px | Typography `{type.button}`
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** About
**Spec:** Background `{color.canvas}` (#ffffff) | Text `{color.ink}` (#000000) | Border 1px `{color.foundation.cccccc}` | Radius 2px | Padding 9px
**States observed:** Default: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying ERP modules or capabilities
**Pages observed:** Home
**Spec:** Background transparent | Border 2px `{color.ash}` (#e9ecef) | Radius `{radius.md}` (10px) | Padding 20px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Midnight Section
**Role:** High-impact brand messaging or "Why Us" blocks
**Pages observed:** Home, About
**Spec:** Background `{color.midnight}` (#001949) | Text `{color.canvas}` (#ffffff) | Padding 80px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px (Standard Bootstrap container) |
| Section Gutter | 80px |
| Column Gap | 30px |

## Do's
- Use Midnight (#001949) for all primary text to maintain enterprise authority.
- Apply -0.1px letter spacing to all Poppins headings.
- Reserve Safety Orange (#e95108) for the single most important action on a screen.
- Use 80px vertical padding to separate major content narratives.
- Use 10px border radius for interactive cards to soften the industrial aesthetic.

## Don'ts
- **Wrong:** Using Safety Orange for body text. **Right:** Use Midnight. **Reason:** Orange text fails accessibility and brand hierarchy in long-form.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use 4px radius. **Reason:** Buttons must be distinct from section containers.
- **Wrong:** Labeling Electric Blue (#0072ff) as the primary brand color. **Right:** It is an accent. **Reason:** Midnight (#001949) has 19x more occurrences and defines the brand's visual weight.

## Quick start

```css
:root {
  --sourcepro-midnight: #001949;
  --sourcepro-orange: #e95108;
  --sourcepro-ash: #e9ecef;
  --sourcepro-font: 'Poppins', sans-serif;
  --sourcepro-radius-card: 10px;
  --sourcepro-radius-btn: 4px;
}
```

## Agent prompt examples
- "Generate a hero section for Sourcepro using a Midnight #001949 background, Poppins 500 weight headings in White, and a primary CTA button in Safety Orange #e95108 with a 4px radius."
- "Create a 3-column feature grid where each card has a 2px border in #e9ecef and a 10px border radius, using Poppins 600 for the titles."
- "Design a contact form with 2px rounded inputs and a #e95108 submit button."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://sourcepro.co.in | Desktop 1440 | 2026-06-06 |
| About | https://sourcepro.co.in/about | Desktop 1440 | 2026-06-06 |