---

name: contemporary description: Current trend-aware design with balanced, sophisticated neutrals

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