# Contemporary

> Current trend-aware design with balanced, sophisticated neutrals

- Skill: `jdsadminllc/contemporary` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/contemporary`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/contemporary/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/contemporary

---

# Contemporary
## Mission
A refined, trend-aware aesthetic that balances modern sensibilities with timeless restraint — sophisticated without being cold.
## Brand
### 🎨 Colors
- `#FAFAFA` — Primary background (warm off-white)
- `#2D2D2D` — Primary text (near-black)
- `#6C63FF` — Accent (muted indigo)
- `#F5F3FF` — Accent tint (lavender wash)
- `#E5E5E5` — Border/divider (warm gray)
- `#78716C` — Secondary text (warm stone)
### 🔤 Typography
- Heading font: Satoshi (Google Fonts)
- Body font: Inter (Google Fonts)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.5rem / 2xl 2rem / 3xl 2.75rem
### 📐 Spacing
- Grid: 12-column with 1.5rem gap, max-width 1200px container
- Section padding: 6rem top/bottom
- Card gap: 1.5rem
### 🧩 Components
- Buttons: Soft 10px radius, solid background on primary, ghost on secondary, subtle 0.5px inner highlight
- Cards: White with 1px `#E5E5E5` border, 16px radius, soft box-shadow on hover (elevation: 4px blur 12px)
- Nav: Clean horizontal bar, left-aligned logo, right-aligned links, bottom border on scroll
- Hero: Large weight-variable heading, supporting subhead, single clear CTA, subtle background pattern
- Footer: Multi-column with clear hierarchy, muted background, social icon row
### ♿ Accessibility
- All text maintains 4.5:1 minimum contrast
- Focus rings: 2px solid `#6C63FF` with 3px offset
- Respects prefers-reduced-motion; transitions reduce to opacity fades
- Minimum font size 0.75rem, forms at 1rem
### ✍️ Writing Tone
- Confident and clear — warm but never casual
- Favor direct statements; avoid jargon and hyperbole
- Labels use title case for buttons, sentence case for descriptions
## Do / Don't
### ✅ Do
- Use generous whitespace as a layout element
- Layer subtle visual depth: thin borders, soft shadows, slight transparency
- Maintain strict alignment to the 12-column grid
- Use variable font weights to create hierarchy without size jumps
- Feature one clear CTA per section — don't scatter attention
### ❌ Don't
- Use pure black (`#000000`) — always warm it slightly
- Add loud animations — subtle fades and slides only
- Overcrowd layouts — negative space is intentional
- Mix more than one accent color prominently
- Use decorative elements that don't serve the content
## Quality Gates
- All text passes 4.5:1 contrast ratio
- Focus states visible and consistent across all interactive elements
- Page respects prefers-reduced-motion
- Grid alignment verified at 3 breakpoints (mobile, tablet, desktop)
- No font smaller than 0.75rem
- Single visual hierarchy is clear — CTA, headline, body order evident at a glance