---
title: Visual Design Foundations
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/visual-design-foundations/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/visual-design-foundations/
last_updated: 2026-06-20
---

# Visual Design Foundations

> Apply typography, color theory, spacing systems, and iconography principles to create cohesive…

A foundation for building cohesive, accessible visual systems from typography, color, spacing, and iconography first principles. It turns design into a token-driven, mathematically grounded system: modular type scales, an 8-point spacing grid, WCAG-compliant color, and section density hierarchy, so interfaces feel intentional and premium instead of arbitrary.

## Use cases
- Establishing design tokens for a new project
- Building a modular typography scale and font pairing
- Creating WCAG-compliant color palettes with verified contrast
- Designing spacing and vertical rhythm on an 8-point grid
- Varying section density across a long landing page
- Auditing a design for visual consistency and dark-mode readiness

## Benefits
- Interfaces feel premium because spacing and type follow a real scale
- Color passes accessibility with verified contrast ratios, not guesses
- Long pages gain rhythm by alternating section density and card primitives
- Theming and dark mode are planned in, not painfully retrofitted later

## What’s included
- Typography scale, line-height, and fluid clamp() responsive type tokens
- 8-point spacing system with component spacing guidelines
- Semantic color tokens, dark-mode strategy, and a contrast-ratio function
- Section density hierarchy with four levels for multi-section pages
- Component primitive variety (stat, feature, comparison, interactive, quote cards)
- Iconography sizing system and a reusable Icon component

## Who it’s for
Designers and frontend engineers who want a token-driven, accessible visual foundation that makes interfaces look cohesive and intentional.

## How it runs
A 13px margin reads as subconscious discomfort and renders blurry on high-density screens. Everything in this system snaps to mathematical ratios, an 8-point grid and validated contrast instead:
1. Builds the typography scale from a mathematical ratio (Major Third 1.25 or Perfect Fourth 1.333) off a 16px base, with clamp() fluid sizing for headings and line heights matched to the text role: 1.1-1.3 for headings, 1.5-1.7 for body
2. Locks all spacing to the 8-point grid (4, 8, 12, 16, 24, 32, 48, 64px tokens): card padding 16-24, section gaps 48-96. Arbitrary values like 13px read as subconscious discomfort and render blurry on high-density screens
3. Defines the color system as semantic tokens (primary, success, error plus a neutral 50-900 scale) and validates every pairing against WCAG: 4.5:1 for body text, 3:1 for large text and UI components, with a programmatic contrast check
4. Applies the 60-30-10 rule: neutral background around 60 percent, secondary tone 30, accent reserved at 10 for CTAs and key states, with the same ratios kept but tonally inverted for dark mode
5. Varies section density down the page in four levels, from hero (160px padding, largest headings, gradient treatment) to FAQ and footer (80px, minimal), so no two consecutive sections carry the same visual weight
6. Mixes at least three component primitives (stat card, feature card, comparison card, quote card) instead of carpeting the page with one card type, and keeps iconography to a single set at fixed token sizes

## FAQ
### We already have brand colors and fonts, is this still useful?
Yes, it systematizes what you have rather than replacing it. Your brand assets become semantic tokens, your type gets a modular scale and fluid clamp() sizing, and your colors get verified contrast ratios and a dark-mode strategy instead of guesses.

### Why do I need a mathematical scale when I can eyeball spacing?
Eyeballing works on one screen and falls apart across forty. A modular type scale and the 8-point spacing grid give every margin and font size one defensible source, which is why interfaces built on them read as intentional. The section density hierarchy then keeps long pages from feeling monotone.

### Does it produce logos, illustrations, or a brand identity?
No. It builds the visual system underneath an identity: typography tokens, spacing, accessible palettes, iconography sizing, and component primitives. Creating the brand itself, logo, voice, and art direction, is separate creative work.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [Building a design system with Claude Design](https://forgehouse.ai/guides/claude-design-design-system/)