# Qvinci Design System

> Corporate blue reliability meets high-contrast functional green accents on a clean white foundation.

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

## TL;DR
Qvinci utilizes a professional "Enterprise Blue" (`#3a6aaf`) as its primary anchor for navigation and structural surfaces, contrasted against a vibrant "Action Green" (`#2da10c`) for primary conversion points. The system is built on a pure white foundation (`#ffffff`) with deep charcoal text (`#333333`) to ensure high legibility and a traditional financial-services aesthetic. Typography relies on **Roboto** for high-scale display and **-apple-system** for functional UI, maintaining a clean, sans-serif profile throughout. Geometry is characterized by a mix of sharp edges for layout containers and generous 50px pill-rounding for interactive buttons.

## Signature DNA
1. **The Conversion Pivot** (The deliberate shift from structural Blue `#3a6aaf` to actionable Green `#2da10c` for CTAs, visible on both Homepage and Pricing pages).
2. **Pill-Capsule Buttons** (Large 50px radius buttons with generous 15px/35px padding that stand out against sharp-edged grid layouts).
3. **High-Contrast Typography** (Deep `#333333` body text on `#ffffff` backgrounds, maintaining a strict professional clarity).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, borders | 137 | 1.0 | Computed |
| `{color.charcoal}` | `#333333` | Primary body text | 136 | 0.8 | Computed |
| `{color.black}` | `#000000` | Headings, secondary button text | 14 | 1.0 | Computed |
| `{color.dark-slate}` | `#191f29` | Footer text, deep emphasis | 10 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary-blue}` | `#3a6aaf` | Navigation, secondary buttons, borders | 37 | 0.8 | Computed |
| `{color.action-green}` | `#2da10c` | Primary CTA backgrounds, success text | 8 | 0.6 | Computed |
| `{color.warning-amber}` | `#fcb415` | Decorative surfaces, highlights | 8 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#2da10c` | Primary actions and positive indicators |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400, 500, 600, 700 | Display, Headings, Buttons | Roboto (Google Fonts) | Apache 2.0 |
| -apple-system | 400, 500, 600 | Body, Navigation, UI labels | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-xl}` | 72px | 72px | normal | 700 | Hero H1 | `h1.elementor-heading-title` |
| `{text.display-lg}` | 50px | 50px | normal | 700 | Section H2 | `h2.elementor-heading-title` |
| `{text.heading-md}` | 24px | 31.2px | normal | 600 | Sub-section H3 | `h3` |
| `{text.heading-sm}` | 22px | 26.4px | normal | 600 | Card titles | `h2.elementor-heading-title` |
| `{text.label-lg}` | 21px | 25.2px | normal | 700 | Menu dropdowns | `button#e-n-menu-dropdown-icon` |
| `{text.body-lg}` | 18px | 21.6px | normal | 400 | Lead paragraphs | `p:nth-of-type(1)` |
| `{text.body-md}` | 16px | 24px | normal | 400 | Default body | `header.elementor-40` |
| `{text.button}` | 16px | 19.2px | normal | 400 | CTA Labels | `a.elementor-button` |

### Principles
1. **Roboto for Impact**: All display sizes above 24px utilize Roboto at weight 700.
2. **System for Utility**: Navigation and footer links default to `-apple-system` for native legibility.
3. **Tight Display Leading**: Large display headers use 1:1 line-height (72px/72px) for compact visual weight.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 77 |
| `{space.sm}` | 15px | 15 |
| `{space.md}` | 16px | 15 |
| `{space.lg}` | 20px | 8 |
| `{space.xl}` | 35px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main layout containers, surfaces | 263 occurrences |
| `{radius.sm}` | 7px | Form controls, secondary buttons | `radius: 7px` |
| `{radius.md}` | 20px | Feature cards | `radius: 20px` |
| `{radius.pill}` | 50px | Primary CTA buttons | `radius: 50px` |

## Components

### Tier 1: Foundational

#### Primary Surface
**Role:** Standard page sectioning
**Pages observed:** [Homepage, Pricing]
**Spec:** Background `#ffffff` / Text `#333333` / Radius `0px` / Padding `0px 16px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Primary "Free Trial" and "Schedule Demo" actions
**Pages observed:** [Homepage, Pricing]
**Spec:** Background `#2da10c` / Text `#ffffff` / Radius `50px` / Padding `15px 35px` / Typography `16px Roboto`
**States observed:** Default: captured | Active: captured

#### Feature Card
**Role:** Highlighting specific user personas (Franchises, Accountants)
**Pages observed:** [Homepage]
**Spec:** Background `#fcb415` / Text `#3a6aaf` / Radius `50%` (Icon container) / Typography `24px`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site header
**Pages observed:** [Homepage, Pricing]
**Spec:** Background `#ffffff` / Text `#333333` / Height `64px` (inferred) / Typography `16px -apple-system`
**States observed:** Default: captured | Hover: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Gutter | 20px |
| Mobile Side Padding | 15px |

## Do's
- Use `#2da10c` exclusively for primary conversion buttons.
- Apply `50px` border-radius to all high-level CTA buttons.
- Pair Roboto 700 with `-apple-system` 400 for clear hierarchy.
- Maintain `#ffffff` as the primary background for all content-heavy sections.
- Use `#3a6aaf` for secondary navigation and structural accents.

## Don'ts
- **Wrong:** Using `#3a6aaf` for a primary "Free Trial" button. **Right:** Use `#2da10c`. **Reason:** Blue is for structure; Green is for conversion.
- **Wrong:** Applying rounded corners to main layout containers. **Right:** Keep containers at `0px`. **Reason:** Qvinci uses sharp-edged grids to anchor the layout.
- **Wrong:** Setting body text in Roboto. **Right:** Use `-apple-system`. **Reason:** Roboto is reserved for display and interactive labels.

## Similar brands
- QuickBooks
- Sage
- Xero
- Bill.com

## Quick start

```css
/* CSS Variables */
:root {
  --qvinci-blue: #3a6aaf;
  --qvinci-green: #2da10c;
  --qvinci-white: #ffffff;
  --qvinci-charcoal: #333333;
  --qvinci-radius-pill: 50px;
  --qvinci-font-display: 'Roboto', sans-serif;
  --qvinci-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Qvinci Action Green #2da10c, white text, and a 50px pill radius."
- "Design a hero section with a Roboto 700 headline at 72px and a charcoal #333333 body paragraph."
- "Build a 3-column feature grid using sharp 0px radius containers on a white #ffffff background."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scaling for H1 headers was not fully documented in the source.
- Shadow tokens were not present in the CSS variable declarations or computed styles.