# Codex

> OpenAI-style dark code aesthetic with electric blue accents

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

---

# Codex
## Mission
A developer-first dark aesthetic inspired by code editors and AI terminals — clean, minimal, and high-contrast.
## Brand
### 🎨 Colors
- `#0D1117` — Primary background (deep code-editor dark)
- `#161B22` — Secondary background (cards, panels)
- `#58A6FF` — Accent (electric blue, links, buttons)
- `#C9D1D9` — Primary text (soft white)
- `#8B949E` — Secondary text (muted gray)
- `#1F6FEB` — Interactive elements (hover states)
### 🔤 Typography
- Heading font: JetBrains Mono (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.5rem
### 📐 Spacing
- Grid: 12-column CSS grid, 1rem gap
- Section padding: 4rem top/bottom
- Card gap: 1.5rem
### 🧩 Components
- Buttons: Monospace font, 1px electric-blue border, 8px radius, hover fills background
- Cards: `#161B22` background, 1px `#30363D` border, 12px radius, subtle backdrop-blur
- Nav: Fixed top, `#0D1117` with bottom border `#30363D`, logo left, links right
- Hero: Large monospace heading with cursor-blink animation, code-snippet background texture
- Footer: Minimal, single-line centered text in secondary color
### ♿ Accessibility
- Minimum contrast ratio 4.5:1 for all text
- Visible focus ring: 2px `#58A6FF` outline with 2px offset
- Respects `prefers-reduced-motion` by disabling cursor blink and transitions
- Minimum font size 0.75rem (12px)
### ✍️ Writing Tone
- Technical but approachable — use developer terminology naturally
- Favor precision over marketing fluff; verbs over adjectives
- Labels use sentence case; no ALL CAPS buttons
## Do / Don't
### ✅ Do
- Use monospace for code snippets, headings, and UI labels
- Keep backgrounds deep dark with subtle layering for depth
- Use electric blue sparingly — only for interactive elements and key highlights
- Maintain generous whitespace around content blocks
- Leverage hover transitions on all interactive elements
### ❌ Don't
- Use gradients — flat colors only
- Add shadows heavier than subtle inner glows
- Mix serif fonts into the design
- Overload pages with dense text — favor scanning layouts
- Use bright white (`#FFFFFF`) for body text — stick to `#C9D1D9`
## Quality Gates
- All text passes 4.5:1 contrast ratio check
- Focus states visible on every interactive element
- Page respects prefers-reduced-motion
- No font smaller than 0.75rem
- All buttons have hover and active states
- Dark background is consistent across all sections (no light-mode leaks)