Techwear Gorpcore

---
name: techwear-gorpcore
description: Apply the Techwear Gorpcore visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Techwear Gorpcore, mentions techwear, gorpcore, technical apparel, or describes matte black and olive palette, cargo-strap dividers, spec-sheet mono labels — 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
---

# Techwear Gorpcore Design System

Technical-apparel utility on screen: matte black and olive drab, cargo-strap section dividers, spec-sheet monospace labels stitched onto components like garment tags, signal-orange functional accents, and a tone that reads like a gear manual.

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 Techwear Gorpcore.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (techwear, gorpcore, technical apparel, acronym aesthetic, outdoor technical, utility wear), or describes its traits: matte black and olive palette; cargo-strap dividers; spec-sheet mono labels; signal-orange functional accents; garment-tag component styling; diagram-style product callouts.

## Design tokens

### Color palette

- Matte near-black ground: `#101210` (--color-bg)
- Panels, cards, and tags: `#1a1d18` (--color-surface)
- Primary text, bone white: `#e8eae4` (--color-text)
- Spec values, captions, secondary text: `#a3a99b` (--color-text-muted)
- Sage-olive — links, active states, key labels: `#a8b48c` (--color-accent)
- Safety orange for alerts, stock states, and the rare hard CTA: `#ff5f1f` (--color-signal)
- Webbing-strap divider fill: `#2b2f28` (--color-strap)
- Panel edges and rule lines: `#333831` (--color-border)

### Typography

- Display / headings: Saira Condensed (fallback: Arial Narrow, sans-serif)
- Body: Overpass (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Menlo, 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 700, line-height 1.1, letter-spacing 0.04em, uppercase
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96 — Utilitarian: information packed into labeled modules with strap dividers between them — dense like a well-organized pack, never cluttered.
- Border radius: none 0px, sm 2px — Hard edges throughout; 2px maximum, as if everything were laser-cut.
- Border treatment: 1px solid #333831 — Thin technical edges on all modules; straps (8-12px solid #2b2f28 bars with buckle end-caps) handle major divisions.

### Shadows

- matte: `0 2px 8px rgba(0, 0, 0, 0.4)` — Default module depth — matte, no glow
- raised: `0 12px 32px rgba(0, 0, 0, 0.5)` — Modals and drawers

### Layout

- Max content width: 1440px
- Modular blocks with visible seams: every section boxed and labeled like pack compartments
- Thick strap dividers with buckle caps between major sections
- Product images on matte gray with numbered diagram callouts and leader lines
- Mono spec tables (two-column, hairline-ruled) beside every product

### Effects

- Webbing-strap divider bars with stitch-line detailing
- Numbered diagram callouts with thin leader lines on product imagery
- Barcode or QR motifs in footers and tags
- Topographic contour-line background pattern at very low opacity

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 100ms / 200ms / 350ms
- Quick mechanical transitions — drawers slide, panels snap, nothing bounces
- Hover reveals spec overlays on product tiles
- Diagram callouts draw their leader lines in sequence on first view

## CSS variables (drop-in)

```css
:root {
  --color-bg: #101210;
  --color-surface: #1a1d18;
  --color-text: #e8eae4;
  --color-text-muted: #a3a99b;
  --color-accent: #a8b48c;
  --color-signal: #ff5f1f;
  --color-strap: #2b2f28;
  --color-border: #333831;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-matte: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5);
  --border-default: 1px solid #333831;
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: Overpass, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;
  --text-base: 15px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: 0.04em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

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

## Component recipes

- **Nav:** Slim black bar with uppercase condensed links, mono version tag next to the logo, signal-orange cart count
- **Hero:** Uppercase Saira Condensed statement over a full-bleed matte product shot, mono spec strip (weight/material/rating) pinned beneath
- **Card:** Surface module, 1px border, mono spec label top-left, product on matte gray, olive text link; hover adds spec overlay
- **Button (primary):** Sage-olive fill, near-black text, square corners, uppercase mono label; signal orange reserved for buy/alert actions
- **Button (secondary):** Transparent, 1px border, bone-white uppercase label; hover swaps border to olive
- **Form fields:** Surface fill, 1px border, mono input text, square corners; focus outlines in olive with no glow

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

The spec label: small monospace tags — WT. 240G / DWR 20K / VER 2.3 — pinned to cards and images like garment labels, with thick webbing-strap rules dividing sections the way straps cross a technical pack. Spend boldness here; keep everything else quiet.

## Do

- Label everything in mono like a spec sheet — weights, materials, versions, coordinates
- Use straps and seams as the visible structure of the page
- Keep olive as the working accent and spend signal orange only on true alerts and CTAs
- Shoot or select product imagery on matte neutral grounds with technical callouts

## Don't

- Don't glow — this is matte hardware, not cyberpunk neon
- Don't round corners or soften shadows; the material language is cut fabric and buckles
- Don't use camo patterns or rank insignia — that drifts into military-tactical cosplay
- Don't let marketing adjectives replace specs; the copy voice is part of the aesthetic

## Accessibility notes

- Sage-olive (#a8b48c) and bone-white both pass on the near-black ground, but signal orange (#ff5f1f) is borderline for small text — keep it to large labels, badges, and fills with dark text
- Uppercase condensed type hurts readability in long passages — reserve it for headings and keep body text in sentence-case Overpass
- Low-opacity topographic patterns must stay below the contrast threshold that interferes with overlaid text

## Reference sites

- ACRONYM: https://acrnm.com
- Arc'teryx: https://arcteryx.com
- Salomon: https://www.salomon.com

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

Install this skill

unzip techwear-gorpcore.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/techwear-gorpcore.json

Settings → Capabilities → Skills → Upload skill → techwear-gorpcore.zip