design-foundations

Define visual design systems using mathematical ratios and semantic color roles.

Updated Apr 8, 2026

Search Tags:#design #systematic #color #aesthetics #reusable #proportion

Ready to run

npx skills add https://github.com/Genuineh/omega-hpc --skill design-foundations-genuineh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/Genuineh/omega-hpc/tree/main/.claude/skills/design-foundations
Command: npx skills add https://github.com/Genuineh/omega-hpc --skill design-foundations-genuineh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for creating cohesive and aesthetically grounded design systems, ensuring visual quality emerges from mathematical and semantic consistency.

Core Features & Use Cases

Design System Definition: Guides the establishment of visual axioms like proportion, hierarchy, and color semantics before implementation.
Mathematical Scaling: Encourages the use of consistent units, scale functions, and concentric harmony to enhance layout rhythm.
Color Architecture: Structures palette roles and value contrasts to maintain clarity and accessibility.
Geometry & Elevation: Defines shape language, elevation steps, and shadow logic to reinforce product character.

Quick Start

Use this skill to analyze your current design system and generate a structured plan that aligns visual aesthetics with systematic proportionality.

Frequently Asked Questions about design-foundations

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

FAQPage Schema

How do I establish a cohesive design system using mathematical ratios and semantic color roles?▼

To establish a cohesive design system, define proportional scales, color semantics, and elevation logic mathematically to ensure visual harmony and deliberate consistency across interface and branding work.

What is the best way to structure color architecture for product design accessibility?▼

Structuring color architecture requires defining semantic palette roles and calculating value contrasts to maintain clarity, establish hierarchy, and ensure accessibility in your product design system.

Can I use geometric harmony to define shape language and elevation steps for interfaces?▼

Yes, you can apply geometric harmony to define shape language, establish systematic elevation steps, and structure shadow logic to reinforce product character and visual consistency.

How do I create consistent layout rhythm with mathematical scaling in UI design?▼

Create consistent layout rhythm by applying scale functions, consistent units, and concentric harmony to mathematical ratios, ensuring proportional spacing and systematic aesthetic alignment.

Does a systematic design approach work for both branding and interface work?▼

Yes, applying mathematical proportionality and semantic consistency scales effectively across both branding and interface work, ensuring aesthetics remain deliberate and systematically grounded in both contexts.

What are the limitations of using mathematical ratios for visual design systems?▼

Mathematical ratios provide structural consistency but require manual semantic definition for color roles and elevation logic, meaning proportional scaling alone will not guarantee aesthetic harmony without deliberate visual axioms.