skills.rest
DanielV-94
DanielV-94COMMUNITY
Explore all skills by this author →
GitHub

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Updated Apr 13, 2026
Search Tags:#ui#design-system#4px-grid#light-mode#inter-font#awwwards
One-click install
npx skills add https://github.com/DanielV-94/rg-medium --skill awwwards-ui-skills-danielv-94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: awwwards-ui-skills
Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/awwwards-ui-skills
Command: npx skills add https://github.com/DanielV-94/rg-medium --skill awwwards-ui-skills-danielv-94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often lack a cohesive set of constraints for building interfaces that match the Awwwards aesthetic, leading to inconsistent visual quality and accessibility gaps.

Core Features & Use Cases

  • Enforces a light‑mode color palette with prescribed semantic tokens.
  • Specifies Inter font usage, typographic scale, and required contrast ratios.
  • Applies a strict 4px spacing grid, border‑radius scale, and layout rules for a 1920px base viewport.
  • Ideal for UI kits, web templates, and design systems targeting premium, award‑winning designs.

Quick Start

Use the awwwards-ui-skills to generate a light‑mode webpage layout that follows the 4px grid and Inter typography.

Frequently Asked Questions about awwwards-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a light-mode UI that follows Awwwards design standards?▼

To build a light-mode UI that follows Awwwards design standards, use this skill to enforce a strict 4px spacing grid, Inter font typography, and prescribed semantic color tokens. It ensures consistent visual quality and accessibility for premium web projects.

What is a 4px spacing grid and how does it work for web interfaces?▼

A 4px spacing grid is a layout system where all spacing, padding, and margins are multiples of four. This skill enforces the 4px grid along with border-radius scales and layout rules for a 1920px base viewport to create cohesive interfaces.

Can I use Inter font with semantic color tokens for my design system?▼

Yes, you can use Inter font with semantic color tokens for your design system. This skill specifies Inter font usage, typographic scale, and required contrast ratios to maintain accessibility and visual consistency across light-mode web templates.

What's the best way to ensure accessibility constraints in premium UI kits?▼

The best way to ensure accessibility constraints in premium UI kits is to apply predefined semantic tokens that enforce required contrast ratios and focus outlines. This skill integrates those accessibility constraints directly into the 4px grid layout rules.

Does this Awwwards UI approach work for a 1920px base viewport?▼

Yes, this Awwwards UI approach works for a 1920px base viewport. It applies strict 4px spacing grid rules, border-radius scales, and layout constraints specifically targeted at building premium, award-winning designs and web templates at this resolution.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

weights-biases-ui-skills

Enforce Weights Biases UI design with light mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

readwise-ui-skills

Apply Readwise's UI design system constraints to light-mode web interfaces.

Community
Intermediate
ihlamuryihlamury
73

discord-ui-skills

Enforce Discord's light-mode UI design system with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

posthog-ui-skills

Enforces Posthog's UI design system constraints for building dark mode interfaces.

Community
Intermediate