banatie-landing/docs/theme.md

Banatie Design System & Style Guide

Design Philosophy: "Elegant Simplification"

Banatie's visual identity reflects our core mission: transforming complex AI technology into elegant, accessible solutions. Our design language balances technical sophistication with approachable simplicity, creating an experience that feels both cutting-edge and trustworthy.

Core Principles:

• Sophisticated Simplicity: Clean, uncluttered interfaces that feel premium
• Developer-Centric: Dark themes and technical aesthetics that resonate with our audience
• Innovation Signal: Modern gradients and effects that convey AI/tech innovation
• Trust Building: Professional polish that inspires confidence in our service

---

Color Palette

Primary Colors

Background Colors

--bg-primary: #0A0E1A;     /* Deep space blue-black */
--bg-secondary: #141925;   /* Elevated navy */
--bg-tertiary: #1E293B;    /* Card backgrounds */
--bg-accent: #0F172A;      /* Section dividers */

Brand Colors

--brand-primary: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
--brand-blue: #3B82F6;     /* Electric blue */
--brand-purple: #8B5CF6;   /* Vibrant purple */
--brand-indigo: #6366F1;   /* Supporting brand color */

Semantic Colors

--success: #10B981;        /* Emerald green */
--warning: #F59E0B;        /* Amber */
--error: #EF4444;          /* Red */
--info: #06B6D4;           /* Cyan */

Text Colors

--text-primary: #FFFFFF;    /* Headings, important text */
--text-secondary: #D1D5DB;  /* Body text */
--text-tertiary: #9CA3AF;   /* Muted text */
--text-quaternary: #6B7280; /* Placeholder text */

Border & Divider Colors

--border-primary: #374151;  /* Prominent borders */
--border-secondary: #1F2937; /* Subtle borders */
--border-accent: rgba(59, 130, 246, 0.3); /* Brand-colored borders */

Gradient Definitions

Primary Brand Gradient

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

Subtle Background Gradients

/* Mesh background */
background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
            #0A0E1A;

/* Card gradient overlay */
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);

CTA Gradients

/* Primary CTA */
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

/* Hover state */
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);

---

Typography

Font Families

Primary Font Stack

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

Code Font Stack

font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', monospace;

Typography Scale

Headings

/* H1 - Hero Headlines */
font-size: 3.5rem;     /* 56px */
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* H2 - Section Headers */
font-size: 2.25rem;    /* 36px */
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);

/* H3 - Subsection Headers */
font-size: 1.5rem;     /* 24px */
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);

/* H4 - Card Titles */
font-size: 1.25rem;    /* 20px */
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);

Body Text

/* Large Body - Hero Subtext */
font-size: 1.25rem;    /* 20px */
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);

/* Regular Body */
font-size: 1rem;       /* 16px */
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);

/* Small Text */
font-size: 0.875rem;   /* 14px */
font-weight: 400;
line-height: 1.5;
color: var(--text-tertiary);

Responsive Typography

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-title { font-size: 2.5rem; }
  .section-title { font-size: 1.875rem; }
  .large-body { font-size: 1.125rem; }
}

---

Component Specifications

Buttons

Primary CTA Button

.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

Secondary Button

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

Ghost Button

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

Form Elements

Input Fields

.input-field {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: var(--bg-secondary);
}

.input-field::placeholder {
  color: var(--text-quaternary);
}

Email Signup Form

.email-form {
  display: flex;
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
}

.email-input {
  flex: 1;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-size: 1rem;
}

.email-submit {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  color: #FFFFFF;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  white-space: nowrap;
}

Cards

Feature Card

.feature-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

Pricing Card

.pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  transition: all 0.3s ease;
}

.pricing-card.featured {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  border-radius: 16px 16px 0 0;
}

Navigation

Header

.header {
  background: rgba(10, 14, 26, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-secondary);
  padding: 16px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

.nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--brand-blue);
}

---

Background Patterns

Hero Background

.hero-background {
  background:
    radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    var(--bg-primary);
  position: relative;
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.5;
}

Section Background

.section-background {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.section-background-alt {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%),
    var(--bg-secondary);
}

---

Spacing System

Container Widths

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

Spacing Scale

/* Spacing variables */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
}

/* Section spacing */
.section-padding {
  padding: var(--space-4xl) 0;
}

.section-padding-sm {
  padding: var(--space-3xl) 0;
}

---

Animation & Transitions

Page Transitions

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

Hover Effects

.hover-glow {
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

---

Responsive Breakpoints

/* Mobile first approach */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* Usage */
@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

---

Brand Assets

Logo Usage

• Primary Logo: White version on dark backgrounds
• Secondary Logo: Gradient version for hero sections
• Minimum Size: 120px width for horizontal logo
• Clear Space: Minimum 2x logo height on all sides

Iconography

• Style: Phosphor Icons or Heroicons (thin stroke)
• Size Scale: 16px, 20px, 24px, 32px
• Color: Match text hierarchy (primary, secondary, tertiary)

---

Implementation Notes

Tailwind CSS Integration

This design system is optimized for Tailwind CSS implementation. Custom gradient classes and component utilities should be added to the Tailwind config.

Dark Mode Considerations

This design system is primarily dark-themed, reflecting developer preferences and modern AI tool aesthetics.

Performance

• Use backdrop-filter sparingly for performance
• Optimize gradient usage for mobile devices
• Consider reduced motion preferences for animations

Accessibility

• Maintain WCAG AA contrast ratios
• Ensure focus indicators are visible
• Support keyboard navigation
• Test with screen readers