cracked.com website design: fonts, colors and UI patterns

Design character

Cracked is a loud, editorial humor portal: black masthead, bold white/yellow wordmark energy, dense multi-column content grids, and thumbnail-led story modules. It reads like a classic internet magazine—high contrast, heavy weights, and packed modules—not a minimal SaaS landing page. Humor is in the headlines; the chrome is utilitarian black, white, and accent red/yellow from the brand bar.

What should survive adaptation:

• Strong black masthead with category navigation
• Bold, weighty headlines (700–900) over lighter body
• Thumbnail + headline story cards in tight grids
• High content density; short module padding (~10–20px)
• Clear section labels for verticals (Movies & TV, etc.)

Foundations

Color

Measured role colors were not recorded. From the captured pages:

• Masthead / chrome: near-black bars and footers
• Page field: light/white content wells under the header
• Type: black headlines on light cards; white type on dark chrome
• Accents: brand yellow/red notes in logo lockups and occasional badges (visual)
• Rules: 1px solid horizontal dividers between modules

Keep the system high-contrast editorial—black chrome, light reading surface, restrained accent.

Typography

No declared families. Observed scale:

Headlines dominate: heavy weight, short lines, little decoration. Body stays 16px with comfortable ~28px leading in blurbs.

Spacing and layout

• Module padding clusters at 10px / 20px; horizontal card padding ~16px on category pages
• Desktop home uses a wide multi-column magazine grid with side margins ~280px on very wide captures
• 1px top borders repeat as list/module separators
• Category pages stack vertical lists of story rows (thumb + text)
• Density is intentionally high—little dead air between stories

Visual language

• Shape: mostly squared-off cards and media thumbs; radii not a defining feature
• Borders: thin solid rules, not soft shadows
• Imagery: photographic and illustrated article thumbs; large feature art in heroes
• Logo: bold wordmark in the black header
• Motion: not established

Components and states

1. Global header — black bar, Cracked wordmark, category links, utility icons
2. Feature / river modules — big story with image + heavy headline
3. Story card — thumbnail, bold title, short deck, meta
4. Section index (e.g. Movies & TV) — titled hub with stacked editorial rows
5. Footer chrome — dark utilitarian close

Interaction states (hover underline, etc.) are not reliable from stills—preserve structure and type weight instead.

Responsive behavior

Two paths captured: wide home (~1712px) and narrower category (~800px). At 800px the layout collapses toward single-column story stacks with 16px side padding while keeping bold 20–30px heads. Treat as content-first responsive: grids drop columns before type radically changes.

Practical guidance

Preserve

• Black masthead + dense editorial grid
• 700–900 headlines as the primary voice
• Thumbnail-led modules and thin rules
• High information density

Avoid

• Airy startup spacing that undermines the magazine feel
• Soft pastel cards or large rounded corners
• Replacing bold humor headlines with thin geometric display type
• Over-branding every card with extra accent colors

Adaptation

• Start from header + story card + section index patterns
• Type ramp: display 36 / card 22–26 / body 16
• Keep accent color scarce; let photography and headlines carry energy

Scope note

Based on Cracked home and /humor-movies-tv.html captures. Font families and measured palettes were unavailable; color guidance is visual. Article long-form interiors, ads, and comment UI were not the focus of these captures.