Design System & Pattern Library · 2026

VIGGO DESIGN SYSTEM

The complete visual language, parallax motion system, and component library powering the Viggo interface.

Explore System View Components
Scroll
[ 01. Typography ]

Type System

Scale & Hierarchy

H1 · Hero VIGGO
112px
700
-.055em
.875 lh
H1 · Gradient DESIGN
96px
700
-.05em
gradient
H2 · Section Type Scale & Hierarchy
32px
600
-.04em
H3 · Card Card Heading
24px
600
-.03em
H4 · Sub Subheading Text
18px
600
Body LG The complete visual language and motion system powering the Viggo interface.
18px
400
1.7 lh
Body Base body text used for descriptions and general content throughout the interface.
16px
400
1.65 lh
Body SM Small text for captions, labels, helper content.
14px
400
1.6 lh
Caption Section label · Caption · Tag
12px
600
.2em ls
Micro Design System · Pattern Library · 2026
10.4px
600
.25em ls
Mono #007bff · rgba(0,123,255,1) · hsl(211,100%,50%)
Space Mono
400
Quote "Geometry reveals the mathematical poetry hidden within spatial relationships."
20px
300
italic
[ 02. Colors & Surfaces ]

Color System

Palette & Surfaces

Primary

Blue Primary
#007bff
rgb(0,123,255)
hsl(211,100%,50%)
Blue Light
#29C5F6
rgb(41,197,246)
hsl(196,92%,56%)
Primary Gradient
#007bff → #29C5F6
135deg
Used on hero title
Blue Glow
rgba(0,123,255,0.4)
Shadows & glows
btn, canvas accent

Backgrounds

BG Primary
#05080f
rgb(5,8,15)
hsl(225,50%,4%)
BG Secondary
#080d1a
rgb(8,13,26)
hsl(225,53%,7%)
Glass Surface
rgba(255,255,255,0.03)
blur(16px) saturate(180%)
Primary container
Glass Hover
rgba(255,255,255,0.06)
border opacity 0.25
Used on :hover

Text Colors

White · Primary
#ffffff · AA
Headings, active states
Gray 1 · 85%
rgba(255,255,255,0.85)
Body text on glass
Gray 2 · 60%
rgba(255,255,255,0.6)
Secondary body text
Gray 3 · 40%
rgba(255,255,255,0.4)
Labels, captions, meta
Gray 4 · 20%
rgba(255,255,255,0.2)
Borders, dividers

Wireframe & Accent

Wireframe White
#ffffff op.0.9
Three.js foreground
Accent Blue
#60a5fa
Three.js accent shapes
Highlight Gold
#fbbf24
Three.js highlight
Dust Gray
#71717a
Three.js bg layer
[ 03. UI Components ]

Components

Interface Building Blocks

Buttons
Primary →
Default
Ghost Button
Ghost
Disabled
Glass
Tab
Inputs
Cards
⚡

Service Card

Hover to see glass shimmer and lift effect. Arrow appears on parent hover.

↗
🔷

Gradient Card

Background gradient overlay variant for featured or highlighted content.

Uptime 99.8%
Navbar
HomeAboutWorkContact
Badges & Tags
Live Active Error ★ Popular Documented Components & Patterns New
Tooltips
Tooltip content here
Info badge
rgba(0,123,255,0.2) · border blue/40
Modal / Overlay
Modal · Glass
Confirm Action

Are you sure? This action demonstrates the modal pattern — glass surface, gradient border, header + body + footer layout.

[ 04. Motion & Animations ]

Motion System

Principles & Patterns

Entrance Animations

Scroll Reveal · GSAP
✦
opacity:0 → 1
y: 28px → 0
duration: 0.8s
ease: power3.out
Text Split · Lines
VIGGO
translateY(110%) → 0
duration: 1s
ease: cubic(.23,1,.32,1)
stagger: 0.12s
Fade + Scale
🔵
opacity: 0 → 1
scale: 0.95 → 1
duration: 0.6s
delay: staggered

Hover Interactions

Lift + Shadow
↑
translateY(-8px)
shadow: blue-glow
duration: 0.3s
ease: power2.out
Scale Up
⊕
scale(1) → scale(1.1)
duration: 0.35s
ease: cubic-bezier
group-hover pattern
Glass Shimmer
Hover me →
::before left:-100% → 100%
gradient shimmer
duration: 0.7s ease-in-out
All .glass components

Background Animations

Slide Right Banner
PARALLAX · MOTION
Slide Left Banner
GEOMETRIC · FLOW
Blob Float

Parallax Engine · Three.js

// 3 layers: foreground (speed 0.6–1.5) · mid (0.4–0.9) · background (0.15–0.4)
// Mouse: rotate groups by mouseX × 0.12 / 0.06 / 0.03
// Scroll: translate groups by scrollY × 25 / 15 / 8
// Shapes: SphereGeometry · BoxGeometry · OctahedronGeometry · TetrahedronGeometry · TorusGeometry
// Materials: white wireframe (op.0.9) · accent blue #60a5fa · highlight gold #fbbf24 · dust gray #71717a
gsap.to(el, { opacity:1, y:0, duration:0.9, ease:"power3.out" });
[ 05. Icons ]

Icon System

Icon Library

Icons use SVG paths inline or via data-lucide attribute with Lucide Icons. They inherit text color and scale with width/height classes.

⚡Zap
🔮Crystal
⬡Hex
✦Star
↗Arrow UR
→Arrow R
↓Arrow D
⊕Plus
✕Close
☰Menu
◎Target
●Live Dot

Sizes & Containers

●12px
●16px
●20px
●24px
⚡
Glass
⚡
Blue
⚡
Primary