Awwwards

Overview

Awwwards is a global digital awards platform celebrating exceptional web design, development, and creative innovation. The design system embodies 'Minimalist-Curated Modernism'—a gallery-like aesthetic where generous whitespace, bold typography, and strategic accent colors create a refined, professional environment that lets award-winning work shine. The interface prioritizes clarity and hierarchy, using a restrained color palette anchored by a vibrant orange accent (#FA5D29) that signals interactivity and brand energy.

The brand voice is authoritative yet approachable: precise, encouraging, and focused on celebrating talent. Awwwards speaks to designers and developers as peers—never condescending, always inspiring. The tone balances professionalism with enthusiasm, using language that acknowledges craft and ambition. Example sentence: 'Discover the world's best web design and get inspired by the work that's pushing the industry forward.'

Colors

The Awwwards color system is built on a light, neutral foundation with strategic accent colors that guide user attention and reinforce brand identity. **Primary Surface Stack**: The background is a soft warm gray (#F8F8F8) with a slightly darker variant (#EDEDED) used for secondary surfaces and filter containers. White (#FFFFFF) serves as the brightest container for elevated content. This neutral stack creates a gallery-like canvas that emphasizes content over decoration.

**Primary Accent**: Orange (#FA5D29) is the signature brand color, applied exclusively to primary CTAs (buttons, links, badges), error states, and interactive highlights. It conveys energy, urgency, and brand recognition. On hover, the orange deepens to #E84D1A (20% darker) to provide tactile feedback. Secondary accents

Typography

The typography system uses Inter Tight exclusively, a geometric sans-serif that conveys modern professionalism and technical precision. The type hierarchy spans from a commanding Display size (112px, 600 weight) for hero headlines down to Label-Small (11px, 500 weight) for metadata and badges. **Hierarchy Rationale**: Display and Headline-Large (40px) establish visual dominance and are reserved for page titles and major section breaks; Headline-Medium (28px) and Title-Large (20px) organize content into scannable sections; Body-Large (18px) and Body-Medium (14px) serve body copy and UI labels with a light 300-weight for body-md to maintain airiness; Label-Medium (14px, 600 weight) and Label-Small (11px, 500 weight) handle interactive elements and metadata. **Specific Treatment**: Apply lett

Layout

The layout system uses a 12-column grid with a maximum container width of 1270px, creating a spacious, gallery-like presentation. **Grid & Spacing Philosophy**: The gutter between columns is 20px, providing breathing room without excessive fragmentation. Sections are separated using the lg spacing token (40px) for major breaks and md spacing (20px) for subsections, creating a clear visual rhythm. The design favors asymmetrical layouts—full-width hero sections (no max-width constraint) contrast with narrower content containers (1000–1100px) to guide focus. Padding within containers uses md (20px) for standard cards and sm (12px) for compact filter chips, maintaining consistency across component scales. Responsive breakpoints collapse the grid to single-column at 576px, with filter layouts r

Elevation & Depth

Depth in Awwwards is achieved through subtle shadows and layering rather than dramatic effects, maintaining the minimalist aesthetic. **Shadow System**: Level 1 (Base) uses no shadow—surfaces sit flat on the neutral background. Level 2 (Cards & Dropdowns) applies a soft shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), creating gentle separation without visual weight. Level 3 (Modals & Elevated Containers) uses a larger shadow: 10px 10px 20px -10px rgba(34, 34, 34, 0.4), creating pronounced depth for overlays and floating panels. **Interactive Feedback**: Hover states on cards transition the backgro

Shapes

The shape system follows 'Architectural Precision'—sharp, geometric corners that reinforce the modern, technical brand identity. **Radius Scale**: Buttons and filter chips use 8px (--rounded-normal) for a subtle, approachable softness that avoids harsh corners without appearing organic. Cards and input fields use 4px (--rounded-small) for minimal rounding that maintains geometric clarity. Badges and pills use 9999px (--rounded-full) for fully rounded ends, creating a distinct visual language for metadata and counts. Modals and dropdowns use 8px to align with button styling. **Rationale**: The

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height (12px vertical padding on 14px label text) with 20px horizontal padding. **Primary Button** (#FA5D29 background, white text, 8px radius) is used for main CTAs like 'Submit Website' and 'Be Pro'. On hover, the background darkens to #E84D1A with a 0.3s transition, providing tactile feedback. **Secondary Button** (#222222 background, white text) is used for alternative actions like 'Log In' and 'Sign Up'. **Outline Button** (transparent background, 1px border in #222222) is used for tertiary actions; on hover, it gains a light gray background (#EDEDED). All buttons use Inter Tight Label-Medium (14px, 600 weight) and disable outline on focus, relying instead on the orange glow (0 0 0 3px rgba(250

Do's and Don'ts

**Do**

• Do use the orange accent (#FA5D29) exclusively on primary CTAs, error states, and interactive highlights—never on backgrounds or body text.
• Do maintain 20px gutters and 40px section spacing to preserve the gallery-like, editorial aesthetic and prevent visual clutter.
• Do apply the 8px border-radius consistently on buttons, chips, and dropdowns to balance modern sharpness with approachability.
• Do use Inter Tight 600 weight for all labels and button text to ensure clarity and visual hierarchy at small sizes.
• Do apply the soft shadow (0px 0px 6px rgba(0, 0, 0, 0.2)) on hover states to provide tactile feedback without overwhelming the minimalist design.

**Don't**

• Don't use the orange accent on non-interactive elements or backgrounds—it must remain reserved for CTAs and error states to maintain visual focus.
• Don't exceed 1270px container width or reduce gutters below 20px, as this breaks the spacious, gallery-like rhythm.
• Don't apply border-radius greater than 8px on standard components; reserve 9999px for badges only to maintain geometric precision.
• Don't use shadows heavier than 10px 10px 20px on any component except modals; excessive depth contradicts the minimalist aesthetic.
• Don't mix font weights within a single label or button—use 600 weight consistently for all interactive text to maintain visual hierarchy.