Awwwards

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

# DESIGN.md · Awwwards (IN-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Inspiration Gallery · Category: A. UI-UX Inspiration and References
- Platforms: Web
- Color theme: Monochrome dark · Layout pattern: Editorial · Mood: Showcase, competitive, editorial
- License / terms: Link-only. All site material © Awwwards (unauthorised reproduction prohibited); featured sites remain the creators’ intellectual property; PRO membership is paid
- Industry: Design community / inspiration
- Patterns: Gallery grid, Category index

The best-known web-design awards site: daily Site of the Day picks scored by a jury on Design (40%), Usability (30%), Creativity (20%) and Content (10%), plus Developer Awards, Honorable Mentions, collections and an agency directory. Its terms reserve all material, so this entry is a description, the official scoring facts and our own wireframe.

### Analysis (ours)
Awwwards treats websites as entries in a competition. Its pages are built around the Site of the Day: a large hero image, the studio’s credit and the jury score broken into Design, Usability, Creativity and Content. Below sit grids of nominees, honourable mentions, collections and an agency directory. The scoring is public (Design 40%, Usability 30%, Creativity 20%, Content 10%, with at least 18 jurors and the three scores furthest from the average dropped), so you can use it as a checklist for your own work. Weigh its taste carefully: awarded sites often trade usability and performance for motion and novelty. Study the craft (type pairing, transitions, art direction), then check every idea against your product’s usability and accessibility needs.

### Best practices (ours)
- Use the score breakdown as a checklist: Design 40%, Usability 30%, Creativity 20%, Content 10%.
- Check usability and performance on the live site before borrowing an awarded idea; awards reward novelty.
- Look for the Developer Award badge when you study interaction and front-end craft.
- Study type pairing and art direction rather than effects; effects date quickly.
- Credit the studio when you cite an awarded site in a deck or brief.
- Don’t reproduce Awwwards pages or screenshots; link to them.

### Deep analysis
Values marked OFFICIAL come from the cited official page, terms page or package file, fetched 2026-10-25 (UTC+8), logged out. ESTIMATED values were measured by us that day (file sizes, class counts). OURS is our interpretation, not legal advice.

#### What it is (OFFICIAL) · source: https://www.awwwards.com/
- A web-design awards and inspiration platform with daily Site of the Day (SOTD) awards; the home page on 2026-10-25 showed SOTD for Oct 24, 2026 with a 7.31 score and “Connect with over 6,106 Agencies”.
- Awards: Honorable Mention (score 6.5 or more), Site of the Day, Developer Award (SOTD sites scoring above 7 from the developer jury), Site of the Month (the eight highest-scoring sites are nominated) and Site of the Year (announced in February).

#### How sites are scored (OFFICIAL) · source: https://www.awwwards.com/about-evaluation/
- Criteria weights: Design 40%, Usability 30%, Creativity 20%, Content 10%.
- Each site is sent to at least 18 jury members; the three scores furthest from the average are discarded.
- Public voting lasts five days, and only PRO users’ votes count.

#### Terms that shape this entry (OFFICIAL) · source: https://www.awwwards.com/terms/
- “All material contained on this website is the property of Awwwards. All rights are reserved and any unauthorized use or reproduction is strictly prohibited” and it “may not be used for commercial purposes”.
- “Websites featured … remain the intellectual property of their creators.”
- So the library keeps no Awwwards screenshot: facts, links and our own wireframe only.

#### UX analysis (OURS) · source: https://www.awwwards.com/
- The SOTD hero works like a magazine cover: one large image, the studio credit and the score; everything else is a grid of smaller cards.
- Publishing the score split teaches the jury’s values; it’s worth copying for any curated showcase.
- Expect a bias toward motion-heavy, experimental sites; use Usability scores to balance it.

#### How to use it well (OURS) · source: https://www.awwwards.com/about-evaluation/
- Filter by category or technology, open three winners in your field and write down what they share.
- Treat novel interactions as ideas to test, not patterns to ship; check keyboard and reduced-motion behaviour on the live site.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Browsing is free; PRO membership is paid. Awwwards material “may not be used for commercial purposes” without permission
- Attribution: Credit the studio and link to the Awwwards page when you cite a site
- Redistribution: No. “Any unauthorized use or reproduction is strictly prohibited”
- How you get it: Website only

## Color tokens
No official color tokens documented for this entry.

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Site of the Day hero
- Score breakdown (Design / Usability / Creativity / Content)
- Nominee grid
- Collections
- Agency / freelancer directory
- Category and tag filters
- Jury and voting pages
- Academy (courses)

## Layout rules
- Observed layout pattern: **Editorial** (from our captures).

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Related entries (ours)
- IN-001: Land-book is the calmer, more everyday gallery to pair with Awwwards’ award winners. · https://design-library-byt.pages.dev/entry/IN-001
- WR-006: Arc’s site is the kind of expressive, motion-heavy work Awwwards rewards. · https://design-library-byt.pages.dev/entry/WR-006
- LG-004: Behance holds the case studies behind many awarded sites. · https://design-library-byt.pages.dev/entry/LG-004
- WR-001: Linear shows how restrained craft can still feel premium without award-style effects. · https://design-library-byt.pages.dev/entry/WR-001

## Sources
- https://www.awwwards.com/
- Library entry: https://design-library-byt.pages.dev/entry/IN-002