# Vizetto Design System

> High-contrast monochrome utility anchored by deep obsidian surfaces and structured gray-scale information architecture.

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

## TL;DR
Vizetto utilizes a "monochrome parent" strategy where the core identity is defined by absolute black (`#000000`) and pure white (`#ffffff`) foundations. The system relies on a rigorous gray-scale hierarchy, using `--ast-global-color-4` (`#f5f5f5`) for section alternating and `--ast-global-color-3` (`#4b4f58`) for secondary text. While the parent brand remains achromatic to maintain a professional "utility" feel, it reserves saturated tokens like `--wp--preset--color--ast-global-color-0` (`#0170b9`) for specific product-level callouts. Layouts are characterized by high-density feature grids and heavy use of light-gray containers (`#e5e5e5`) to group complex information.

## Signature DNA
1. **Achromatic Anchoring** (The system uses `#000000` for primary navigation and footer backgrounds, creating a "dark mode" frame around a white content canvas. Observed on `vizetto.com`.)
2. **Gray-scale Layering** (Information is tiered using `#f5f5f5` for soft sections and `#e5e5e5` for card surfaces, creating depth without using shadows. Observed on `vizetto.com`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--e-global-color-astglobalcolor8` | `#000000` | Primary Brand / Dark Canvas | High | High | declared_token_colors |
| `--ast-global-color-5` | `#ffffff` | Primary Background | High | High | declared_token_colors |
| `--ast-global-color-4` | `#f5f5f5` | Secondary Surface / Alternating Sections | High | High | declared_token_colors |
| `--ast-global-color-6` | `#e5e5e5` | Tertiary Surface / Card Backgrounds | Medium | High | declared_token_colors |
| `--ast-global-color-1` | `#3a3a3a` | Primary Heading Text | High | High | declared_token_colors |
| `--ast-global-color-3` | `#4b4f58` | Secondary Body Text | High | High | declared_token_colors |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--ast-global-color-0` | `#0170b9` | Product Accent Blue | Medium | High | declared_token_colors |
| `--wp--preset--color--vivid-red` | `#cf2e2e` | Decorative / Product Indicator | Low | Medium | declared_token_colors |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Sans-Serif (System) | 400, 700 | All UI and Display | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.h1}` | 48px | 1.2 | -0.02em | 700 | Hero Headlines | `h1` |
| `{typography.h2}` | 36px | 1.3 | normal | 700 | Section Headers | `h2` |
| `{typography.h3}` | 24px | 1.4 | normal | 700 | Card Titles | `h3` |
| `{typography.body-lg}` | 18px | 1.6 | normal | 400 | Intro Paragraphs | `.entry-content p` |
| `{typography.body-md}` | 16px | 1.5 | normal | 400 | Default Body | `p` |
| `{typography.label}` | 14px | 1.2 | 0.05em | 700 | Buttons / Badges | `.button` |
| `{typography.caption}` | 12px | 1.4 | normal | 400 | Footer Links | `footer a` |
| `{typography.nav}` | 15px | 1.0 | normal | 500 | Main Navigation | `.main-navigation a` |

### Principles
1. **Contrast-First Text**: Headings always use `#3a3a3a` or `#ffffff` to ensure maximum legibility against gray or black backgrounds.
2. **Bold Hierarchy**: Section titles are consistently 700 weight to anchor dense feature lists.
3. **Tight Navigation**: Top-level nav items use a 1.0 line-height to maintain a compact header footprint.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.sm}` | 12px | Component internal gaps |
| `{spacing.md}` | 24px | Card padding |
| `{spacing.lg}` | 48px | Section vertical padding |
| `{spacing.xl}` | 80px | Hero vertical padding |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Book a Demo")
**Pages observed:** https://vizetto.com
**Spec:** Background: `#0170b9` / Text: `#ffffff` / Radius: 4px / Typography: 14px Bold
**States observed:** Default | Hover: Not captured

#### Dark Footer
**Role:** Global site navigation and legal
**Pages observed:** https://vizetto.com
**Spec:** Background: `#000000` / Text: `#ffffff` / Typography: 12px-14px / Border-top: 1px solid `#3a3a3a`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product capabilities in a grid
**Pages observed:** https://vizetto.com
**Spec:** Background: `#e5e5e5` / Padding: 24px / Radius: 0px / Text: `#3a3a3a`
**States observed:** Default

#### Product Indicator Bar
**Role:** Color-coded product differentiation
**Pages observed:** https://vizetto.com
**Spec:** Background: Variable (`#cf2e2e`, `#ff6900`, `#00d084`) / Height: 4px / Position: Top of card
**States observed:** Default

### Tier 3: Surface-specific

#### Testimonial Slider
**Role:** Social proof display
**Pages observed:** https://vizetto.com
**Spec:** Background: `#ffffff` / Border: 1px solid `#eeeeee` / Arrows: `#000000`
**States observed:** Default

#### Newsletter Form
**Role:** Lead generation in footer
**Pages observed:** https://vizetto.com
**Spec:** Input Background: `#ffffff` / Border: 1px solid `#dddddd` / Button: `#0170b9`
**States observed:** Default

## Layout
Table: | Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Column Grid | 12-column |
| Section Gap | 80px |

## Do's
* Use `#000000` for primary navigation backgrounds to maintain brand authority.
* Apply `#f5f5f5` to alternate sections to break up long-form content.
* Ensure all primary CTAs use the blue accent `#0170b9`.
* Keep feature cards unrounded (0px radius) to match the technical aesthetic.
* Use `#4b4f58` for secondary body text to reduce visual vibration.

## Don'ts
* **Wrong:** Using `#0170b9` as a background for the entire page. **Right:** Use `#ffffff`. **Reason:** The brand is monochrome-first; blue is a functional accent.
* **Wrong:** Applying rounded corners to feature cards. **Right:** Use 0px or 4px max. **Reason:** The system uses a sharp, architectural geometry.
* **Wrong:** Labeling `#ff6900` (Orange) as the Vizetto Parent primary. **Right:** Use `#000000`. **Reason:** Saturated colors are reserved for sub-product differentiation.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --vizetto-black: #000000;
  --vizetto-white: #ffffff;
  --vizetto-gray-light: #f5f5f5;
  --vizetto-gray-mid: #e5e5e5;
  --vizetto-text-primary: #3a3a3a;
  --vizetto-accent-blue: #0170b9;
}
```

## Provenance
Table: | Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Homepage | https://vizetto.com | Desktop 1440px | 2026-06-06 |