Awwwards Ui Skills

This is a design constraint system extracted from Awwwards' actual site, giving you their light mode aesthetic in rule form. It's opinionated about the details: 4px spacing grid, Inter font only, that specific #E4E4E4 background, 7px default border radius. The typography scale runs from 7px to 127px with specific weight pairings, and there's a clear semantic color system for surfaces and text. What's useful here is that it codifies the kind of minimal, text-heavy layout Awwwards uses, so you're not reinventing spacing decisions or debating font weights. It's narrowly focused on replicating one specific look, which is either exactly what you need or completely irrelevant.

skills.sh installs: 587
GitHub stars: 105
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill awwwards-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

Awwwards UI Skills

Opinionated constraints for building Awwwards-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

Building light-mode interfaces
Creating Awwwards-inspired design systems
Implementing UIs with Inter font and 4px grid

Colors

SHOULD use light backgrounds for primary surfaces
MUST use #E4E4E4 as page background (surface-base)
SHOULD reduce color palette (currently 15 colors detected)
MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

Token	HEX	RGB	Usage
`surface-base`	#E4E4E4	rgb(228,228,228)	Page background
`surface-raised`	#2F2E30	rgb(47,46,48)	Cards, modals, raised surfaces
`surface-overlay`	#191919	rgb(25,25,25)	Overlays, tooltips, dropdowns
`text-primary`	#565656	rgb(86,86,86)	Headings, body text
`text-secondary`	#939393	rgb(147,147,147)	Secondary, muted text
`text-tertiary`	#B5B5B5	rgb(181,181,181)	Additional text
`border-default`	#3A3A3A	rgb(58,58,58)	Subtle borders, dividers