Design System

A comprehensive guide to Zendeeps' visual language, components, and design principles. Use these elements to maintain consistency across all touchpoints.

Color Palette

Our natural vibrancy color palette combines earthy tones with bright accents to create a modern, energetic feel.

Primary Colors

Dark Green
#1A3A2E
--color-dark-green
White
#FFFFFF
--color-white

Accent Colors

Lime
#D4F75A
--color-lime
Coral
#EA5B3A
--color-coral
Cyan
#95DDEB
--color-cyan
Yellow
#F0E157
--color-yellow

Neutral Colors

Off White
#F8F8F8
--color-off-white
Light Gray
#E5E5E5
--color-light-gray
Gray
#999999
--color-gray
Dark Gray
#4A4A4A
--color-dark-gray
Black
#1A1A1A
--color-black

Gradient Backgrounds

Purple Gradient
<div class="bg-gradient-purple"></div>
Pink Gradient
<div class="bg-gradient-pink"></div>
Blue Gradient
<div class="bg-gradient-blue"></div>
Orange Gradient
<div class="bg-gradient-orange"></div>

Typography

We use two complementary typefaces: Big Shoulders Text for bold, attention-grabbing headlines and Inter for clean, readable body text.

Giant Text - Big Shoulders Text

<h1 class="giant-text">Your headline</h1>

Heading 1 - Big Shoulders Text

<h1 style="font-size: 3rem; font-weight: 800;">Your heading</h1>

Heading 2 - Big Shoulders Text

<h2 style="font-size: 2.5rem; font-weight: 700;">Your heading</h2>

Heading 3 - Big Shoulders Text

<h3 style="font-size: 2rem; font-weight: 700;">Your heading</h3>

Body Text Large - Inter Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

<p style="font-size: 1.125rem; line-height: 1.8;">Your text</p>

Body Text Regular - Inter Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Your text</p>

Body Text Small - Inter Regular. Perfect for captions, labels, and supporting text.

<p style="font-size: 0.875rem; color: var(--color-gray);">Your text</p>

Buttons

Our button component system includes multiple sizes, colors, and themes for various use cases.

Primary Buttons

Large - Lime
Book a Call
<site-button href="#" theme="dark" size="lg" color="lime"> Book a Call </site-button>
Medium - Yellow
Get Started
<site-button href="#" theme="dark" size="md" color="yellow"> Get Started </site-button>
Small - Black
Learn More
<site-button href="#" theme="dark" size="sm" color="black"> Learn More </site-button>

Secondary Buttons

Light Theme - Lime
Contact Us
<site-button href="#" theme="light" size="md" color="lime"> Contact Us </site-button>
Light Theme - Coral
View Projects
<site-button href="#" theme="light" size="md" color="coral"> View Projects </site-button>
Light Theme - Cyan
Read More
<site-button href="#" theme="light" size="md" color="cyan"> Read More </site-button>

Button Sizes

Extra Small (xs)
Extra Small
<site-button size="xs">Text</site-button>
Small (sm)
Small
<site-button size="sm">Text</site-button>
Medium (md)
Medium
<site-button size="md">Text</site-button>
Large (lg)
Large
<site-button size="lg">Text</site-button>

Spacing System

Consistent spacing creates visual rhythm and hierarchy. Use our utility classes for margins and padding.

p-1 / m-1
0.25rem (4px)
p-2 / m-2
0.5rem (8px)
p-3 / m-3
0.75rem (12px)
p-4 / m-4
1rem (16px)
p-6 / m-6
1.5rem (24px)
p-8 / m-8
2rem (32px)
p-12 / m-12
3rem (48px)
p-16 / m-16
4rem (64px)
p-20 / m-20
5rem (80px)
<!-- Padding utilities --> <div class="p-4">Padding all sides</div> <div class="pt-8">Padding top</div> <div class="pb-8">Padding bottom</div> <div class="px-6">Padding horizontal</div> <div class="py-6">Padding vertical</div> <!-- Margin utilities --> <div class="m-4">Margin all sides</div> <div class="mt-8">Margin top</div> <div class="mb-8">Margin bottom</div> <div class="mx-auto">Center with auto margin</div>

Utility Classes

Quick-apply utility classes for common styling needs.

Text Colors

<span class="text-lime">Lime text</span> <span class="text-coral">Coral text</span> <span class="text-cyan">Cyan text</span> <span class="text-yellow">Yellow text</span> <span class="text-white">White text</span> <span class="text-gray">Gray text</span>

Background Colors

<div class="bg-lime">Lime background</div> <div class="bg-coral">Coral background</div> <div class="bg-cyan">Cyan background</div> <div class="bg-yellow">Yellow background</div> <div class="bg-white">White background</div> <div class="bg-off-white">Off-white background</div> <div class="bg-light-gray">Light gray background</div>

Border Radius

<div class="rounded">4px border radius</div> <div class="rounded-lg">8px border radius</div> <div class="rounded-xl">12px border radius</div> <div class="rounded-2xl">16px border radius</div> <div class="rounded-3xl">24px border radius</div> <div class="rounded-full">9999px border radius</div>

Display & Flexbox

<div class="flex">Flex container</div> <div class="flex items-center">Align items center</div> <div class="flex justify-between">Space between</div> <div class="flex flex-col">Flex column</div> <div class="flex gap-4">Gap between items</div> <div class="grid grid-cols-2">2 column grid</div> <div class="hidden">Hide element</div>

Animation Classes

Scroll-triggered reveal animations to bring your content to life.

<!-- Fade up animation --> <div class="reveal">Content fades up</div> <!-- Fade from left --> <div class="reveal-left">Content slides from left</div> <!-- Fade from right --> <div class="reveal-right">Content slides from right</div> <!-- Scale animation --> <div class="reveal-scale">Content scales up</div> <!-- With delay --> <div class="reveal delay-200">Delayed 200ms</div> <div class="reveal delay-400">Delayed 400ms</div>

Reveal Animation Example

This element fades up when scrolled into view

Delayed Reveal Example

This element appears 200ms after the first

Common Components

Reusable component patterns used throughout the site.

Service Tags

UX/UI Design Webflow Development Branding Product Design
<span class="service-tag">Your Tag</span>

Card Component

Card Title

Card description text goes here. This is a simple card component pattern.

Learn More
<div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"> <h3>Card Title</h3> <p>Card description</p> <site-button href="#" size="sm">Learn More</site-button> </div>

CTA Banner

Ready to start your project?

Let's discuss how we can help you achieve your goals.

Get in Touch
<div class="bg-cyan" style="padding: 3rem; border-radius: 16px; text-align: center;"> <h2>Your CTA Heading</h2> <p>Your CTA description</p> <site-button href="#" theme="dark" size="md" color="black">CTA Button</site-button> </div>

Best Practices

Design Principles

  • Consistency: Use the design system components and variables consistently across all pages
  • Hierarchy: Establish clear visual hierarchy using typography scale and spacing
  • Accessibility: Ensure sufficient color contrast (minimum 4.5:1 for body text)
  • Performance: Use CSS variables for colors to maintain consistency and enable easy updates
  • Responsiveness: Test all components on mobile, tablet, and desktop viewports
  • Whitespace: Use generous spacing to let content breathe and improve readability

Need help implementing the design system?

Our team can help you build consistent, beautiful experiences using this style guide.

Contact Our Team