johnny2211/znakovni.hr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bbf143a3b4f486dd4dd23394c1eaab8195efd6fc
znakovni.hr/get-real.md

9.6 KiB
Raw Blame History

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):

<h1 className="text-xl font-bold text-primary">Znakovni.hr</h1>

Should be:

<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:

className="bg-indigo-600 hover:bg-indigo-700 text-white"

Accent/CTA buttons:

className="bg-orange-600 hover:bg-orange-700 text-white"

Secondary buttons:

className="bg-gray-400 hover:bg-gray-500 text-white"

Fix 3: Update Focus Ring Colors

Ensure focus states use brand colors:

// 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

/* 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

# 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.