skills.rest
Genuineh
GenuinehCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Genuineh/omega-hpc --skill design-foundations-genuineh
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
fantay0312fantay0312

design-md

Generate a DESIGN.md documenting design tokens and layout principles from Stitch project assets.

Community
Advanced
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced
ilanf23ilanf23
1

color-system

Generate accessible color palettes with semantic mapping and WCAG contrast compliance.

Community
Intermediate
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced