# Creative

> Artistic agency feel with bold choices and asymmetrical layouts

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

---

# Creative
## Mission
Break grids with confidence — an artistic-agency aesthetic that prioritizes visual impact over convention through bold typography, unexpected layouts, and fearless color.
## Brand
### 🎨 Colors
- `#0F0F0F` — Primary background (near-black canvas)
- `#FFFFFF` — Primary text / light surfaces
- `#FF3366` — Primary accent (electric rose)
- `#00D4AA` — Secondary accent (vibrant mint)
- `#FFB800` — Tertiary accent (amber)
- `#F5F5F5` — Light surface alternative
### 🔤 Typography
- Heading font: Clash Display (Google Fonts)
- Body font: DM Sans (Google Fonts)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 2rem / 2xl 3rem / 3xl 5rem (oversized headings)
### 📐 Spacing
- Grid: Asymmetrical — default to 12-column but intentionally break alignment for impact
- Section padding: 8rem top/bottom (generous)
- Card gap: variable, 2-4rem, intentional uneven spacing
### 🧩 Components
- Buttons: Bold, oversized on primary CTAs, outline style with thick 2px border, hover fills with offset shadow
- Cards: Mixed sizes within same grid row, some spanning 2 columns, overlapping images, 0px border-radius on image edges
- Nav: Hidden behind hamburger or minimal top-left wordmark, links reveal on interaction
- Hero: Massive 5-8rem heading, often overlapping image, single word on its own line, bold color-block behind text
- Footer: Sparse — single line of links, oversized social icons, no multi-column grid
### ♿ Accessibility
- All text passes 4.5:1 contrast; oversized headings (above 3rem) can drop to 3:1
- Focus rings: Thick 3px outline in contrasting accent
- Reduced motion: eliminate scroll-triggered reveals, keep color changes
- Minimum body font size 0.875rem
### ✍️ Writing Tone
- Bold minimalism — short, punchy phrases; fragments over sentences
- Confident voice: declarative statements, no hedging
- Labels: lowercase or ALL CAPS micro-labels; no sentence-case buttons
## Do / Don't
### ✅ Do
- Use oversized typography — 5rem+ for hero headings
- Break the grid intentionally — overlapping elements, varied column spans
- Feature bold color-block backgrounds behind text and images
- Use negative space as an active design element
- Mix image treatments: full-bleed, duotone, high-contrast B&W
### ❌ Don't
- Use centered layouts — asymmetry means intentional off-balance
- Add decorative elements that don't make a statement
- Rely on shadows for depth — use color contrast and overlap instead
- Play it safe with font sizes — if it's not oversized, it's undersized
- Fill every space — negative space is the canvas
## Quality Gates
- At least one intentionally broken-grid layout element
- Oversized heading present on hero (3rem minimum)
- All text passes contrast check (3:1 for 3rem+, 4.5:1 for smaller)
- Focus states visible on all interactive elements
- Page respects prefers-reduced-motion
- No section feels "filled" — negative space is intentional throughout