# Hrindiasolutions Design System

> Professional corporate blue anchored by high-contrast navy actions and soft geometric card surfaces.

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

## TL;DR
Hrindiasolutions utilizes a deep navy primary color `#073070` for high-intent actions, contrasted against a clean white `#ffffff` and soft gray `#f5f7fa` foundation. The system is characterized by a "Corporate Blue" palette, utilizing various shades of azure and sky blue for secondary surfaces and iconography. Typography is strictly sans-serif, pairing Montserrat for authoritative headings with Mulish for legible body text. Layouts rely on generous vertical spacing and rounded geometric containers (ranging from 3px for inputs to 50px for panels) to maintain a modern, professional service aesthetic.

## Signature DNA
1. **The Navy Anchor** (Deep navy `#073070` or `#003163` is reserved for primary CTA buttons and footer backgrounds, providing a heavy visual weight to conversion points.)
2. **Soft-Toned Sectioning** (Alternating sections use `#f5f7fa` or light blue tints like `#eaf8ff` to break up long-form content without harsh dividers.)
3. **Circular Iconography** (Key service features and "Why Choose Us" sections are anchored by circular backgrounds (radius 50%) in varying blue tones like `#aacee7` and `#006fc4`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Primary canvas, card backgrounds, button text | 102 | 1.0 | Computed Style |
| `{color.slate.dark}` | `#212f3d` | Primary text, navigation links, section headers | 144 | 0.8 | Computed Style |
| `{color.gray.light}` | `#f5f7fa` | Secondary section backgrounds, subtle UI plates | 65 | 0.8 | Computed Style |
| `{color.charcoal}` | `#404040` | Default body text, descriptive paragraphs | 95 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary.navy}` | `#073070` | Primary CTA background, active borders | 12 | 0.8 | Computed Style |
| `{color.primary.blue}` | `#0074db` | Link text, icon accents, secondary headings | 52 | 0.8 | Computed Style |
| `{color.blue.brand}` | `#006fc4` | Service icon backgrounds, primary brand moments | 30 | 0.8 | Computed Style |
| `{color.blue.soft}` | `#aacee7` | Decorative icon plates, secondary surface tints | 15 | 0.8 | Computed Style |
| `{color.whatsapp}` | `#25d366` | Floating contact action (decorative_only) | 2 | 1.0 | Brand Page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 500, 600, 700, 800 | Headings, Display, Subheadings | Montserrat (Google Fonts) | OFL |
| Mulish | 300, 400, 500, 600, 700, 800 | Body, UI Labels, Buttons | Mulish (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 46px | 73.6px | normal | 700 | Hero headlines | `h3#headline-343-9` |
| `{type.h1}` | 36px | 57.6px | normal | 700 | Page titles | `h1` |
| `{type.h2}` | 30px | 48px | normal | 700 | Section headers | `h1#headline-674-150` |
| `{type.h3}` | 24px | 38.4px | normal | 700 | Subsection titles | `div#text_block-344-9` |
| `{type.subheading}` | 18px | 28.8px | normal | 600 | Feature labels | `h4#headline-18-5` |
| `{type.body.lg}` | 18px | 25.2px | normal | 600 | Lead paragraphs | `div#text_block-46-5` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Standard running text | `section#section-192-105` |
| `{type.button}` | 16px | 25.6px | normal | 700 | CTA labels | `a#link_button-191-105` |
| `{type.caption}` | 12px | 16.8px | normal | 500 | Small annotations | `span#span-409-150-1` |

### Principles
1. **Heading Authority:** All major headlines use Montserrat at weight 700 for a bold, professional presence.
2. **Body Legibility:** Mulish is used for all descriptive content with a standard line-height of 1.6x (25.6px for 16px text).
3. **High Contrast Links:** Interactive text links use `{color.primary.blue}` (#0074db) to distinguish from static body text.

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 16 |
| `{space.sm}` | 10px | 70 |
| `{space.md}` | 15px | 56 |
| `{space.lg}` | 20px | 17 |
| `{space.xl}` | 25px | 10 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sm}` | 3px | Primary Buttons, Inputs | Rounded Button component |
| `{radius.md}` | 8px | Feature Cards | Card component |
| `{radius.lg}` | 10px | Content Containers | Surface component |
| `{radius.full}` | 50% | Icon Plates, Avatars | Card (Circular) component |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.inset}` | `rgba(0, 0, 0, 0.04) 5px 5px 5px 0px inset` | Subtle section depth | Surface component |
| `{shadow.floating}` | `rgba(0, 0, 0, 0.5) 0px 0px 11px 0px` | Floating action buttons | WhatsApp Card component |

## Components

### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and secondary call-to-action.
**Pages observed:** 2
**Spec:** Background `{color.primary.navy}` (#073070) | Text `{color.white}` (#ffffff) | Radius 3px | Padding 10px 16px | Typography `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface Plate
**Role:** Background container for sections or content blocks.
**Pages observed:** 2
**Spec:** Background `{color.gray.light}` (#f5f7fa) | Text `{color.slate.dark}` (#212f3d) | Radius 0px | Padding 0px
**States observed:** Default

### Tier 2: Patterns
#### Service Icon Plate
**Role:** Circular background for service-level iconography.
**Pages observed:** 2
**Spec:** Background `{color.blue.brand}` (#0270c3) | Text `{color.white}` (#ffffff) | Radius 50% | Padding 20px
**States observed:** Default

#### Feature Card
**Role:** Information blocks for "Why Choose Us" or "Our Services".
**Pages observed:** 2
**Spec:** Background `{color.white}` (#ffffff) | Border 2px `{color.gray.light}` (#efeded) | Radius 8px | Padding 15px
**States observed:** Default

### Tier 3: Surface-specific
#### Floating WhatsApp Action
**Role:** Persistent contact trigger.
**Pages observed:** 2
**Spec:** Background `#25d366` | Text `{color.charcoal}` (#404040) | Radius 50% | Padding 16px | Shadow `{shadow.floating}`
**States observed:** Default

#### Testimonial Card
**Role:** Social proof blocks with soft color backgrounds.
**Pages observed:** 2
**Spec:** Background `#eaf8ff` (or similar pastel) | Radius 10px | Padding 30px | Typography `{type.body}`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | ~1200px |
| Section Vertical Padding | 60px - 100px |
| Grid Gutter | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Single column stack, centered headings, reduced hero font-size |
| Desktop | 1440px | Multi-column grids (3-up for services), horizontal navigation |

## Imagery & decoration
- **Photography:** Features professional corporate imagery with a focus on diverse teams and human interaction.
- **Graphic Elements:** Uses circular "plates" behind icons and soft-edged geometric shapes to frame content.
- **Avoidance:** No harsh gradients, no neon colors (except for the functional WhatsApp green), and no sharp-cornered primary buttons.

## Do's
- Use Montserrat 700 for all section headlines to maintain brand authority.
- Apply `{color.primary.navy}` (#073070) for the most important conversion button on any page.
- Use `{color.gray.light}` (#f5f7fa) to distinguish alternating content sections.
- Ensure all service icons are contained within a 50% radius circular plate.
- Maintain a 1.6x line-height on all Mulish body text for readability.

## Don'ts
- **Wrong:** Using `#25d366` for a primary site CTA. **Right:** Use `#073070`. **Reason:** The green is reserved strictly for the WhatsApp integration.
- Do not use Montserrat for long-form body text; it is reserved for headings.
- Do not use sharp 0px corners on buttons; always apply at least a 3px radius.
- Avoid using pure black (#000000) for text; use `{color.slate.dark}` (#212f3d) instead.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary-navy: #073070;
  --color-primary-blue: #0074db;
  --color-slate-dark: #212f3d;
  --color-gray-light: #f5f7fa;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Mulish', sans-serif;
  --radius-button: 3px;
  --radius-card: 8px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Hrindiasolutions navy color #073070, 3px border radius, and Montserrat 700 bold text."
- "Design a service feature section with a 3-column grid, using circular icon plates in #006fc4 and Mulish body text at 16px."
- "Generate a content section background using the brand's soft gray #f5f7fa and a Montserrat headline at 30px."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the static evidence.
- The exact transition logic for mobile navigation menus was not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://hrindiasolutions.com | Desktop 1440 | 2026-06-06 |
| About Us | https://hrindiasolutions.com/about | Desktop 1440 | 2026-06-06 |
| Homepage (Mobile) | https://hrindiasolutions.com | Mobile 390 | 2026-06-06 |