@dante · Media & Consumer
The Verge's hazard-tape editorial system: near-black canvas, 107px Manuka display shouts, acid-mint and ultraviolet accents, and pill-cornered StoryStream tiles with flat 1px borders.
A tech tabloid wired to a chiptune soundboard — a Condé Nast magazine crossed with a developer console and a club night. The whole product lives on a near-black canvas (#131313) with no light mode on the homepage; the dark surface is the brand. The signature move is a brutally heavy 107px Manuka display wordmark shouting from the masthead, wrapped around a vertical StoryStream timeline of pill-cornered, edge-to-edge color-block tiles. Depth is almost entirely flat: 1px hairline borders in white, mint, and ultraviolet do the work that shadows would do elsewhere. The mood is serious enough for a congressional hearing, loud enough to review a synthesizer.
Acid-mint Jelly Mint (#3cffd0) and Verge Ultraviolet (#5200ff) behave like hazard tape — applied sparingly to the most important element, never as background washes. Canvas Black (#131313) is the default surface with Surface Slate (#2d2d2d) as the secondary card fill. Hazard White (#ffffff) is both primary text and a spotlight tile fill; Absolute Black (#000000) appears only as text on mint/yellow/white tiles. Deep Link Blue (#3860be) is the single universal hover color for links, and there are zero decorative gradients — color is applied in solid blocks only.
Manuka (heavy 900 industrial display, fallback Archivo Black/Impact) is the hero, never the UI — it runs 60–107px and nothing smaller. PolySans (300/500/700) is the workhorse for headlines and body; PolySans Mono is its uniformed sibling, used exclusively for UPPERCASE labels, timestamps, tags, and button text with 1.1–1.9px tracking. The typographic fingerprint is the whisper-vs-shout contrast: a thin-weight 300 capitalized eyebrow (19–20px, 1.9px tracking) sitting above a 107px Manuka shout. FK Roman Standard is the serif exception, reserved for print-voice review pulls and never used in UI.
An 8px base scale with tight micro-values (2/4/5/6px) inside pills and labels; sections breathe at 32–64px while StoryStream items stay tight at 12–16px gaps. The container caps at ~1280–1300px. The border-radius scale is unusually broad — eight discrete values (2px typewriter inputs, 3px inline images, 4px nested media, 20px pill cards, 24px feature tiles, 30px promo buttons, 40px outlined CTAs, 50% circles) — so every component announces its hierarchy through its corners. Whitespace is paced like a DJ's silence: loud hazard-color blocks interrupting stretches of near-black.
Buttons are fully-rounded pills: Jelly-Mint primary with black uppercase-mono labels, dark-slate secondary, outlined-mint tertiary at 40px radius. StoryStream tiles are 20px-radius rectangles with a 1px white hairline (or a saturated accent fill) whose only hover response is the headline shifting to deep link blue — no lift, no shadow. Inputs stay newspaper-tight at 2px radius with mint focus and ultraviolet (not red) error borders. Nav and tabs mark the active state with a 1px inset mint underline, and every label is ALL CAPS in PolySans Mono.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#3cffd0#5200ff#309875#3860be#1eaedb#3d00bf#131313#2d2d2d#313131#ffffff#000000#ffffff#949494#e9e9e9#8c8c8c#c2c2c2Manuka, Impact, 'Archivo Black', Helvetica, sans-serifPolySans, 'Space Grotesk', Helvetica, Arial, sans-serifPolySans, 'Space Grotesk', Helvetica, Arial, sans-serifPolySans, 'Space Grotesk', Helvetica, Arial, sans-serif'PolySans Mono', 'Space Mono', 'JetBrains Mono', 'Courier New', monospace'FK Roman Standard', Newsreader, Georgia, serif{
"heroWordmark": "107px/0.80",
"secondaryDisplay": "90px/0.80",
"tertiaryDisplay": "60px/0.80",
"largeHeadline": "34px/1.00",
"headingWide": "32px/1.10",
"headingMedium": "24px/1.00",
"headingSmall": "20px/1.00",
"thinLabel": "19px/1.20",
"bodyRelaxed": "16px/1.60",
"inlineLabel": "15px/1.20",
"bodyCompact": "13px/1.60",
"eyebrow": "12px/1.30",
"monoButton": "12px/2.00",
"monoTimestamp": "11px/1.20",
"metaNano": "10px/1.40"
}Pill-shaped affordances on a near-black canvas. Jelly-mint primary with black label, dark-slate secondary, outlined-mint tertiary in uppercase mono — no square corners, ever.
Newspaper-tight form field on canvas black — 2px radius, hairline white/gray border, mint focus. Error borders go ultraviolet, never red.
StoryStream tile: a 20px-radius rectangle on canvas black with a 1px white hairline, mono uppercase kicker in mint, and a bold PolySans headline. Hover shifts the headline to deep link blue — no lift, no shadow.
Non-interactive text pill in uppercase mono — saturated accent fill with black or white label, 20px radius (tighter than buttons).
The whisper-vs-shout stack: a 107px Manuka display shout with a thin-weight 300 PolySans capitalized eyebrow whisper above it. Manuka never drops below 60px.
Quiet white inline links that answer every hover with a color-only shift to deep link blue — no underline, ever.
Masthead hero: the massive Manuka 'The Verge' wordmark on canvas black with a thin-weight capitalized eyebrow and a Jelly-Mint subscribe pill. 64px vertical padding.
Thin canvas-black bar with the Manuka wordmark, uppercase mono category links, and a single mint subscribe pill pinned right. Active section marked by a 1px inset mint underline.
Canvas-black footer with a Manuka wordmark, uppercase mono column heads, and quiet gray utility links — the flat, hairline-topped close of the page.
Loud numeric figures in heavy Manuka with uppercase mono labels — benchmark pull-quotes for a tech-tabloid page.
The editorial exception: an FK Roman serif pull-quote with an ultraviolet opening mark — a print-magazine counterpoint to the Manuka shout.
Uppercase mono category tag pill — quiet slate or hazard-accent fill, 20px radius, wide tracking.
Round byline avatar with a 1px hairline frame — used for author credits and StoryStream contributors.
Uppercase mono tab row where the active tab carries the signature 1px inset mint underline — no filled pill, just the hazard-tape mark.
A tech tabloid wired to a chiptune soundboard — a Condé Nast magazine crossed with a developer console and a club night. The whole product lives on a near-black canvas (#131313) with no light mode on the homepage; the dark surface is the brand. The signature move is a brutally heavy 107px Manuka display wordmark shouting from the masthead, wrapped around a vertical StoryStream timeline of pill-cornered, edge-to-edge color-block tiles. Depth is almost entirely flat: 1px hairline borders in white, mint, and ultraviolet do the work that shadows would do elsewhere. The mood is serious enough for a congressional hearing, loud enough to review a synthesizer.
Acid-mint Jelly Mint (#3cffd0) and Verge Ultraviolet (#5200ff) behave like hazard tape — applied sparingly to the most important element, never as background washes. Canvas Black (#131313) is the default surface with Surface Slate (#2d2d2d) as the secondary card fill. Hazard White (#ffffff) is both primary text and a spotlight tile fill; Absolute Black (#000000) appears only as text on mint/yellow/white tiles. Deep Link Blue (#3860be) is the single universal hover color for links, and there are zero decorative gradients — color is applied in solid blocks only.
Manuka (heavy 900 industrial display, fallback Archivo Black/Impact) is the hero, never the UI — it runs 60–107px and nothing smaller. PolySans (300/500/700) is the workhorse for headlines and body; PolySans Mono is its uniformed sibling, used exclusively for UPPERCASE labels, timestamps, tags, and button text with 1.1–1.9px tracking. The typographic fingerprint is the whisper-vs-shout contrast: a thin-weight 300 capitalized eyebrow (19–20px, 1.9px tracking) sitting above a 107px Manuka shout. FK Roman Standard is the serif exception, reserved for print-voice review pulls and never used in UI.
An 8px base scale with tight micro-values (2/4/5/6px) inside pills and labels; sections breathe at 32–64px while StoryStream items stay tight at 12–16px gaps. The container caps at ~1280–1300px. The border-radius scale is unusually broad — eight discrete values (2px typewriter inputs, 3px inline images, 4px nested media, 20px pill cards, 24px feature tiles, 30px promo buttons, 40px outlined CTAs, 50% circles) — so every component announces its hierarchy through its corners. Whitespace is paced like a DJ's silence: loud hazard-color blocks interrupting stretches of near-black.
Buttons are fully-rounded pills: Jelly-Mint primary with black uppercase-mono labels, dark-slate secondary, outlined-mint tertiary at 40px radius. StoryStream tiles are 20px-radius rectangles with a 1px white hairline (or a saturated accent fill) whose only hover response is the headline shifting to deep link blue — no lift, no shadow. Inputs stay newspaper-tight at 2px radius with mint focus and ultraviolet (not red) error borders. Nav and tabs mark the active state with a 1px inset mint underline, and every label is ALL CAPS in PolySans Mono.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css