CURATED · OPEN · FREE

Awwwards

A curated gallery and directory showcasing award-winning web design.

designgallery

Awwwards screenshot

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://www.awwwards.com

📦 Browse pack contents →

01

Identity DNA

CurationDesign AwardsPremiumGallery

A high-end digital design gallery and awards platform.

02

Color

#222222Ink

#ffffffBG

#f8f8f8BG soft

#a7a7a7Muted

rgba(222,222,222,1)Line

High contrast black-and-white base with neutral gray accents.

03

Typography

grotesque-sans

display80px · 300
heading20px · 600
body14px · 300

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px base grid

05

Surfaces

sm · 2px

md · 8px

lg · 14px

pill · 999px

1px solid

rgb(128,128,128) 0px 0px 5px 0px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column content with edge-to-edge hero images.

07

Motion & Interaction

220msmicro

300mssmall

600msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions on color, background, and opacity. · Hover states on interactive elements.

Subtle background or color transitions. · Immediate visual feedback.

08

Components

button Minimalist pill-shaped buttons with 1px borders and transparent backgrounds.
card Clean image-forward cards with minimal or no visible borders.
chip Small rounded tags with thin borders.
input Search bar with a light gray background and rounded corners.
hero Massive full-width typography dominating the viewport above full-width photography.

09

Voice & Don'ts

Tone Professional, authoritative, and clean.
Headlines Bold, oversized, and ultra-light weights.
CTAs Simple text or minimal outlined buttons.

Use vibrant, saturated colors — screenshot shows a strictly monochromatic palette.
Apply heavy drop shadows — screenshot shows almost zero elevation or shadows.
Use decorative or serif fonts — screenshot shows exclusively clean grotesque sans-serifs.
Create rounded, bubbly interfaces — screenshot shows sharp to moderately rounded corners.
Fill layouts with multiple competing colors — screenshot relies on black, white, and gray.
Use complex, busy backgrounds — screenshot relies on solid flat colors or single hero photos.
Avoid: Decorative or ornate typography
Avoid: Loud color accents
Avoid: Cluttered layouts

10

Inside the pack — real screenshots

Awwwards — 桌面首屏（hero） — 桌面首屏（hero）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a minimalist, gallery-style design system for a curated design awards platform. It uses a strict monochrome palette with an #ffffff background, #222222 ink, and #a7a7a7 muted text. The typography relies heavily on a grotesque-sans font in ultra-light weights (300) for massive display text, and 600 weight for smaller headings. The layout is spacious, utilizing a 12-column grid and generous whitespace. Critical donts: Do not use saturated accent colors; do not use heavy shadows; do not use serif fonts; do not clutter the layout with visual noise. The overall tone is refined, professional, and highly curated.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko