skills.rest
AI-Foundry-Core
AI-Foundry-CoreOFFICIAL
Explore all skills by this author →
GitHub

visual-design-foundations

Codify visual systems with typography, color, spacing, and iconography tokens.

4|Updated Mar 3, 2026
Search Tags:#typography#accessibility#spacing#style-guide#design-tokens#iconography#color-systems
One-click install
npx skills add https://github.com/AI-Foundry-Core/ril-agents --skill visual-design-foundations-ai-foundry-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/AI-Foundry-Core/ril-agents/tree/main/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/AI-Foundry-Core/ril-agents --skill visual-design-foundations-ai-foundry-core

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establishes cohesive visual systems by aligning typography, color theory, spacing, and iconography to ensure consistent design across products and brands.

Core Features & Use Cases

  • Typography systems: scalable type ramps, readable line heights, and accessible font pairings for multi-platform designs.
  • Color & spacing tokens: semantic color tokens, 8-point grid spacing, and dark-mode theming for consistent UI.
  • Iconography & assets: guidelines for icon sets, sizing, and asset management to improve visual hierarchy.
  • Use Case: Create a design token kit for a new product line and generate a style guide that ensures consistent visuals across marketing, web, and mobile.

Quick Start

Draft a starter visual design system outline for a new project including typography scale, color tokens, and spacing guidelines.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I create a design token framework for consistent UI theming?▼

A design token framework codifies semantic color tokens, 8-point grid spacing, and typography scales to ensure consistent UI theming across multi-platform digital products.

What's the best way to establish a scalable typography system for web and mobile?▼

Establish a scalable typography system by defining type ramps, readable line heights, and accessible font pairings to ensure readability across multi-platform designs.

How do I set up semantic color tokens for dark mode theming?▼

Set up semantic color tokens for dark mode theming by assigning contextual color variables that map to underlying palette values, enabling consistent UI across light and dark visual states.

Can I use this to generate a complete style guide for a new product line?▼

Yes, you can generate a complete style guide for a new product line by applying typography, color theory, spacing, and iconography principles to ensure consistent visuals across marketing, web, and mobile.

Does the spacing system follow an 8-point grid for layout consistency?▼

Yes, the spacing system follows an 8-point grid to establish layout consistency, providing structured spacing tokens for predictable visual hierarchy and UI alignment.

What guidelines are included for iconography and asset management?▼

The iconography guidelines cover icon set selection, sizing standards, and asset management to improve visual hierarchy and maintain consistent visual systems across products.

Related Skills

Explore More Design & Creative Skills→
LeastBitLeastBit
560

brand-guidelines

Apply Anthropic brand colors, fonts, and visual identity to presentations.

Community
Basic
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
0xRayAI0xRayAI

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Official
Intermediate
yasinatesimyasinatesim
23

vitepress

Generate static documentation sites from Markdown with Vue components.

Community
Intermediate