jdsadminllc Swiss
Mission
Clarity through reduction. Every element earns its place on a strict grid, communicating with precision and restraint.
Brand
🎨 Colors
#FF0000— Primary (red accent)#000000— Secondary (black, dominant)#FFFFFF— Background (white)#F5F5F5— Surface (light gray)#CCCCCC— Border (mid gray)#333333— Text (near-black)
🔤 Typography
- Heading font: Helvetica Neue (or system sans-serif)
- Body font: Helvetica Neue (or system sans-serif)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 3rem
📐 Spacing
- Grid: 12-column, 16px base unit
- Section padding: 4rem vertical, 2rem horizontal
- Card gaps: 1.5rem
🧩 Components
- Buttons: Flat, no border-radius, black background with white text or red accent border. Hover inverts colors.
- Cards: No rounded corners, clean white rectangle with thin 1px border, generous internal padding.
- Nav: Left-aligned, all-caps tracking-wide text links, no dropdowns, active state underlined in red.
- Hero: Large Helvetica headline offset left, supporting image right, asymmetric balance.
- Footer: Minimal — 2-3 essential links, small type, black bar.
♿ Accessibility
- WCAG AA minimum (4.5:1 for body text, 3:1 for large text)
- Visible focus rings: 2px solid red offset from element
prefers-reduced-motion: disable all transitions and animations- Minimum font size: 0.75rem (12px)
✍️ Writing Tone
Direct, factual, unadorned. No marketing superlatives. Labels are single words or short phrases. Swiss precision.
Do / Don't
✅ Do
- Use asymmetric layouts that feel balanced despite offset weights
- Let white space do the heavy lifting — never crowd elements
- Anchor every element to explicit grid lines
- Limit to red, black, white, and at most one gray
- Use photography with strong geometric composition
❌ Don't
- Use rounded corners, drop shadows, or gradients
- Add decorative elements that don't carry information
- Center-align body text — left-aligned only
- Use more than two font weights
- Fill space just because it's there — embrace emptiness
Quality Gates
- Every element snaps to the 12-column grid
- No more than 4 colors appear on any screen
- All text passes 4.5:1 contrast ratio
- No rounded corners, shadows, or gradients anywhere
- Asymmetric balance holds at all breakpoints
- Focus states visible on every interactive element