← OpenDesign CURATED · OPEN · FREE
Vectary
A browser-based platform for creating and sharing interactive 3D and AR presentations.
design 3d
01
Identity DNA
3D design presentation AR interactive
A clean, professional design studio for digital product visualization
02
Color
#FBD302Accent
#252525Ink
#595959Ink soft
#FFFFFFBG
#FCFCFCBG soft
#F3F3F3BG quiet
#949494Muted
rgba(148, 148, 148, 0.12)Line
Clean white space with dark ink for clarity, using a single high-visibility yellow for promotional emphasis.
03
Typography
humanist-sans
display 56px · 500headline 36px · 500body 18px · 400small 14px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base with generous padding for breathing room
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #252525 for primary buttons, 1px solid #E0E0E0 for secondary elements
0px 0px 20px 11px rgba(148, 148, 148, 0.12)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered single-column hero layout with wide margins
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
Hover transitions on buttons (0.2s) · Interactive 3D model manipulation in viewport
Subtle background color shift or opacity change · Standard active state with slight scale or color change
08
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 09
Voice & Don'ts
Tone Professional, innovative, and empowering Headlines Action-oriented and benefit-focused CTAs Direct and encouraging (e.g., 'Create account', 'Let's talk') 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 Avoid: Technical jargon Avoid: Aggressive sales language Avoid: Overly playful or informal tone 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
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.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A perfect example of a modern SaaS hero section that balances professional restraint with innovative product showcasing through 3D visuals.
