# DUDE International Brand Identity Kit

> The design system of DUDE International v4 (https://dudeinternational.com), a Verge-inspired, color-blocked broadsheet. Values are taken from the live v4 stylesheet and script.

## Essentials
- Brand colors: Hot Pink #F8157F, Ultraviolet #7733FF, Void #0B0B0F. Small pink text: Accent #C8106A (dark mode #FF4D97).
- Fonts: Geist (headlines, labels), Geist Mono (kickers, meta, data), Newsreader (body). Google Fonts.
- Layout: max width 1320px (1480px from 1600px), padding clamp(14px, 2.6vw, 36px), radius 4px, hard shadow 4px 4px 0.
- Motion: cubic-bezier(.2, .7, .2, 1); honor prefers-reduced-motion.
- Voice: direct, dense, bold, honest. No em dashes, no invented facts, credit sources and AI art.
- Accessibility: WCAG 2.2 AA, 3px Ultraviolet focus ring, 44px touch targets.

## Files
- [Kit](https://brandidentitykit.dudeinternational.com/): full guidelines with live components
- [tokens.css](https://brandidentitykit.dudeinternational.com/downloads/tokens.css)
- [tokens.json](https://brandidentitykit.dudeinternational.com/downloads/tokens.json)
- [tailwind.config.js](https://brandidentitykit.dudeinternational.com/downloads/tailwind.config.js)
- [starter.html](https://brandidentitykit.dudeinternational.com/downloads/starter.html)
- [dude-v4.css](https://brandidentitykit.dudeinternational.com/downloads/dude-v4.css) and [dude-v4.js](https://brandidentitykit.dudeinternational.com/downloads/dude-v4.js)
- [Logos ZIP](https://brandidentitykit.dudeinternational.com/downloads/dude-logos.zip)
- [Whole kit ZIP](https://brandidentitykit.dudeinternational.com/downloads/dude-brand-kit.zip)
- [One-pager](https://brandidentitykit.dudeinternational.com/one-pager)