Alo Editions · IV

VELVET.

Soft tactility.
Layered depth and warmth.

48 ComponentsFramer Library
2 ThemesDark + Light
120+ TokensDesign System
v7 RuntimeSSR-Safe

Embrace Your Vision

I. Concept

The premise.

Deep plum surfaces with soft violet accents. This is the territory Edition VELVET claims — and the foundation every component is built upon.

Tactile Richness

Deep plum surfaces with soft violet accents. Backgrounds that feel layered and dimensional. Every surface has depth, not just color.

Serif Warmth

Playfair Display brings editorial gravitas with organic contrast. Thick-thin strokes that reward close reading. Beauty in the details.

Soft Depth

Layered shadows, blurred backdrops, and gentle gradients create physical presence. Glassmorphism done with restraint — premium, not trendy.

Generous Spacing

More breathing room than any other Edition. Wide margins, tall line heights, unhurried rhythm. Content exists in space, not on a surface.

Embrace Your Vision

II. Composition

Type & color.

The specimen. How Edition VELVET's typographic voice and color palette work at every scale — from micro-labels to viewport-filling headlines.

Playfair Display · 700 · Mixed case
Tactile Richness
Soft Depth
VELVET
VEL
Deep#0D0A0F
Base#16121A
Elevated#1E1922
Plum#8B5E8B
Violet#A87BA8
Warm#C8B898
Cream#F4F0EC
HeroVELVETPlayfair Display 700 · 4.5rem
DisplayElegant Display ItalicCormorant Garamond 300i · -0.01em
BodyBody text with generous leading for comfortable reading across long passages.Barlow 300 · 1rem · 1.72 line-height
AccentAccent text for emphasis and key terms.Barlow 400 · color: accent-dk
LinkLinked text with underline offsetBarlow 400 · accent-dk · underline 3px
LabelLABEL TEXTBarlow Condensed 500 · 0.18em · uppercase
RomanIV. MODULARITYBarlow Condensed 500 · gold · 0.18em

Embrace Your Vision

III. Motion

Easing & timing.

Four branded curves. Six duration tokens. The law: animate only transform and opacity. Motion is personality, not decoration. Hover the curves to see each one in action.

Cinematic
[0.16, 1, 0.3, 1]
Alo
[0.22, 0.68, 0, 1.2]
Magnetic
[0.34, 1.56, 0.64, 1]
Reveal
[0.0, 0.0, 0.15, 1]
Fast150ms
Base400ms
Calm600ms
Slow800ms
Stately1000ms
Cinematic1400ms

Live Preview — Hover to experience the motion

Magnetic easing · 600ms · transform only

A system this considered deserves to be experienced, not just described.

Explore the Edition

IV. Modularity

What's inside.

48 components built for Framer with property controls, breakpoint variants, and v7 runtime safety. Token-aware via parseToken — connects to Tokens Studio without configuration.

Navigation
Sticky header, scroll-reveal nav, mega menu, mobile drawer with keyboard support.
6 variants
Heroes
Full-bleed, split, centered, and editorial heroes with parallax and entry animations.
8 variants
Content Blocks
50/50 splits, feature grids, testimonials, and FAQs. CMS-ready with collection bindings.
12 variants
CTAs & Forms
Buttons, input groups, newsletter captures. Approved CTA language built into defaults.
8 variants
Data & Charts
Bar charts, stat counters, metric cards. SVG-based with entrance animations and tooltips.
6 variants
Footers & Dividers
Gallery index footer, whisper dividers, micro-phrase rules, and seal mark variations.
8 variants
48
Components
120+
Tokens
2
Themes
3
Breakpoints

Embrace Your Vision

V. Adaptation

Two themes.
Three breakpoints.

Every component ships with dark and light variants. Tokens Studio sync means switching themes updates every surface, text, and accent in one action.

Dark Mode
VELVET.
The default atmosphere — surfaces recede, accents emerge, content breathes in darkness.
Light Mode
VELVET.
Same hierarchy, same components, different atmosphere. Clarity over mood.
1440 × 900
Desktop
≥ 1024px
768 × 1024
Tablet
768 – 1023px
375 × 812
Phone
≤ 767px

Embrace Your Vision

"Every decision in this system was tested against real constraints — contrast ratios, runtime safety, responsive breakpoints. Nothing ships until it passes 169 automated checks."

Alonzo Wright-Bey · AloDesignpros

A. mark

Edition IV

$199

One-time · Lifetime updates · Commercial license

48 Components 120+ Tokens Dark + Light 3 Breakpoints v7 Runtime Tokens Studio Figma Source
Request Access
30-day refund guarantee Secure checkout via Gumroad Instant download

FAQ

Common questions.

What exactly do I receive?+

A ZIP file containing 48 Framer Code Components (.tsx), token foundation files (tokenSync.ts, parseToken.ts), Tokens Studio JSON, 6 interaction overrides, 5 interactive demo components, a styles reference, and a setup guide. Everything you need to build a complete site in Framer.

Can I use this for client projects?+

Yes. One license covers unlimited projects for one team (up to 5 people). Use it on as many client sites as you want. You cannot resell the Edition files themselves as a standalone product.

Do I need Tokens Studio?+

No. Components work with hardcoded defaults out of the box. Tokens Studio adds one-click theme switching and design-to-code sync but is completely optional.

What if it doesn't work for me?+

30-day refund, no questions asked. Email alodesignpros@gmail.com within 30 days for a full refund processed within 48 hours.

How do I get updates?+

Lifetime updates via Gumroad. When we add components or fix bugs, you receive an email with a new download link. Your existing Framer project structure stays intact.

How do I get support?+

Email alodesignpros@gmail.com with your Gumroad order number. We respond within 24 hours on business days. Support covers installation, component questions, and bug reports.

Embrace Your Vision