Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
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.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
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:
- 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
- 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
- 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
- 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
- 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
- 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
One power source. 6 lines out.
visual-design-foundations · core
core active · 6 lines
- ✓ establishing design tokens
Establishing design tokens for a new project
- ✓ building a modular typog…
Building a modular typography scale and font pairing
- ✓ creating wcag-compliant…
Creating WCAG-compliant color palettes with verified contrast
- ✓ designing spacing and ve…
Designing spacing and vertical rhythm on an 8-point grid
- ✓ varying section density
Varying section density across a long landing page
- ✓ auditing a design for vi…
Auditing a design for visual consistency and dark-mode readiness
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Interfaces feel premium because spacing and type follow a real scale
license: perpetual -
Color passes accessibility with verified contrast ratios, not guesses
license: perpetual -
Long pages gain rhythm by alternating section density and card primitives
license: perpetual -
Theming and dark mode are planned in, not painfully retrofitted later
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Typography scale, line-height, and fluid clamp() responsive type tokens
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Designers and frontend engineers who want a token-driven, accessible visual foundation that makes interfaces look cohesive and intentional.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
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.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.