# Hinda Design System

> Deep plum accents and heavy-weight Open Sans headlines anchored by high-contrast white and pale cyan surfaces.

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

## TL;DR
Hinda utilizes a high-contrast palette dominated by a signature deep plum (#56004e) and a charcoal gray (#373e3e) on a clean white foundation. The system relies heavily on **Open Sans**, specifically utilizing the 900 weight for display and primary button labels to create a sense of corporate stability and impact. Layouts alternate between stark white sections and full-bleed atmospheric bands of pale cyan (#b8e8fc) or deep plum. Components feature a consistent 10px border radius for interactive elements, while larger layout panels use a softer 50px radius.

## Signature DNA
1. **The Plum Anchor** (Deep plum #56004e used as the primary brand signal for headers, buttons, and high-impact section backgrounds across all pages).
2. **Ultra-Heavy Typography** (Open Sans at weight 900 is the primary display driver, used for both H1/H2 headlines and button labels to project authority).
3. **Atmospheric Banding** (Alternating sections between pure white #ffffff and pale cyan #b8e8fc to create visual rhythm).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Backgrounds, button text, canvas | 37 | 1.0 | `computed_style` |
| `{color.charcoal}` | `#373e3e` | Primary body text | 30 | 0.8 | `computed_style` |
| `{color.black}` | `#000000` | Footer backgrounds, deep surfaces | 2 | 1.0 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.plum}` | `#56004e` | Primary brand color, buttons, headings | 20 | 0.8 | `computed_style` |
| `{color.sky}` | `#b8e8fc` | Secondary section backgrounds | 4 | 0.6 | `computed_style` |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Open Sans | 400, 700, 900 | Display, Body, UI | Open Sans (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 64px | 70.4px | normal | 900 | Hero H1 | `h1.elementor-heading-title` |
| `{type.h2}` | 36px | 39.6px | normal | 900 | Section Headings | `h2.elementor-heading-title` |
| `{type.testimonial}` | 24px | 31.2px | normal | 400 | Testimonial Text | `div.elementor-testimonial__text` |
| `{type.container}` | 20px | 32px | normal | 400 | Widget Content | `div.elementor-widget-container` |
| `{type.button}` | 18px | 23.4px | normal | 900 | Primary CTA | `a.elementor-button` |
| `{type.body-bold}` | 18px | 28.8px | normal | 700 | Names/Emphasis | `span.elementor-testimonial__name` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Standard Prose | `section.elementor-section` |
| `{type.caption}` | 16px | 24px | normal | 400 | Sub-labels | `span.elementor-testimonial__title` |
| `{type.body-tracked}`| 16px | 25.6px | 0.6px | 900 | High-impact Body | `p` |

### Principles
1. **Weight as Hierarchy:** Use 900 weight for all primary actions and structural headings.
2. **Tight Display Leading:** Large headlines maintain a tight 1.1x line height.
3. **Generous Body Leading:** Body text uses a 1.6x line height (25.6px on 16px base) for readability.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 6px | 3 |
| `{space.sm}` | 11px | 5 |
| `{space.md}` | 14px | 8 |
| `{space.lg}` | 18px | 5 |
| `{space.section}` | 64px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Layout sections, cards | `occurrences: 73` |
| `{radius.md}` | 10px | Buttons, form controls | `occurrences: 5` |
| `{radius.xl}` | 50px | Large decorative panels | `occurrences: 3` |

## Elevation
*Not captured in source. System appears flat with no observed box-shadows on components.*

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary call to action
**Pages observed:** All
**Spec:** Background: `{color.plum}` (#56004e) / Text: `{color.white}` (#ffffff) / Radius: 10px / Padding: 10.8px 18px / Typography: `{type.button}` (18px/900)
**States observed:** Default | Hover: Not captured | Active: Not captured

### Tier 2: Patterns
#### Testimonial Block
**Role:** Social proof sections
**Pages observed:** https://hinda.com
**Spec:** Text: `{color.white}` (#ffffff) / Font: Open Sans 400 (24px) / Name Font: Open Sans 700 (18px) / Background: Observed on orange/plum bands.

### Tier 3: Surface-specific
#### Atmospheric Surface
**Role:** Sectional banding
**Pages observed:** All
**Spec:** Background: `{color.sky}` (#b8e8fc) / Text: `{color.charcoal}` (#373e3e) / Padding: 64px 0px / Radius: 0px

#### Plum Surface
**Role:** High-impact footer or feature band
**Pages observed:** All
**Spec:** Background: `{color.plum}` (#56004e) / Text: `{color.white}` (#ffffff) / Padding: 64px 0px

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 64px (Vertical) |
| Content Max-Width | ~1140px |
| Column Gap | 20px-30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; text aligns center in hero. |
| Desktop | 1440px | Multi-column layouts (3-up for features). |

## Imagery & decoration
- **Iconography:** Thin-line, technical-style illustrations (gears, lightbulbs, chess pieces) often overlaid on photography.
- **Photography:** High-key, professional lifestyle shots of diverse teams, often with circular or rounded-corner masks.
- **Avoid:** Heavy drop shadows or complex gradients.

## Do's
- Use **Open Sans 900** for all primary buttons.
- Alternate sections between `{color.white}` and `{color.sky}` for long-form pages.
- Apply a **10px radius** to all interactive elements.
- Maintain **64px vertical spacing** between major content sections.
- Use `{color.charcoal}` (#373e3e) for long-form body text to reduce eye strain.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use Plum #56004e. **Reason:** Plum is the core brand identifier.
- **Wrong:** Using 700 weight for H1 headlines. **Right:** Use 900 weight. **Reason:** Brand voice requires maximum typographic weight for display.
- **Wrong:** Applying shadows to buttons. **Right:** Keep buttons flat. **Reason:** The system uses a flat, high-contrast aesthetic.

## Quick start

```css
/* CSS Variables */
:root {
  --hinda-plum: #56004e;
  --hinda-sky: #b8e8fc;
  --hinda-charcoal: #373e3e;
  --hinda-white: #ffffff;
  --hinda-radius-md: 10px;
  --hinda-font-main: 'Open Sans', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary button using Hinda brand specs: background #56004e, text #ffffff, font Open Sans weight 900, size 18px, and 10px border radius."
- "Create a section header using Hinda DNA: H2 tag, Open Sans weight 900, size 36px, color #56004e, with 64px top and bottom padding."
- "Design a content card with a white background, no shadow, and 0px border radius, containing body text in #373e3e at 16px."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Error and Success semantic tokens were not present on the analyzed marketing pages.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in the token set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://hinda.com | 1440px | 2026-06-06 |
| About Page | https://hinda.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://hinda.com | 390px | 2026-06-06 |