# Winweb.co.il Design System

> A corporate blue canvas punctuated by sharp Almoni-Tzar headlines and high-contrast white surfaces.

**Source:** https://winweb.co.il | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Winweb utilizes a professional "monochrome-plus-one" system, where a deep Navy Blue (#003399) serves as the primary structural and interactive anchor against a pure white (#ffffff) background. Typography is the system's primary differentiator, pairing the high-character Hebrew serif **Almoni-Tzar** for display and headings with the highly legible **Open Sans** for body and UI. The layout is characterized by sharp 0px corners on major containers and a distinct lack of shadows, relying on 1px borders and solid color blocks to define hierarchy.

## Signature DNA
1. **The Almoni-Tzar Serif Anchor:** Large-scale display type (up to 85px) uses Almoni-Tzar with 1px letter spacing, creating a prestigious, established feel across all landing pages.
2. **Sharp-Edge Geometry:** A strict adherence to 0px border radii for cards, sections, and primary containers, creating a "blocky" and architectural layout.
3. **Navy Structuralism:** Use of #003399 not just for accents, but as a primary text color for headings and button labels, ensuring high contrast (10.9:1) and brand consistency.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button backgrounds | 39 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary body text, dark section backgrounds | 79 | 1.0 | `--wp--preset--color--black` |
| `{color.gray-border}` | `#e2e2e2` | Form borders, subtle dividers | 12 | 0.8 | `--eab-border-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#003399` | Headings, primary button text, icons | 15 | 0.8 | Computed Style |
| `{color.secondary}` | `#223e92` | Secondary text emphasis | 8 | 0.6 | Computed Style |
| `{color.action-red}` | `#ed1d3b` | Footer accents, specific borders | 5 | 0.6 | Computed Style |
| `{color.vivid-red}` | `#cf2e2e` | Submit button background | 3 | 0.7 | `--wp--preset--color--vivid-red` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#28a745` | Success states (declared) |
| `{color.error}` | `#dc3545` | Error states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Almoni-Tzar | 300, 400, 700 | Heading / Display | Frank Ruhl Libre | Licensed |
| Open Sans | 400, 700 | Body / UI | Open Sans (Google) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 85px | 85px | 1px | 400 | Hero Headlines | `h2.elementor-heading-title` |
| `{type.display-md}` | 50px | 60px | 1px | 400 | Section Titles | `h2` |
| `{type.heading-lg}` | 35px | 35px | 1px | 700 | Sub-section Heads | `h3` |
| `{type.heading-md}` | 30px | 20px | normal | 400 | Nav Links | `a#sm-1780723541624436-1` |
| `{type.heading-sm}` | 26px | 26px | 1px | 700 | CTA Buttons | `a.elementor-button` |
| `{type.body-lg}` | 23px | 32px | normal | 400 | Lead Paragraphs | `span:nth-of-type(1)` |
| `{type.body-md}` | 22px | 32px | normal | 400 | Standard Paragraphs | `p` |
| `{type.body-sm}` | 16px | 24px | normal | 400 | Small UI / Buttons | `button#readlinkrmwr` |

### Principles
1. **Serif for Authority:** All major information hierarchy starts with Almoni-Tzar; sans-serif is reserved for functional description.
2. **Tight Line Heights:** Display type often uses 1:1 line height (e.g., 85px/85px) to maintain a compact, high-impact look.
3. **Letter Spacing on Display:** A consistent 1px tracking is applied to Almoni-Tzar headings to improve readability at large scales.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 16px | 14 |
| `{space.md}` | 24px | 12 |
| `{space.lg}` | 32px | 10 |
| `{space.xl}` | 50px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Sections, Containers | 137 occurrences |
| `{radius.input}` | 3px | Form inputs, specific buttons | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{elev.flat}` | none | All cards and sections | Default state across pages |

## Components
### Tier 1: Foundational
#### Primary Button (Outline)
**Role:** Main call to action
**Pages observed:** `about`, `pricing`
**Spec:** Background: #ffffff | Text: #003399 | Border: 1px #003399 | Radius: 3px | Font: Almoni-Tzar 26px/700
**States observed:** Default | Hover: captured (color swap)

#### Form Input
**Role:** Lead generation fields
**Pages observed:** `homepage`
**Spec:** Background: #ffffff | Border: 1px #e2e2e2 | Radius: 3px | Padding: 10px
**States observed:** Default | Focus: captured

### Tier 2: Patterns
#### Service Card
**Role:** Displaying service offerings
**Pages observed:** `homepage`, `about`
**Spec:** Background: #ffffff | Border: 1px #e2e2e2 | Radius: 0px | Padding: 30px
**States observed:** Default

#### Testimonial Card
**Role:** Social proof
**Pages observed:** `homepage`
**Spec:** Background: #ffffff | Border: 1px #e2e2e2 | Radius: 0px | Typography: Open Sans 22px

### Tier 3: Surface-specific
#### Contact Strip
**Role:** Bottom-of-page conversion
**Pages observed:** `homepage`, `about`
**Spec:** Background: #003399 | Text: #ffffff | Button: #cf2e2e (Vivid Red)
**States observed:** Default

#### Footer Navigation
**Role:** Site-wide map
**Pages observed:** `homepage`, `pricing`
**Spec:** Background: #ffffff | Border-Top: 4px multi-color (Navy, Red, Green, Orange) | Text: #003399

## Layout
| Property | Value |
|------|-------|
| Max-width | 1140px |
| Section Padding | 50px (vertical) |
| Grid | 12-column (Elementor based) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Headings scale to 35px; 1-column stack; Menu becomes hamburger |
| Desktop | 1440px | Full 1140px container; multi-column service grids |

## Imagery & decoration
- **Hero Imagery:** High-action, high-contrast photography (e.g., skiing) with a blue color cast.
- **Iconography:** Simple, thin-stroke blue icons (#003399).
- **Color Strips:** A signature 4-color horizontal strip (Navy, Red, Green, Orange) used as a divider above the footer.

## Do's
- Use **Almoni-Tzar** for all text larger than 26px.
- Maintain **0px border radius** for all content cards.
- Use **#003399** for primary headings to ensure brand alignment.
- Apply **1px letter spacing** to display headings.
- Ensure all forms use the **3px radius** for inputs.

## Don'ts
- **Don't** use soft shadows; hierarchy must be defined by borders or background color shifts.
- **Don't** use #007bff (standard blue) for primary actions; always use the brand Navy #003399.
- **Don't** round the corners of section containers; keep them sharp (0px).
- **Don't** use Almoni-Tzar for long-form body text; switch to Open Sans at 22px.

## Similar brands
- Wix (Structural block layouts)
- IBM (Blue-centric corporate typography)
- Ha'aretz (Hebrew serif-first editorial feel)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --winweb-primary: #003399;
  --winweb-accent-red: #cf2e2e;
  --winweb-bg: #ffffff;
  --winweb-text-main: #000000;
  --winweb-font-display: 'almoni-tzar', serif;
  --winweb-font-body: 'Open Sans', sans-serif;
  --winweb-radius-sharp: 0px;
  --winweb-radius-ui: 3px;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated crawl.
- Mobile menu transition speeds and easing functions were not documented.
- Exact padding for the mobile hero section varies by page and requires manual normalization.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | `https://winweb.co.il` | 1440x900 | 2026-06-06 |
| About | `https://winweb.co.il/about` | 1440x900 | 2026-06-06 |
| Pricing | `https://winweb.co.il/pricing` | 390x844 | 2026-06-06 |