VDL

The VDL design system evokes the precision of an architectural drawing: minimal and structural. Its visual identity builds on a stark contrast between a warm off-white canvas and deep, nearly black typography. Thin, deliberate lines define sections and interactive elements rather than heavy borders or fills. The typography, using a distinctive architectural sans-serif, carries the weight and character, operating with restrained letter-spacing. Interaction is subtle, relying on understated color shifts and background changes. Use Parchment (#f7f4ef) as the dominant background color for all page sections. Employ Ebony (#120902) for all primary body text, headlines, and significant UI element borders to maintain high contrast and structural integrity. Define UI element separation and hierarchy using thin 1px borders in Ebony (#120902) or Deep Graphite (#1e1e1e), rather than shadows or background fills. Apply negative letter-spacing for large text elements, specifically -0.0500em for headings and -0.0200em for body text, to reinforce a condensed, architectural aesthetic. Maintain a default border radius of 0px for all elements to preserve the sharp, structural visual language. Utilize a consistent 20px for element gaps and content padding within cards or structured blocks, creating comfortable density without feeling sparse. Introduce Neutra Violet (#6a5acd) sparingly, reserving it for subtle interactive accents or highly specific, small decorative UI elements, never as a primary button background. Avoid using shadows or excessive elevation to differentiate UI elements; rely instead on borders and background color changes (Parchment, Medium Gray). Do not introduce additional font families; restrict all typography to the AGP family at specified weights. Refrain from using strong, chromatic accent colors for large areas or primary calls to action; color should be a rare, deliberate punctuation. Do not round corners on any UI elements; maintain sharp, crisp edges throughout the design system. Avoid decorative imagery; focus on functional visuals like product shots or precise iconography that aligns with the architectural theme. Do not use letter-spacing greater than 0; all text should be either normally spaced or have subtle negative tracking. Do not use filled buttons for primary actions; prefer ghost buttons with text and thin borders.