Military / Tactical

---
name: military-tactical
description: Apply the Military / Tactical visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Military / Tactical, mentions tactical, milspec, olive drab, or describes olive drab and coyote tan palette, stencil display type, mono coordinates and designations — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Military / Tactical Design System

Rugged olive-drab operations aesthetic: dark olive grounds, tan and black, blaze orange accents, stencil headings with condensed mono coordinates, chamfered panels and dense modular grids. Built like gear: everything has a designation and a place.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Military / Tactical.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (tactical, milspec, olive drab, defense tech, ops aesthetic), or describes its traits: olive drab and coyote tan palette; stencil display type; mono coordinates and designations; chamfered corners; dense modular panel grid; blaze orange accents.

## Design tokens

### Color palette

- Near-black olive page background: `#171a10` (--color-bg)
- Panel background, dark olive: `#232619` (--color-surface)
- Olive drab — fills, chips, and secondary buttons: `#4b5320` (--color-olive)
- Coyote tan — primary text: `#c2b280` (--color-text)
- Secondary text, faded field gray-green: `#8a8f78` (--color-text-muted)
- Blaze orange — CTAs, live markers, alerts: `#ff6b00` (--color-accent)
- Panel seams and rules: `#3a3f2b` (--color-border)

### Typography

- Display / headings: Staatliches (fallback: Arial Narrow, Impact, sans-serif) (ideal: Stencil Std, premium — use Staatliches as the free substitute)
- Body: Saira (fallback: Verdana, Arial, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 15px — computed steps: 15px / 19px / 23px / 29px / 37px / 46px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.15, letter-spacing 0.06em, uppercase
- Body: line-height 1.5, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Dense, packed like a loadout: tight modular panels with narrow, consistent seams; whitespace is rationed, not spent.
- Border radius: sm 2px, chamfer polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) — 2px default; featured panels use clip-path chamfers cutting opposite corners at 45 degrees, like milled plate.
- Border treatment: 1px solid #3a3f2b — Thin, precise seams; active panels get a 2px blaze-orange left edge like a rail marker.

### Shadows

- none: `none` — Default — matte, flat surfaces; the style rejects decorative elevation
- inset-well: `inset 0 1px 3px rgba(0, 0, 0, 0.6)` — Recessed inputs and readout wells only

### Layout

- Max content width: 1440px
- Modular panel grid, every panel labeled with a mono designation (A-1, OPS-04)
- Corner brackets and tick marks framing key content like an optic reticle
- Status readouts in mono: coordinates, timestamps, condition codes
- MOLLE-like repeating webbing strip as a section divider motif

### Effects

- Corner bracket framing on hover and active states
- Faint topographic contour-line pattern on large backgrounds
- Reticle crosshair markers as list bullets and map pins
- Ripstop/canvas weave texture at very low opacity on panels

### Motion

- Easing: cubic-bezier(0.8, 0, 0.2, 1); durations 90ms / 160ms / 280ms
- Fast, clipped transitions — acquire, don't glide
- Corner brackets snap onto focused or hovered panels
- Status values tick over with a brief mono flicker, no fades longer than 300ms

## CSS variables (drop-in)

```css
:root {
  --color-bg: #171a10;
  --color-surface: #232619;
  --color-olive: #4b5320;
  --color-text: #c2b280;
  --color-text-muted: #8a8f78;
  --color-accent: #ff6b00;
  --color-border: #3a3f2b;
  --radius-sm: 2px;
  --radius-chamfer: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --shadow-inset-well: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  --border-default: 1px solid #3a3f2b;
  --font-display: Staatliches, "Arial Narrow", Impact, sans-serif;
  --font-body: Saira, Verdana, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 15px;
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.8, 0, 0.2, 1);
  --duration-fast: 90ms;
  --duration-base: 160ms;
  --duration-slow: 280ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Staatliches:wght@400&family=Saira:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 52px bar in dark olive with 1px seam; stencil wordmark, uppercase Saira links with mono designation prefixes; active link carries an orange left tick
- **Hero:** Stencil uppercase headline in tan, mono coordinate strip beneath, chamfered panel holding mission-statement copy, blaze-orange CTA with corner brackets on hover
- **Card:** Dark olive chamfered panel, 1px seam border, mono designation top-left, stencil title, tan body text, orange status chip when live
- **Button (primary):** Blaze orange fill, black uppercase text, 2px radius or chamfer; brightens on hover, no shadow
- **Button (secondary):** Olive drab fill, tan uppercase text, 1px border; border flips orange on hover
- **Form fields:** Recessed well (inset shadow), 1px seam border, mono input text in tan; focus adds corner brackets and an orange border

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Mono-typed metadata framing every module — grid coordinates, timestamps, designations like OPS-04 // 34.05N 118.24W — with stencil headings and chamfered corner cuts on panels, as if the UI were milled gear. Spend boldness here; keep everything else quiet.

## Do

- Give every module a designation — mono labels and coordinates sell the world
- Use blaze orange only for live, armed, or actionable states
- Frame focus with corner brackets instead of glows
- Keep surfaces matte and flat; texture at whisper opacity only

## Don't

- No glossy highlights, soft shadows, or rounded-friendly corners
- Don't scatter orange decoratively — it is a signal color
- Avoid camouflage-pattern backgrounds behind text; texture stays subliminal
- No playful easing; movement is clipped and purposeful

## Accessibility notes

- Coyote tan on the near-black olive ground is ~8.4:1 and blaze orange ~6.2:1 — both safe; olive drab #4b5320 is a fill tone, not a text color
- Uppercase stencil headings reduce readability at length — reserve for short headings; body copy stays mixed-case Saira
- Status conveyed by orange must always pair with a text or mono code label, never color alone

## Reference sites

- GORUCK: https://www.goruck.com
- 5.11 Tactical: https://www.511tactical.com
- Crye Precision: https://www.crye-precision.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip military-tactical.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/military-tactical.json

Settings → Capabilities → Skills → Upload skill → military-tactical.zip