Blueberry UI Style Guide

Design Principles

Visual Identity

• Theme: Dark mode with blue glassmorphism
• Primary Color: Blue (#3b82f6 / blueberry-500)
• Background: Deep slate (#0f172a / slate-950)
• Glass Effects: Semi-transparent overlays with backdrop blur

Tech Stack

• CSS Framework: Tailwind CSS (via CDN)
• Interactivity: HTMX for server interactions
• Client State: Alpine.js for reactive UI
• Templates: Jinja2 server-side rendering

Color Palette

/* Blueberry color scale */
blueberry-50:  #eff6ff
blueberry-100: #dbeafe
blueberry-200: #bfdbfe
blueberry-300: #93c5fd
blueberry-400: #60a5fa
blueberry-500: #3b82f6  /* Primary */
blueberry-600: #2563eb
blueberry-700: #1d4ed8
blueberry-800: #1e40af
blueberry-900: #1e3a8a
blueberry-950: #172554

/* Background colors */
slate-950: #020617  /* Main background */
slate-900: #0f172a
slate-800: #1e293b

Component Classes

Glass Effects

<!-- Standard glass panel -->
<div class="glass rounded-lg p-6">
  <!-- Content -->
</div>

<!-- Darker glass panel -->
<div class="glass-darker rounded-lg p-6">
  <!-- Content -->
</div>

<!-- Glass button -->
<button class="glass-button px-4 py-2 rounded-lg text-blueberry-300">
  Click me
</button>

Layout Components

Page Container

<div class="container mx-auto px-4 py-8 max-w-7xl">
  <!-- Page content -->
</div>

Card Component

<div class="glass rounded-xl p-6 space-y-4">
  <h3 class="text-xl font-semibold text-blueberry-300">Card Title</h3>
  <p class="text-slate-400">Card content...</p>
</div>

Form Elements

<!-- Input field -->
<input type="text"
       class="w-full px-4 py-2 bg-slate-800/50 border border-slate-700 rounded-lg
              focus:border-blueberry-500 focus:ring-2 focus:ring-blueberry-500/20
              focus:outline-none transition-all"
       placeholder="Enter text...">

<!-- Button primary -->
<button class="glass-button px-6 py-2 rounded-lg text-blueberry-300 font-medium">
  Primary Action
</button>

<!-- Button secondary -->
<button class="px-6 py-2 rounded-lg border border-slate-700 hover:bg-slate-800/50
               transition-all text-slate-300">
  Secondary Action
</button>

HTMX Patterns

Loading States

<!-- Button with loading indicator -->
<button hx-post="/api/action"
        hx-target="#result"
        class="glass-button px-4 py-2 rounded-lg">
  <span class="htmx-indicator">
    <svg class="animate-spin h-4 w-4 inline mr-2">...</svg>
  </span>
  Submit
</button>

Live Updates

<!-- Auto-refreshing content -->
<div hx-get="/api/status"
     hx-trigger="every 5s"
     hx-swap="innerHTML"
     class="glass rounded-lg p-4">
  <!-- Dynamic content -->
</div>

Alpine.js Patterns

Toggle States

<div x-data="{ open: false }">
  <button @click="open = !open" class="glass-button px-4 py-2 rounded-lg">
    Toggle
  </button>
  <div x-show="open"
       x-transition
       class="mt-4 glass rounded-lg p-4">
    Hidden content
  </div>
</div>

Filtering

<div x-data="{ filter: '' }">
  <input x-model="filter"
         type="text"
         class="w-full px-4 py-2 bg-slate-800/50 border border-slate-700 rounded-lg"
         placeholder="Filter...">

  <div class="mt-4 space-y-2">
    <template x-for="item in items.filter(i => i.includes(filter))">
      <div class="glass rounded p-2" x-text="item"></div>
    </template>
  </div>
</div>

Typography

Headings

<h1 class="text-4xl font-bold text-blueberry-300">Page Title</h1>
<h2 class="text-2xl font-semibold text-slate-200">Section Title</h2>
<h3 class="text-xl font-medium text-slate-300">Subsection</h3>

Body Text

<p class="text-slate-400 leading-relaxed">Regular paragraph text</p>
<p class="text-sm text-slate-500">Small/secondary text</p>

Code

<code class="px-2 py-1 bg-slate-800 rounded text-blueberry-300 font-mono text-sm">
  inline code
</code>

<pre class="p-4 bg-slate-900 rounded-lg overflow-x-auto">
  <code class="text-slate-300 font-mono text-sm">
    code block
  </code>
</pre>

Responsive Design

Breakpoints

• Mobile: Default
• Tablet: sm: (640px+)
• Desktop: lg: (1024px+)

Example

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Grid items -->
</div>

Animation Guidelines

Transitions

• Use transition-all for smooth state changes
• Duration: 200-300ms for UI feedback
• Easing: Default Tailwind easing

Hover Effects

• Subtle elevation: hover:transform hover:-translate-y-0.5
• Glow effects: hover:shadow-lg hover:shadow-blueberry-500/20
• Color shifts: Lighten by one shade in color scale

Accessibility

Focus States

Always include visible focus indicators:

<button class="... focus:ring-2 focus:ring-blueberry-500 focus:outline-none">
  Accessible Button
</button>

ARIA Labels

Use proper ARIA labels for interactive elements:

<button aria-label="Close dialog" class="...">
  <svg>...</svg>
</button>

Best Practices

1. Consistency: Use the predefined glass classes
2. Performance: Minimize client-side JavaScript
3. Progressive Enhancement: Ensure functionality without JS
4. Semantic HTML: Use proper HTML5 elements
5. Mobile First: Design for mobile, enhance for desktop