Alo Editions · I

RED.

Commanding warmth.
Deep matte intensity.

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

Embrace Your Vision

I. Concept

The premise.

Big Shoulders 900 at viewport scale. This is the territory Edition RED claims — and the foundation every component is built upon.

Commanding Authority

Big Shoulders 900 at viewport scale. Headlines that set the tone before a word is fully read. Type as architecture, not decoration.

Warm Materiality

Dark surfaces with red undertones and grain textures. Gold appears only in hairlines. Radial glows that feel physical, not digital.

Cinematic Pacing

Minimum 600ms for primary transitions. Four branded easing curves tuned for luxury. Motion that breathes and never rushes.

Token-Native

Every color, spacing, radius, and timing value is a semantic token. Tokens Studio sync and multi-theme switching from day one.

Embrace Your Vision

II. Composition

Type & color.

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

Big Shoulders Display · 900 · Uppercase
Commanding Warmth
Deep Matte
RED.
RED
Deep#0C0A08
Base#161412
Elevated#1E1B18
Primary#B5442A
On Dark#D46642
Gold#C8AF78
Light#F2EFE9
HeroREDBig Shoulders Display 900 · 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
RED.
The default atmosphere — surfaces recede, accents emerge, content breathes in darkness.
Light Mode
RED.
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 I

$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