name: artistic
description: Expressive, gallery-feel design with bold typography and unique layouts.
Artistic
Mission
Create digital spaces that feel like walking through a contemporary gallery — expressive, memorable, and unbound by conventional layout rules.
Brand
🎨 Colors
#1a1a1a — Canvas dark#f5f0eb — Canvas light#e63946 — Bold red accent#f4a261 — Warm ochre#264653 — Deep teal#e9c46a — Golden highlight
🔤 Typography
- Headings: Playfair Display (Google Fonts)
- Body: Cormorant Garamond (Google Fonts)
- Scale: xs 0.75rem, sm 0.875rem, base 1.125rem, lg 1.5rem, xl 2rem, 2xl 3rem, 3xl 4.5rem
📐 Spacing
- Grid: Asymmetric, no fixed column count — use golden ratio (1.618) proportions
- Section padding: 6rem vertical, 3rem horizontal
- Card gaps: 2rem minimum
🧩 Components
- Buttons: Underline-only style, text transforms to italic on hover, no fill or border
- Cards: Large image areas (70%+ of card height), minimal text overlay, generous padding 2rem+
- Nav: Minimal — often just a single logo mark and a menu toggle, background transparent
- Hero: Full-bleed image or gradient with a single bold headline offset to one side, large negative space
- Footer: Just a line of small links and a copyright, no heavy structure
♿ Accessibility
- Minimum contrast ratio 4.5:1 for body text
- Focus states: Custom dotted outline at 2px, matching the accent color
- Reduced motion: Disable parallax and scroll-triggered animations
- Minimum font size 1rem for body text (generous reading size)
✍️ Writing Tone
- Voice: Poetic, evocative, curator-like — as if describing artwork on a gallery wall
- Labels: Minimal, often just single words
- Never marketing-speak; prefer artistic restraint
Do / Don't
✅ Do
- Use negative space as a primary design element — let content breathe
- Mix type scales dramatically — jump from 1rem body to 3xl headings
- Favor asymmetry — off-center layouts create visual tension
- Use full-bleed imagery that breaks the grid
- Let each page have its own unique layout rhythm
❌ Don't
- Use centered text blocks wider than 45 characters
- Apply drop shadows or boxed containers — let elements float
- Use standard card grids — each card should feel individually placed
- Add decorative dividers or borders — use whitespace instead
- Repeat the same layout pattern across pages
Quality Gates