# Artistic

> Expressive, gallery-feel design with bold typography and unique layouts.

- Skill: `jdsadminllc/artistic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/artistic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/artistic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/artistic

---

# 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
- [ ] Body text is minimum 1rem on all viewports
- [ ] No two adjacent sections use the same layout rhythm
- [ ] All type scales jump by at least 1.5x between levels
- [ ] Focus indicators are visible on all interactive elements
- [ ] Parallax and scroll effects respect prefers-reduced-motion
- [ ] Negative space areas are intentional, not accidental gaps