# Zingsoft Design System

> Deep teal foundations anchored by high-contrast white surfaces and fluid wave-form section dividers.

**Source:** [https://zingsoft.com](https://zingsoft.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** ZingChart, ZingGrid, ZingTouch, ZingSoft Studio

## TL;DR
Zingsoft utilizes a "monochrome" parent structure that is heavily dominated by a specific deep teal primary color (`#003749`). The system relies on a high-contrast pairing of this teal against a pure white (`#ffffff`) canvas. Visual rhythm is established through large, fluid wave-shaped background transitions and a strict adherence to the Avenir typeface for all brand-critical headings. While the parent brand appears achromatic in its core logic, it serves as a container for a vibrant ecosystem of sub-products, each identified by their own accent colors (blues, pinks, and greens) which are defined in the global token set but used sparingly on the parent landing page.

## Signature DNA
1. **Fluid Wave Dividers** (Large SVG-based wave transitions between major sections like the Hero and Footer, creating a soft organic break in the grid.)
2. **Teal-on-White Contrast** (The primary brand voltage is carried by `#003749` text and buttons against `#ffffff` surfaces, maintaining a 15.4:1 contrast ratio.)
3. **Avenir Typography** (The consistent use of Avenir across all weights—400 to 700—for every heading level, providing a clean, geometric sans-serif identity.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| ZingChart | `#04a3f5` | Multi-color bar/line charts | Typography, Spacing | Accent Color |
| ZingGrid | `#003749` | Data grid icon | Typography, Spacing | N/A |
| ZingTouch | `#04a3f5` | Gesture/Signal icon | Typography, Spacing | Accent Color |
| ZingSoft Studio | `#003749` | Z-monogram circle | Typography, Spacing | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-reset` | `#ffffff` | Page background, button text, surface | 11 | 1.0 | computed_style |
| `--color-primary-1` | `#003749` | Primary text, button background, icons | 38 | 1.0 | `--font-color` |
| `--color-greyscale-1` | `#263137` | Dark neutral for deep text | 1 | 1.0 | declared_token |
| `--color-greyscale-5` | `#f6f8fa` | Subtle section background | 1 | 1.0 | declared_token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--link-color` | `#04a3f5` | Hyperlinks, sub-brand highlights | 14 | 1.0 | computed_style |
| `--color-secondary-1` | `#dc1257` | Product accent (decorative_only) | 1 | 1.0 | declared_token |
| `--color-quaternary-1` | `#218569` | Product accent (decorative_only) | 1 | 1.0 | declared_token |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--color-success` | `#00e7c0` | Success states |
| `--color-fail` | `#e94a7c` | Error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Avenir | 400, 500, 600, 700 | Headings, Body, Labels | Nunito or Montserrat | Proprietary |
| Arial | 400 | Form inputs, fallback | System Default | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{h1}` | 36px | 50.4px | normal | 400 | Hero Title | `h1#intro-title` |
| `{h2-bold}` | 32px | 41.6px | normal | 600 | Section Title | `h2#products-title` |
| `{h2-reg}` | 32px | 41.6px | normal | 400 | Section Title | `h2#about-us-title` |
| `{h3-md}` | 20px | 34px | normal | 500 | Small Headings | `h3#about-us--our-team-title` |
| `{h3-bold}` | 19px | 31.8px | normal | 700 | Subheadings | `h3` |
| `{body-lg}` | 19px | 32.3px | normal | 400 | Intro Body | `section#intro` |
| `{body-md}` | 16px | 27.2px | normal | 400 | Standard Body | `section#products` |
| `{label-bold}` | 16px | 27.2px | normal | 700 | Form Labels | `label.required` |

### Principles
1. **Geometric Heading Hierarchy:** All headings use Avenir, transitioning from weight 400 for large display titles to 600/700 for structural section titles.
2. **Generous Line Heights:** Body text maintains a 1.7x line-height ratio (16px/27.2px) to ensure legibility on high-density data pages.
3. **Achromatic Body:** Primary text content is strictly `#003749` (Teal) or `#000000` (Black), never using accent colors for long-form prose.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 20px | 5 |
| `{space.xl}` | 32px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Buttons, Sections, Cards | 55 occurrences |
| `{radius.sm}` | 3px | Text Inputs | `input#mce-EMAIL` |
| `{radius.md}` | 5px | Form Containers | input role |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default state for all cards and sections | 1.0 confidence |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., Newsletter Sign Up)
**Pages observed:** [https://zingsoft.com](https://zingsoft.com)
**Spec:** Background: `#003749` / Text: `#ffffff` / Radius: `0px` / Padding: `15px 20px` / Typography: Avenir 700
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Text Input
**Role:** Form data entry
**Pages observed:** [https://zingsoft.com](https://zingsoft.com)
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: `1px solid #abb0b2` / Radius: `3px` / Padding: `15px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Product Feature Block
**Role:** Showcasing sub-brands (ZingChart, ZingGrid)
**Pages observed:** [https://zingsoft.com](https://zingsoft.com)
**Spec:** Layout: 2-column split (Text left, Image right) / Gap: `32px` / Heading: Avenir 700 19px / Link: `#04a3f5`

#### Section Divider (Wave)
**Role:** Visual transition between high-contrast backgrounds
**Pages observed:** [https://zingsoft.com](https://zingsoft.com)
**Spec:** Background: `#04a3f5` or `#003749` / Shape: SVG Path / Height: Variable

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Padding (Vertical) | 60px - 80px |
| Grid | 12-column bootstrap-style |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Product blocks stack vertically; Wave dividers scale to viewport width. |
| Desktop | 1440px | 2-column side-by-side layouts for "About Us" and "Product" features. |

## Imagery & decoration
- **Iconography:** Uses a mix of brand logos and simple line icons (e.g., User icon for Login).
- **Illustrations:** Hero section features a stylized circular data visualization graphic.
- **Avoidance:** No drop shadows or rounded corners on primary structural elements.

## Do's
- Use `#003749` for all primary buttons and headings.
- Maintain a minimum line-height of 1.5 for all body text.
- Use Avenir for all text intended to carry brand authority.
- Implement the fluid wave divider when transitioning from a white surface to a colored footer.
- Keep border-radius at `0px` for all interactive elements except form inputs.

## Don'ts
- **Wrong:** Using `#04a3f5` (ZingChart Blue) as the background for a Zingsoft parent button. **Right:** Use `#003749`. **Reason:** Accent colors are reserved for sub-brand identification.
- Do not use Arial for headings; Arial is reserved for form input fallbacks.
- Do not apply drop shadows to product feature cards.
- Do not use weights lighter than 400 for Avenir headings.

## Similar brands
- Highcharts (Data-viz focus, clean sans-serif)
- Tableau (Corporate blue/teal palette, data-centric)
- MongoDB (Deep green/teal foundations, geometric type)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #003749;
  --color-accent: #04a3f5;
  --color-surface: #ffffff;
  --font-heading: 'Avenir', sans-serif;
  --font-body: 'Avenir', 'Arial', sans-serif;
  --radius-input: 3px;
  --space-base: 4px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-teal-brand: #003749;
  --color-blue-accent: #04a3f5;
  --font-avenir: "Avenir";
  --spacing-xl: 32px;
}
```

## Agent prompt examples
- "Generate a primary button using the Zingsoft teal `#003749` with 0px border radius and Avenir 700 text."
- "Create a section header using Avenir 600 at 32px with a line height of 41.6px."
- "Design a text input field with a 1px border in `#abb0b2` and a 3px border radius."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- Mobile-specific typography scale (px values) was not explicitly measured in the provided samples.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Landing | [https://zingsoft.com](https://zingsoft.com) | 1440px | 2026-06-06 |
| Mobile View | [https://zingsoft.com](https://zingsoft.com) | 390px | 2026-06-06 |