Scale
vyn
Brand Color System · 2025
Forest Scale
forest
50
forest
100
forest
200
forest
300
forest
400
forest
500
forest
600
forest
700
forest
800
forest
900
forest
950
Semantic Tokens
primary
#206532
primary-dark
#004c1e
primary-light
#54946c
accent
#5fd082
accent-soft
#84d99f
accent-muted
#79a383
surface
#effdf4
surface-low
#eaf7ef
surface-mid
#dae7df
surface-high
#d9e6de
on-surface
#131e19
on-surface-variant
#40493f
Utility Styles
.bg-gradient-primary
Linear 135° · #004c1e → #206532
.grid-pattern
60px grid · 4% primary opacity
.glass
rgba white · blur(12px)
.glass-dark
rgba primary 15% · blur(12px)
.text-gradient
#004c1e → #206532 → #5fd082
.text-gradient-accent
#206532 → #5fd082
Typography
Display · 800
We build the web.
Display Gradient
Scale without limits.
Heading · 700
Fast. Reliable. Scalable.
Body · 400
We craft high-performance websites and web applications that grow with your business. From MVPs to enterprise platforms.
Caption · Mono
<scalevyn /> · web dev agency · est. 2025
Components
Buttons
Get Started
View Work
Learn More
Badges & Tags
React
Next.js
Node
Design
Available for projects
5+ years experience
Form Input
New Project
Let's build something great
Websites, apps, and platforms — engineered to scale.
Start a project →
Service Card
⚡
Custom web applications built with modern stacks. Performance-first, always.
React
TypeScript
Surface Levels
surface · #effdf4
surface-low · #eaf7ef
surface-mid · #dae7df
surface-high · #d9e6de