---
name: Vectary
description: "A perfect example of a modern SaaS hero section that balances professional restraint with innovative product showcasing through 3D visuals."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#252525"
  secondary: "#595959"
  tertiary: "#FBD302"
  neutral: "#949494"
  bg-soft: "#FCFCFC"
  bg-quiet: "#F3F3F3"
  line: "rgba(148, 148, 148, 0.12)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.96px"
  headline:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.25
    fontWeight: 500
    letterSpacing: "-0.54px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.42px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.42px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A browser-based platform for creating and sharing interactive 3D and AR presentations.

*A clean, professional design studio for digital product visualization*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#252525`)** — uses `ink` token
- **Secondary text (`#595959`)** — uses `ink-soft` token
- **Accent (`#FBD302`)** — uses `accent` token
- **Muted (`#949494`)** — uses `muted` token
- **Borders (`rgba(148, 148, 148, 0.12)`)** — uses `line` token

## Typography

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

## Layout

Centered single-column hero layout with wide margins

*Rhythm:* Consistent 4px base with generous padding for breathing room

## Elevation & Depth

- 0px 0px 20px 11px rgba(148, 148, 148, 0.12)
- Borders: 1px solid #252525 for primary buttons, 1px solid #E0E0E0 for secondary elements

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill and rectangular shapes with solid backgrounds or borders
- **card:** Subtle rounded corners with soft shadows for media containers
- **input:** Minimalist rounded fields (inferred from SaaS pattern)
- **hero:** Full-width centered text block with supporting media below

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```