Flow Up.
Brand Architecture
FastFlowUp empowers learners and businesses to accelerate growth, adapting and advancing through AI-driven learning and expert guidance.
Parent Brand
AI Companion
Table of Contents
Our Purpose
Our mission is to create an integrated ecosystem where our users can thrive.
To be the leading catalyst platform that empowers individuals.
We exist to empower micro-entrepreneurs, corporate professionals and aspiring learners.
Core Values
Innovation
Pioneering AI-driven learning solutions that push boundaries and challenge the status quo.
Collaboration
Building together through shared knowledge, partnerships, and community-driven growth.
Agility
Moving fast, adapting quickly, and staying responsive to the evolving needs of our users.
Accountability
Taking ownership, delivering on promises, and maintaining the highest standards in everything.
Integrity
Operating with transparency, honesty, and ethical commitment to all stakeholders.
Logo System
Three configurations for every context. Always maintain integrity and clear space.
FastFlowUp Logos
Flowy Logos
Clear Space & Minimum Size
Clear Space
Maintain a minimum clear space equal to the height of the "F" in FastFlowUp around all sides of the logo. This ensures the logo breathes and maintains visual impact.
Minimum Sizes
| Full Logo (print) | 30mm wide |
| Full Logo (digital) | 120px wide |
| Mnemonic (print) | 12mm wide |
| Mnemonic (digital) | 32px wide |
Logo Misuse
Stretch or distort the logo
Change the logo colors
Add effects or shadows
Place on busy backgrounds
Co-Branding
When placing the FastFlowUp logo alongside partner logos, ensure equal visual weight. Separate with a vertical divider line using --purple-300. Maintain minimum clear space on both sides of the divider. The FastFlowUp logo should always appear first (left or top) in co-branding arrangements.
Color Pairing Tool
Select a background and text color to see the live preview and WCAG contrast rating.
Background Color
Text Color
Sample Heading
The quick brown fox jumps over the lazy dog. This is how your brand text will look with the selected color combination.
Approved Combos
Brand Palette
Purple Scale
Gradient Specs
Lime to Lavender
Purple to Lavender
Orange to Lime
Usage Ratios
Purple dominates the brand palette. Lime is reserved for CTAs and accents. Orange signals energy and urgency. Lavender softens and adds depth.
Type System
Two typefaces work in harmony: Anton for commanding headlines, Onest for readable body text.
NOPQRSTUVWXYZ
0123456789
Always uppercase. Line-height: 0.92. Letter-spacing: -0.02em.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 !@#$%^&*()
Line-height: 1.8 (body), 1.85 (descriptions). Mixed case.
Type Scale
Live Composition
Decorative Elements
Three signature elements add energy and motion to brand compositions. Use sparingly to create visual interest without overwhelming the design.
Spark
LavenderRepresents inspiration, ideas, and creative moments. Use near headlines or CTAs.
Star
LimeRepresents achievement, excellence, and success moments. Use for celebratory contexts.
Cross
OrangeRepresents connection, intersection, and collaboration. Use for partnership or community contexts.
Element Usage Rules
Flowy Mascot Library
20 expressive poses for every communication scenario. Click any card to preview full-size.
Character Library
50 diverse illustrated characters representing our community of learners, educators, and entrepreneurs.
Spacing Scale
Border Radius
| SM | 8px | |
| MD | 12px | |
| LG | 16px | |
| XL | 24px | |
| 2XL | 32px | |
| Full | 9999px |
Breakpoints
| Mobile | < 640px | Single column |
| Tablet | 640-1024px | 2 columns |
| Desktop | > 1024px | Full layout + nav |
Grid
| Content Max | 1200px |
| Grid Gap | 32px |
| Section Padding | 160px |
UI Components
Glass Cards
Feature Card
Cards use glass-morphism: semi-transparent background, backdrop blur, and subtle borders.
Badges & Tags
Inputs
Toast Notifications
Motion & Animation
Purposeful motion enhances the user experience. Every animation has a reason.
Ease Out
cubic-bezier(0.4, 0, 0.2, 1)
Hover to see · 400ms
Spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Hover to see · 500ms
Bounce
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Hover to see · 600ms
Animation Guidelines
| Micro-interactions | 150-300ms | Buttons, toggles, hover states |
| Transitions | 300-500ms | Card reveals, panel slides |
| Page transitions | 500-800ms | Section scrolls, route changes |
| Decorative loops | 8-20s | Floating elements, ambient motion |
Accessibility Standards
We aim for WCAG 2.1 AA compliance minimum. Use the color pairing tool in Section 04 to verify contrast ratios.
WCAG Contrast Requirements
| AAA Normal Text | 7:1 | Ideal target |
| AA Normal Text | 4.5:1 | Minimum required |
| AA Large Text | 3:1 | 18px bold or 24px+ |
| AA UI Components | 3:1 | Icons, borders, focus |
Accessibility Checklist
Quick Contrast Calculator
Voice & Tone
FastFlowUp speaks with confidence, warmth, and clarity. We empower without overwhelming.
Empowering
We speak to uplift and inspire confidence in our users' potential.
Clear
We remove jargon and communicate with precision and simplicity.
Dynamic
Our words move with energy, reflecting the pace of growth.
Writing Examples
"Unlock your potential with AI-driven learning that adapts to your pace."
"Our revolutionary platform leverages cutting-edge AI algorithms to optimize your synergistic learning experience."
"Start learning in minutes. No setup required."
"Simply complete the onboarding process to begin your transformational journey."
Brand Personality Spectrum
Always / Never
Always
Never
Photo Style
Photography Guidelines
Photo Treatment
Asset Inventory
| Asset Category | Count | Format | Location |
|---|---|---|---|
| FastFlowUp Logos | 3 | SVG | assets/fastflowup/logo/ |
| Flowy Logos | 3 | SVG | assets/flowy/logos/ |
| Brand Elements | 3 | SVG | assets/fastflowup/elements/ |
| Flowy Mascots | 20 | SVG | assets/flowy/mascots/ |
| FFU Characters | 50 | SVG | assets/fastflowup/characters/ |
Social Guidelines
Content Ratio: 20/30/50
20% Promotional
Product launches, feature announcements, course promos
30% Brand Story
Behind the scenes, team culture, mission-driven content
50% Value Content
Tips, tutorials, industry insights, community highlights
Design Layout System
Every social asset follows a layered spacing system to ensure content never gets cropped and maintains visual consistency across platforms.
Layout Anatomy — 4:5 Example (2000 × 2500px)
4:5 — 2000 × 2500px
96pxon all sides96pxinside the content frame1:1ratio inside the padded areaSpacing (margins + padding) should occupy ~40% of the canvas. The remaining 60% is the active design area. This ensures content is never cropped on any platform.
Platform Specs
Canvas Sizes
1080 x 10802000 x 25001080 x 19201200 x 6281200 x 6751640 x 6241280 x 720Spacing Per Format
96px96px96px96px64px64px80px80px