# JUNOHUB Logo Specification

Simple, minimalist logo spec aligned with product and existing site branding. Use this for asset production (PNG, SVG) and design handoff.

---

## 1. Product context

- **Product name:** JUNOHUB  
- **Tagline:** “The Unified Supply Chain Hub” / “Modern Commerce Infrastructure”  
- **Use:** Vendor and supplier portal, dropshipping, encrypted commerce (Gmail, Shopify, etc.).  
- **Tone:** Modern, high-performance, trustworthy, minimal.

---

## 2. Logo description (for designers / AI)

**Overall:**  
A minimal logo for a B2B supply-chain and commerce platform. Clean, geometric, no decorative detail. No tagline inside the logo.

**Icon (mark) — product-based recommendation:**  
- **Concept:** The icon should reflect **JUNOHUB as a hub** — the single place where vendors, suppliers, and stores connect. Prefer a **hub / connectivity** idea over a generic symbol.  
- **Recommended direction:** A **central node with connections** — e.g. one central dot or shape with two or three short lines or smaller nodes linking to it (suggesting “unified” and “supply chain hub”). Keep it geometric and minimal: no literal boxes, trucks, or globes.  
- **Alternative:** **Connected nodes** — e.g. three small circles or diamonds in a tight network (one central, two flanking), implying vendors and suppliers meeting at one platform.  
- Simple, bold strokes; must read clearly at 24×24px.  
- Placed inside a **rounded square** (soft corners, not a circle).  
- Icon is the only graphic element; no extra decorative shapes.  

*Note: The app currently uses a lightning bolt (Zap) as a placeholder; the above is the recommended product-aligned mark for the FYP / final branding.*

**Wordmark:**  
- The word **“JUNOHUB”** in all caps.  
- Sans-serif, heavy weight (e.g. Black or Extra Bold).  
- Tight letter-spacing (slightly negative tracking).  
- No underline, no gradient on the wordmark in the primary lockup.

**Lockup:**  
- Icon and wordmark sit side by side with a small, fixed gap.  
- Icon left, wordmark right.  
- Can be used as icon-only (e.g. favicon, app icon) or icon + wordmark (navbar, footer, docs).

**Style:**  
- Flat, no 3D or skeuomorphism.  
- No gradients in the icon for the primary version (solid fill).  
- Optional: a secondary version with a subtle top-left to bottom-right indigo gradient for the icon only, to match the website’s gradient treatment.

---

## 3. Color scheme (match the website)

Use these exact values so the logo matches the app and marketing site.

| Role            | Hex       | Usage                                      |
|-----------------|-----------|--------------------------------------------|
| **Primary**     | `#4F46E5`| Icon background (primary logo)             |
| **Primary alt** | `#6366F1`| Optional gradient end (indigo-500)         |
| **Lighter**     | `#818CF8`| Optional gradient end (indigo-400)         |
| **Icon/on-dark**| `#FFFFFF`| Symbol and wordmark on dark UI             |
| **On light**    | `#020617`| Wordmark on light backgrounds (light mode) |
| **Background**  | `#0A0E1A`| App background (dark); use for contrast     |

**Primary logo (dark backgrounds):**  
- Icon: rounded square fill `#4F46E5`, symbol (hub mark) `#FFFFFF`.  
- Wordmark: `#FFFFFF`.

**Light / alternate (light backgrounds):**  
- Icon: rounded square fill `#4F46E5` (or very light indigo `#EEF2FF` with symbol `#4F46E5`).  
- Wordmark: `#020617`.

Keep the logo color scheme limited to this indigo + white/dark set; no extra accent colors in the mark or wordmark.

---

## 4. Dimensions and resolution

### Icon (mark only)

| Asset            | Size (px) | Format | Use case                          |
|------------------|-----------|--------|-----------------------------------|
| Favicon          | 32 × 32   | PNG/SVG| Browser tab, bookmarks             |
| PWA icon         | 192 × 192 | PNG    | Android / PWA (manifest)          |
| PWA icon         | 512 × 512 | PNG    | High-res PWA, splash               |
| Apple touch      | 180 × 180 | PNG    | iOS home screen (manifest)        |
| Navbar/sidebar   | 40 × 40   | —      | In-app (can be SVG or 2x PNG 80×80)|
| Marketing        | 48 × 48+  | SVG/PNG| Landing, footer, social, docs      |

**Recommended:**  
- Export SVG for icon (scalable).  
- Export PNG at **1x and 2x** for 32, 192, 512, and 180 where needed.  
- Minimum clear space: ~1/4 of icon height on all sides.

### Full logo (icon + wordmark)

| Context   | Icon size | Notes                          |
|-----------|-----------|---------------------------------|
| Navbar    | 40 × 40   | Icon + “JUNOHUB” wordmark       |
| Footer    | 40 × 40   | Same lockup                     |
| Marketing | 48 × 48+  | Scale wordmark with icon ratio  |

**Aspect ratio:**  
- Icon: 1∶1.  
- Lockup: define one preferred width (e.g. icon 40px) and keep proportion for “JUNOHUB” (e.g. ~20–24px cap height).

### Resolution rules

- **Raster (PNG):** 72 ppi for web; 144 ppi acceptable for 2x assets.  
- **Minimum size:** Icon should read clearly down to 24×24px; avoid thin strokes below 2px.  
- **Safe zone:** Do not crop into the rounded square; keep padding so the shape is fully visible.

---

## 5. File naming (reference)

- `icon.svg` — Icon only, scalable.  
- `icon-192.png` — 192×192 PWA.  
- `icon-512.png` — 512×512 PWA.  
- `apple-icon.png` — 180×180 Apple touch.  
- `logo.svg` — Full lockup (icon + wordmark).  
- `logo-dark-bg.svg` / `logo-light-bg.svg` — Optional light/dark variants.

---

## 6. Do not

- Add gradients to the wordmark.  
- Use more than one accent color in the mark.  
- Use a generic symbol (e.g. lightning, star) that does not relate to hub / supply chain / connectivity.  
- Use thin or script type for “JUNOHUB”.  
- Stretch or alter the rounded-square proportion (keep 1∶1).

---

*Aligned with JUNOHUB app and landing (navbar, sidebar, footer, manifest, `globals.css`).*