Material & depth · 2004–2009
Web 2.0 Glossy
Glossy pill buttons with a top-half highlight, "beta" sticker badges, rounded logos, and the unmistakable sheen of 2006.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(94% 0.014 234) - --fg
oklch(24% 0.02 240) - --muted
oklch(52% 0.024 240) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.01 234) - --border
oklch(78% 0.02 234) - --accent
oklch(54% 0.2 255) - --accent-fg
oklch(99% 0 0) - --focus
oklch(54% 0.2 255)
| Token | Value |
|---|---|
| --font-body | Verdana, Geneva, 'Trebuchet MS', Tahoma, sans-serif |
| --font-display | 'Trebuchet MS', Verdana, Geneva, Tahoma, sans-serif |
| --font-mono | 'Courier New', Courier, monospace |
| --radius | 999px |
| --radius-sm | 999px |
| --shadow | 0 2px 6px oklch(20% 0.02 240 / 0.25), 0 1px 0 oklch(100% 0 0 / 0.7) inset |
| --shadow-lg | 0 10px 30px oklch(20% 0.02 240 / 0.32) |
@import url('https://fonts.googleapis.com/css2?family=Trebuchet+MS:wght@400;700&family=Verdana:wght@400;700&display=swap');
:root {
--bg: oklch(94% 0.014 234);
--fg: oklch(24% 0.02 240);
--muted: oklch(52% 0.024 240);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.01 234);
--border: oklch(78% 0.02 234);
--accent: oklch(54% 0.2 255);
--accent-fg: oklch(99% 0 0);
--focus: oklch(54% 0.2 255);
--font-body: Verdana, Geneva, 'Trebuchet MS', Tahoma, sans-serif;
--font-display: 'Trebuchet MS', Verdana, Geneva, Tahoma, sans-serif;
--font-mono: 'Courier New', Courier, monospace;
--radius: 999px;
--radius-sm: 999px;
--shadow: 0 2px 6px oklch(20% 0.02 240 / 0.25), 0 1px 0 oklch(100% 0 0 / 0.7) inset;
--shadow-lg: 0 10px 30px oklch(20% 0.02 240 / 0.32);
}Where it came from
Origin: The web 2.0 era — del.icio.us, Digg, early social networks, web design tutorial sites
The web 2.0 visual language emerged as CSS became capable of gradient buttons and rounded corners. Glossy pills with a bright top-half highlight, beta stickers, star ratings, and bubble-letter logos became the defining look of the mid-2000s internet. Web design tutorials and template marketplaces spread the style globally. Apple's Aqua influence was direct. It faded when flat design arrived, but nostalgia for it is now well-established.
How to spot it
- Glossy pill-shaped buttons with a bright top-half gradient highlight
- "Beta" and "New" ribbon stickers as visual excitement signals
- Rounded bubble logos and inflated tag shapes
- Reflection strip below interactive elements — a thin mirrored band
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately evokes the mid-2000s internet — the nostalgia is the point | Reads as dated — cannot be used unironically without intent |
| Glossy highlights still make buttons feel interactive and clickable | Heavy gradient CSS for limited modern payoff |
| High recognition value for audiences who lived through the era | Difficult to maintain quality at retina density |
In the wild
- Digg and other mid-2000s social news sites (circa 2006)
- MySpace custom page layouts
- WordPress and Joomla themes from 2005–2009
Use it when
Nostalgic projects, retro web tributes, or anywhere the early-2000s internet aesthetic is itself the content.