# Zuman Design System

> Corporate stability meets terracotta warmth, anchored by high-contrast typography and circular geometry.

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

## TL;DR
Zuman utilizes a high-contrast monochrome foundation of pure black (#000000) and white (#ffffff), punctuated by a singular terracotta accent (#be512b). The system is defined by circular motifs, seen in both the hero "lens" and the navigation "orbit" buttons. Typography relies on the clean, functional pairing of Arial for headers and Roboto for body text, maintaining a professional, corporate atmosphere. Layouts are structured with generous vertical spacing and a clear distinction between white-canvas content areas and deep-charcoal (#333333) footers.

## Signature DNA
1. **The Terracotta Accent** (#be512b used for primary CTAs, active borders, and emphasis, providing a warm, earthy contrast to the stark black/white base. Observed on Homepage and About pages.)
2. **Circular Navigation Orbits** (Large 50px radius circular buttons with 5px borders that serve as the primary navigational pattern for internal sections. Observed on About page.)
3. **The Hero Lens** (A prominent white circular overlay with a thick border used to frame primary value propositions over photographic backgrounds. Observed on Homepage and Mobile.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Zuman (Parent) | #000000 | Circular Lens | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.black}` | #000000 | Primary text, shadows, foundation | 39 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | #ffffff | Canvas, button text, hero lens | 30 | 1.0 | `--wp--preset--color--white` |
| `{color.charcoal}` | #333333 | Footer background, secondary text | 8 | 0.6 | Computed Style |
| `{color.gray}` | #555555 | Muted body text | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.terracotta}` | #be512b | Primary CTA, borders, link text | 18 | 0.8 | Computed Style |
| `{color.amber}` | #fcb900 | Decorative / Token only | 1 | 0.4 | `--wp--preset--color--luminous-vivid-amber` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Arial | 400, 600, 700 | Headings, Navigation | Arimo | System |
| Roboto | 400, 600 | Body, Buttons | Roboto | Apache 2.0 |
| Times New Roman | 400 | Accessibility UI | Tinos | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 25px | 25px | normal | 400 | Section Titles | `a.elementor-icon` |
| `{type.h1}` | 24px | 24px | normal | 600 | Hero/Button Text | `a.elementor-button` |
| `{type.body-lg}` | 17px | 25.5px | normal | 400 | Primary Body | `header.elementor` |
| `{type.nav}` | 17px | normal | normal | 400 | Top Navigation | `li.menu-item` |
| `{type.body}` | 16px | normal | normal | 400 | UI Elements | `div#userwayAccessibilityIcon` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Sub-nav / Footer | `a.elementor-item` |
| `{type.label}` | 13px | 13px | normal | 600 | Small Headings | `div.elementor-heading-title` |
| `{type.caption}` | 12px | 20px | normal | 600 | Metadata | `a.elementor-item` |
| `{type.tiny}` | 10px | 20px | normal | 400 | Legal/Footer | `a.elementor-item` |

### Principles
1. **Sans-serif dominance.** Arial is used for all structural headers to maintain a neutral, corporate tone.
2. **Tight leading on headers.** Display sizes often use 1:1 line height (e.g., 25px/25px) for compact impact.
3. **Roboto for readability.** All long-form body copy shifts to Roboto to provide better legibility than Arial at smaller sizes.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 3px | 16 |
| `{space.sm}` | 10px | 7 |
| `{space.md}` | 20px | 17 |
| `{space.lg}` | 24px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Cards, sections, standard buttons | 81 occurrences |
| `{radius.full}` | 50px / 50% | Navigation orbits, Hero lens | 7 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Standard UI | Default state |

## Components
### Tier 1: Foundational
#### Rounded Button (Orbit)
**Role:** Primary section navigation
**Pages observed:** https://zuman.com/about
**Spec:** Background: #ffffff | Text: #be512b | Border: 5px solid #be512b | Radius: 50% | Padding: 12px 24px | Typography: 24px/600
**States observed:** Default: captured | Hover: not captured

#### Standard Link
**Role:** Navigation and inline links
**Pages observed:** https://zuman.com, https://zuman.com/about
**Spec:** Text: #be512b | Typography: 17px Arial
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Hero Lens
**Role:** Primary value proposition container
**Pages observed:** https://zuman.com
**Spec:** Background: #ffffff | Border: 10px solid #be512b (visual estimate) | Radius: 50% | Text: #000000
**States observed:** Static

#### Footer Block
**Role:** Global site navigation
**Pages observed:** https://zuman.com, https://zuman.com/about
**Spec:** Background: #333333 | Text: #ffffff | Typography: 14px Arial
**States observed:** Static

### Tier 3: Surface-specific
#### Content Card
**Role:** Feature highlights
**Pages observed:** https://zuman.com/about
**Spec:** Background: transparent | Border: 0px | Text: #be512b | Typography: 25px Arial
**States observed:** Static

#### Quote Block
**Role:** Testimonials
**Pages observed:** https://zuman.com
**Spec:** Text: #555555 | Accent: #be512b (quote marks) | Typography: 17px Roboto
**States observed:** Static

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1140px (Standard Elementor container) |
| Section Padding | 60px - 100px vertical |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Hero Lens scales to 90% width; Navigation becomes hamburger menu |

## Imagery & decoration
Zuman uses high-quality architectural and workplace photography (interiors, glass, modern offices). Visual interest is created through circular masks and overlays rather than illustrative icons.

## Do's
- Use #be512b for all primary interactive elements.
- Maintain a 50% border radius for "Orbit" navigation components.
- Pair Arial headers with Roboto body text.
- Use pure #ffffff for content canvas to ensure maximum contrast with #000000 text.
- Ensure all "Hero Lens" containers have a defined border to separate from background imagery.

## Don'ts
- **Wrong:** Using #ff6900 (Vivid Orange) for primary buttons. **Right:** Use #be512b. **Reason:** #ff6900 is a preset token not used in the core brand identity.
- Do not use rounded corners (e.g., 4px or 8px) on standard cards; stick to `{radius.none}`.
- Do not use #000000 for footer backgrounds; use `{color.charcoal}` (#333333).
- Avoid using Roboto for main section headers; reserve Arial for display.

## Similar brands
- Paychex (Corporate HR)
- ADP (Professional Services)
- Insperity (Clean, high-contrast B2B)

## Quick start
```css
:root {
  --zuman-terracotta: #be512b;
  --zuman-black: #000000;
  --zuman-white: #ffffff;
  --zuman-charcoal: #333333;
  --font-heading: 'Arial', sans-serif;
  --font-body: 'Roboto', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary navigation button using the Zuman Orbit style: circular shape, white background, 5px terracotta border, and 24px bold Arial text."
- "Create a content section with a white background, black Roboto body text at 17px, and terracotta Arial headers at 25px."
- "Design a footer component using a #333333 background with white 14px Arial links organized in four columns."

## Known gaps
- Hover and Active states for the "Orbit" buttons were not explicitly captured in the evidence.
- Mobile-specific typography scale for headers was not fully sampled.

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