# How 80.lv is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/80.lv-design)

Last updated: 2026-07-28

## Design character

80 Level is a **games-art and CG editorial** site. The design is media-first journalism: large thumbnails, bold short headlines, and a dark or high-contrast shell that feels closer to a content network than a corporate blog. Energy comes from artwork, not from decorative UI.

What should survive adaptation:
- Artwork-led cards as the primary unit
- Strong sans headlines at modest display sizes (not billboard 100px marketing)
- Dark ambient framing around bright key art
- Clear sectioning for news, features, and partner content

## Foundations

### Color

Structured hex roles were thin. Visual system:
- Dark page chrome and nav
- White/light headline type on dark modules; dark type on light article surfaces where used
- Full-color key art inside cards
- Accent likely reserved for links, badges, or live labels rather than large fills

### Typography

- Headlines ~**31–32px** weight 600, line-height ~42–44px
- Mid heads **18–20px** weight 600
- Body/UI **14–16px**, weights 300–700 depending on emphasis
- Compact meta **14–15px**

### Spacing and layout

- Horizontal page padding ~**32–48px**; larger vertical section pads ~**60–72px**
- Card radii ~**16–22px**
- Multi-column editorial grids; featured story may span wider

## Visual language

- Rounded media cards with overlay titles
- Badge/chip labels on stories
- Dense but readable magazine packing
- Minimal illustration in chrome; photography/3D art does the talking

## Components and states

1. Top nav + logo  
2. Featured story hero  
3. Story cards (thumbnail, title, meta)  
4. Section headers for feeds  
5. Newsletter or partner modules  

## Responsive behavior

Home captured at multiple widths including a short strip. Expect card columns to drop from multi-col to single column; keep thumbnail aspect ratios stable.

## Practical guidance

**Preserve:** art-first cards, bold mid-size heads, dark media framing.  
**Avoid:** turning the home into a sparse startup landing page or washing out thumbnails with heavy overlays.

## Scope note

Three home captures. Color roles not fully measured; type sizes, radii, spacing, and visual reading inform the system.

## Captured pages

[![80 Level](https://pin.fontofweb.com/9652?format=jpg)](https://design.withfudge.com/share/pin-9652)

[80 Level](https://design.withfudge.com/share/pin-9652)

[![80 Level](https://pin.fontofweb.com/9651?format=jpg)](https://design.withfudge.com/share/pin-9651)

[80 Level](https://design.withfudge.com/share/pin-9651)

[![80 Level](https://pin.fontofweb.com/9650?format=jpg)](https://design.withfudge.com/share/pin-9650)

[80 Level](https://design.withfudge.com/share/pin-9650)