frontend-design-2010s

This skill guides the visual aesthetic of early-2010s web interfaces — the genuine design language of the era, not parody. Polished, professional, slightly heavy, and utterly confident in its gradients.

This skill is responsible for visual design only. For CSS architecture, tokens, and modern layout, follow more-css. For accessible HTML markup and interaction patterns, follow frontend-a11y. For naming, formatting, and conventions, follow frontend-conventions.

The user provides a component, page, or layout to build. They may include context about the brand, product, or audience.

Design Thinking

Before building, internalize the era and commit to it fully:

• Era: This is 2010–2014 corporate/SaaS web. The world had just discovered HTML5 and was thrilled about it. Flat design hadn't happened yet. Every interface earned its depth through gradients, shadows, and gloss. Embrace all of it — this aesthetic was genuinely considered beautiful and modern at the time.
• Structure: Pages are composed of clear horizontal bands stacking top to bottom — header, hero, feature strip, content sections, footer. Each band has a distinct background. Fluid layout — content fills the viewport with generous side padding. Everything is contained and deliberate.
• Tone: Confident, professional, slightly corporate but approachable. This era of web design wanted to say: we are a real business and we built this ourselves. Headings are loud and bold. CTAs are impossible to miss.
• Differentiation: The brand's primary color lives in the header and accents. The CTA color is often a high-energy contrast — the button that demands to be clicked. Every section knows its job and does it without subtlety.

CRITICAL: Commit to the era's visual grammar completely. Half-measures produce confusion, not charm. A glossy button needs the gloss. A gradient header needs the gradient. The depth is the point.