ColivingLiguria Design Principles
For AI Agents: This document explains HOW our design should FEEL. Read this before creating any visual element.
The Core Philosophy
“1920s Walls, 1950s Aesthetics, 2025 Technology”
We blend three eras:
- 1920s Structure: Honor the old stone walls, imperfect plaster, solid foundations
- 1950s Aesthetics: Italian rural elegance, warm textures, nature-connected
- 2025 Technology: Modern tech hidden beneath a retro surface
Design Keywords
When making design decisions, these words guide you:
| Keyword | Meaning |
|---|---|
| Serene | Calm, peaceful, quiet - no visual noise |
| Grounded | Stable, earthy, reliable - connected to nature |
| Minimalist | Simple, clean, essential - remove the unnecessary |
| Modern | Contemporary, current - but not trendy |
| Warm | Inviting, cozy, human - not cold or clinical |
| Organic | Natural, flowing - not rigid or geometric |
What This Means in Practice
Colors
- No pure white (#FFFFFF) - use Warm Alabaster (#F7F5F3)
- No pure black (#000000) - use Deep Peat (#2C2A24)
- Greens and earth tones dominate - Deep Moss, Clay, Sand
- See Color-Palette for exact values
Typography
- One font family: Schibsted Grotesk (body + headers)
- Code font: JetBrains Mono
- Readable: Minimum 16px body text, 1.6 line height
- Calm: Rounded, approachable letterforms
Layout
- Breathing room: Generous padding (4rem sections, 2rem cards)
- Not cramped: Content flows like a path through woods
- Consistent spacing: Use 0.5rem multiples (0.5, 1, 1.5, 2, 2.5, 3, 4, 6)
Interactions
- Subtle animations: Gentle hover effects, smooth transitions
- Nature-inspired: Button colors shift like seasons (Moss → Sienna)
- No jarring changes: Everything transitions smoothly (0.2-0.3s)
Cards & Containers
- Soft shadows:
0 4px 12px rgba(0,0,0,0.08)- not harsh - Rounded corners: 12-16px for cards, 50px for buttons
- Thin borders: 1-2px max, using
var(--lightgray)
The “Vibe” Test
Before publishing any design, ask yourself:
- Is it calm? → Remove visual clutter
- Is it warm? → No cold grays or clinical whites
- Is it natural? → Earthy colors, organic shapes
- Is it simple? → Can anything be removed?
- Is it readable? → Text clearly visible in both modes?
If you answer “no” to any of these, revise the design.
Anti-Patterns (What to AVOID)
| ❌ Bad | ✅ Good | Why |
|---|---|---|
| Pure white backgrounds | Warm Alabaster (#F7F5F3) | Clinical vs cozy |
| Bright saturated colors | Muted earth tones | Jarring vs serene |
| Sharp 0px corners | Rounded 12-16px corners | Harsh vs soft |
| Heavy dark shadows | Subtle light shadows | Oppressive vs airy |
| Cramped layouts | Generous spacing | Cluttered vs breathable |
| Many different fonts | One font (Schibsted Grotesk) | Chaotic vs cohesive |
| Trendy animations | Subtle transitions | Distracting vs calm |
Quick Reference
Spacing Scale
0.5rem, 1rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem, 6rem
Border Radius Scale
8px - small (badges, tags)
12px - medium (small cards)
16px - standard (cards)
24px - large (sections)
50px - pills (buttons)
Shadow Scale
// Subtle
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
// Medium
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
// Strong
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);Related Files
- Color-Palette: All color values
- TSX-Components: Component development guide
- Markdown-Pages: Content writing guide