# Pragtech.co.in Design System

> A high-contrast enterprise interface pairing professional teal accents with deep slate foundations and bright functional yellow highlights.

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

## TL;DR
Pragtech.co.in utilizes a "monochrome-plus" system where a clean white canvas (#ffffff) is structured by deep slate surfaces (#2d3e50) and energized by a primary teal accent (#1bbc9b). The system relies on high-impact functional color, specifically a bright yellow (#ffff00) used for secondary CTAs and "View All" actions to ensure maximum visibility against the professional palette. Typography is a mix of Montserrat and Poppins for strong, geometric headings, while Inter provides a highly legible, neutral foundation for body text and technical data.

## Signature DNA
1. **The High-Contrast Utility Bar** (Bright yellow #ffff00 surfaces used exclusively for "Explore" and "View All" buttons, creating a distinct functional layer separate from the primary teal brand color.)
2. **Slate-to-Teal Professionalism** (The pairing of #2d3e50 slate backgrounds with #1bbc9b teal text or icons, establishing a "consulting-grade" visual authority across the about and pricing pages.)
3. **Geometric Sans Hierarchy** (The intentional use of Poppins for section subheadings at 18px/600 and Montserrat for primary headers, creating a structured, modern engineering feel.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background, card surfaces | 351 | 1.0 | Computed Style |
| `{color.text.primary}` | `#333333` | Default body text color | 234 | 0.8 | Computed Style |
| `{color.text.dark}` | `#000000` | High-emphasis text, footer headings | 63 | 0.8 | Computed Style |
| `{color.surface.muted}` | `#f9f9f9` | Secondary section backgrounds, card fills | 36 | 1.0 | Brand Page |
| `{color.border.light}` | `#eaecee` | Card and divider lines | 36 | 0.8 | Computed Style |
| `{color.surface.dark}` | `#222222` | Footer background | 21 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#1bbc9b` | Primary brand color, links, icons, active states | 231 | 0.8 | Computed Style |
| `{color.secondary}` | `#bec9dd` | Muted text, decorative icon backgrounds | 156 | 0.8 | Computed Style |
| `{color.accent.slate}` | `#2d3e50` | Hero backgrounds, deep-tone surfaces | 18 | 0.8 | Computed Style |
| `{color.accent.yellow}` | `#ffff00` | High-visibility CTAs, "View All" buttons | 15 | 0.8 | Computed Style |
| `{color.accent.orange}` | `#ff6600` | decorative_only (CTA variant) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 600, 700 | Primary Headings | Montserrat | Google Fonts |
| Poppins | 400, 600, 700 | Section Subheads | Poppins | Google Fonts |
| Inter | 400, 600, 700 | Body, UI, Navigation | Inter | Google Fonts |
| Font Awesome 6 Free | 900 | Icons | N/A | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 40px | 44px | normal | 600 | Timer/Hero stats | `span.jmm-timer` |
| `{text.h1}` | 38px | 41.8px | normal | 600 | Main page headers | `h1.main_header_odoo_17` |
| `{text.h2}` | 36px | 39.6px | normal | 600 | Section titles | `h2.text-center` |
| `{text.h3}` | 24px | 26.4px | normal | 700 | Sub-section headers | `h3.bottom_sub_text` |
| `{text.h4}` | 22px | 35.2px | normal | 600 | Component subtitles | `div.jmm-subtitle` |
| `{text.subhead}` | 18px | 19.8px | normal | 600 | Feature card titles | `h5` |
| `{text.body}` | 16px | 25.6px | normal | 400 | Standard body text | `section.top-navbar` |
| `{text.body.sm}` | 14px | 22.4px | normal | 400 | Footer, metadata | `footer#t3-footer` |
| `{text.caption}` | 12px | 21px | normal | 400 | Small buttons, labels | `a.viewmore_case.btn` |

### Principles
1. **Heading Weight Consistency**: Primary headers consistently use weight 600 (Montserrat/Poppins) to maintain a professional but not overly heavy appearance.
2. **High Line-Height for Body**: Body text at 16px utilizes a generous 25.6px (1.6) line height to ensure readability in long-form consulting content.
3. **Icon-Text Alignment**: Font Awesome icons are sized at 31px when used as section anchors to visually balance with 36px headings.

## Spacing
**Base unit:** 5px (derived from common 10px/20px/30px increments)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 42 |
| `{space.sm}` | 10px | 72 |
| `{space.md}` | 20px | 108 |
| `{space.lg}` | 30px | 90 |
| `{space.xl}` | 40px | 39 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Primary buttons, footer sections | 786 occurrences |
| `{radius.sm}` | 6px | Standard content cards | 48 occurrences |
| `{radius.md}` | 10px | Elevated feature cards | 54 occurrences |
| `{radius.lg}` | 12px | Glassmorphism/Overlay cards | 9 occurrences |
| `{radius.full}` | 50% | Circular avatars/icon containers | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default cards, footer | 36 occurrences |
| `{shadow.low}` | `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px` | Hover states for white cards | 24 occurrences |
| `{shadow.mid}` | `rgba(0, 0, 0, 0.08) 0px 4px 15px 0px` | Elevated feature cards | 18 occurrences |
| `{shadow.high}` | `rgba(31, 38, 135, 0.37) 0px 8px 32px 0px` | Dark overlay/glass cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: transparent (rgba(0,0,0,0)) | Text: #ffffff | Border: 1px solid #ffffff | Radius: 0px | Padding: 7px 30px | Typography: 12px Inter
**States observed:** Default | Hover: captured

#### Navigation
**Role:** Main site header
**Pages observed:** All
**Spec:** Background: #222222 | Text: #f2f2f2 | Border: 0px | Radius: 0px | Typography: 16px Inter

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services and solutions
**Pages observed:** Homepage, About
**Spec:** Background: #f9f9f9 | Text: #333333 | Border: 1px solid #eaecee | Radius: 10px | Padding: 20px | Shadow: none

#### Utility Card (Yellow)
**Role:** High-impact CTA blocks
**Pages observed:** Homepage, Pricing
**Spec:** Background: #ffff00 | Text: #1bbc9b | Border: 0px | Radius: 3px | Padding: 13px | Typography: 16px Inter

### Tier 3: Surface-specific

#### Glass Overlay Card
**Role:** Hero section content blocks
**Pages observed:** Homepage
**Spec:** Background: rgba(0, 0, 0, 0.6) | Text: #333333 | Border: 1px solid rgba(255, 255, 255, 0.18) | Radius: 10px | Shadow: rgba(31, 38, 135, 0.37) 0px 8px 32px 0px

#### Client Logo Surface
**Role:** Social proof grid
**Pages observed:** Homepage
**Spec:** Background: #ffffff | Text: #1bbc9b | Border: 1px solid #ffffff | Radius: 6px | Shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px |
| Section padding | 50px - 95px |
| Column gap | 30px |
| Grid system | 12-column Bootstrap-based |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; section padding reduces to 15px; cards stack 1-up. |
| Desktop | 1440px | 3-up and 4-up card grids; full horizontal navigation. |

## Imagery & decoration
Pragtech uses high-quality professional photography of office environments and collaborative teams. Visual interest is added via "Glassmorphism" (semi-transparent dark overlays with heavy blur and shadows) and the use of the teal brand color in iconography.

## Do's
- Use `#ffff00` (Yellow) for buttons that act as "View All" or "Explore" triggers.
- Apply `#1bbc9b` (Teal) to all inline links and primary icons.
- Maintain a `0px` border radius for primary navigation and footer elements.
- Use `#f9f9f9` for section backgrounds to separate content blocks from the main white canvas.
- Ensure all body text uses `Inter` at 16px with a line-height of 25.6px.

## Don'ts
- Do not use `#1bbc9b` (Teal) text on a `#ffffff` (White) background for small body text (Contrast ratio 2.4:1 is insufficient).
- Avoid rounded corners on primary buttons; keep them sharp (`0px`).
- Do not mix Montserrat and Poppins within the same text block; Montserrat is for primary headers, Poppins for subheads.
- Never use the yellow accent (`#ffff00`) for primary brand headings; it is strictly for functional UI components.

## Similar brands
- Odoo (Primary ecosystem partner)
- SAP (Enterprise ERP aesthetic)
- Deloitte (Professional services color blocking)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #1bbc9b;
  --color-secondary: #bec9dd;
  --color-accent-yellow: #ffff00;
  --color-slate: #2d3e50;
  --color-canvas: #ffffff;
  --color-surface-muted: #f9f9f9;
  --font-heading: 'Montserrat', sans-serif;
  --font-subheading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-card: 10px;
  --shadow-mid: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
}
```

## Agent prompt examples
- "Create a service feature card using a #f9f9f9 background, 10px border radius, and a 1px #eaecee border. The title should be Poppins 18px/600 in #333333."
- "Generate a primary CTA button with a #ffff00 background, #1bbc9b text, and 0px border radius."
- "Design a hero section with a #2d3e50 background and Montserrat 38px/600 headings in #ffffff."

## Known gaps
- Hover states for navigation items were not explicitly captured in the computed style tokens.
- Specific mobile-only font size adjustments for headers were not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://pragtech.co.in | 1440px | 2026-06-06 |
| Pricing | https://pragtech.co.in/pricing | 1440px | 2026-06-06 |
| About | https://pragtech.co.in/about | 1440px | 2026-06-06 |