Overview

A tool for building and applying the visual system.
Click any color or value to copy. Use format toggles to control output.

01Navigate

Use the content map below or the navigation bar to move between sections. Each section serves a specific purpose in the brand system.

02Copy values

Click any color swatch to copy its value. Use the format toggles (HEX, NAME, L, C, H) to control what gets copied to your clipboard.

03Compare colors

Double-click any swatch to enter comparison mode. The system will highlight accessible pairings and warn about contrast issues.

04High-Chroma variants

Steps 500/600/700 show both restrained and high-chroma (HC) variants stacked. HC variants have boosted saturation for emphasis use.

05Validate accessibility

Use the Matrix section to verify WCAG contrast ratios. All pairings are checked against AA and AAA standards.

06Score references

Rate inspiration in the References section from -2 (anti-pattern) to +2 (strong reference). Filter by score or category.

Application Context

Tool#1A1A1A

Brand#F9F8F4+#000119

This tool is dark. The MODA Vi brand is light. See Showroom for brand context.

Core Philosophy

MODA Vi's design language synthesizes institutional heritage with contemporary precision. It draws from the material culture of enduring organizations: academic presses, research institutes, diplomatic archives. It maintains the clarity expected of modern engineering.

Heritage Materials

The design language synthesizes institutional heritage with contemporary precision. It draws from the material culture of enduring organizations: academic presses, research institutes, diplomatic archives.

Calculated Restraint

Colors reject digital neon in favor of heritage materials. The leather, wool, and ink of 19th century institutions. Vibrancy is reserved for calculated moments of emphasis.

Structural Typography

Typography is not decorative. It is structural. The hierarchy is serif dominant, prioritizing legacy over novelty. Each voice serves a distinct function.

Color

•Muted tones convey authority and longevity
•High chroma reserved for calculated emphasis (500/600/700)
•Atmospheric neutrals tinted, never pure gray
•AAA contrast targets for all functional pairings

Line

•Hairlines (1px) are preferred throughout
•Lines are distinct and razor sharp
•Weight differentiation creates hierarchy
•Borders define, never decorate

Space

•Generous margins signal confidence
•Consistent rhythm across all scales
•White space is structural, not incidental
•Density reserved for data displays

Typographic Architecture

Typography is not decorative. It is structural. The hierarchy is serif dominant, prioritizing legacy over novelty. Three voices create clear function without competing.

Primary