# Zealousys Design System

> Professional enterprise blue anchored by high-contrast orange accents and a rigid Inter-based typographic hierarchy.

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

## TL;DR
Zealousys utilizes a high-trust enterprise palette of deep navy `#06497f` and pure white `#ffffff`, punctuated by a vibrant secondary orange `#f8a133`. The system is built on the **Inter** typeface, deploying a wide range of weights (300 to 900) to create clear information density. Layouts are structured with a 4px base unit, favoring generous section spacing (up to 150px) and a mix of sharp and rounded geometry. Components often feature soft shadows `rgba(9, 52, 111, 0.15)` and pill-shaped or large-radius containers (25px to 50px) to soften the corporate aesthetic.

## Signature DNA
1. **The Primary/Secondary Split** (The interplay between the deep navy `#06497f` and the energetic orange `#f8a133` used for emphasis and CTAs across all pages).
2. **Pill-Rounded Surfaces** (The frequent use of 25px, 40px, and 50px radii on buttons and cards to create a modern, approachable software-agency feel).
3. **Inter Variable Weighting** (Using Inter from 300 for subheadings to 700 for display, creating a cohesive but varied typographic texture).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Primary background, button text | 419 | 1 | `--light-color` |
| `{colors.ink}` | `#212529` | Primary body text | 390 | 1 | `--bs-dark` |
| `{colors.ink-deep}` | `#000000` | Headings, footer background | 326 | 1 | `--black-color` |
| `{colors.border-soft}` | `#e6e9ee` | Subtle dividers, card borders | 24 | 1 | `--lightBlue-color` |
| `{colors.surface-muted}` | `#f5f9fd` | Light section backgrounds | 7 | 1 | `--bs-light` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#06497f` | Primary brand color, buttons, icons | 103 | 1 | `--primary-color` |
| `{colors.secondary}` | `#f8a133` | CTA accents, highlighted text | 68 | 1 | `--secondary-color` |
| `{colors.link}` | `#0d6efd` | Inline links, active states | 52 | 1 | `--bs-primary` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#2e7d32` | Success states |
| `{colors.error}` | `#d32f2f` | Error/Danger states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 300, 400, 500, 600, 700, 900 | All UI, Headings, Body | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-mega}` | 120px | 120px | -3px | 700 | Hero value titles | `span.value-title` |
| `{typography.display-xl}` | 48px | 56px | -0.3px | 700 | Main page H1 | `h1` |
| `{typography.display-lg}` | 42px | 50px | -0.3px | 600 | Section H2 | `h2` |
| `{typography.heading-md}` | 32px | 400px | -0.3px | 600 | Sub-section H3 | `h3` |
| `{typography.heading-sm}` | 22px | 32px | -0.3px | 600 | Card titles | `h3` |
| `{typography.body-lg}` | 18px | 26px | -0.3px | 500 | Large body/Links | `a` |
| `{typography.body-md}` | 16px | 24px | -0.3px | 400 | Standard body | `p` |
| `{typography.body-sm}` | 14px | 21px | -0.3px | 400 | Small labels/Address | `p.country-address` |

### Principles
1. **Tight Letter Spacing on Display:** Large headings use negative tracking (-0.3px to -3px) to maintain visual density.
2. **Semi-Bold Hierarchy:** Weight 600 is the workhorse for section headers and emphasized UI elements.
3. **High Contrast Text:** Body text consistently maintains a high contrast ratio against white backgrounds using `#212529`.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 8px | 106 |
| `{spacing.sm}` | 16px | 114 |
| `{spacing.md}` | 24px | 81 |
| `{spacing.lg}` | 40px | 21 |
| `{spacing.section}` | 150px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.input}` | 4px | Form fields | `radii.input` |
| `{radius.card}` | 16px | Content cards | `radii.card` |
| `{radius.pill}` | 25px | Primary buttons | `radii.panel` |
| `{radius.large}` | 50px | Large UI panels | `radii.panel` |
| `{radius.full}` | 100px | Avatars/Circular elements | `radii.panel` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(9, 52, 111, 0.15) 0px 11px 17px 0px` | Primary buttons and elevated cards | `shadows[0]` |
| `{shadow.deep}` | `rgba(25, 27, 29, 0.2) 3px 3px 26px 0px` | Floating elements | `shadows[1]` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary actions
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#06497f) / Text `{colors.canvas}` (#ffffff) / Radius 25px / Padding 12px 16px / Typography 16px 500 / Shadow `{shadow.card}`
**States observed:** Default | Hover: captured (darker blue) | Active: captured

#### Text Input
**Role:** Form entry
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#06497f) / Text `{colors.canvas}` (#ffffff) / Radius 40px / Padding 12px 24px / Typography 14px 400

### Tier 2: Patterns

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#212529) / Typography 16px 400 / Border-bottom 0px

#### Footer
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background `{colors.ink-deep}` (#000000) / Text `{colors.ink}` (#212529) / Padding 40px 40px 0px

### Tier 3: Surface-specific

#### Content Card
**Role:** Service and feature highlights
**Pages observed:** All
**Spec:** Background `rgba(20, 20, 20, 0.59)` / Border `{colors.border-soft}` (#e6e9ee) / Radius 16px / Padding 16px

#### Secondary Accent Card
**Role:** Emphasis blocks
**Pages observed:** All
**Spec:** Background `{colors.secondary}` (#f8a133) / Text `{colors.canvas}` (#ffffff) / Radius 25px / Padding 4px 16px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Vertical Gap | 150px |
| Grid System | Bootstrap-based (12 column) |

## Do's
- Use `{colors.primary}` (#06497f) for all structural brand elements.
- Reserve `{colors.secondary}` (#f8a133) for high-priority CTAs and text highlights.
- Apply `{radius.pill}` (25px) to primary buttons to maintain the brand's approachable enterprise feel.
- Maintain Inter weight 600 for section headings to ensure hierarchy.
- Use `{shadow.card}` specifically on primary navy buttons.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) as the primary brand color. **Right:** Use `{colors.primary}` (#06497f). **Reason:** `#0d6efd` is a utility accent, not the brand identity.
- Do not use sharp corners (0px radius) for interactive buttons.
- Avoid using weights above 700 for standard body copy.
- Do not place `{colors.secondary}` text on `{colors.primary}` backgrounds without checking contrast.

## Similar brands
- IBM (Blue/White enterprise structure)
- Salesforce (Corporate blue with rounded UI)
- Infosys (Professional services blue palette)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #06497f;
  --secondary: #f8a133;
  --ink: #212529;
  --canvas: #ffffff;
  --radius-pill: 25px;
  --shadow-card: 0px 11px 17px 0px rgba(9, 52, 111, 0.15);
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#06497f" },
      "secondary": { "value": "#f8a133" }
    }
  },
  "size": {
    "radius": {
      "pill": { "value": "25px" }
    }
  }
}
```

## Known gaps
- Hover states for secondary orange buttons were not explicitly tokenized in the evidence.
- Mobile-specific typography scale for display sizes above 48px was not fully captured.
- Specific transition timings for button hover states were not provided in the computed styles.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://zealousys.com | 1440px | 2026-06-06 |
| Pricing | https://zealousys.com/pricing | 1440px | 2026-06-06 |
| About | https://zealousys.com/about | 1440px | 2026-06-06 |