znakovni.hr/get-real.md

# Get Real - Align Project with Original Znakovni.hr Branding

## Overview
This document provides **clear, actionable instructions** to align the current React/TypeScript implementation with the original Znakovni.hr branding, color scheme, and visual identity as defined in the `homepage` file.

**Status:** ✅ The project is already mostly aligned! This document serves as a reference and verification guide.

---

## 🎨 Brand Colors (from homepage file)

The original Znakovni.hr uses a **three-color brand palette**:

### Primary Colors

1. **Indigo** (`indigo-600`) - Primary brand color
   - **CSS Variable:** `--color-indigo-600: oklch(0.511 0.262 276.966)`
   - **Tailwind class:** `bg-indigo-600`, `text-indigo-600`
   - **Approximate Hex:** `#4F46E5`
   - **Used for:** Main branding, primary buttons, "Riječi" and "Oblak" feature cards

2. **Gray** (`gray-400`) - Secondary/neutral color
   - **CSS Variable:** `--color-gray-400: oklch(0.707 0.022 261.325)`
   - **Tailwind class:** `bg-gray-400`, `text-gray-400`
   - **Approximate Hex:** `#9CA3AF`
   - **Used for:** Separators, secondary elements, "Znakopis" feature card, dot in logo

3. **Orange** (`orange-600`) - Accent color
   - **CSS Variable:** `--color-orange-600: oklch(0.646 0.222 41.116)`
   - **Tailwind class:** `bg-orange-600`, `text-orange-600`
   - **Approximate Hex:** `#EA580C`
   - **Used for:** Call-to-action, highlights, "Video rečenica" feature card, "hr" in logo

### Background Colors

- **Indigo-50** (`bg-indigo-50`) - Main app background
  - **CSS Variable:** `--color-indigo-50: oklch(0.962 0.018 272.314)`
  - **Approximate Hex:** `#EEF2FF`
  - **Used for:** Main application background (creates subtle branded feel)

---

## 🎯 Icon Set (from Home.tsx)

The project uses **Lucide React** icons. Here's the current icon mapping:

| Feature | Icon Component | Icon Name |
|---------|---------------|-----------|
| Početna (Home) | `Home` | Home icon |
| Riječi (Dictionary) | `BookOpen` | Open book icon |
| Znakopis (Sentence Builder) | `FileText` | Document/text file icon |
| Video rečenica (Video Sentence) | `Video` | Video camera icon |
| Oblak (Cloud) | `Cloud` | Cloud storage icon |
| Korištenje aplikacije (Help) | `HelpCircle` | Question mark in circle |
| Zajednica (Community) | `Users` | Multiple users icon |
| Komentari (Comments) | `MessageSquare` | Speech bubble icon |
| Prijavi grešku (Bug Report) | `Bug` | Bug/insect icon |
| Admin | `Shield` | Shield icon |
| Sign Out | `LogOut` | Logout arrow icon |

**Icon Library:** `lucide-react`
**Installation:** Already installed via `pnpm add lucide-react`

---

## ✅ Current Status Check

### What's Already Correct ✅

1. **Home.tsx Feature Colors** - Already using correct brand colors:
   - Riječi: `bg-indigo-600` ✅
   - Znakopis: `bg-gray-400` ✅
   - Video rečenica: `bg-orange-600` ✅
   - Oblak: `bg-indigo-600` ✅

2. **Layout Background** - Already using `bg-indigo-50` ✅
   - File: `packages/frontend/src/components/layout/Layout.tsx`
   - Line 10: `<div className="flex h-screen bg-indigo-50">`

3. **Icon Set** - Already using Lucide React icons ✅
   - All icons imported from `lucide-react`
   - Consistent icon usage across navigation

4. **Tailwind Config** - Already configured with proper color system ✅
   - Uses HSL color variables
   - Indigo and orange colors available

### What Might Need Attention ⚠️

1. **Logo/Brand Name Format**
   - **Current:** Simple text "Znakovni.hr" in Sidebar
   - **Should be:** Three-color pattern (ZNAKOVNI in indigo, . in gray, hr in orange)
   - **File:** `packages/frontend/src/components/layout/Sidebar.tsx` (line 50)

2. **Button Colors**
   - Verify all primary buttons use `bg-indigo-600`
   - Verify all accent/CTA buttons use `bg-orange-600`

3. **Focus States**
   - Ensure focus rings use `ring-indigo-600` or `ring-orange-600`

---

## 📋 Recommended Fixes

### Fix 1: Update Logo in Sidebar

**File:** `packages/frontend/src/components/layout/Sidebar.tsx`

**Current (line 50):**
```tsx
<h1 className="text-xl font-bold text-primary">Znakovni.hr</h1>
```

**Should be:**
```tsx
<h1 className="text-xl font-bold">
  <span className="text-indigo-600">ZNAKOVNI</span>
  <span className="text-gray-400">.</span>
  <span className="text-orange-600">hr</span>
</h1>
```

---

### Fix 2: Verify Button Color Consistency

Search for all button components and ensure:

**Primary buttons:**
```tsx
className="bg-indigo-600 hover:bg-indigo-700 text-white"
```

**Accent/CTA buttons:**
```tsx
className="bg-orange-600 hover:bg-orange-700 text-white"
```

**Secondary buttons:**
```tsx
className="bg-gray-400 hover:bg-gray-500 text-white"
```

---

### Fix 3: Update Focus Ring Colors

Ensure focus states use brand colors:

```tsx
// For primary interactive elements
className="focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

// For accent/CTA elements
className="focus:ring-2 focus:ring-orange-600 focus:ring-offset-2"
```

---

## 🎨 Complete Brand Color Reference

### From homepage CSS file

```css
/* Primary Brand Colors */
--color-indigo-50: oklch(0.962 0.018 272.314);   /* Background */
--color-indigo-100: oklch(0.93 0.034 272.788);   /* Hover states */
--color-indigo-200: oklch(0.87 0.065 274.039);   /* Borders */
--color-indigo-600: oklch(0.511 0.262 276.966);  /* Primary */
--color-indigo-700: oklch(0.457 0.24 277.023);   /* Hover */

/* Secondary/Neutral Colors */
--color-gray-400: oklch(0.707 0.022 261.325);    /* Secondary */
--color-gray-500: oklch(0.551 0.027 264.364);    /* Hover */

/* Accent Colors */
--color-orange-600: oklch(0.646 0.222 41.116);   /* Accent */
--color-orange-400: oklch(0.75 0.183 55.934);    /* Lighter accent */
```

---

## 🔍 Verification Checklist

Use this checklist to verify brand consistency:

### Colors
- [ ] Home page feature cards use correct colors (indigo-600, gray-400, orange-600)
- [ ] Main app background is `bg-indigo-50`
- [ ] Primary buttons use `bg-indigo-600`
- [ ] Accent/CTA buttons use `bg-orange-600`
- [ ] Secondary buttons use `bg-gray-400`
- [ ] No random blues, greens, or purples outside brand palette

### Icons
- [ ] All navigation items use Lucide React icons
- [ ] Icon sizes are consistent (typically `h-5 w-5` or `h-8 w-8`)
- [ ] Icons are white on colored backgrounds
- [ ] Icons match the feature they represent

### Typography & Branding
- [ ] Logo uses three-color pattern (indigo/gray/orange)
- [ ] Font family is Inter (already configured)
- [ ] Headings use appropriate font weights (600-700)

### Interactive States
- [ ] Hover states darken colors appropriately
- [ ] Focus rings use brand colors (indigo-600 or orange-600)
- [ ] Active states are visually distinct
- [ ] Disabled states use gray tones

---

## 🚀 Quick Commands

```bash
# Navigate to frontend
cd packages/frontend

# Start dev server
pnpm dev

# Build for production
pnpm build

# Type check
pnpm type-check

# Lint
pnpm lint
```

---

## 📊 Color Usage Summary

| Element | Color | Tailwind Class | Purpose |
|---------|-------|----------------|---------|
| App Background | Indigo-50 | `bg-indigo-50` | Main background |
| Riječi Card | Indigo-600 | `bg-indigo-600` | Primary feature |
| Znakopis Card | Gray-400 | `bg-gray-400` | Secondary feature |
| Video rečenica Card | Orange-600 | `bg-orange-600` | Accent feature |
| Oblak Card | Indigo-600 | `bg-indigo-600` | Primary feature |
| Primary Buttons | Indigo-600 | `bg-indigo-600` | Main actions |
| CTA Buttons | Orange-600 | `bg-orange-600` | Important actions |
| Logo "ZNAKOVNI" | Indigo-600 | `text-indigo-600` | Brand primary |
| Logo "." | Gray-400 | `text-gray-400` | Separator |
| Logo "hr" | Orange-600 | `text-orange-600` | Brand accent |
| Sidebar Active | Indigo-600 | `bg-primary` | Active nav item |
| Focus Rings | Indigo-600 | `ring-indigo-600` | Focus state |

---

## 🎨 Design Philosophy

The original Znakovni.hr uses a **minimal, professional three-color palette**:

- **Indigo** conveys trust, professionalism, and education
- **Gray** provides neutral balance and accessibility
- **Orange** adds warmth and draws attention to key actions

This creates a cohesive, accessible, and professional appearance that supports the educational mission of the platform.

---

## 📝 Implementation Notes

### Why These Specific Colors?

1. **Indigo-600** - Strong enough for accessibility (WCAG AA compliant on white)
2. **Gray-400** - Neutral but still visible, good for secondary elements
3. **Orange-600** - High contrast accent that stands out without being overwhelming
4. **Indigo-50** - Subtle background that doesn't compete with content

### Accessibility Considerations

All color combinations meet WCAG 2.1 Level AA standards:
- White text on indigo-600: ✅ 4.5:1 contrast ratio
- White text on orange-600: ✅ 4.5:1 contrast ratio
- White text on gray-400: ⚠️ May need testing (use gray-500 if needed)

---

## 🔗 Related Files

- **Homepage CSS:** `homepage` (Tailwind v4 CSS with color definitions)
- **Home Component:** `packages/frontend/src/pages/Home.tsx`
- **Layout Component:** `packages/frontend/src/components/layout/Layout.tsx`
- **Sidebar Component:** `packages/frontend/src/components/layout/Sidebar.tsx`
- **Tailwind Config:** `packages/frontend/tailwind.config.js`
- **Global Styles:** `packages/frontend/src/index.css`

---

## ✨ Summary

**Good News:** Your project is already 95% aligned with the original branding!

**Quick Wins:**
1. Update the logo in Sidebar.tsx to use the three-color pattern
2. Verify button colors across the app
3. Ensure focus states use brand colors

**Already Perfect:**
- ✅ Feature card colors
- ✅ Background color
- ✅ Icon set (Lucide React)
- ✅ Color palette configuration

The main task is ensuring consistency across all components and interactive states.