Brand one-pager · v4
brandidentitykit.dudeinternational.com
A Verge-inspired, color-blocked broadsheet. Loud color for structure, calm serif for reading. One reader. Zero filler.
Color light value, dark value
Hot Pink#F8157F
Accent Pink#C8106A · dark #FF4D97
Pink Block#C8106A
Ultraviolet#7733FF
Violet (named teal)#5A22D8 · dark #AE8FFF
Void#0B0B0F
Paper#F9F9F9 · dark #0B0B0F
Card#FFFFFF · dark #15151C
Card 2#F0EFF4 · dark #1F1F29
Ink#0B0B0F · dark #F4F4F7
Ink 2#2A2A33 · dark #D3D3DC
Muted#5C5C69 · dark #A3A3B2
Hot Pink is for large text and graphics on light surfaces (3.69:1 on Paper). Small pink text uses Accent #C8106A (5.62:1 on white).
Type Google Fonts, free
AaGeist 400 to 900
Headlines, labels, nav, numbers
Headlines, labels, nav, numbers
AaGeist Mono 500, 700
Kickers, meta, tags, data
Kickers, meta, tags, data
AaNewsreader 400, 600, italic
Body, decks, summaries
Body, decks, summaries
Logo
- DUDE in Geist 900, International in Geist 800 Hot Pink, tracking -0.065em and -0.06em.
- Clear space: the cap height of the D on every side.
- Minimum 180px wide (40mm print). Smaller: DUDE mark. Under 24px: icon.
- Only on void, paper or white. No stretch, recolor, rotate or effects.
Layout
- Max width 1320px (1480px from 1600px), padding
clamp(14px, 2.6vw, 36px). - Front: 1.75fr · 1fr · 300px. Desks: 6 columns, 22px gap.
- Radius 4px, pills 999px, hard shadow 4px 4px 0.
- Breakpoints 640, 900, 1100, 1300, 1600px.
Voice
- Direct, dense, bold, honest.
- Fact first, then "Why it matters to you".
- Two-part labels: "What's News / 60-second scan".
- No em dashes, no hype, no invented facts. Credit sources and AI art.
Motion and access
- Ease
cubic-bezier(.2, .7, .2, 1). UI .2s to .35s, reveals .5s to .7s. - Honor reduced motion. Animate once, on view.
- AA contrast, 3px Ultraviolet focus ring, 44px targets.
- Keys: J, K, C contents, D dark mode.
Full kit, tokens and files: brandidentitykit.dudeinternational.comv4 · October 2026