# Zenythgroup Design System

> A structured, high-contrast canvas where deep royal purple anchors a professional accessibility-first interface.

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

## TL;DR
Zenythgroup utilizes a "monochrome-plus-one" strategy where a specific royal purple `#53389e` serves as the sole driver of brand voltage against a clean white `#ffffff` background. The system relies heavily on the **Assistant** typeface, using bold weights (700) for authoritative headings and regular weights (400) for legible body copy. UI components are characterized by soft geometric containers (16px radii) and subtle elevation shadows that use the primary purple as a glow effect rather than traditional gray. The layout is spacious, prioritizing readability and accessibility compliance through high-contrast text ratios (8.7:1).

## Signature DNA
1. **The Zenyth Purple Anchor** (The primary hex `#53389e` is used for all high-intent actions, borders, and primary headings, creating a singular focal point across all pages.)
2. **Assistant Typography Hierarchy** (A strict reliance on the Assistant family, specifically the 60px display and 18px body sizes, to establish a professional, service-oriented tone.)
3. **Soft Elevation Glow** (Instead of neutral shadows, primary buttons use a tinted shadow `rgb(166, 149, 251) 0px 4px 6px 0px` to reinforce the brand color in the Z-axis.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, button text, surface bg | 22 | 1.0 | `--untitled-ui-gray50` |
| `{colors.headings}` | `#141414` | Primary headings, high-contrast text | 31 | 1.0 | `--znt-headings` |
| `{colors.body}` | `#333333` | Default running text | 80 | 0.8 | Computed |
| `{colors.black}` | `#000000` | Secondary button backgrounds, shadows | 6 | 1.0 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#53389e` | Primary CTA bg, borders, active text | 97 | 1.0 | `--znt-purple` |
| `{colors.primary-light}` | `#6941c6` | Secondary text links, button text | 44 | 1.0 | `--primary-700` |
| `{colors.surface-muted}` | `#f4ebff` | Section backgrounds, icon plates | 6 | 1.0 | `--untitled-ui-primary100` |
| `{colors.surface-tint}` | `#d9d6fe` | Carousel backgrounds | 3 | 1.0 | `--znt-lite-purple` |
| `{colors.decorative}` | `#d6bbfb` | Decorative only | 2 | 0.6 | `--white` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Assistant | 400, 700 | Primary Display & Body | Assistant (Google Fonts) | SIL Open Font |
| system-ui | 400, 500, 600, 700 | UI Labels, Metadata | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 60px | 72px | normal | 700 | Hero H1 | `h1.uui-heading-xlarge` |
| `{type.display-lg}` | 48px | 57.6px | normal | 700 | Section Headers | `h2#testimonial-heading` |
| `{type.display-md}` | 36px | 46.8px | normal | 700 | Sub-section Heads | `h2.uui-heading-medium` |
| `{type.heading-sm}` | 24px | 36px | normal | 400 | Subheadings | `p.uui-heading-subheading` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Intro paragraphs | `p.uui-text-size-large` |
| `{type.body-md}` | 18px | 27.6px | normal | 400 | Default Body | `p.uui-text-size-medium` |
| `{type.button}` | 16px | 24px | 1px | 700 | Primary CTA | `a.uui-button` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Footer/Metadata | `section.uui-section_heroheader` |

### Principles
1. **Bold Display:** All primary headings (H1-H3) must use Assistant 700.
2. **High Contrast:** Body text must never fall below `#333333` on white to ensure WCAG compliance.
3. **Spacious Leading:** Body text utilizes a 1.5x line-height ratio (18px/27.6px) for maximum readability.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 8px | 15 |
| `{space.md}` | 10px | 82 |
| `{space.lg}` | 20px | 14 |
| `{space.xl}` | 80px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp sections | 258 occurrences |
| `{radius.sm}` | 4px | Inputs | 32 occurrences |
| `{radius.md}` | 8px | Buttons | 17 occurrences |
| `{radius.lg}` | 16px | Content Cards | 8 occurrences |
| `{radius.full}` | 100% | Avatars/Icon Badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.primary}` | `rgb(166, 149, 251) 0px 4px 6px 0px` | Primary Buttons | Observed on 8 elements |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.3) 1px 3px 14px 0px` | Floating Cards | Observed on 4 elements |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action for lead generation.
**Pages observed:** Homepage, About.
**Spec:** Background `{colors.primary}` (#53389e) | Text `{colors.white}` (#ffffff) | Radius `{radius.md}` (8px) | Padding 10px 18px | Typography `{type.button}` | Shadow `{shadow.primary}`.
**States observed:** Default | Hover: captured | Active: captured.

#### Secondary Button (Link)
**Role:** Navigation and "Learn More" actions.
**Pages observed:** Homepage, About.
**Spec:** Background transparent | Text `{colors.primary-light}` (#6941c6) | Border none | Typography Assistant 700 18px.
**States observed:** Default | Hover: captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific services or software.
**Pages observed:** Homepage, About.
**Spec:** Background `{colors.white}` (#ffffff) | Border 1px `{colors.primary}` (#53389e) | Radius `{radius.lg}` (16px) | Padding 24px.
**States observed:** Default.

#### Testimonial Block
**Role:** Social proof display.
**Pages observed:** Homepage.
**Spec:** Background `{colors.surface-tint}` (#d9d6fe) | Text `{colors.headings}` (#141414) | Radius `{radius.none}`.
**States observed:** Default.

### Tier 3: Surface-specific

#### Category Badge
**Role:** Blog or service categorization.
**Pages observed:** Homepage.
**Spec:** Background `{colors.surface-muted}` (#f4ebff) | Text `{colors.primary-light}` (#6941c6) | Radius 160px (pill) | Padding 4px 12px.
**States observed:** Default.

#### Navigation Bar
**Role:** Global site header.
**Pages observed:** Homepage, About.
**Spec:** Background `{colors.white}` (#ffffff) | Height 80px | Text `{colors.body}` (#333333).
**States observed:** Default.

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

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero H1 scales to 32px; 1-column stack. |
| Desktop | 1440px | Full horizontal navigation; Multi-column feature grids. |

## Imagery & decoration
Zenythgroup uses professional photography of team members and clean, isometric icons for services. It avoids heavy gradients, opting instead for solid color blocks and subtle purple-tinted shadows.

## Do's
- Use `#53389e` for all primary interactive elements.
- Maintain a minimum of 30px line-height for body copy to ensure accessibility.
- Apply `{radius.lg}` (16px) to all content-containing cards.
- Use Assistant 700 for all headings to maintain brand authority.
- Ensure text contrast ratios meet or exceed 8.7:1.

## Don'ts
- **Wrong:** Using `#6941c6` as a primary button background. **Right:** Use `#53389e`. **Reason:** `#6941c6` is reserved for text links and secondary accents.
- Do not use sharp corners (0px) for interactive buttons.
- Do not use gray shadows for primary buttons; use the purple-tinted `{shadow.primary}`.
- Do not use font weights below 400 for body copy.
- Do not place primary purple text on dark backgrounds without validating contrast.

## Similar brands
- Deque Systems
- Level Access
- UsableNet
- Siteimprove

## Quick start

```css
/* CSS Custom Properties */
:root {
  --znt-purple: #53389e;
  --znt-purple-light: #6941c6;
  --znt-headings: #141414;
  --znt-body: #333333;
  --znt-surface-muted: #f4ebff;
  --znt-shadow-primary: 0px 4px 6px 0px rgb(166, 149, 251);
  --font-main: 'Assistant', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Zenyth purple #53389e with an 8px border radius and a soft purple shadow."
- "Create a feature card with a 16px border radius, white background, and Assistant 700 headings."
- "Design a section header using Assistant 36px bold in #53389e with 46.8px line height."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Error and Success semantic colors were not present in the sampled pages.

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