Brand Overview

Yours represents autonomy, intelligence, and the future of marketing. Our brand embodies sophistication with accessibility, power with simplicity.

Brand Essence

Mission

To democratize sophisticated marketing through autonomous AI that works tirelessly for every business.

Vision

A world where every business has access to world-class marketing intelligence, regardless of size or budget.

Values

Autonomy, Intelligence, Accessibility, Innovation, and Trustworthiness.

Brand Personality

We Are

🧠 Intelligent & Strategic
🚀 Forward-thinking & Innovative
💪 Reliable & Autonomous
🎯 Precise & Results-driven
✨ Sophisticated yet Approachable

We Are Not

❌ Overwhelming or Complex
❌ Cold or Impersonal
❌ Flashy or Gimmicky
❌ Exclusionary or Elitist
❌ Generic or Commoditized

Logo & Identity

Primary Logo

Logo Variations

Gradient Version

Primary logo for digital applications

Black Version

For print and single-color applications

White Version

For dark backgrounds and reversed applications

Typography Treatment

The "Yours" wordmark uses Playfair Display that balances elegance with modern accessibility. The flowing script conveys intelligence and sophistication while remaining highly readable.

font-family: 'Playfair Display', serif; font-weight: 700; background: linear-gradient(135deg, #14B8A6, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Complete Color Palette

Your expanded 29-color system with complete teal scale, neutral scale, functional colors, and alpha variants.

Your Brand Colors

Yours Teal

HEX: #00B8B5 RGB: 0, 184, 181 Primary brand color

Electric Blue

HEX: #3B82F6 RGB: 59, 130, 246 Secondary brand color

Royal Purple

HEX: #6366F1 RGB: 99, 102, 241 Accent color

Complete Teal Scale

Full teal variations including the missing darker tones for hover states, active states, and dark themes.

Teal 50

HEX: #F0FDFA Use: Subtle backgrounds

Teal 100

HEX: #CCFBF1 Use: Light accents

Teal 200

HEX: #99F6E4 Use: Borders, dividers

Teal 300

HEX: #5EEAD4 Use: Disabled states

Teal 400

HEX: #2DD4BF Use: Gradient highlights

Teal 500 (Primary)

HEX: #00B8B5 Use: Main brand color

Teal 600

HEX: #0D9488 Use: Hover states

Teal 700

HEX: #0F766E Use: Active states

Teal 800

HEX: #115E59 Use: Dark themes

Teal 900

HEX: #134E4A Use: Darkest variant

Complete Neutral Scale

Full grayscale for text hierarchy, backgrounds, borders, and UI elements. You only had 4 grays - now you have 12.

Pure White

HEX: #FFFFFF Use: Card backgrounds

Gray 50

HEX: #F8FAFC Use: Page backgrounds

Light Gray

HEX: #F1F5F9 Use: Secondary backgrounds

Gray 200

HEX: #E2E8F0 Use: Borders, dividers

Gray 300

HEX: #CBD5E1 Use: Input borders

Gray 400

HEX: #94A3B8 Use: Placeholders

Slate Gray

HEX: #64748B Use: Muted text

Gray 600

HEX: #475569 Use: Secondary text

Gray 700

HEX: #334155 Use: Body text

Gray 800

HEX: #1E293B Use: Headings

Charcoal

HEX: #1F2937 Use: Dark UI elements

Gray 900

HEX: #0F172A Use: Darkest text

Functional Colors

Semantic colors for user feedback, alerts, and interactive states that were completely missing from your original palette.

Success Green

HEX: #10B981 Use: Success messages, confirmations

Warning Orange

HEX: #F59E0B Use: Warnings, cautions

Error Red

HEX: #EF4444 Use: Errors, destructive actions

Info Blue

HEX: #06B6D4 Use: Information, tips

Alpha Variants

Transparency variants for glass effects, overlays, and subtle backgrounds - essential for your glassmorphism design system.

Teal 10%

rgba(0, 184, 181, 0.1) Use: Subtle backgrounds

Teal 30%

rgba(0, 184, 181, 0.3) Use: Button shadows

White 80%

rgba(255, 255, 255, 0.8) Use: Glass backgrounds

Dark 80%

rgba(15, 23, 42, 0.8) Use: Dark overlays

Brand Gradients

Signature gradient combinations for premium brand moments.

Primary Brand Gradient

background: linear-gradient(135deg, #00B8B5, #3B82F6);

Teal to Purple

background: linear-gradient(135deg, #00B8B5, #6366F1);

Blue to Purple

background: linear-gradient(135deg, #3B82F6, #6366F1);

Typography

Primary Typeface

Inter - Primary Font Google Fonts

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%^&*()

Script Typeface

Playfair Display - Script/Display Font Google Fonts

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Typography Scale

Headings

H1 Heading

48px / 800 weight / 1.2 line-height

H2 Heading

36px / 700 weight / 1.3 line-height

H3 Heading

30px / 600 weight / 1.4 line-height

Body Text

Large Body Text

20px / 400 weight / 1.6 line-height

Regular Body Text

16px / 400 weight / 1.6 line-height

Small Body Text

14px / 400 weight / 1.6 line-height

Buttons & Controls

All buttons use pill-shaped design with gradient backgrounds and advanced hover effects including shimmer animations and transforms from your actual website.

Primary CTA Buttons

Primary CTA with shimmer effect

Glass secondary button

Ghost outline button

Button Sizes

Compact actions

Standard size

Hero sections

Submit Button (Round)

Round submit button for forms and input areas

CSS Implementation

/* Yours Button System */ .yours-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 25px; font-weight: 600; font-size: 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3); } .yours-btn-primary { background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%); color: white; } .yours-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4); } /* Submit Button */ .yours-submit-btn { background: linear-gradient(135deg, #14B8A6, #2DD4BF); border-radius: 16px; width: 48px; height: 48px; } .yours-submit-btn:hover { transform: scale(1.05); }

Components

Your design system uses advanced glassmorphism effects with backdrop filters, sophisticated hover animations, and shimmer effects.

Glass Cards

Glass Card

Signature glassmorphism effect with backdrop blur, hover scaling, and 3D transform on hover.

Simple Card

Clean card with subtle shadow and hover lift effect for content areas.

Gradient Card

Premium gradient card with radial highlight overlay for featured content.

Quick Action Cards

🚀

Interactive Action

Hover to see the shimmer animation effect that sweeps across the card

✨

Enhanced UX

Combines transform, shadow, and border color changes for rich interactions

Community Cards

📈 Success Preview

Growth Story

Interactive Community Card

U

User Name

Hover card to see all effects

Input Components

Glass Input Container

Click inside to see focus effects: border glow, shadow enhancement, and subtle transform

Component CSS

/* Glass Card Component */ .yours-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .yours-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); } /* Quick Action with Shimmer */ .yours-quick-action:hover::before { left: 100%; } /* Input Container */ .yours-input-container:focus-within { border-color: #14B8A6; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1); transform: translateY(-2px); }

Launch Popup

Premium popup component with countdown timer, form validation, and glassmorphism effects for product launches and email capture.

Interactive popup with countdown timer and email validation

Popup Component CSS

/* Launch Popup Component */ .yours-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 9999; } .yours-popup-container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 24px; max-width: 600px; width: 90%; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3); animation: popupAppear 0.4s ease-out; }

Hero Section

Dynamic hero section with animated gradient text, glowing orb, and premium styling perfect for landing pages.

Autonomous Marketing. Unprecedented Growth.

Yours deploys a 24/7 AI marketing team that thinks, creates, and optimizes better than any human team.

Hero Section CSS

/* Hero Section Component */ .yours-hero-section { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 500px; padding: 4rem 2rem; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-orb { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; } .hero-title { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 2rem; } .hero-line-3, .hero-line-4 { background: linear-gradient(135deg, #00B8B5, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Spacing & Layout

Spacing Scale

Consistent spacing creates visual harmony and improves readability. Our spacing scale follows a geometric progression for natural rhythm.

XS - 4px

SM - 8px

MD - 16px

LG - 24px

XL - 32px

2XL - 48px

3XL - 64px

Layout Grid

12-Column Grid System

4 Columns

8 Columns

CSS Variables

:root { /* Spacing Scale */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ }

Shadows & Effects

Shadow Scale

Small Shadow

Subtle depth for small elements

Medium Shadow

Standard cards and components

Large Shadow

Elevated elements and modals

Extra Large Shadow

Hero elements and overlays

Special Effects

Glassmorphism

Modern frosted glass effect with backdrop blur and animated background

Gradient with Shine

Premium gradient with highlight overlay

Border Radius Scale

Small - 4px

Medium - 8px

Large - 12px

XL - 16px

2XL - 24px

Full - 9999px

Voice & Tone

Brand Voice

Intelligent

We speak with authority and insight, demonstrating deep understanding of marketing challenges and solutions.

Confident

We're assured in our capabilities while remaining humble and focused on customer success.

Approachable

Complex technology made simple. We avoid jargon and speak in clear, human terms.

Future-focused

We're always looking ahead, anticipating needs and embracing innovation.

Message Hierarchy

Primary Message

Deploy an autonomous marketing department that works 24/7. No hiring, no management, no burnout—just pure growth.

Supporting Messages

• AI-powered marketing intelligence
• Replaces entire marketing teams
• Continuous optimization and learning

Usage Examples

Website Headers

Your Autonomous Marketing Officer

Deploy an AI marketing team that works 24/7. No hiring, no management, no burnout—just pure growth.

Application Examples

Mobile App

📊 Today's Performance

🎯 Active Campaigns: 12

Presentation Slide

Yours

847% ROI Increase

Average improvement across 50,000+ businesses

Business Card

Sarah Chen

Head of Growth

sarah@yoursai.com

Assets & Downloads

Logo Downloads

Gradient Logo

Primary brand logo with gradient

Black Logo

Single color version for print

White Logo

For dark backgrounds

Quick Reference

/* Yours Brand Quick Reference */ /* Colors */ --primary-teal: #14B8A6; --teal-light: #2DD4BF; --teal-dark: #0F766E; --accent-blue: #3B82F6; /* Typography */ --font-primary: 'Inter', sans-serif; --font-script: 'Playfair Display', serif; /* Logo Usage */ font-family: 'Playfair Display', serif; font-weight: 700; background: linear-gradient(135deg, #14B8A6, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;