# Ant

> Ant

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

---

# Ant
## Mission
Deliver a polished, predictable enterprise experience through a rigorous design system built on blue-primary hierarchy and consistent spacing.
## Brand
### 🎨 Colors
- `#1677ff` — Primary blue
- `#e6f4ff` — Primary light (backgrounds)
- `#52c41a` — Success green
- `#ff4d4f` — Error red
- `#ffffff` — Surface white
- `#000000d9` — Text primary (85% black)
### 🔤 Typography
- Headings: Inter (Google Fonts)
- Body: Inter (Google Fonts)
- Scale: xs 0.75rem, sm 0.875rem, base 0.875rem, lg 1rem, xl 1.25rem, 2xl 1.5rem, 3xl 2.375rem
### 📐 Spacing
- Grid: 4px base unit with 8px steps (4, 8, 12, 16, 24, 32, 48)
- Section padding: 24px vertical, 24px horizontal (dashboard), 48px (marketing)
- Card gaps: 16px
### 🧩 Components
- Buttons: 6px border-radius, 32px height default, solid primary fill, 1px border on outlined variant, 15px horizontal padding
- Cards: 8px radius, 1px `#f0f0f0` border, white fill, 24px internal padding, box-shadow on hover
- Nav: 200px-256px sidebar width, light background `#fafafa`, item height 40px, 8px active indicator bar
- Hero: Centered layout, max-width 1200px, large 3xl heading, supporting subtext at lg size
- Footer: `#f5f5f5` background, 48px padding, centered copyright, column link groups
### ♿ Accessibility
- Minimum contrast ratio 4.5:1 for all body text
- Focus states: 2px `#1677ff` outline with 2px offset on all interactive elements
- Reduced motion: Disable all non-essential transitions, instant hover states
- Minimum font size 12px (0.75rem), recommended 14px body
### ✍️ Writing Tone
- Voice: Professional, concise, helpful — never playful or sarcastic
- Labels: Title Case for buttons and menu items
- Error messages: State what happened, why, and how to fix it in plain language
## Do / Don't
### ✅ Do
- Follow the 4px grid system for all measurements
- Use the primary blue only for interactive elements and key data
- Group related form fields into cards with clear headings
- Provide loading, empty, error, and success states for every component
- Keep sidebars collapsible with a clear toggle affordance
### ❌ Don't
- Mix custom spacing values outside the 8px scale
- Use blue for non-interactive decorative elements
- Place more than 3 action buttons in a single row
- Hide navigation structure behind hamburger menus on desktop
- Use gradients — Ant Design is flat and solid
## Quality Gates
- [ ] All spacing values are multiples of 4px
- [ ] Primary blue is only used on interactive or data-highlight elements
- [ ] Every data display handles loading, empty, error states
- [ ] Focus outlines visible on every interactive element via keyboard
- [ ] Sidebar navigation is fully keyboard-accessible
- [ ] Touch targets are minimum 44x44px on mobile breakpoints