# Vectary · Design system migration spec

> Source: https://www.vectary.com  ·  Curated by OpenDesign  ·  en

> A perfect example of a modern SaaS hero section that balances professional restraint with innovative product showcasing through 3D visuals.

## 1. Identity DNA

The Vectary design system is constructed like a clean, professional design studio for digital product visualization. Its identity is built on clarity, focusing the user's attention on interactive 3D and AR content rather than the interface itself.

**One-liner:** A browser-based platform for creating and sharing interactive 3D and AR presentations.
**Keywords:** 3D · design · presentation · AR · interactive
**Analogy:** A clean, professional design studio for digital product visualization

## 2. Color

The palette is a study in high-contrast clarity, dominated by a clean white field and deep ink for text. A single, high-visibility yellow is reserved with discipline for promotional emphasis, ensuring announcements command attention without cluttering the core experience.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FCFCFC` | card background |
| `--bg-quiet` | `#F3F3F3` | quiet area |
| `--ink` | `#252525` | body text |
| `--ink-soft` | `#595959` | secondary text |
| `--muted` | `#949494` | placeholder |
| `--accent` | `#FBD302` | single accent |
| `--line` | `rgba(148, 148, 148, 0.12)` | divider |

**Color principle:** Clean white space with dark ink for clarity, using a single high-visibility yellow for promotional emphasis.

The guiding principle is functional contrast: white space serves as the primary canvas, with color used sparingly and only for critical communication.

## 3. Typography

The typographic voice is professional and clear, employing a humanist sans-serif category like Inter or Fira Sans. Tight letter spacing and a scale anchored by a clear hero headline through to navigation labels ensure hierarchy without ornamental distraction.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -0.96px | Hero headline |
| headline | 36px | 1.25 | 500 | -0.54px | Section headers |
| body | 18px | 1.5 | 400 | -0.42px | Paragraphs and general text |
| small | 14px | 1.5 | 400 | -0.42px | Navigation and secondary labels |

## 4. Spacing

Spacing follows a consistent 4px base rhythm, but the system's defining feature is its generous padding, which creates deliberate breathing room between elements and reinforces the open, uncluttered layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous padding for breathing room

## 5. Surfaces

Surfaces are defined by soft, diffused shadows that lift media containers like cards without creating visual weight. Borders are used functionally: a crisp 1px dark line for primary actions and a lighter grey for secondary containment, maintaining a flat, clean aesthetic.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 0px 20px 11px rgba(148, 148, 148, 0.12)
- **Borders:** 1px solid #252525 for primary buttons, 1px solid #E0E0E0 for secondary elements

## 6. Layout

The layout skeleton is a centered, single-column arrangement that prioritizes the hero content. Wide margins frame the core interaction area, creating a focused pathway for the user's eye down the page toward interactive 3D models.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero layout with wide margins

## 7. Motion & Interaction

Motion philosophy is one of minimal, professional feedback. UI transitions are smooth and swift, using 0.2s easing for state changes, while the primary interactive motion is the manipulation of 3D models within the viewport itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Hover transitions on buttons (0.2s)
  - Interactive 3D model manipulation in viewport

- **Hover:** Subtle background color shift or opacity change
- **Click:** Standard active state with slight scale or color change
- **Transition:** 0.2s ease for color transitions
- **Keyboard:** Standard focus states inferred from professional SaaS UI

## 8. Voice & Don'ts

The editorial voice is professional, innovative, and empowering, with action-oriented headlines and direct calls-to-action. Language avoids technical jargon and aggressive sales pitches, maintaining a tone of capable partnership.

- **Tone:** Professional, innovative, and empowering
- **Headline style:** Action-oriented and benefit-focused
- **CTA style:** Direct and encouraging (e.g., 'Create account', 'Let's talk')
- **Avoid:** Technical jargon / Aggressive sales language / Overly playful or informal tone

### Don'ts
- ❌ Don't use ornate serif fonts — screenshot shows clean humanist sans-serif typography
- ❌ Don't use a multi-color gradient background — screenshot shows solid white (#FFFFFF) backgrounds
- ❌ Don't use thin, low-contrast text — screenshot shows dark ink (#252525) on light backgrounds
- ❌ Don't use sharp, jagged corners on containers — screenshot shows soft rounded borders (16px radius)
- ❌ Don't use dense, cluttered layouts — screenshot shows generous whitespace and centered alignment
- ❌ Don't use playful, comic-style illustrations — screenshot shows high-quality 3D product renders

This system deliberately avoids ornate typography, complex gradients, and dense layouts, committing instead to restraint to let the interactive 3D content speak.

## System Prompt (paste into AI tool)

```
Vectary is a SaaS platform for interactive 3D and AR design presentations. The design uses a clean white (#FFFFFF) background with dark ink (#252525) and soft grey (#949494) for secondary text. Typography is humanist-sans (Inter/Fira Sans) with tight letter spacing. A high-visibility yellow (#FBD302) is used for promotional banners. Critical donts: avoid heavy shadows, avoid complex gradients, and avoid ornate typography. The layout is centered and spacious, prioritizing 3D visual content.
```