jdsadminllc 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
#E5E5E5border, 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
#6C63FFwith 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