🎯 Core Design Philosophy

Bold Simplicity

High-contrast typography and restrained layout meet playful visuals.

Geometry + Utility

Use basic shapes to convey energy, motion, and modularity.

Color-Driven Confidence

Color is treated like a brand voice — loud, clear, and tight.

Flat-first Visuals

Use clean vectors, zero gradients in UI, bold in image containers.

Clarity at Scale

Everything must translate perfectly from desktop to mobile.

🖍️ Color System

Base Palette

Background

--bg-light

#F4F6F9

Text Main

--text-main

#111827

Text Secondary

--text-secondary

#4B5563

White

--btn-text

#FFFFFF

Brand Accent Palette

Accent Blue

--accent-blue

#3B82F6

Accent Yellow

--accent-yellow

#FACC15

Accent Magenta

--accent-magenta

#E879F9

Electric Gradient

--accent-electric

#60A5FA → #06B6D4

Orange Gradient

--accent-orange

#F59E0B → #F97316

🎯 3-Color Max Rule

Never combine more than three accents in one container. This maintains visual hierarchy and prevents cognitive overload.

✍️ Typography System

Heading 1 (Hero) • Inter • 56-64px • Extra Bold • Black

Meet the future of
digital communities

Heading 2 • Inter • 32-40px • Bold

Everything you need to grow

Body Text • Inter • 16-18px • Regular • #4B5563

Build vibrant meetups, manage AI platforms, and scale your SaaS with confidence. Modulite brings clarity to complexity.

Button Text • Inter • 14-16px • Medium

Start Building

Feature Labels • Inter • 12px • Semi-Bold • Uppercase

SIMPLE TO USE

🧠 Key Typographic Feel: Corporate but vibrant. Use heavy font weights and very clear hierarchy. Use short lines and split lines in hero headings.

🖼️ Geometric System

Shape Usage Guide

Circles
Background layers, containers

Zigzag
Disruption, tech, energy

Triangles
Direction, movement

Lightning
Speed, AI, energy

Square
Platforms, stability

/* Creating modular geometric art */
.geo-circle {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #60A5FA, #06B6D4);
  border-radius: 50%;
}

.geo-lightning {
  width: 80px;
  height: 160px;
  background: #FACC15;
  clip-path: polygon(20% 0%, 0% 40%, 40% 40%, 20% 100%, 60% 60%, 40% 60%, 80% 0%);
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

🧩 Components

Primary Button

Secondary Button

Icon Button Group

✓

LIGHTNING FAST

✅ Text & Background Rules

Background	Text Color	Notes
#F4F6F9 (light gray)	#111827	Primary zone
Gradient circle BG	Don't overlay text directly	Layer over white card if needed
Buttons (#111827)	Use white text	High contrast essential
Icons / micro elements	-	Stick to black, white, blue, or yellow only

🧠 Composition Rules

✅ DO

Use shapes to create energy and movement
Maintain high contrast between elements
Keep geometric elements abstract
Use gradients only in decorative shapes
Limit to 3 accent colors per composition

❌ DON'T

Place text directly on gradient backgrounds
Use more than 3 shapes in hero areas
Apply gradients to UI elements
Make shapes too complex or realistic
Forget drop shadows on yellow elements

📲 Native Mobile Translation

Meet the future

Build vibrant digital communities

Native App Guidelines

Web Element	Native App Equivalent
Hero headline	Welcome screen (split into two lines)
CTA Button	Primary CTA on bottom sheet
Geometric graphic	Lottie or SVG module on home screen
Icon row	Used in app tutorial or onboarding
Lightning bolt	Use as loading or boost animation

🔧 Design Tokens

:root {
  /* Base Palette */
  --bg-light: #F4F6F9;
  --text-main: #111827;
  --text-secondary: #4B5563;
  --btn-dark: #111827;
  --btn-text: #FFFFFF;
  
  /* Brand Accents */
  --accent-blue: #3B82F6;
  --accent-yellow: #FACC15;
  --accent-magenta: #E879F9;
  --accent-electric-start: #60A5FA;
  --accent-electric-end: #06B6D4;
  --accent-orange-start: #F59E0B;
  --accent-orange-end: #F97316;
  
  /* Typography */
  --font-sans: 'Inter', 'IBM Plex Sans', sans-serif;
  
  /* Spacing */
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  
  /* Border Radius */
  --radius-pill: 9999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
}

🧠 Extension Ideas

Group Management Dashboard

Use lightning bolt to highlight new members

Virtual Stage

Add motion gradient as a background orb

Speaker Cards

Feature modular shapes as badges

Event Poster Generator

Auto-layer circles + text using this visual language

App Onboarding

Build sticker-like modular sequence using zigzag, triangle, bolt

Modulite™