Awwwards

Overview

Awwwards operates within the aesthetic of **Curated Minimalism**—a design philosophy that celebrates clarity, precision, and purposeful restraint. The brand serves a global community of designers, developers, and creative agencies seeking inspiration and industry recognition. The visual identity evokes professionalism and aspiration: a light, neutral canvas (rgb(248, 248, 248)) anchored by a vibrant burnt-orange accent (rgb(250, 93, 41)) that signals achievement and forward momentum. The interface prioritizes content over decoration, using generous whitespace (20px gutters, 40px section breaks) and a restrained color palette to ensure every interactive element commands attention.

The brand voice is authoritative yet approachable—speaking to both seasoned professionals and emerging talent. Tone: direct, encouraging, never condescending. Vocabulary emphasizes craft, excellence, and community. Example sentence in brand voice: 'This site earned Site of the Day for its bold typography and seamless interaction design—see what makes it award-worthy.'

Colors

The color system is built on a **neutral-dominant, accent-driven** model. The primary surface stack (rgb(248, 248, 248) → rgb(255, 255, 255)) provides a clean, professional backdrop that ensures content legibility and visual breathing room. The primary accent color, burnt-orange (#FA5D29), is reserved exclusively for call-to-action buttons, achievement badges, and interactive highlights—it appears sparingly but with high impact, signaling opportunity and success. Secondary colors support category taxonomy: purple (#502BD8) for 'Awards' content, cyan (#49B3FC) for 'Jobs' and 'Learn' sections, and green (#AAEEC4) for 'Inspire' galleries. Tertiary grays (#7A7A7A for body text, #A7A7A7 for disabled/secondary text, #DEDEDE for borders) create a neutral hierarchy that prevents visual noise. All

Typography

The type system uses **Inter Tight** exclusively, a geometric sans-serif that conveys contemporary professionalism and technical precision. The hierarchy spans from display (56px, 700 weight, -0.02em tracking) for hero headlines down to label-sm (11px, 500 weight, 0.03em tracking) for metadata and badges. Display and headline-lg employ negative letter-spacing (-0.02em to -0.01em) to create visual density and authority; body text (14px–18px, 400 weight) uses neutral tracking (0em) for optimal readability at 200% line-height. The weight scale (300 light for body, 500–600 for labels, 700 for display) creates clear visual separation without requiring multiple typefaces. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when placed over busy backgrounds or images to en

Layout

The layout system employs a **12-column fluid grid** with a maximum container width of 1490px, centered with symmetric padding. The gutter is fixed at 20px, creating consistent rhythm across breakpoints. Section separation uses the lg spacing token (40px) for major content blocks, md spacing (20px) for subsections, and sm spacing (12px) for component-level gaps. The design favors asymmetrical layouts: hero sections span full width with centered content, while gallery grids adapt from 4 columns (desktop) to 2 columns (tablet) to 1 column (mobile) using CSS Grid's auto-fit. Whitespace is treated as a first-class design element—the background color (rgb(248, 248, 248)) is never fully saturated, allowing content to float within generous margins. Container max-width of 1490px prevents line-leng

Elevation & Depth

Depth is conveyed through **subtle layering and shadow physics**, not dramatic contrast. The elevation system uses three levels: Level 1 (Base) has no shadow, relying on the surface-dim background (#EDEDED) to define filter containers and navigation. Level 2 (Standard Card) applies elevation.sm (0px 1px 3px rgba(0, 0, 0, 0.08)), creating a soft separation from the background—used for cards, dropdowns, and standard UI surfaces. Level 3 (Elevated/Modal) applies elevation.lg (10px 10px 20px -10px rgba(34, 34, 34, 0.4)), a larger spread shadow that lifts modals and featured content above the page

Shapes

The shape language follows **Technical Softness**—a philosophy that pairs geometric precision with approachable curves. Border-radius is applied hierarchically: buttons and filter chips use rounded.md (8px) for a balanced, modern feel; cards and containers use rounded.lg (12px) for slightly more breathing room; full-width elements and badges use rounded.full (50%) for maximum approachability. Input fields use rounded.DEFAULT (4px) to signal functional precision. The rationale: 8px and 12px radii feel contemporary without appearing trendy or dated, while 50% badges create a sense of achievement

Components

Action Elements Buttons follow a three-tier system: **Primary** (button-primary) uses the accent orange (#FA5D29) with white text, 44px height, 12px vertical / 24px horizontal padding, and rounded.md (8px). Hover state (button-primary-hover) shifts to #E84D1A with elevation.lg shadow and a 0.3s ease transition. **Secondary** (button-secondary) uses the on-surface color (#222222) with white text, matching dimensions, for lower-priority actions like 'Log In'. **Outline** (button-outline) has transparent background, on-surface text, a 1px solid outline, and 42px height—used for tertiary actions. All buttons use label-md typography (13px, 600 weight, 0.02em tracking) and disable pointer-events during transitions to prevent double-clicks.

Containers & Surfaces **Cards** (card) have sur

Do's and Don'ts

**Do**

• Do use the burnt-orange accent (#FA5D29) exclusively for primary CTAs, achievement indicators, and high-priority interactive elements—never for backgrounds or body text.
• Do maintain 20px gutters and 40px section breaks to preserve the generous whitespace that defines the brand's clarity and professionalism.
• Do apply 0.3s ease transitions to all hover and focus states (background-color, box-shadow, border-color) to signal interactivity without jarring the user.
• Do use Inter Tight at 400–500 weight for body text and 600–700 weight for headings; avoid mixing weights within a single component.
• Do apply elevation.lg shadow (10px 10px 20px -10px rgba(34, 34, 34, 0.4)) only to modals and featured content; use elevation.sm for standard cards.

**Don't**

• Don't use secondary colors (purple, cyan, green) for primary CTAs or interactive states—reserve them for category badges and supporting content only.
• Don't apply border-radius smaller than 4px or larger than 16px outside of full-circle badges; the 4px–12px range maintains technical softness.
• Don't add text-shadow or blur effects to body text; reserve these only for small labels over busy backgrounds to maintain legibility.
• Don't use hard borders (1px solid #222222); instead, use outline-variant (#DEDEDE) at 0.5px for subtle definition or rely on shadow for separation.
• Don't exceed 1490px container width or reduce gutter below 20px on desktop; these constraints ensure optimal line-length and visual rhythm.