# Zuno Design System

> High-contrast monochrome utility anchored by full-bleed photographic warmth and traditional serif typography.

**Source:** https://zuno.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** BirthdayAlarm, Poply

## TL;DR
Zuno operates as a minimalist holding brand, utilizing a strict monochrome palette of pure black (#000000) and white (#ffffff). The visual identity is defined by the tension between utilitarian system fonts (Arial) and classical display serifs (Times New Roman). While the UI remains starkly achromatic, the brand relies on full-bleed, high-saturation photography to provide emotional "color," effectively acting as a neutral frame for its sub-brands. Layouts are characterized by generous whitespace and a lack of complex decorative elements, favoring sharp edges and standard browser defaults.

## Signature DNA
1. **Achromatic Framing** (The UI uses zero saturated color tokens, relying entirely on #000000 and #ffffff to frame high-energy photography. Observed on `https://zuno.com`)
2. **Serif Authority** (Times New Roman is used at 32px for primary headings, grounding the modern digital product in traditional typographic authority. Observed on `https://zuno.com/pricing`)
3. **Full-Bleed Imagery** (Photography serves as the primary background layer, with white text overlays providing the only visual complexity. Observed on `https://zuno.com`)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| BirthdayAlarm | Not captured | Not captured | Parent typography | Not captured |
| Poply | Not captured | Not captured | Parent typography | Not captured |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | #000000 | Primary text, background surface | 22 | 0.8 | Computed style |
| `{color.white}` | #ffffff | Overlay text, canvas background | 7 | 0.6 | Computed style |
| `{color.gray}` | #808080 | Secondary text, borders, dividers | 4 | 0.6 | Computed style |

### Accent
(No saturated accent colors captured in source for parent brand)

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Times New Roman | 400, 700 | Primary Heading, Body | Tinos | System Default |
| signikaregular | 400 | Secondary Body | Signika | Open Font License |
| Arial | 400 | UI Labels, Navigation | Arimo | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h1}` | 32px | normal | normal | 700 | Page titles | `h1` |
| `{type.body}` | 16px | normal | normal | 400 | Standard prose | `hr` (fallback) |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Secondary text | `p` |
| `{type.caption}` | 11px | 14.63px | normal | 400 | Legal/Footer | `span` |

### Principles
- **Serif for Impact:** Use Times New Roman for all high-level headings to establish a legacy feel.
- **System Sans for Utility:** Use Arial for functional UI elements to ensure cross-platform consistency.
- **High Contrast Only:** Text must be either pure white on dark backgrounds or pure black on light backgrounds.
- **Normal Tracking:** No custom letter-spacing is applied; rely on the natural kerning of the font families.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.px}` | 1px | 6 |
| `{space.xs}` | 5px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers, images | 14 occurrences |
| `{radius.pill}` | 100px | Specialized panels/buttons | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All surfaces | Standard across all pages |

## Components
### Tier 1: Foundational
#### Wordmark
**Role:** Brand identification
**Pages observed:** `https://zuno.com`, `https://zuno.com/about`
**Spec:** Text-based "zuno" / Font: Arial / Color: #ffffff (on dark) or #000000 (on light)
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Footer Legal
**Role:** Copyright and attribution
**Pages observed:** `https://zuno.com`, `https://zuno.com/pricing`
**Spec:** Typography: `{type.caption}` (11px) / Color: #ffffff / Alignment: Center
**States observed:** Default: captured

#### Hero Heading
**Role:** Primary page entry point
**Pages observed:** `https://zuno.com`
**Spec:** Typography: `{type.h1}` (32px) / Color: #ffffff / Drop shadow: none
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max-width | 100% (Full-bleed) |
| Content Alignment | Center |
| Section Padding | Not captured |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Text centers; hero imagery scales to fill viewport height |
| Desktop | 1440px | Text overlays positioned in lower-right or center quadrants |

## Imagery & decoration
Zuno utilizes high-saturation, "lifestyle" photography (e.g., cupcakes with teal frosting on pink backgrounds) to provide the brand's emotional palette. UI elements never compete with the photography; they are either placed in white-space gutters or overlaid with high-contrast white text.

## Do's
- Use Times New Roman 700 for all primary headings (`{type.h1}`).
- Maintain a strict #000000 or #ffffff background for text readability.
- Allow photography to bleed to the edges of the viewport.
- Use `{radius.none}` for all standard content containers.
- Ensure footer text uses `{type.caption}` at 11px.

## Don'ts
- **Wrong:** Using a sub-brand color (like Poply Blue) for a Zuno parent heading. **Right:** Use #000000. **Reason:** The parent brand is strictly monochrome to remain neutral.
- **Wrong:** Applying a drop shadow to hero text. **Right:** Use high-contrast white text on a darkened image area. **Reason:** The system does not use elevation tokens.
- **Wrong:** Mixing serifs. **Right:** Stick to Times New Roman for display and Signika/Arial for body.
- Do not use rounded corners on primary hero images.
- Do not use saturated colors for borders or dividers; use #808080.

## Similar brands
- Apple (Utility/Photography balance)
- The New York Times (Typographic hierarchy)
- Medium (Achromatic UI framing)

## Quick start
```css
:root {
  --zuno-black: #000000;
  --zuno-white: #ffffff;
  --zuno-gray: #808080;
  --zuno-font-heading: "Times New Roman", serif;
  --zuno-font-body: "signikaregular", sans-serif;
  --zuno-font-ui: "Arial", sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section for Zuno using a full-bleed background image, a centered H1 in Times New Roman 700 #ffffff, and a footer in 11px Arial."
- "Create a pricing table using #808080 for 1px borders and #000000 for all text, with no border-radius."
- "Design a contact page for Zuno that uses only #ffffff and #000000, with headings in 32px serif font."

## Known gaps
- Button hover states were not captured in the analyzed pages.
- Form input styles and validation states are missing from the current evidence.
- Mobile navigation menu behavior was not explicitly captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://zuno.com | 1440x900 | 2026-06-06 |
| Pricing | https://zuno.com/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://zuno.com | 390x844 | 2026-06-06 |