# Holisticsecurities.in Design System

> A utilitarian, high-contrast monochrome framework punctuated by sharp geometric containers and a singular high-visibility accent.

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

## TL;DR
Holisticsecurities.in utilizes a strict monochrome foundation of pure white `#ffffff` and deep charcoal `#3f3f3f`, creating a professional, high-contrast environment. The system is built on the **Montserrat** typeface, using bold weights (700) for structural headings and medium weights (500) for navigation and UI labels. A singular accent color, `#ff970b` (Safety Orange), is reserved for high-impact contact zones and critical brand markers. Layouts are characterized by sharp 0px corners, 1px light gray borders `#dddddd`, and a generous 25px internal padding rhythm that maintains a clean, industrial aesthetic.

## Signature DNA
1. **Sharp-Edge Geometry** (The system explicitly avoids rounded corners, using `{radii.sharp}` (0px) for all containers, buttons, and image frames to project a rigid, secure posture.)
2. **Safety Orange Contact Zone** (The use of `#ff970b` as a full-width footer background creates a massive visual anchor for conversion, contrasting against the grayscale body.)
3. **Montserrat Hierarchy** (The brand relies exclusively on Montserrat, using tracking (2px) on navigation links and tight line-heights on headings to create a dense, authoritative typographic texture.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Primary page background and card surface | 19 | 0.8 | computed_style |
| `{colors.ink-strong}` | `#3f3f3f` | Primary body text and secondary headings | 17 | 0.8 | computed_style |
| `{colors.ink-muted}` | `#777777` | De-emphasized body text and metadata | 24 | 0.8 | computed_style |
| `{colors.ink-deep}` | `#000000` | Navigation bar background and primary titles | 7 | 0.6 | computed_style |
| `{colors.border}` | `#dddddd` | 1px structural dividers and card outlines | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.accent}` | `#ff970b` | Contact section background; decorative_only | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 700 | All headings, body, and UI | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.h2}` | 25px | 25px | normal | 700 | Section titles | `h2` |
| `{typography.h3}` | 20px | 20px | normal | 700 | Sub-section titles | `h3` |
| `{typography.body-lg}` | 18px | 18px | normal | 400 | Introductory text | `h8` |
| `{typography.nav}` | 14px | 14px | 2px | 500 | Top navigation links | `a` |
| `{typography.body}` | 14px | 25px | normal | 400 | Standard running text | `header` |
| `{typography.body-sm}` | 13px | 25px | normal | 400 | Paragraph blocks | `p` |
| `{typography.label}` | 15px | 25px | normal | 500 | Inline emphasis | `span` |
| `{typography.list}` | 14px | 14px | normal | 400 | Active list items | `li.active` |

### Principles
1. **Vertical Compactness:** Headings use 1:1 size-to-line-height ratios (e.g., 25px/25px) for maximum density.
2. **Navigation Tracking:** Interactive links in the header utilize 2px letter spacing to distinguish them from static text.
3. **Weight as Hierarchy:** Structural shifts are signaled by jumping from 400 (body) to 700 (heading) weight, skipping intermediate weights for clarity.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 10px | 25 |
| `{spacing.sm}` | 17px | 5 |
| `{spacing.md}` | 25px | 3 |
| `{spacing.lg}` | 30px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radii.sharp}` | 0px | All containers, buttons, and cards | 70 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | All surfaces are flat; depth is created via borders | 1px `#dddddd` border |

## Components

### Tier 1: Foundational

#### Top Navigation
**Role:** Global site navigation and brand identification.
**Pages observed:** All
**Spec:** Background `#000000` | Text `#ffffff` | Height 40px | Typography `{typography.nav}`
**States observed:** Default | Active: captured

#### Info Card
**Role:** Feature highlights (About Us, Services, etc.).
**Pages observed:** https://holisticsecurities.in
**Spec:** Background `#ffffff` | Border 1px `#dddddd` | Radius 0px | Padding 25px
**States observed:** Default: captured

### Tier 2: Patterns

#### Contact Anchor
**Role:** High-visibility footer for lead generation.
**Pages observed:** https://holisticsecurities.in
**Spec:** Background `#ff970b` | Text `#ffffff` | Padding 30px | Typography `{typography.h2}`
**States observed:** Default: captured

#### Image Slider
**Role:** Hero visual showcase.
**Pages observed:** https://holisticsecurities.in
**Spec:** Border 1px `#dddddd` | Radius 0px | Controls Background `#000000` (alpha 0.5)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Section Header
**Role:** Standardized page section titling.
**Pages observed:** https://holisticsecurities.in
**Spec:** Text `#3f3f3f` | Typography `{typography.h2}` | Margin-bottom 25px
**States observed:** Default: captured

#### List Item
**Role:** Bulleted content in feature cards.
**Pages observed:** https://holisticsecurities.in
**Spec:** Text `#777777` | Typography `{typography.body-sm}` | Bullet color `#777777`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px |
| Section Gutter | 30px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |

## Do's
- Use `#ffffff` for all primary card surfaces to maintain high contrast.
- Apply `0px` border-radius to every UI element without exception.
- Set `letter-spacing: 2px` for all uppercase navigation items.
- Reserve `#ff970b` exclusively for the Contact section background.
- Use 1px `#dddddd` borders for subtle container definition on white backgrounds.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px sharp corners. **Reason:** Brand identity is built on industrial rigidity.
- **Wrong:** Using `#ff970b` for body text. **Right:** Use `#3f3f3f`. **Reason:** Orange is a structural background accent, not a reading color.
- **Wrong:** Introducing drop shadows for depth. **Right:** Use 1px borders. **Reason:** The system is strictly flat.
- **Wrong:** Using a sub-brand color as the primary canvas. **Right:** Canvas must remain `#ffffff`.

## Quick start

```css
/* CSS Variables */
:root {
  --color-canvas: #ffffff;
  --color-ink-strong: #3f3f3f;
  --color-accent: #ff970b;
  --font-main: 'Montserrat', sans-serif;
  --radius-sharp: 0px;
  --spacing-base: 10px;
}
```

## Known gaps
- Hover states for navigation items were not explicitly captured in the computed style evidence.
- Form input styles (text fields, submit buttons) were not present on the analyzed pages.
- Secondary accent colors for success/error states were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://holisticsecurities.in | Desktop 1440px | 2026-06-06 |
| Mobile Home | https://holisticsecurities.in | Mobile 390px | 2026-06-06 |