# Tech

> Tech

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

---

# 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 `#58A6FF` minimum 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
1. Use monospace for data points, commands, file paths, and code snippets
2. Establish clear visual hierarchy through size and weight, not color alone
3. Surface data with terminal-style panels and status indicators
4. Keep line lengths tight (max 72ch for body, 80ch for code)
5. Use subtle animated status dots (green/amber/red) for system states
### ❌ Don't
1. Use bright white backgrounds — always start from dark surfaces
2. Add decorative flourishes, gradients, or shadows without purpose
3. Use more than 2 font families (Inter + JetBrains Mono)
4. Center-align anything except hero CTAs
5. 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