# Vasyerp Design System

> A corporate sky-blue canvas anchored by heavy geometric typography and high-contrast charcoal surfaces.

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

## TL;DR
Vasyerp utilizes a high-voltage blue palette centered on `#26a2dc` (Primary) and `#0081b6` (Primary Dark) to establish a professional SaaS identity. The system relies on **Plus Jakarta Sans** for all levels of hierarchy, notably pushing weights to 800 for primary headings to create a "heavy" information architecture. Surfaces alternate between pure white `#ffffff` and a very light blue-tinted gray `#f6f9fe`, while critical UI containers and footers use a deep `#333333` charcoal. Geometry is consistently rounded with a standard 10px radius for controls and 20px for cards, creating a modern, approachable enterprise feel.

## Signature DNA
1. **The Heavy Header** (Plus Jakarta Sans at weight 800 for H2 and H4 elements, creating a bold, authoritative typographic anchor on white canvases. Observed on Homepage and About pages.)
2. **Sky-Blue Saturation** (The aggressive use of `#26a2dc` for both primary CTAs and large-scale section backgrounds, often paired with white text for high-impact feature blocks.)
3. **Soft Elevation** (The use of `rgba(0, 0, 0, 0.12) 0px 4px 5px 0px` shadows to lift cards off the `#f6f9fe` background without using heavy borders.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary page background, button text | 71 | 1 | Computed style |
| `{colors.charcoal}` | `#333333` | Primary text, footer background | 512 | 1 | `--secondary-color` |
| `{colors.ice}` | `#f6f9fe` | Section backgrounds, card surfaces | 48 | 1 | `--section-bg` |
| `{colors.ink}` | `#212529` | Body text, secondary headings | 3 | 1 | `--bs-body-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#26a2dc` | Accent text, borders, button backgrounds | 142 | 1 | `--primary-color` |
| `{colors.primary-dark}` | `#0081b6` | Primary CTA backgrounds, hover states | 6 | 1 | `--primary-dark` |
| `{colors.blue-decorative}` | `#0d6efd` | Focus rings, link colors (decorative) | 1 | 1 | `--bs-primary` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{colors.success}` | `#198754` | Valid form states |
| `{colors.error}` | `#dc3545` | Invalid form states |
| `{colors.warning}` | `#ffc107` | Warning notifications |
| `{colors.info}` | `#3498db` | Informational toasts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Plus Jakarta Sans | 400, 500, 600, 700, 800 | Primary UI & Heading | Plus Jakarta Sans (Google) | SIL Open Font |
| Times New Roman | 400, 700 | Secondary Heading | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 30px | 36px | normal | 800 | Section headers | `h2` |
| `{type.h3}` | 28px | 33.6px | normal | 500 | Sub-section headers | `h3` |
| `{type.h4}` | 24px | 28.8px | normal | 800 | Feature titles | `h4.businessDetail-title` |
| `{type.h4-alt}` | 24px | 28.8px | normal | 700 | UI headings | `div.h4` |
| `{type.h5}` | 22px | 26.4px | normal | 700 | Card titles | `h3` |
| `{type.body}` | 16px | 24px | normal | 400 | Running text | `section#clients` |
| `{type.body-bold}`| 16px | 24px | normal | 700 | Active nav links | `a.side-nav-link.active` |
| `{type.small}` | 13px | 15.6px | normal | 700 | Captions, small labels | `h6` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for primary page sections to distinguish from weight 500 sub-headers.
2. **Tight Leading:** Headings maintain a tight 1.2x line height to keep multi-line titles compact.
3. **Achromatic Body:** All long-form reading text must use `#333333` or `#212529`, never the primary blue.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 88 |
| `{space.sm}` | 12px | 47 |
| `{space.md}` | 16px | 85 |
| `{space.lg}` | 24px | 57 |
| `{space.xl}` | 40px | 37 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.input}` | 5px | Text inputs, small cards | 5px (47 occurrences) |
| `{radius.md}` | 10px | Primary buttons, UI containers | 10px (242 occurrences) |
| `{radius.lg}` | 20px | Feature cards | 20px (20 occurrences) |
| `{radius.pill}` | 50px | Large badges, specific panels | 50px (14 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.12) 0px 4px 5px 0px` | Standard cards | 184 occurrences |
| `{shadow.glow}` | `rgba(38, 157, 215, 0.35) 0px 0px 4px 2px` | Active/Hovered blue cards | 8 occurrences |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.19) 0px 40px 70px -20px` | Hero modals | 2 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.primary-dark}` (#0081b6) / Text `{colors.white}` (#ffffff) / Radius `{radius.md}` (10px) / Typography `{type.body-bold}`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Icon Button
**Role:** Social media links, navigation controls
**Pages observed:** Homepage (Footer)
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.charcoal}` (#333333) / Radius 50% / Padding 10px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product modules or benefits
**Pages observed:** Homepage
**Spec:** Background `{colors.white}` (#ffffff) / Radius `{radius.lg}` (20px) / Shadow `{shadow.soft}` / Padding 10px
**States observed:** Default | Hover: Not captured

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.primary}` (#26a2dc) / Radius `{radius.md}` (10px) / Shadow `{shadow.glow}`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific

#### Footer Block
**Role:** Global site navigation and legal
**Pages observed:** Homepage, About, Pricing
**Spec:** Background `{colors.charcoal}` (#333333) / Text `{colors.white}` (#ffffff) / Typography `{type.body}`
**States observed:** Default

#### Section Highlight
**Role:** Highlighting specific feature sets (e.g., POS, ERP)
**Pages observed:** Homepage
**Spec:** Background `{colors.ice}` (#f6f9fe) / Border-radius `{radius.input}` (5px) / Text `{colors.primary}` (#26a2dc)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1320px |
| Section Padding | 40px - 60px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px |
| Desktop | 1440px | 12-column grid active; max-width container centered |

## Imagery & decoration
Vasyerp uses clean, high-fidelity software screenshots and vector-based integration logos. It avoids abstract photography in favor of literal product representation. Decorative elements include subtle blue gradients and circular "orbit" graphics used to visualize ecosystem connectivity.

## Do's
- Use **Plus Jakarta Sans** weight 800 for all primary section headers.
- Apply `{radius.md}` (10px) to all interactive button elements.
- Use `{colors.ice}` (#f6f9fe) for backgrounds of sections containing multiple white cards.
- Ensure primary CTAs use `{colors.primary-dark}` (#0081b6) for sufficient contrast.
- Maintain a 24px gutter between grid items.

## Don'ts
- **Don't** use weight 400 for headings; it lacks the brand's required authority.
- **Don't** use pure black (#000000) for body text; use `{colors.charcoal}` (#333333).
- **Don't** apply `{shadow.glow}` to non-primary elements.
- **Wrong:** Using `#0d6efd` as a primary button background. **Right:** Use `#0081b6`. **Reason:** `#0d6efd` is a Bootstrap default and lacks the specific brand voltage of the Vasyerp blue.

## Similar brands
- Zoho
- Freshworks
- Tally Solutions
- Odoo

## Quick start

```css
/* CSS Variables */
:root {
  --primary: #26a2dc;
  --primary-dark: #0081b6;
  --charcoal: #333333;
  --ice: #f6f9fe;
  --radius-md: 10px;
  --shadow-soft: 0 4px 5px 0 rgba(0, 0, 0, 0.12);
}
```

## Agent prompt examples
- "Create a feature section with a `#f6f9fe` background, featuring three white cards with 20px border radius and a soft `rgba(0,0,0,0.12)` shadow. Headers should be Plus Jakarta Sans weight 800."
- "Design a primary CTA button using `#0081b6` background, white text, and a 10px border radius."
- "Generate a footer component with a `#333333` background and white Plus Jakarta Sans typography at 16px."

## Known gaps
- Hover and Focus states for primary buttons were not explicitly captured in the static evidence.
- The specific transition timing for the "orbit" animation on the homepage was not recorded.

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