# Zenoti Design System

> High-contrast enterprise elegance defined by a signature magenta pulse against clean, structured white space.

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

## TL;DR
Zenoti utilizes a sophisticated "monochrome plus one" strategy, where a vibrant Zenoti Magenta (#c242a0) serves as the singular high-voltage anchor for actions and emphasis. The system relies on a dual-font strategy: **Dinamit** for high-impact, tight-tracked headlines and **DM Sans** for legible, utilitarian body content. Layouts are strictly structured with generous vertical breathing room (up to 160px section gaps) and a reliance on soft-cornered geometry (8px to 12px radii). The palette is grounded in a deep charcoal (#333638) and pure white (#ffffff), ensuring that the magenta accents and occasional deep purple (#713661) surfaces feel intentional and authoritative.

## Signature DNA
1. **The Magenta Anchor** (#c242a0 used for primary CTAs, key brand verbs, and active UI states across all analyzed pages).
2. **Dinamit Display Typography** (Heavyweight 600-900 headlines with aggressive negative letter-spacing, e.g., -1.44px at 48px, creating a "stamp" like authority).
3. **Soft-Structured Containers** (Consistent use of 8px and 12px border radii for cards and controls, preventing the enterprise-grade system from feeling clinical).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--background` | `#ffffff` | Primary page canvas and card surfaces | 264 | 1 | Computed |
| `--foreground` | `#333638` | Primary text and high-contrast UI labels | 280 | 1 | Computed |
| `--color-black` | `#000000` | Deepest surface backgrounds (e.g., Privacy banners) | 1 | 1 | Declared |
| `--foundation-dark` | `#1a1618` | Secondary text and dark section backgrounds | 74 | 0.8 | Computed |
| `--foundation-muted`| `#4a4347` | De-emphasized text and secondary button labels | 60 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-zenoti-magenta` | `#c242a0` | Primary CTA background, active links, brand highlights | 32 | 1 | Declared |
| `--color-zenoti-purple` | `#713661` | Footer background, secondary brand surfaces | 16 | 1 | Declared |
| `--accent-vibrant` | `#c4107e` | Decorative borders and text emphasis | 39 | 0.8 | Computed |
| `--accent-soft-teal` | `#d1f8f7` | Decorative surface backgrounds (decorative_only) | 3 | 0.6 | Computed |
| `--accent-warm-peach`| `#ffeee3` | Decorative surface backgrounds (decorative_only) | 3 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--semantic-error` | `#e63b2e` | Destructive actions and critical alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| dinamit | 500, 600, 700 | Display and Headings | Montserrat | Proprietary |
| dmSans | 400, 500, 600, 700, 900 | Body and UI Labels | DM Sans (Google) | OFL |
| Lato | 400, 700, 900 | Legacy UI / Calendar components | Lato | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 48px | 55.2px | -1.44px | 600 | Hero Headlines | `p.mt-4.font-[family-name:var(--font-dinamit)]` |
| `{type.heading-lg}` | 36px | 36px | -0.54px | 600 | Section Titles | `span.whitespace-nowrap.font-heading` |
| `{type.heading-md}` | 30px | 36px | 0.15px | 600 | Sub-section Heads | `h3.text-2xl.font-semibold` |
| `{type.heading-sm}` | 24px | 32px | 0.12px | 600 | Card Titles | `h2.text-center.text-xl` |
| `{type.body-lg}` | 18px | 25.2px | -0.54px | 400 | Primary Body | `section.subtle-grain.relative` |
| `{type.body-md}` | 16px | 24px | -0.48px | 600 | Bold Body / Labels | `p.text-base.font-semibold` |
| `{type.body-sm}` | 14px | 20px | -0.54px | 500 | Small UI Text | `span.mt-1.5.text-sm` |
| `{type.caption}` | 12px | 16px | -0.36px | 400 | Metadata / Footnotes | `p.text-xs.text-white/50` |

### Principles
1. **Negative Tracking on Display:** Headlines over 36px must use negative letter-spacing (-0.54px to -1.44px) to maintain the "compact enterprise" feel.
2. **Font Pairing:** Never use Dinamit for body copy; it is strictly reserved for titles and semantic labels.
3. **Magenta for Verbs:** Text links and primary buttons must use #c242a0 to signal interactivity.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 59 |
| `{space.sm}` | 16px | 92 |
| `{space.md}` | 24px | 13 |
| `{space.lg}` | 48px | 5 |
| `{space.xl}` | 64px | 3 |
| `{space.section}`| 160px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sm}` | 4px | Form inputs | 44 occurrences |
| `{radius.md}` | 8px | Primary buttons / Cards | 25 occurrences |
| `{radius.lg}` | 12px | Feature cards | 21 occurrences |
| `{radius.xl}` | 24px | Large panels | 16 occurrences |
| `{radius.pill}` | 9999px | Badges / Tags | 90 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Default card state | Multiple pages |
| Raised | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px` | Hovered cards / Navigation | 7 occurrences |
| Overlay | `rgba(0, 0, 0, 0.5) 2px 2px 10px 0px` | Modals / Tooltips | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Book a Demo")
**Pages observed:** All
**Spec:** Background: `{color.zenoti-magenta}` (#c242a0) | Text: `#ffffff` | Radius: `8px` | Padding: `10.4px 19.2px` | Typography: `{type.body-md}` (16px/600)
**States observed:** Default | Hover: Captured (darker magenta) | Active: Captured

#### Secondary Button (Outline)
**Role:** Alternative actions
**Pages observed:** pricing, about
**Spec:** Background: `transparent` | Text: `#ffffff` | Border: `2px solid #ffffff` | Radius: `8px` | Padding: `14px 32px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product features or pricing tiers
**Pages observed:** homepage, pricing
**Spec:** Background: `#ffffff` | Border: `1px solid rgba(196, 16, 126, 0.2)` | Radius: `12px` | Padding: `20px`
**States observed:** Default | Hover: Captured (elevation change)

#### Pill Badge
**Role:** Status indicators or category tags
**Pages observed:** homepage, pricing
**Spec:** Background: `rgba(196, 16, 126, 0.125)` | Text: `{foreground}` (#333638) | Radius: `9999px` | Padding: `0px 16px`
**States observed:** Default

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site-wide navigation anchor
**Pages observed:** pricing, about
**Spec:** Background: `{color.zenoti-purple}` (#713661) | Text: `#ffffff` | Typography: `{type.body-sm}` (14px)
**States observed:** Default

#### Pricing Tier Card
**Role:** Pricing plan selection
**Pages observed:** pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #e5e0e3` | Radius: `16px` | Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px |
| Section Padding (Vertical) | 128px to 160px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero text reduces to 32px; Padding-x reduces to 16px |
| Desktop | 1440px | 12-column grid; Section padding increases to 160px |

## Imagery & decoration
Zenoti uses high-quality photography of wellness environments (spas, salons) often overlaid with a subtle grain texture or magenta gradients. UI elements are frequently presented within "floating" device frames with soft shadows. Avoids: Cartoonish illustrations or high-saturation primary colors other than magenta.

## Do's
- Use `#c242a0` for all primary interactive elements.
- Apply `-1.44px` letter spacing to headlines at `48px`.
- Use `8px` border radius for standard buttons.
- Maintain at least `128px` vertical spacing between major content sections.
- Pair Dinamit headlines with DM Sans body copy.

## Don'ts
- **Wrong:** Using `#e63b2e` (Semantic Red) for a brand CTA. **Right:** Use `#c242a0`. **Reason:** Red is reserved for errors and destructive actions.
- **Wrong:** Using Dinamit for running body text. **Right:** Use DM Sans. **Reason:** Dinamit is optimized for display, not legibility at small sizes.
- **Wrong:** Applying sharp `0px` corners to cards. **Right:** Use `12px` or `16px`. **Reason:** The brand identity relies on soft-structured geometry.
- **Wrong:** Overlapping magenta text on a purple background. **Right:** Use white text on purple. **Reason:** Contrast fails accessibility standards.

## Similar brands
- Mindbody (wellness enterprise)
- Salesforce (structured enterprise layout)
- Glossier (high-contrast editorial feel)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-zenoti-magenta: #c242a0;
  --color-zenoti-purple: #713661;
  --foreground: #333638;
  --background: #ffffff;
  --radius-md: 8px;
  --font-heading: "dinamit", sans-serif;
  --font-body: "dmSans", sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-magenta: #c242a0;
  --color-purple: #713661;
  --font-dinamit: "dinamit";
  --font-dm-sans: "dm-sans";
  --radius-control: 8px;
  --spacing-section: 160px;
}
```

## Agent prompt examples
- "Generate a pricing card using Zenoti Magenta for the 'Select' button and a 12px border radius."
- "Create a hero section with a Dinamit headline at 48px, weight 600, and -1.44px letter spacing."
- "Design a footer using #713661 background and white DM Sans text at 14px."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated trace.
- Specific transition timings for button animations were not recorded.
- Mobile-specific typography scale for mid-range headings (24px-30px) requires further validation.

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