Brand Assets & Logos

For AI Agents & Designers: This is the complete reference for ColivingLiguria visual branding. Use this guide when placing logos, creating graphics, or designing promotional materials.

---

Logo Variants

All logos are located in: quartz/static/logo/

File	Description	Usage
logo.png	Primary (Full color)	Default for most uses
logo-green.png	Green variant	On light backgrounds
logo-brown.png	Brown/earth variant	Warm contexts
logo-bw.png	Black & white	Print, formal documents
logo-icon.png	Icon only (no text)	Favicons, small spaces
logo-text.png	Text only (no icon)	Wide banners, headers

Visual Examples

┌─────────────────────────────────────────────────────────┐
│  logo.png          → Full logo with icon + text         │
│  logo-icon.png     → 🏠 (just the house icon)           │
│  logo-text.png     → "ColivingLiguria" (just text)      │
└─────────────────────────────────────────────────────────┘

---

Usage Guidelines

✅ DO

1. Use from /static/logo/: Always reference logos from this folder
2. Maintain proportions: Never stretch or distort
3. Adequate clearance: Leave breathing room around the logo
4. Match background: Use appropriate variant for contrast
   • Light background → Green or Brown variant
   • Dark background → Primary or BW variant

❌ DON’T

1. Never modify colors: Use provided variants only
2. Never add effects: No shadows, glows, or filters
3. Never rotate: Keep upright always
4. Never compress too much: Maintain quality

---

Logo Sizing

Minimum Sizes

• Full logo: Min 120px width
• Icon only: Min 32px

Recommended Sizes

Context	Size
Website header	180px width
Footer	120px width
Favicon	32x32px
Social media profile	400x400px
Print (A4 letterhead)	50mm width

---

File Path in Code

Markdown

![ColivingLiguria Logo](/static/logo/logo.png)

TSX/React

<img 
  src="/static/logo/logo.png" 
  alt="ColivingLiguria" 
  style={{ height: '40px' }}
/>

SCSS/CSS

.logo {
  background-image: url('/static/logo/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
}

---

Color Correspondence

The logo colors align with the Color-Palette:

Logo Element	Color	CSS Variable
Primary green	4A6741	var(--secondary)
Earth brown	A67B5B	var(--tertiary)
Text dark	2C2A24	var(--dark)

---

Creating New Graphics

When designing new promotional materials or graphics:

1. Start with brand colors: Use Color-Palette exclusively
2. Use correct logo variant: Match to background
3. Follow typography: Schibsted Grotesk for headings, Inter for body
4. Maintain aesthetic: “1920s walls, 1950s aesthetics, 2025 technology” (see Design-Principles)
5. Save formats:
   • Web: PNG or WebP (transparent background)
   • Print: PDF or SVG (vector when possible)
   • Social: PNG at 2x resolution

---

Related Files

• Color-Palette: All brand colors
• Design-Principles: Visual philosophy
• Logo folder: quartz/static/logo/