About 12 min read12 sections11 live demosOne system. Every site.
Start here Brand Identity Kit
A color-blocked broadsheet system, written down so every site can use it.
The look of DUDE International v4, taken straight from its code: tokens, type, logo, parts, motion and rules.
By DUDE International·Design system v4· 12 min
Every color, size, timing and component on this page is copied from the stylesheet and script that run dudeinternational.com today. Values marked v4 are measured from that code. Values marked Rule are guidelines this kit adds so the next site gets the same result. This page loads the same v4.css and v4.js, so each demo is the real thing, not a picture of it.
01
Brand essence
Who we sound like
DUDE International is a one-page daily paper for a single reader. The design is a Verge-inspired, color-blocked broadsheet: loud color where it earns attention, calm reading type everywhere else. Its palette and type follow the XENA brand kit (hot pink, ultraviolet, void black, Geist and Geist Mono), with Newsreader added for reading text.
DirectDenseBoldHonest
Promise
One reader. Zero filler.
The tagline is the brief. Every block must earn its space. A desk prints fewer stories rather than padding.
Personality
A confident editor
Short, declarative, a little playful in the labels ("The Machine Room", "Shelf Life"), never cute about the facts.
Trust
Show the source
Summaries link to the original publisher, photos are credited, AI-drawn art says so, and delayed prices are labeled delayed.
Utility
Built to scan
Numbers, kickers, "Why it matters" boxes and a 60-second scan get a reader through the day in a minute, with depth by choice.
Voice in practice
Do
Lead with the fact, then the meaning: Why it matters to you.
Write labels in two parts, a name and a slash note: What’s News / 60-second scan.
Use numbers people can check, and say where they came from.
Keep sentences short. One idea each.
Talk to the reader as "you" in takeaways.
Use US spelling and en-US dates: Thursday, October 29, 2026.
Don’t
Don’t invent quotes, stats or claims. If a source does not say it, we do not print it.
Don’t use hype words like "game-changing" or "revolutionary".
Don’t use em dashes. Use a period, a comma, a colon or a middle dot (·).
Don’t pad a section to fill a grid. Print less.
Don’t show real people in AI-drawn art.
Don’t set small Hot Pink text on white. Use Accent #C8106A for small pink text.
What we keep from The Verge, and what we change
The Verge-style ingredients are big color blocks, oversized sans headlines and a magazine-like front. This is how v4 applies and adjusts them, based on our own code.
Idea
We keep
We change
Color blocking
Full-bleed void bands for the masthead, section dividers and footer.
Blocks mark structure only. Story cards stay white so the content leads.
Headlines
Heavy, tight sans headlines (Geist 750 to 900, negative tracking).
Body and decks switch to Newsreader serif for long reading comfort.
Accent
One loud signature color.
Hot pink splits into a display pink (#F8157F) and a text-safe pink (#C8106A) so small text passes AA.
Navigation
A sticky, dark section bar.
Adds "/" separators, a 3px pink underline, a Contents panel with a reading tracker, and J, K, C and D keys.
Density
A busy, newspaper-like front.
Every module has a job: the Brief, What’s News, takeaways. Empty desks hide instead of padding.
Depth
Flat surfaces.
Adds a hard offset shadow (4px 4px 0) on hover as the one lift effect.
Real lines to borrow from the live site
Tagline
One reader. Zero filler.
Masthead and footer.
Module
Why it matters to you
Takeaway box after a lead story.
Label
What’s News / 60-second scan
Right rail summary.
02
Logo
Wordmark, mark, icon
The logo is the masthead nameplate: DUDE in Geist 900 and International in Geist 800, tracked tight. These SVGs are outlined from Geist with the exact v4 settings, so they render without the font installed.
The icon is new in this kit Rule: a pink Geist 900 D on void with a bar that echoes the 3px nav underline. The live site favicon still uses an older cream serif D, so this is the proposed replacement.
Misuse
Don’tStretched. Never stretch or squash it.
Don’tRecolored. Only pink, ink, white or black.
Don’tLow contrast. Keep it on void, paper or white.
Don’tRotated. Keep it level.
Don’tEffects. No glows, strokes or bevels.
DUDE International
Don’tRetyped. Never retype it with default spacing.
03
Color
Pink, ultraviolet, void
Three colors carry the brand: Hot Pink #F8157F, Ultraviolet #7733FF and Void #0B0B0F. Everything else is a quiet neutral that lets them shout. Click any value to copy it. Split chips show the light and dark value of one token.
v4 every hex here is copied from v4.css or v4.jsDark mode: [data-theme=dark] or the system setting
Brand colorssignature and text-safe
#F8157F
Hot Pink--pink
Signature color. Wordmark "International", nav underline, Brief numbers, hard shadows in dark mode, selection. Large text and graphics only on light surfaces.
LightDark
Accent Pink--accent · dark #FF4D97
Text-safe pink. Kickers, links on hover, contents numbers, small pink text.
#C8106A
Pink Block--pinkbg
Solid pink fills with white text: tags, takeaways block, ticker label.
#7733FF
Ultraviolet--uv
Focus rings, active What's News tab, radar rule, the second brand accent.
LightDark
Violet (named teal)--teal · dark #AE8FFF
Text-safe violet for "Read" badges and secondary links. The token is named teal in code but the value is violet.
#0B0B0F
Void--void
Masthead, section nav, footer, dark panels. Never changes with theme.
#15151C
Void 2--void2
Raised surface on void.
LightDark
Gold--gold · dark #FFC23D
Charts and small highlights. Not for text on light surfaces.
Surfaces and textlight and dark pairs
LightDark
Paper--paper · dark #0B0B0F
Page background.
LightDark
Card--card · dark #15151C
Cards and panels.
LightDark
Card 2--card2 · dark #1F1F29
Tab tracks and quiet fills.
LightDark
Ink--ink · dark #F4F4F7
Primary text, 4px rules, hard shadows in light mode.
LightDark
Ink 2--ink2 · dark #D3D3DC
Secondary body text.
LightDark
Muted--muted · dark #A3A3B2
Meta lines, captions, timestamps.
LightDark
Rule--rule · dark #33333F
Borders and dividers.
LightDark
Hairline--hair · dark #24242E
Hairlines, chart grids, bar tracks.
LightDark
Blush--blush · dark #2B0F1E
Hover fill for chips and contents rows.
LightDark
Violet wash--tealbg · dark #1B1530
Background of the "Read" badge.
LightDark
Up--up · dark #3DD68C
Market gains.
LightDark
Down--dn · dark #FF6B5E
Market losses.
Desk colors6px top rule, desk number, chip
AI
AI & AgentsThe Machine Room
Search
Search, SEO & Answer EnginesVisibility Desk
Retail
Amazon, Ecommerce & RetailThe Checkout
CPG
CPG & BrandsShelf Life
Startups
Startups & FundingFounder Mode
Money
Markets & MoneyThe Ticker Tape
Tesla
TeslaThe Gigafactory Floor
Kentucky
Kentucky CornerBluegrass Brief
India
India & KeralaFrom Kochi to Bengaluru
Event colorsCPG Watch tags
Laun
Launch.ev-launch · 6.5:1 with white
Fund
Funding.ev-funding · 5.4:1 with white
M&A
M&A.ev-m-and-a · 6.7:1 with white
Reta
Retail.ev-retail · 5.0:1 with white
Lead
Leadership.ev-leadership · 6.4:1 with white
Mark
Marketing.ev-marketing · 5.6:1 with white
Reca
Recall.ev-recall · 5.9:1 with white
Earn
Earnings.ev-earnings · 9.6:1 with white
Othe
Other.ev-default · 10.3:1 with white
Supporting colorson void and in data
Lilac hoverNameplate "International" on hover.
Masthead pinkItalic notes on void (dateline, meta line, footer link hover).
Ticker blackMarket ticker strip.
Ticker textTicker figures.
Ticker upGains on the ticker.
Ticker downLosses on the ticker.
Chip borderTheme toggle and volume chip outline on void.
Nav separatorThe "/" between section nav links.
Void textSecondary text on void.
Heatmap upMarket heatmap gains.
Heatmap downMarket heatmap losses.
Approved pairs and contrast WCAG 2.2 formula, computed at build
Sample
Pair
Ratio
WCAG
Use
Aa Ink
Ink on Paper #0B0B0F on #F9F9F9
18.66:1
AAA
Body and headlines
Aa Ink
Ink on Card #0B0B0F on #FFFFFF
19.64:1
AAA
Card text
Aa Ink 2
Ink 2 on Paper #2A2A33 on #F9F9F9
13.50:1
AAA
Secondary body
Aa Muted
Muted on Card #5C5C69 on #FFFFFF
6.58:1
AA
Meta lines, captions
Aa Muted
Muted on Card 2 #5C5C69 on #F0EFF4
5.76:1
AA
Text on tab tracks
Aa Accent
Accent on Card #C8106A on #FFFFFF
5.62:1
AA
Kickers, small pink text
Aa Violet
Violet on Violet wash #5A22D8 on #F0EAFF
6.75:1
AA
"Read" badge
Aa White
White on Pink Block #FFFFFF on #C8106A
5.62:1
AA
Tags, takeaways
Aa White
White on Ultraviolet #FFFFFF on #7733FF
5.67:1
AA
Active tab
Aa Hot Pink
Hot Pink on Paper #F8157F on #F9F9F9
3.69:1
AA Large
Large numbers and wordmark only
Aa Up
Up on Card #0B8043 on #FFFFFF
5.02:1
AA
Gains
Aa Down
Down on Card #D42A1F on #FFFFFF
5.06:1
AA
Losses
Aa Gold
Gold on Card #E09A00 on #FFFFFF
2.39:1
Decorative
Graphics only, never text
On void masthead, bars, footer
Sample
Pair
Ratio
WCAG
Use
Aa White
White on Void #FFFFFF on #0B0B0F
19.64:1
AAA
Masthead, nav, footer
Aa Hot Pink
Hot Pink on Void #F8157F on #0B0B0F
5.06:1
AA
Wordmark, footer name
Aa Void text
Void text on Void #C9C9D3 on #0B0B0F
11.95:1
AAA
Secondary text on void
Aa Masthead pink
Masthead pink on Void #FF5CA2 on #0B0B0F
6.83:1
AA
Italic notes
Aa Lilac
Lilac on Void #B48CFF on #0B0B0F
7.61:1
AAA
Hover state
Aa Separator
Separator on Void #55556A on #0B0B0F
2.71:1
Decorative
Decorative "/" only
Dark mode
Sample
Pair
Ratio
WCAG
Use
Aa Ink
Ink on Paper (dark) #F4F4F7 on #0B0B0F
17.90:1
AAA
Body and headlines
Aa Muted
Muted on Card (dark) #A3A3B2 on #15151C
7.30:1
AAA
Meta lines
Aa Accent
Accent on Paper (dark) #FF4D97 on #0B0B0F
6.32:1
AA
Kickers, links
Aa Violet
Violet on Violet wash (dark) #AE8FFF on #1B1530
6.83:1
AA
"Read" badge
Aa Gold
Gold on Card (dark) #FFC23D on #15151C
11.28:1
AAA
Highlights
Aa Up
Up on Card (dark) #3DD68C on #15151C
9.69:1
AAA
Gains
Aa Down
Down on Card (dark) #FF6B5E on #15151C
6.50:1
AA
Losses
Rule of thumbRule: Hot Pink is for display text 24px and up, numbers and graphics on light surfaces. For pink text under 24px, use Accent #C8106A (5.62:1 on white). Gold and the "/" separator are decorative only.
Contrast checker try any two brand colors
0:1
Zero filler.
Body copy at 17px looks like this on the chosen pair.
04
Typography
Three families, strict jobs
Geist shouts, Geist Mono labels, Newsreader reads. Headlines are heavy and tight, labels are small mono caps, and anything longer than a line is serif. All three are free on Google Fonts.
One centered column, max 1320px (1480px from 1600px wide), with fluid side padding of clamp(14px, 2.6vw, 36px). The front page is a three-zone grid; desks sit in a 6-column grid where each desk spans 2, 3 or 6.
640px and underOne column, stacked nameplate, 44px targets
Spacing stepspx values used in v4
4
6
8
10
12
16
22
26
30
36
48
Gaps are 22 to 30px between modules, 16px inside cards, 10 to 12px between chips. Card padding is 14px 16px.
Shape and depthradius and shadow
Radius 2pxtags, chips in labels
Radius 4px--r, cards
Hard shadow4px 4px 0 ink
Pop shadow6px 6px 0 pink
Sticky navthe bar you are using now
52px tall, void, sticks to the top. Gains .stuck once the masthead scrolls away and the DUDE mark slides in.
Links are Geist 600 14px with "/" separators and a 3px Hot Pink underline that grows from the left.
The current section highlights as you scroll. The pink Contents button opens a numbered panel with a reading tracker.
A 3px progress bar shows how far down the page you are.
06
Components
The real v4 parts
Every demo below is built from the live v4 classes and wired by the live v4.js, so it moves and responds exactly like dudeinternational.com. All text and numbers in the demos are samples.
Mastheadheader.mast
You saw it at the top of this page: void band, utility row with a volume chip and theme toggle, the nameplate, an italic serif slogan, a mono dateline and a meta row. On phones the nameplate stacks.
The deck explains the headline in one calm italic line.
By Publisher·· 1 min
Summary text goes here in Newsreader at 18.5px. It is written fresh for the paper and links back to the original reporting. This block shows the structure only.
The pill buttons are a kit addition Rule that reuse v4 colors and the hard shadow.
Footerfooter.foot
07
Motion
Quick in, soft landing
One easing curve does almost everything: --ease: cubic-bezier(.2, .7, .2, 1), a fast start with a soft stop. Small UI moves take .2s to .35s, content reveals .5s to .7s, charts .9s to 1.4s. Things animate once, when they first scroll into view.
Revealopacity and translateY, .6s to .7s, ease
Hover lifttranslate(-2px,-2px) and shadow, .25s
Underline growscaleX 0 to 1, .3s to .35s
Bar growwidth, 1s to 1.2s, ease
Panel poppop keyframes, .22s
Linear (ticker)tick 90s linear, loops
Rules
Everything respects prefers-reduced-motion: reveals, count-ups, chart draw-ins and the ticker all stop.
Animate transform and opacity. Never animate layout.
Count-ups run 900ms with an ease-out cubic.
Only the ticker loops, and it pauses on hover.
Keyboard shortcuts
JNext section here, next story on the paper
KPrevious
CContents panel
DDark mode
EscClose contents
← →Switch tabs
08
Imagery and data
Credit everything
Photos
Publisher photos, credited
Lead and desk images are 16:10, object-fit cover, with a mono credit chip in the corner: Photo: Publisher. Images zoom 1.04 over .9s on hover.
Illustration
AI-drawn engravings, labeled
When no photo fits, an engraving-style illustration is generated and captioned AI-drawn; no real people. Never depict real people in generated art.
Placeholders
Brand color blocks
Empty image slots use void with pink and ultraviolet shapes, like the demos on this page, never stock photos.
Data visualization
Charts are inline SVG. No chart library.
Gridlines use Hairline, axis labels Geist Mono 11px in Muted.
Up is green, down is red, always with a sign (+/-) or arrow so color is never the only cue.
Every chart has a text alternative: an aria-label plus a table or tooltip values.
Prices say "delayed". Sample data says "sample".
Line palette, in order
Desk stack palette
Fact card faces
09
Accessibility
WCAG 2.2 AA as the floor
Built into v4
Contrast. Text pairs in the color section pass AA; Hot Pink and Gold are kept to large text and graphics.
Focus.:focus-visible draws a 3px Ultraviolet outline with a 2px offset on every control.
Skip link. A "Skip to content" link appears on the first Tab.
Motion.prefers-reduced-motion turns off every animation.
Dark mode. Follows the system, with a manual toggle remembered on the device.
Semantics. Real headings, lists, tables, role=tablist with arrow keys, aria-pressed on toggles.
Charts. Every chart has an aria-label and the numbers in text.
Rules for new builds Rule
44px targets. Every tap target at least 44 by 44px on touch. Some v4 chips are 32 to 40px tall; give them 44px on new sites.
Never color alone. Pair color with a sign, icon or label.
Alt text. Describe what the image shows. Decorative art gets alt="".
Language.lang="en-US" and en-US dates and numbers.
Zoom. Layout holds at 200% zoom and 320px wide with no sideways scroll.
Forms. Visible labels, not placeholders.
Test. Keyboard-only pass and a screen reader pass before launch.
10
SEO, AEO, analytics
Before you launch
Search and answer engines
Title and description on every page, unique, under 60 and 155 characters.
Canonical URL and og: plus twitter: tags with a 1200 by 630 image.
JSON-LD: WebSite and Organization on the home page, plus Article, FAQPage or WebPage where they fit.
robots.txt that allows search and AI crawlers (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) and links the sitemap.
sitemap.xml and an llms.txt summary for AI agents.
Answer-first copy. Lead with the direct answer, use question headings, keep facts in plain text, not images.
Speed. Under 1.5 MB per page, fonts with display=swap, lazy images, no layout shift.
Analytics
Cloudflare Web Analytics, cookie-free, one beacon per site.
Exclude the owner. Strip the beacon for the owner's own IPs and for bots at the edge.
No extra trackers. No ad pixels or third-party cookies.
What is the DUDE International brand identity kit?
It is the written-down design system of the DUDE International v4 site: colors, type, logo, layout, components, motion and rules, with files to reuse them on other sites.
Which fonts does the brand use?
Geist for headlines and labels, Geist Mono for small caps and data, and Newsreader for reading text. All three are free on Google Fonts.
What are the main brand colors?
Hot Pink #F8157F, Ultraviolet #7733FF and Void #0B0B0F, with Accent Pink #C8106A for small pink text.
Does it support dark mode?
Yes. Every surface and text token has a dark value, applied by the system setting or a data-theme attribute.
How do I apply it to another site?
Load the fonts, add tokens.css, and either use the full dude-v4.css and dude-v4.js or start from starter.html. Then run the checklists.
Can I use Hot Pink for small text?
Not on light backgrounds. It is 3.69:1 on Paper. Use Accent Pink #C8106A, which is 5.62:1 on white.
96