# 🎨 Visual Identity – Portfolio Website

This document defines the **visual identity** and **design principles** for the Eduardo45MP.dev portfolio.  
It ensures consistency across the website, future updates, and any external materials connected to the brand.

---

## 🌈 Colour Palette

- **Primary Colour:** <span style="display:inline-block;width:14px;height:14px;background:#5A6A7A;border:1px solid #ccc;border-radius:3px;"></span> `#5A6A7A` (Slate Blue-Grey) – Highlights, links, and main CTAs.  
- **Secondary Color:** <span style="display:inline-block;width:14px;height:14px;background:#330010;border:1px solid #ccc;border-radius:3px;"></span> `#330010` (Dark Wine) – Navigation and text emphasis.  
- **Background (Light Mode):** <span style="display:inline-block;width:14px;height:14px;background:#FFFFFF;border:1px solid #ccc;border-radius:3px;"></span> `#FFFFFF` (White).  
- **Background (Dark Mode – planned):** <span style="display:inline-block;width:14px;height:14px;background:#121212;border:1px solid #ccc;border-radius:3px;"></span> `#121212` (Near Black).  
- **Neutral Shades (Light):** <span style="display:inline-block;width:14px;height:14px;background:#F5F5F5;border:1px solid #ccc;border-radius:3px;"></span> `#F5F5F5` (Light Grey).  
- **Neutral Shades (Dark):** <span style="display:inline-block;width:14px;height:14px;background:#333333;border:1px solid #ccc;border-radius:3px;"></span> `#333333` (Dark Grey).  
- **Accent Colour:** <span style="display:inline-block;width:14px;height:14px;background:#401A00;border:1px solid #ccc;border-radius:3px;"></span> `#401A00` (Saddle Brown) – Subtle highlights, icons, and special sections.  

> **Rule:** Use the primary colour for interaction (buttons, hover states) and neutral shades for content readability.

## ✍️ Typography

- **Headings (H1–H3):** `Poppins` – Bold, clean, and modern.  
- **Body Text (P, Lists):** `Roboto` – Lightweight, highly legible.  
- **Code Snippets / Technical Notes:** `Fira Code` (monospace).  

Guidelines:  
- Maintain contrast ratio ≥ 4.5 for accessibility.  
- Limit heading levels to three (`H1`, `H2`, `H3`) for clarity.  

---

## 🖼️ Imagery & Icons

- **Profile Images:** Professional, minimal background.  
- **Project Thumbnails:** Clean screenshots or mock-ups framed within device templates (laptop, phone).  
- **Icons:** [Lucide](https://lucide.dev) or [Feather Icons](https://feathericons.com) – consistent stroke width, outlined style.  

---

## 📐 Layout & Components

- **Grid System:** CSS Grid + Flexbox for responsive layouts.  
- **Container Widths:**  
  - Mobile: 100% fluid.  
  - Tablet: max 720px.  
  - Desktop: max 1140px.  
- **Buttons:** Rounded corners (`border-radius: 0.5rem`), shadow on hover.  
- **Cards:** Rounded corners (`border-radius: 1rem`), soft shadow for depth, consistent padding.  

---

## 🌓 Light & Dark Mode

- **Light Mode (default):** White background, dark grey text.  
- **Dark Mode:** Black/near-black background, light grey text, accent colours remain.  
- Theme switcher available in the header and stored in the browser.  

---

✨ Maintained by **Eduardo Peixoto – eduardo45MP.dev**