# Zentility Design System

> Clean, high-contrast utility meets mint-infused energy automation.

**Source:** [https://zentility.com](https://zentility.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Zentility utilizes a high-contrast foundation of pure white `#ffffff` and deep charcoal `#22262a`, punctuated by a vibrant mint-to-emerald accent palette (`#2fda87`, `#54e2c0`). The system relies heavily on **Open Sans** across a wide weight range (300 to 900), using light weights (300) for long-form body and heavy weights (700+) for display and interactive triggers. Visual depth is achieved through glassmorphism effects and soft, multi-layered shadows rather than solid borders. Geometry is defined by extreme pill shapes (`9999px`) for buttons and badges, contrasted against soft-cornered cards (`12px` to `16px`).

## Signature DNA
1. **Mint Voltage** (The primary brand energy is carried by `#2fda87` and `#54e2c0`, used for primary CTAs, progress indicators, and large-scale footer gradients.)
2. **Weight-Contrast Typography** (The system pairs `Open Sans` at weight 300 for explanatory text with weight 700/900 for headlines and buttons, creating a "technical but accessible" hierarchy.)
3. **Pill-Encapsulated UI** (Interactive elements and data badges are almost exclusively rendered as full pills `9999px`, seen in the "Book a Demo" buttons and "Portfolio" data tags across all pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, button text | 127 | 1.0 | computed_style |
| `{color.ink}` | `#22262a` | Primary text, heading color, button labels | 331 | 0.8 | computed_style |
| `{color.slate}` | `#66737f` | Secondary text, button text | 128 | 0.8 | computed_style |
| `{color.border.light}` | `#e1e6ea` | Subtle dividers and card outlines | 31 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.mint}` | `#2fda87` | Primary CTA background, success indicators | 33 | 0.8 | computed_style |
| `{color.teal}` | `#54e2c0` | Secondary accents, progress rings | 21 | 0.8 | computed_style |
| `{color.emerald}` | `#27ae60` | Text emphasis, positive delta indicators | 17 | 0.8 | computed_style |
| `{color.sky.soft}` | `#e8f4f8` | Decorative section backgrounds | 8 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#27ae60` | Positive savings values, confirmed states |
| `{color.warning}` | `#d4ac0d` | Mid-range energy metrics |
| `{color.error}` | `#f97b7b` | High-alert energy metrics (decorative_only) |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 48px | -1.2px | 700 | Hero headlines | `h2.text-4xl.md:text-5xl` |
| `{type.h3}` | 24px | 32px | normal | 700 | Section headers | `h3.font-['Open_Sans'].text-2xl` |
| `{type.h4}` | 20px | 28px | normal | 700 | Card titles | `h4.font-['Open_Sans'].text-xl` |
| `{type.body.lg}` | 18px | 28px | normal | 300 | Lead paragraphs | `p.text-xs.md:text-lg` |
| `{type.body}` | 16px | 24px | normal | 300 | Default running text | `header.fixed.top-0` |
| `{type.button}` | 14px | 20px | normal | 700 | CTA labels | `button.px-6.py-2.5` |
| `{type.caption}` | 12px | 16px | normal | 700 | Small labels/badges | `span.absolute.inset-0` |
| `{type.micro}` | 10px | 15px | 1px | 900 | Overline/Uppercase tags | `div.text-[9px].md:text-[10px]` |

### Principles
1. **Lightweight Prose**: All descriptive text blocks use weight 300 to maintain a clean, airy feel.
2. **Heavy Interaction**: Buttons and navigation links use weight 700 or 900 to ensure clear affordance.
3. **Tight Display**: Headlines at 48px use negative letter-spacing (-1.2px) to increase visual density.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 48 |
| `{space.sm}` | 12px | 34 |
| `{space.md}` | 16px | 112 |
| `{space.lg}` | 24px | 64 |
| `{space.xl}` | 32px | 19 |
| `{space.section}` | 96px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 406 occurrences |
| `{radius.md}` | 12px | Small cards, inputs | 24 occurrences |
| `{radius.lg}` | 16px | Feature cards | 42 occurrences |
| `{radius.pill}` | 9999px | Buttons, badges, avatars | 81 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `0px 1px 2px 0px rgba(0,0,0,0.05)` | Default card state | 22 occurrences |
| `{shadow.medium}` | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Hovered cards | 12 occurrences |
| `{shadow.directional}` | `2px 2px 6px 0px rgba(0,0,0,0.1)` | Floating UI elements | 9 occurrences |

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary and Secondary Actions
**Pages observed:** 2
**Spec:** Background: `{color.mint}` (#2fda87) / Text: `{color.canvas}` (#ffffff) / Radius: `9999px` / Padding: `24px 40px` / Typography: `{type.body.lg}` (18px/700)
**States observed:** Default | Hover: Captured (opacity shift) | Focus: Not captured

### Tier 2: Patterns
#### Data Badge
**Role:** Status indicators and category tags
**Pages observed:** 1
**Spec:** Background: `{color.teal}` (#54e2c0) / Text: `{color.ink}` (#22262a) / Radius: `9999px` / Padding: `4px 12px` / Typography: `{type.body}` (16px/300)
**States observed:** Default: Captured

#### Navigation Item
**Role:** Top-level site navigation
**Pages observed:** 2
**Spec:** Background: transparent / Text: `{color.ink}` (#22262a) / Typography: `{type.body-sm}` (14px/500)
**States observed:** Default | Hover: Captured

### Tier 3: Surface-specific
#### Feature Card
**Role:** Content grouping for services
**Pages observed:** 2
**Spec:** Background: `{color.canvas}` (#ffffff) / Border: `{color.border.light}` (#e1e6ea) / Radius: `16px` / Padding: `16px` / Shadow: `{shadow.soft}`
**States observed:** Default | Hover: `{shadow.medium}`

#### Portfolio Row
**Role:** Tabular data display
**Pages observed:** 1
**Spec:** Background: transparent / Border-bottom: 1px `{color.border.light}` / Typography: `{type.body-sm}` (14px/300)
**States observed:** Default: Captured

#### Hero Section
**Role:** Primary landing introduction
**Pages observed:** 2
**Spec:** Background: Image with dark overlay / Text: `{color.canvas}` (#ffffff) / Padding: `96px 0`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Gap | 96px |
| Column Grid | 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Stacked cards, 100% width buttons |
| Desktop | 1440px | Multi-column feature grids, 96px section padding |

## Imagery & decoration
Zentility uses high-resolution photography of urban environments and professional portraits, often treated with soft-focus or glassmorphism overlays. Decorative elements include thin-stroke icons and progress rings using the mint-to-teal gradient.

## Do's
- Use weight 300 for all body copy to maintain the "Zen" aesthetic.
- Apply `{radius.pill}` to all interactive buttons.
- Use `#2fda87` (Mint) as the primary action color.
- Ensure 96px vertical spacing between major sections.
- Use negative letter-spacing (-1.2px) on headlines larger than 40px.

## Don'ts
- **Wrong:** Using `#3b82f6` (System Blue) for primary buttons. **Right:** Use `#2fda87`. **Reason:** Blue is a system-default token, not a brand accent.
- **Wrong:** Using sharp 0px corners for cards. **Right:** Use `12px` or `16px`. **Reason:** Sharp corners break the soft utility aesthetic.
- **Wrong:** Setting body copy to weight 400 or 500. **Right:** Use 300. **Reason:** Weight 300 is the signature for long-form readability.

## Similar brands
- Stripe (clean typography, soft shadows)
- Wealthfront (mint accents, data-heavy but clean)
- Helion Energy (technical, high-contrast utility)

## Quick start
```css
:root {
  --color-mint: #2fda87;
  --color-teal: #54e2c0;
  --color-ink: #22262a;
  --color-canvas: #ffffff;
  --font-main: 'Open Sans', sans-serif;
  --radius-pill: 9999px;
  --radius-card: 16px;
}
```

## Agent prompt examples
- "Generate a primary button using Open Sans 700, #2fda87 background, and 9999px border radius."
- "Create a feature card with a 16px radius, #ffffff background, and a subtle 0px 1px 2px shadow."
- "Style a headline using Open Sans 700 at 48px with -1.2px letter spacing."

## Known gaps
- Hover states for secondary buttons were not captured in high-detail provenance.
- Mobile navigation menu transition was not captured.

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