# Zagile Design System

> Slab-serif authority meets high-contrast utility, anchored by a signature growth-green accent and stark monochrome foundations.

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

## TL;DR
Zagile utilizes a high-contrast "monochrome plus one" strategy, where a foundation of pure white (#ffffff) and deep charcoal (#4a4a4a) is punctuated by a vibrant primary green (#42a73d). The typography is a deliberate pairing of the sturdy, slab-serif **Roboto Slab** for headings and the clean, humanist **Open Sans** for body and UI. Layouts are structured around generous vertical padding (54px) and sharp, 0px border radii for most containers, creating a professional, engineering-focused atmosphere. Interactive elements frequently use pill-shaped geometry (30px to 40px radii) to soften the otherwise rigid grid.

## Signature DNA
1. **Slab-to-Sans Hierarchy** (Roboto Slab at weight 400-600 provides a technical, "blue-collar" authority for headlines, while Open Sans at weight 300-500 handles complex information density.)
2. **The Green Pivot** (The use of #42a73d as the sole functional color for CTAs and success states against a strictly achromatic background.)
3. **Sharp-Soft Contrast** (Content sections maintain 0px "sharp" corners, while primary actions and specific feature panels use extreme 30px+ "pill" rounding to signal interactivity.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Zagile (Parent) | #000000 | High-contrast bands | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--wp--preset--color--white` | #ffffff | Page background, button text, card surface | 52 | 1.0 | Computed |
| `--color-charcoal` | #4a4a4a | Primary body text, secondary icons | 105 | 0.8 | Computed |
| `--wp--preset--color--black` | #000000 | Dark section backgrounds, footer ink | 18 | 1.0 | Computed |
| `--color-border-subtle` | #d0d5d2 | Functional dividers, inactive states | 0 | 0.9 | Brand Page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-primary-green` | #42a73d | Primary CTA background, success signals | 9 | 0.6 | Computed |
| `--color-accent-blue` | #1c75bc | Inline text links, secondary emphasis | 22 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Roboto Slab | 400, 500, 600, 700 | Display, Headings | N/A (Google Font) | Apache 2.0 |
| Open Sans | 300, 400, 500, 700 | Body, UI, Navigation | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{text.display}` | 41px | 45.1px | normal | 400 | Hero H2 | `h2` |
| `{text.h3-bold}` | 35px | 38.5px | normal | 600 | Section Head | `h3` |
| `{text.h2-light}` | 32px | 35.2px | normal | 300 | Sub-hero | `h2` |
| `{text.ui-lg}` | 20px | 26px | normal | 500 | Article titles | `article` |
| `{text.body}` | 17px | 26px | normal | 400 | Default copy | `span` |
| `{text.link-bold}` | 16px | 14px | normal | 700 | Inline links | `a` |
| `{text.nav-item}` | 14px | 14px | normal | 600 | Header menu | `li.menu-item` |
| `{text.button-sm}` | 12px | 20.4px | normal | 500 | Footer buttons | `a.et_pb_button` |

### Principles
1. **Heading Weight Variation:** Roboto Slab is used at 400 for large display sizes but jumps to 600 for H3s to maintain visual weight.
2. **Humanist Body:** Open Sans is strictly used for long-form reading, typically at 17px with a generous 26px line height (1.53x).
3. **Lightweight Subheads:** Secondary headings often use Open Sans 300 to provide a stylistic break from the heavy slab-serif display.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 10px | 27 |
| `{space.md}` | 20px | 16 |
| `{space.section}` | 54px | 16 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Default containers, cards, standard buttons | 169 occurrences |
| `{radius.pill}` | 30px | Feature panels, specific UI containers | 4 occurrences |
| `{radius.full}` | 40px | Primary "Rounded Button" CTAs | 2 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | All observed surfaces | `shadow: none` in components |

## Components
### Tier 1: Foundational
#### Button
**Role:** Standard utility action
**Pages observed:** zagile.com
**Spec:** Background: transparent / Text: #ffffff / Border: #ffffff / Radius: 0px / Font: 12px Open Sans
**States observed:** Default | Hover: captured

#### Rounded Button
**Role:** Primary "Free Trial" CTA
**Pages observed:** zagile.com
**Spec:** Background: #42a73d / Text: #ffffff / Border: none / Radius: 40px / Font: Roboto Slab
**States observed:** Default | Active: captured

### Tier 2: Patterns
#### Surface Section
**Role:** Content banding
**Pages observed:** zagile.com
**Spec:** Background: #ffffff / Text: #4a4a4a / Padding: 54px 0px / Radius: 0px
**States observed:** Default: captured

#### Feature Card
**Role:** Product/Service highlights
**Pages observed:** zagile.com
**Spec:** Background: #ffffff / Text: #4a4a4a / Padding: 20px / Radius: 0px / Font: 17px Open Sans
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Dark Footer
**Role:** Site navigation and contact
**Pages observed:** zagile.com
**Spec:** Background: #000000 / Text: #ffffff / Font: 14px Roboto Slab
**States observed:** Default: captured

#### Navigation Header
**Role:** Primary site entry
**Pages observed:** zagile.com
**Spec:** Background: #ffffff / Text: #4a4a4a / Height: 23px (font-driven) / Radius: 0px
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Section Padding | 54px (Vertical) |
| Content Gap | 20px |
| Max Width | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; section padding remains consistent. |

## Imagery & decoration
Zagile uses high-quality photography of collaborative office environments. Decoration is limited to solid color bands and simple icon blurbs. It avoids complex gradients or heavy drop shadows.

## Do's
- Use **Roboto Slab** for all primary headlines to maintain brand authority.
- Apply **#42a73d** exclusively for primary conversion actions.
- Maintain **54px vertical spacing** between major content sections.
- Keep container corners **sharp (0px)** unless specifically creating a pill-shaped CTA.
- Use **Open Sans 300** for sub-headings to create typographic contrast.

## Don'ts
- **Wrong:** Using #1c75bc (Blue) for a primary "Free Trial" button. **Right:** Use #42a73d. **Reason:** Blue is an accent/link color; Green is the primary action color.
- **Wrong:** Labeling #42a73d as the "Parent Primary" color. **Right:** The parent is monochrome (#000000); Green is the functional accent.
- **Wrong:** Applying a 4px or 8px radius to cards. **Right:** Use 0px. **Reason:** The system is built on a sharp-cornered grid.
- Do not mix Roboto Slab and Open Sans within the same text block (e.g., a single paragraph).
- Do not use drop shadows on white surfaces; use borders or spacing for separation.

## Similar brands
- Atlassian (Typography hierarchy)
- Salesforce (Color utility)
- Red Hat (Slab-serif technical feel)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --zagile-green: #42a73d;
  --zagile-charcoal: #4a4a4a;
  --zagile-black: #000000;
  --zagile-white: #ffffff;
  --font-heading: 'Roboto Slab', serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-pill: 40px;
}
```

## Agent prompt examples
- "Create a hero section with a #ffffff background, a 41px Roboto Slab heading in #000000, and a pill-shaped button using #42a73d."
- "Design a feature grid using 17px Open Sans text in #4a4a4a with 0px border-radius containers."
- "Generate a footer component with a #000000 background and 14px Roboto Slab menu items in #ffffff."

## Known gaps
- Hover state hex values for buttons were not explicitly captured in the computed style tokens.
- Max-width container values were not definitively identified in the source.

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