---
title: "Vectary design system"
variant: extended
source: https://www.vectary.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/vectary-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Vectary · Design System

> Quiet canvas, vivid 3D ideas

**Theme:** light · **Industry:** design · **Source:** https://www.vectary.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Vectary’s homepage pairs a restrained gray canvas with expansive product imagery to foreground AI-assisted design and interactive 3D. Lightweight typography, fine borders, and a narrow yellow announcement band keep the interface calm while guiding attention to product features.

## North star

Keep the interface quiet and spacious so the product’s 3D imagery, rather than UI decoration, carries the visual emphasis.

## Overview

The page is built on a continuous #f0f0f0 canvas, giving the long homepage a unified, quiet backdrop rather than relying on alternating section colours. A slim yellow announcement strip is the strongest brand accent; elsewhere, product and interface imagery supply most of the visual variation. Headings use light Fira Sans with close tracking, while Inter handles navigation, body copy, links, and controls in compact, readable weights. The hero centers its message above a broad collage of product and concept imagery, then later sections alternate centered introductions, large media panels, and three-column feature text. Generous vertical gaps separate these groups, with a wider page frame keeping the content orderly. White surfaces create contrast for media panels and outlined buttons; dark charcoal is reserved for the login control and footer. Borders are subtle and shadows are absent, so imagery and spacing—not card elevation—establish hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Mist | `#f0f0f0` | `--color-canvas-mist` | surface | Dominant page canvas and the shared backdrop across most homepage sections. |
| Soft Graphite | `#595959` | `--color-soft-graphite` | neutral | Primary body copy and supporting text against the light canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Media panels and light button surfaces that stand apart from the gray canvas. |
| Quiet Silver | `#949494` | `--color-quiet-silver` | neutral | Muted link text and fine button or interface borders. |
| Footer Black | `#0b0b0b` | `--color-footer-black` | surface | Full-width footer background, creating the page’s main dark section. |
| Charcoal Ink | `#252525` | `--color-charcoal-ink` | neutral | Navigation and link text, plus button outlines and dark interface details. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Selected heading, link, and badge text; not the dominant text colour. |
| Signal Yellow | `#fbd302` | `--color-signal-yellow` | accent | Announcement strip and small beta badge; a sparing attention cue. |
| Button Charcoal | `#313131` | `--color-button-charcoal` | semantic | Filled login control and occasional dark button or heading details. |

### Semantic aliases

`--color-canvas` → `#f0f0f0` (Canvas Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#0b0b0b` (Footer Black) · `--color-text` → `#595959` (Soft Graphite) · `--color-text-muted` → `#949494` (Quiet Silver) · `--color-text-subtle` → `#000000` (Pure Ink) · `--color-border` → `#949494` (Quiet Silver) · `--color-accent` → `#fbd302` (Signal Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#595959` | `#f0f0f0` | 6.15:1 | AA |
| `#595959` | `#ffffff` | 7:1 | AAA |
| `#595959` | `#0b0b0b` | 2.81:1 | fail |
| `#949494` | `#f0f0f0` | 2.66:1 | fail |
| `#949494` | `#ffffff` | 3.03:1 | AA-large |
| `#949494` | `#0b0b0b` | 6.49:1 | AA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0b0b0b` | 1.07:1 | fail |
| `#fbd302` | `#f0f0f0` | 1.28:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 300, 400, 500, 700, 600 | Navigation, body copy, captions, links, buttons, and most section headings. | Inter |
| Fira Sans | `--font-display` | webfont | 300 | Display headline and primary hero heading. | Roboto |

- **Inter:** Compact sans-serif UI typography; mostly regular or light weights with tight negative tracking. Uppercase is limited to small labels and badges.
- **Fira Sans:** Light-weight display treatment with close negative tracking and natural sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 300 | 1 | -0.033em | — | Fira Sans | Large, light hero display headline. |
| h1 | 36px | 300 | 1.25 | -0.027em | — | Fira Sans | Primary hero heading and major introductory title. |
| h2 | 22px | 400 | 1.09 | -0.025em | — | Inter | Centered product-section headings. |
| h3 | 20px | 500 | 1.4 | -0.035em | — | Inter | Feature titles in three-column text groups. |
| body | 16px | 300 | 1.5 | -0.034em | — | Inter | Feature descriptions and explanatory copy. |
| caption | 14px | 400 | 1.5 | -0.039em | — | Inter | Small labels and secondary supporting text. |
| button | 14px | 400 | 1.5 | -0.03em | — | Inter | Compact text inside outlined and filled controls. |
| nav | 16px | 400 | 1.69 | -0.034em | — | Inter | Main header navigation links. |
| link | 14px | 400 | 1.5 | -0.039em | — | Inter | Inline product links and footer navigation. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 30, 60 px.
- Section rhythm 60px · element gap 4px · card padding — · max content width 1260px.

A centered, wide desktop composition uses a measured maximum content width of 1260px. The hero aligns headline and copy centrally, with a full-width collage occupying the lower viewport. Below it, centered section introductions lead into large media panels and three-column feature rows. Sections retain the same light canvas, separated by generous vertical rhythm; the footer switches to a six-column dark layout. Overall density is comfortable, with compact text blocks and broad image areas.

## Shape & elevation

- Radius: button `8px` · media `16px` · badge `9999px` · xs `8px` · sm `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: measured shadows are absent, and section hierarchy comes from whitespace, image scale, and colour contrast. Fine gray borders define button edges and some controls. White media panels sit directly on the canvas with modest rounded corners; the footer creates a single dark, full-width layer.

## Imagery

Large product collages combine interface captures, 3D object renders, and small contextual cards. The hero uses a loosely connected spread of product images across the lower canvas; later showcase panels present larger interface and rendered-object compositions. The visuals are mostly rectangular with gently rounded media corners, neutral backgrounds, and minimal decorative framing. The measured palette includes colours found inside product imagery, but the brand identity is primarily the gray canvas and restrained interface.

## Components

### Announcement strip

A narrow yellow band at the top contains centered introductory copy and a short linked callout.

### Main navigation

Logo at left, compact Inter navigation across the center, and login plus sign-up controls on the right.

### Hero

Centered light display heading, supporting copy, paired calls to action, and a broad product-image collage below.

### Outlined button

White surface, dark text, a 1px #949494 border, 8px radius, and compact Inter label.

### Feature rows

Three-column text groups use concise Inter headings and lightweight explanatory copy over the shared canvas.

### Media showcase

Large product or interface imagery sits in a white, softly rounded panel with no visible shadow.

### Footer

A #0b0b0b background organizes links into six columns, with small muted text and a bottom utility row.

### Measured component styles

- **Primary button** (“Learn more about Canvas”): background #ffffff · text #252525 · border 1px solid #949494 · radius 8px · padding 6px 16px · 500 14px Inter
- **Secondary button** (“Login”): background #313131 · text #f7f7f7 · border 1px solid #252525 · radius 8px · padding 6px 16px · 400 14px Inter
- **Link** (“Contact us”): transparent background · text #949494 · radius 0px · padding 0px · 400 14px Inter
- **Badge** (“BETA”): background #fbd302 · text #000000 · radius 999px · padding 4px 8px · 700 9px Inter · uppercase
- **Navigation item** (“Product Solutions Business Resources Pri”): transparent background · text #252525 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #f0f0f0 as the continuous page canvas.
- Reserve #fbd302 for a slim announcement or small beta marker.
- Center major introductions above broad product imagery.
- Use Fira Sans lightly for display headings and Inter for interface text.
- Keep feature descriptions concise and arrange them in three columns where appropriate.
- Use borders and whitespace instead of shadows to define surfaces.

## Don't

- Do not introduce alternating saturated section backgrounds.
- Do not use yellow as a large panel or persistent CTA fill.
- Do not crowd the hero with dense copy or extra controls.
- Do not add pronounced shadows or layered card effects.
- Do not let decorative UI compete with the 3D product imagery.
- Do not make every section a boxed card.

## Agent prompt

Build a new Vectary-style SaaS page with a calm, spacious visual system. Use Canvas Mist (#f0f0f0) as the dominant background and Soft Graphite (#595959) for supporting copy. Set display headlines in light Fira Sans with close tracking; use Inter for navigation, body text, links, and controls. Keep a centered, wide content frame, generous vertical section spacing, and clear alternation between centered introductions, broad product showcases, and concise multi-column feature groups. Use Gallery White (#ffffff) for media surfaces and button fills, Quiet Silver (#949494) for fine borders, and Charcoal Ink (#252525) for navigation and button text. Reserve Signal Yellow (#fbd302) for small announcement or beta details. Keep shadows absent, corners restrained, and the footer a single Footer Black (#0b0b0b) band. Let product imagery provide the visual richness.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width hero on the shared light canvas; centered headline and actions above a broad product collage. | primary and secondary action, product context at a glance | light display headline, centered copy, image collage |
| 2 | feature-split | Centered section heading and introduction with a single inline product link. | feature introduction, learn-more link | small uppercase eyebrow, centered heading, light canvas |
| 3 | product-showcase | Large single-column media area spanning the content frame. | product demonstration | white media surface, rounded panel |
| 4 | feature-grid | Three evenly arranged feature text columns on the page canvas. | feature scanning, short explanatory copy | three-column grid, compact headings |
| 5 | feature-split | Centered Studio introduction with heading, short copy, and one product link. | feature introduction, learn-more link | uppercase eyebrow, centered heading, light canvas |
| 6 | product-showcase | Large single-column media panel within the content frame. | product demonstration | white media surface, rounded panel |
| 7 | feature-grid | Three-column text grid with concise feature titles and descriptions. | feature scanning, capability overview | three-column grid, compact text blocks |
| 8 | feature-grid | Three-column text grid continuing the feature rhythm. | feature scanning, capability overview | three-column grid, compact text blocks |
| 9 | feature-split | Centered introduction with an eyebrow, wide heading, and short explanatory copy. | team-workflow introduction | centered heading, shared light canvas |
| 10 | feature-grid | Three columns of feature copy on the light canvas. | feature scanning, workflow overview | three-column grid, compact headings |
| 11 | product-showcase | Full-width product imagery above the footer. | product demonstration | large interface composition, rounded media |
| 12 | footer | Full-width dark band with six link columns and a compact lower utility row. | grouped navigation, legal and utility links | dark background, multi-column link groups, small muted text |

## Source CSS custom properties (selected)

```css
--gizmo-blue-primary: #18a0fb;
--light--background-logos: white;
--dark--background: #252525;
--dark--text: white;
--dark--button-background: #222;
--dark--button-text: #252525;
--dark--text-subtitle: #949494;
--light--text-title: #252525;
--light--text-subtitle: #595959;
--light--background: #fcfcfc;
--light--button-background: #222;
--light--button-text: #fcfcfc;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/vectary-com