# Sovainfotech Design System

> Corporate blue utility anchored by sharp geometric containers and high-contrast information density.

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

## TL;DR
Sovainfotech utilizes a "monochrome-plus" system where a foundational achromatic palette of white (#ffffff) and black (#000000) is energized by a primary corporate blue (#337ab7). The system relies on sharp 0px radii for most structural containers, creating a rigid, professional grid. Typography is functional, pairing the humanist sans-serif Open Sans for body and navigation with Montserrat for structured headings. Visual hierarchy is established through high-contrast sectioning, often alternating between pure white surfaces and saturated blue or orange accent bands.

## Signature DNA
1. **Sharp-Edge Professionalism** (The pervasive use of 0px border-radius on primary containers and buttons creates a legacy corporate aesthetic, visible on all main landing sections).
2. **The "Action Blue" Accent** (#337ab7 is the workhorse color for links and primary text emphasis, providing the only consistent chromatic thread across the white canvas).
3. **High-Density Information Grids** (Use of 16px Open Sans with generous line heights (45px-60px) in feature blocks to ensure legibility within dense service lists).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Primary surface, button text, borders | 134 | 0.8 | computed_style |
| `{color.black}` | #000000 | Primary text, heavy borders, dark surfaces | 87 | 0.8 | computed_style |
| `{color.charcoal}` | #222222 | Secondary text, navigation borders | 16 | 0.8 | computed_style |
| `{color.silver}` | #cccccc | Default form and container borders | 12 | 0.8 | computed_style |
| `{color.gray-dark}` | #535353 | Muted body text | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.blue-corporate}` | #337ab7 | Primary link color, emphasized text | 37 | 0.8 | computed_style |
| `{color.blue-deep}` | #022335 | Footer headings, dark text accents | 7 | 0.6 | computed_style |
| `{color.orange-vivid}` | #ff8a0d | Call-to-action bands, highlight surfaces | 6 | 0.6 | computed_style |
| `{color.blue-sky}` | #19bdef | Primary button backgrounds, cyan accents | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| montserratregular | 100, 400, 500, 700 | Primary Headings | Montserrat | Google Fonts |
| open_sansregular | 400, 500, 700 | Body, Nav, Subheadings | Open Sans | Google Fonts |
| Glyphicons Halflings | 400 | UI Icons (Carousel) | N/A | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 30px | 45px | normal | 400 | Carousel Controls | `span.glyphicon-chevron-left` |
| `{type.h1}` | 28px | 30.8px | normal | 700 | Section Labels | `label` |
| `{type.h2}` | 20px | normal | normal | 400 | Carousel Nav | `a.carousel-control` |
| `{type.h3}` | 17px | 18.7px | normal | 500 | Section Headers | `h2` |
| `{type.body-lg}` | 17px | 25px | normal | 400 | Intro Paragraphs | `p:nth-of-type(1)` |
| `{type.body}` | 16px | 60px | normal | 400 | Feature Blocks | `div.friendly-one` |
| `{type.body-bold}` | 16px | 17.6px | normal | 700 | Bold Subheadings | `h2` |
| `{type.nav}` | 16px | 45px | normal | 400 | Top Navigation | `header.header a` |
| `{type.caption}` | 12px | 75px | normal | 700 | Small Links | `a` |

### Principles
1. **Vertical Breathing** (Body text often uses extremely tall line-heights (60px for 16px text) to separate information in dense grids).
2. **Weight Contrast** (Headings consistently use 700 weight Montserrat to anchor sections against 400 weight body text).
3. **Achromatic Hierarchy** (Black #000000 is reserved for critical text, while Blue #337ab7 signals interactivity).

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 19 |
| `{space.sm}` | 10px | 54 |
| `{space.md}` | 20px | 20 |
| `{space.lg}` | 40px | 4 |
| `{space.xl}` | 50px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Buttons, Cards, Sections | `header.header`, `div.friendly-one` |
| `{radius.input}` | 2px | Form Text Inputs | `input#femail` |
| `{radius.control}` | 3px | Search/Contact Fields | `Surface` component |
| `{radius.pill}` | 10px | Secondary UI Controls | `Surface` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | rgb(128, 128, 128) 0px 0px 8px 0px | Hovered or active elements | `shadows` array |

## Components
### Tier 1: Foundational
#### Text Input
**Role:** User data entry in contact forms.
**Pages observed:** https://sovainfotech.com
**Spec:** Background #ffffff / Text #000000 / Border #cccccc / Radius 2px / Padding 6px / Typography 15px Open Sans.
**States observed:** Default: captured | Hover/Focus: not captured.

### Tier 2: Patterns
#### Service Card
**Role:** Displaying core business offerings.
**Pages observed:** https://sovainfotech.com
**Spec:** Background #2a8dc1 / Text #ffffff / Border #155d82 (2px) / Radius 4px / Padding 0px / Typography 16px Open Sans.
**States observed:** Default: captured.

#### Contact Surface
**Role:** High-visibility contact or info bands.
**Pages observed:** https://sovainfotech.com
**Spec:** Background #ff8a0d / Text #000000 / Border #000000 (0px) / Radius 0px / Padding 15px / Typography 16px Open Sans.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Dark Overlay Surface
**Role:** Navigation or modal background context.
**Pages observed:** https://sovainfotech.com
**Spec:** Background rgba(0, 0, 0, 0.8) / Text #337ab7 / Border #337ab7 (0px) / Radius 0px / Padding 0px.
**States observed:** Default: captured.

#### Transparent Action Surface
**Role:** Secondary interactions or ghost buttons.
**Pages observed:** https://sovainfotech.com
**Spec:** Background rgba(0, 0, 0, 0) / Text #ffffff / Border #ffffff (1px) / Radius 0px / Padding 0px / Typography 14px Open Sans.
**States observed:** Default: captured.

#### Form Container
**Role:** Grouping input fields.
**Pages observed:** https://sovainfotech.com
**Spec:** Background rgba(0, 0, 0, 0) / Text #000000 / Border #cccccc (1px) / Radius 3px / Padding 10px / Typography 16px Open Sans.

## Layout
| Property | Value |
|---|---|
| Max Content Width | ~1170px (Standard Bootstrap Container) |
| Section Padding | 50px (vertical) |
| Grid | 12-column fluid |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Navigation collapses to hamburger; line-heights compress. |
| Desktop | >1024px | Full horizontal navigation; multi-column service grids. |

## Imagery & decoration
The brand uses literal iconography (illustrative icons for "IT Consultancy", "Web Design") and photographic carousels. It avoids abstract gradients, preferring solid color blocks and sharp dividers.

## Do's
- Use #337ab7 for all primary text links.
- Maintain 0px border-radius for all primary section containers.
- Use Montserrat (700) for all top-level section headings.
- Ensure 10px (`{space.sm}`) padding between form elements.
- Use #cccccc for all default input borders.

## Don'ts
- **Wrong:** Using rounded corners (e.g., 8px) on primary CTA buttons. **Right:** 0px radius. **Reason:** Brand identity relies on sharp, geometric professionalism.
- **Wrong:** Using #19bdef (Sub-brand Cyan) for parent body text. **Right:** #000000 or #222222. **Reason:** High contrast legibility is required for parent informational density.
- Do not use serif fonts for body copy.
- Do not use shadows on standard content cards; reserve for active/hover states only.

## Similar brands
- Infosys
- Wipro
- Tata Consultancy Services (TCS)
- HCLTech

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #337ab7;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-border: #cccccc;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-sharp: 0px;
  --space-sm: 10px;
}
```

## Agent prompt examples
- "Generate a service card using #2a8dc1 background, 2px border of #155d82, and 0px border-radius with white Open Sans text."
- "Create a contact form layout with #cccccc borders, 2px radius on inputs, and a primary button using #19bdef background."
- "Design a section header using Montserrat Bold at 28px with a 5px bottom margin."

## Known gaps
- Hover and Active states for buttons were not fully captured in the automated crawl.
- Mobile-specific breakpoint transitions for typography were inferred from common patterns rather than explicit tokens.

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