jdsadminllc Tech
Mission
Present complex technical information with surgical clarity — every pixel serves comprehension, not decoration.
Brand
🎨 Colors
#0A84FF— Primary (electric blue)#00D4AA— Secondary (cyan-teal accent)#0D1117— Background (deep code black)#161B22— Surface (panel gray)#30363D— Border (subtle divider)#E6EDF3— Text (off-white)
🔤 Typography
- Heading font: Inter (Google Fonts, clean modern sans)
- Body font: Inter (Google Fonts)
- Code font: JetBrains Mono (Google Fonts, monospace)
- Type scale: xs 0.75rem / sm 0.8125rem / base 0.9375rem / lg 1.125rem / xl 1.375rem / 2xl 1.75rem / 3xl 2.25rem
📐 Spacing
- Grid: 12-column, 8px base unit
- Section padding: 5rem vertical, 2.5rem horizontal
- Card gaps: 1rem
🧩 Components
- Buttons: Subtle 4px border-radius, blue fill with white text, hover shifts to lighter blue. Secondary: ghost border on dark.
- Cards: Dark surface panels with 1px border, subtle 2px radius, monospace data labels.
- Nav: Sticky top bar, left-aligned logo + section links, right-aligned status indicator dot.
- Hero: Terminal-inspired — monospace typewriter text, animated cursor, code snippet background, gradient overlay.
- Footer: Compact dark bar with column layout, monospace copyright line.
♿ Accessibility
- All text-body pairs must meet 4.5:1 contrast ratio
- Blue links on dark backgrounds: use
#58A6FFminimum for body text - Focus rings: 2px solid cyan with 2px offset
prefers-reduced-motion: disable cursor blink and typewriter animation
✍️ Writing Tone
Precise, technical, jargon-appropriate for the audience. No filler words. Code-like consistency: labels use sentence case, commands use monospace. Data speaks first.
Do / Don't
✅ Do
- Use monospace for data points, commands, file paths, and code snippets
- Establish clear visual hierarchy through size and weight, not color alone
- Surface data with terminal-style panels and status indicators
- Keep line lengths tight (max 72ch for body, 80ch for code)
- Use subtle animated status dots (green/amber/red) for system states
❌ Don't
- Use bright white backgrounds — always start from dark surfaces
- Add decorative flourishes, gradients, or shadows without purpose
- Use more than 2 font families (Inter + JetBrains Mono)
- Center-align anything except hero CTAs
- Sacrifice information density for whitespace — this isn't a marketing page
Quality Gates
- Dark background throughout — no light mode sections
- Monospace font used for all data, code, and technical labels
- Interactive elements show clear blue/cyan focus states
- Color contrast passes 4.5:1 on all text
- Status indicators (if used) have appropriate color semantics
- Information hierarchy is scannable without reading every word