Logo
Log inSign up

Color System

Our color palette is intentionally designed to evoke a sense of innovation and trust. The primary purple conveys creativity and premium quality, while our supporting colors ensure accessibility and visual hierarchy.
Primary Colors
Purple 100

#F3E8FF

Purple 300

#D8B4FE

Purple 500

#A855F7

Purple 700

#7E22CE

Purple 900

#581C87

Secondary Colors
Slate 100

#F1F5F9

Slate 300

#CBD5E1

Slate 500

#64748B

Slate 700

#334155

Slate 900

#0F172A

Accent Colors
Teal 100

#CCFBF1

Teal 300

#5EEAD4

Teal 500

#14B8A6

Teal 700

#0F766E

Teal 900

#134E4A

System Colors
Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Neutral

#6B7280

Usage Guidelines
Do
  • Use purple as the primary action color for buttons and interactive elements
  • Maintain sufficient contrast ratios for text and background
  • Use our system colors consistently for feedback and alerts
  • Apply our secondary color palette for UI containers and backgrounds
Don't
  • Create new colors outside of our color system
  • Use low-contrast color combinations that reduce readability
  • Overuse accent colors which should be used sparingly
  • Mix multiple vibrant colors in the same section

Typography

Our typography system is designed for optimal readability and a clear hierarchy across platforms. We use a modern sans-serif typeface that communicates our brand voice with precision and clarity.
Headings

Heading 1

32px / Bold / Line height: 120%

Heading 2

24px / Bold / Line height: 120%

Heading 3

20px / Semibold / Line height: 120%

Heading 4

18px / Semibold / Line height: 120%

Heading 5

16px / Medium / Line height: 120%

Text Sizes

Large Text

18px / Regular / Line height: 150%

Body Text

16px / Regular / Line height: 150%

Small Text

14px / Regular / Line height: 150%

Extra Small Text

12px / Regular / Line height: 150%

Font Weights

Bold (700)

Used for primary headings and emphasis

Semibold (600)

Used for secondary headings and subheadings

Medium (500)

Used for tertiary headings and UI elements

Regular (400)

Used for body text and general content

Example Usage

Designing with Clarity

Good design is clear, purposeful, and accessible. It guides the user through their journey with intention and purpose.

At eqeepo, we focus on creating experiences that are both beautiful and functional, always putting user needs first.

Typography Best Practices
  • Maintain a consistent type hierarchy throughout the interface
  • Ensure text has sufficient contrast against its background
  • Use no more than 3 font weights to maintain visual consistency
  • Adjust line height based on text size and reading context

Components

Our component library provides consistent, reusable building blocks that follow our design principles. Each component is designed for accessibility, usability, and visual harmony within our design system.
Button Variants

Our button hierarchy uses color and border styles to indicate different levels of importance.

Disabled buttons use reduced opacity to indicate they are not interactive.

Button Sizes

Button sizes are designed for different contexts and should be chosen based on hierarchy and available space.

Voice & Tone

Our brand voice defines how we communicate with our audience across all touchpoints. It reflects our personality and values, creating a consistent experience that builds trust and recognition.
Our Voice Attributes
Clear

We communicate with precision and purpose, avoiding jargon and unnecessary complexity. Our messages are easy to understand regardless of the audience's technical background.

Confident

We speak with authority and expertise, but without arrogance. Our tone conveys assurance in our capabilities and confidence in our solutions.

Human

We're conversational and authentic, never robotic or overly formal. We speak person-to-person, creating connections through warmth and approachability.

Forward-thinking

Our language reflects our innovative mindset and focus on the future. We're optimistic about possibilities and excited about creating meaningful change.

Tone Adaptations
Marketing & Website

Inspiring and visionary, balancing technical expertise with accessibility. We emphasize benefits and outcomes while maintaining clarity and precision.

Product UI

Concise and helpful, focusing on guiding users efficiently. Instructions are clear and direct, with appropriate technical detail without overwhelming users.

Documentation

Detailed and precise, with step-by-step guidance. We maintain a helpful, educational tone while providing comprehensive information for both beginners and advanced users.

Support & Community

Empathetic and solution-oriented, acknowledging user challenges while providing confident guidance. We're conversational while remaining professional and respectful.

Writing Examples
Instead of This

"Our advanced proprietary algorithms leverage cutting-edge machine learning techniques to enable unprecedented automation capabilities for enterprise-level systems."

✘ Filled with jargon and buzzwords, overly complex, impersonal

Write This

"Our intelligent tools learn from your data to automate everyday tasks, saving you time and reducing errors so you can focus on what matters most."

✓ Clear benefits, accessible language, human-centered

Instead of This

"Error 5023: Operation failed due to invalid parameter configuration. Please reference documentation and retry with corrected inputs."

✘ Technical, unhelpful, impersonal, blames the user

Write This

"We couldn't complete this action because some information is missing. Try adding your project name and description, then give it another go."

✓ Clear problem, specific solution, friendly, conversational